Department of Education Website Redesign
Tools Used: Miro, Figma, Storyset, Unsplash, Adobe Illustrator, Photoshop
Working in a group of two, we decided to redesign the Department of Education’s website to have better navigation, organization, and differentiating stylistic elements in order to create a seamless experience for our users. My respnsabilities included research, wire framing, and visual design.
The Problem
The Department of Education’s website lacks navigational cues and has an absence of clear organizational methods making the website confusing to the point of incomprehensibility.
Our goal is to redesign the department of education’s website to have better navigation, organization, and differentiating stylistic elements in order to create a seamless experience for our users.
Our Research
First we need to determine the main issues with the Department of Education’s website navigation and visual organization. We interviewed a number of users in order to understand what they like about the DOE’s website, and their main pain points.
We took all of our data and organized it into an affinity diagram and then a 2x2 matrix.
We found that most users found the lack of visual design and hierarchy difficult to navigate. It was unclear where they had ended up and how best to get back to previous pages. When we ran a color accessibility test we also found that a couple of the colors used on the pages did not have enough contrast.
User Interviews
“The site doesn’t seem particularly user friendly. Everything feels really cramped”
Kylee
“The entire page is so overwhelming to look at. The lack of structure is jarring”
Max
“I really hate search functions in websites that just give you google results. Its not helpful”
Jason
User Persona
We took all of the data we collected from our interviews and used it to create a user persona of Alan Dean. Alan is 43 year old school admin official working in Madison, WI.
Goals/Needs: Alan wants to propose a new policy at his school and needs to be sure that the policy follows federal law. He needs to find trusted data and measures used by other schools to fight bullying. Alan wants to make sure he is well informed in the standards for education set by the federal government.
Pain Points: Alan finds that the information he is looking for is buried in the website and difficult to find. He is frustrated with the fact that the only way to navigate the website is to jump from link to link. It is hard to tell if the website has the information he is looking for.
Design Phase
We began our design process by creating a new sitemap. Then we began sketching our the pages in our user flow. When adapting our sketches into low fidelity wireframes we wanted to ensure that it was clear to the user what category each page fit into. Avoiding the pitfall of the old website design, which had little separation between categories. We created low, mid, and high fidelity wireframes making sure to do a round of user testing after each round of iteration.
Desktop Mid Fidelity Wireframes
Visual Design
We wanted to create a design that was visually engaging while still educational and that would appeal to students, teachers, parents and admin. With that goal in mind we decided to go with a navy, sea foam green, and orangey gold color scheme to create an inviting and creative atmosphere. When considering Typefaces we chose to go with a nice serif font for headers that felt reminiscent of those used in print and a non serifed font for the body copy.
We also chose to do a logo refresh for the DOE as well when considering the visual design. The original site had two separate logos present. We replaced both with a simpler version of the Department’s most used logo for a cohesive and unified brand identity.