Department of Education
The Challenge:
Design a responsive web design government agency navigation and website.
The Problem:
The Department of Education's website needs updating. Currently, the website is cluttered with too much information and an outdated design.
The Solution:
A redesign of the Department of Education to make it more streamlined, modern, and less cluttered.
My Role:
UX Designer
Collaborators:
Aerie Hsu-Chen
Tools:
Figma, Miro, and InVision
Research
Proto-persona
To begin the redesign, we started with a proto-persona. We envisioned someone who most likely to use the website to help better design for that user in mind.
Website Analysis
Keeping our proto-persona in mind, we began a website analysis to better understand the structure of the website and see its usability. As Thomas, we tried to find more information on applying for a grant that would be specific to him.
A heuristic evaluation was done revealing that there was an ineffective use of white space and links on the page. Information was hard to find because it was buried under a mountain of links and text.
Redlined and Annotated Agency Navigation
To better understand the information architecture of the website, we redlined and annotated the navigation for the website. The results of our redlining and annotation showed a lot of redundancy. Many links on the page went to the same location and were unnecessary.
User Testing
Users were tested on the current ed.gov website to complete the same task as our proto-persona. The results verified our initial findings and concerns for the website.
Key Findings:
Too much information on the page
Too many links
Users get lost on the website
Design
Card Sorting
To have a better understanding of how users felt the website should be organized, card sorting was performed with 2 users.
Sitemap
Based on the card sorting, a site map was created to better structure the information on the website.
Prototyping
In order to create a more modern design, a wireframe prototype was created with more of a minimal design and a hero image incorporated. This was followed by a mid fidelity design. We used a 10 column grid for the layout of the design.
Mobile Prototype
A mobile prototype was created based on a responsive web design.
UI Style Tile
To create continuity throughout the design, a style tile was created to show all of the elements that would be used in the redesign.
User Testing
User Testing
A 5 second user test was used on 5 users to test the functionality and usability of the prototype.
Key Findings:
Needs bigger margins in the body and head room in the footer.
Navigation is simpler.
Mobile menu should be larger.
Ideation and Final Design
We switched to a 12 column grid to get a better responsive design and to allow for better margins in the design. The featured section was taken out of the body and moved into the hero image as a carousel. The About Us page was also created to show how the navigation would function.
Conclusion
Final Thoughts
The redesign was a long process that involved a lot of research in order to provide a better experience for the user. The testing really helped when I felt that design needed some additional changes but couldn't quite see the full picture yet.
Next Steps
Continue working on redesigning more pages on ed.gov