U.S. Department of Education Redesign
A clear direction for users.
I chose to work on the U.S. Department of Education site because I knew from experience that it is a dense site that is used by a variety of people from students, to parents, to teachers, to policy-makers. Therefore, improving this site would help a large audience.
Make the site clear, direct, and digestible for everyone.
Give the site a fresh look while keeping to the brand.
Ensure resources are accessible to those who needed them.
The ultimate impact would be that lives would be improved with better access to resources and knowledge.
Research it.
It all began with lots of research and synthesis of that research. I brainstormed a proto-persona, Carly Ramirez, who is the first in her family to attend college and needs a clear way to fund her education. With Carly in mind, I conducted 7 user interviews to learn more about their wants and needs. I recorded and transcribed the data. Then I prioritized their ideas using a prioritization matrix.
Key Take-aways
The amount of information on the site is overwhelming, so it needs to be better organized.
The mobile site was clunky and should be updated for better usability.
Grants should be a priority over loans because they are gifts of money that are interest-free.
Current navigation system works but could be improved for clarity with drop-downs.
Images should convey content.
Research it some more.
A full heuristic analysis was done on the current website to flag improvements that could be made while taking into consideration the user research as well as usability testing on the navigation. An analysis of the logo was also done to ensure that the updated design would convey themes of professionalism, trustworthiness, knowledge, and success while still keeping the current logo.
Key Take-aways
Design is not consistent.
Aesthetics are confusing.
Headings seem like links because of colors.
Images do not convey meaning.
Top navigation and footer do not correspond.
Overwhelming amount of text.
Too many acronyms are hard to understand.
Top navigation does not show where to find specific items.
Category names are not clear.
Images do not convey meaning.
Footer takes up a large portion of the page.
“How do I Find…” section is not useful; the Search bar is more helpful.
Solve it.
I started with the navigation since that seemed like the biggest problem. If a user, like Carly, couldn’t find the money she needed, she might not attend college. Or, she might mistakenly apply for a loan first, which needs to be paid back with interest. I first did a card sort exercise to get ideas on how to organize the whole website and create clearer navigation. Then, I created and iterated a site map to arrange the vast amount of pages on the site.
Steps to a solution
Created fewer and clearer categories to help users find what they need.
Two categories became one “funding” category, to make it obvious where to go for money.
Reduced volume of text and pages to be more concise and easier to digest.
Listed pages in a meaningful order that could be used as drop-downs in the navigation.
Designed a smaller footer that still provides important services to users.
Planned recognizable utilities at the top of the page to provide extra help when navigating.
Time to design, build, test, and do it again…and again…and again.
Iterate it.
Each new set of user tests, using a working prototype built in Figma, led to better design and functionality on the mobile sites. Notice the progression from low-fidelity to high fidelity.
Images were replaced with a navigation bar.
Icons became more to scale.
Purpose became clear with prominent placement of mission statement.
Style guide was applied.
The same process was used for designing the desktop site as well.
Experience it.
The results are dramatic with an updated professional site that anyone can use to easily get funding for a school or a project on the right, compared to the original site on the left with too many choices. Now the site has a clear navigation system, with drop-downs, so users can find what they need as well as a design that projects the idea of success.
Click the button to try out the desktop prototype on Figma. Imagine the user-persona, Carly, as she navigates to get funding for her upcoming year at college.
Try it on mobile.
When comparing the original design on the left to the updated design on the right, it is easy to see how the solutions improve the experience. Users, like Carly, now have a clear path to getting funding for their education. This mobile site now has a clear purpose, a familiar navigation system and ways to connect. as well as a clean and professional aesthetic that follows the intent of the style of the brand.
Click the button and try the mobile prototype on Figma to experience the improvements.
Reflect on it.
At the end of any project, I like to think and ask myself how it went, what went right, what went wrong, and what I can do next time. Sometimes, I like to go back and look at my first inspiration boards and potential solutions to evaluate how much the ideas remained constant or revised completely.
In this case, when I look at the mood board on the right I can see that the ideas of success and knowledge, as well as the color palette, definitely inspired the final designs. I learned that working individually on a project was easier to coordinate but less dynamic because I missed the input and collaboration of everyone’s talents coming together. One of my biggest challenges was actually the smallest part of the page, the social icons. I had a hard time scaling them to the right size and I was reminded that even the tiniest of objects can have a big impact on the design. The project was also a good demonstration of the importance of user-testing because features that I thought would be important, like button states, never came up. So, user input kept the project on track and moving in the right direction. Overall, it was rewarding to improve such a big site that is used by a large audience.
Next steps
Build out remaining pages on both mobile and desktop.
Create interactive button states and test them.
Click the button to view the entire case study.