The U.S.
Department of
Education
Website Redesign
Contributors
Katie Struk
Michael Powell
Project Timeline
4 weeks
Context
This was a student project in which we teamed up with partners to redesign a government website giving specific care to evaluate the navigation and give better structure to the information architecture, as well as, creating a responsive web design.
My Role
My teammate and I partnered for the first portion of the user research, interviews, and heuristics evaluations.
Then I worked independently on the card sorting, sitemap, style guide, low and high fidelity wireframe, prototyping, and usability testing
The Problem
The U.S. Department of Education website was designed to be a resource of information for parents, students, teachers, admin, and community members.
However, in our research, we discovered that people struggle to find information on the current layout which is causing users to abandon the site.
The Solution
Redesign the site navigation and layout to create intuitive user paths
Original Desktop View
Mobile View
The Process
Research
Who is our user?
The U.S. Department of Education website services a wide range of users and goals.
Our specific user for this project is a student who needs information about student loans.
What are their goals?
Our user needs to complete several tasks related to student loans on the website. Student loans are already a stressful topic and they are hoping to not get overwhelmed with the process.
Tasks for our users to complete.
Discover the first step in applying for a student loan (FAFSA)
Discover if they qualify for student loan forgiveness
Discover if they are eligible and apply for a Pell Grant
We outlined predicted paths that a user might take when completing specific tasks
What are their pain points?
My teammate and i conducted 5 usability tests to understand the thought process of users as they navigate the Department of Education’s website for information and identify pain points in the current navigation and organization of the site.
Navigation
Links did not always result in the desired outcome. Search bar results were not helpful.
Unclear Audience
Users felt uncertain about who this site was for.
Outdated
The site felt uninviting and outdated to users.
Overwhelming
Users thought there were too many links and too much reading on each page.
Example User Path From Testing
Goal: Discover if you qualify for student loan forgiveness.
1. The user started by using the search bar and typed “student loan forgiveness.”
2. Next the user spent a minute looking at the search results before selecting one.
3. Finally, the user arrived at an unrelated article, felt frustrated and abandoned the site.
Result: Failed
Heuristic Evaluation of Navigation
1. Global top navigation bar
Recommend removing this bar. This navigation bar is not noticeable because of its placement, color, and size. It is at the top of the screen which indicates some importance but it is made much smaller and duller in color which makes people scan right past it. The “skip to main content” button is unnecessary as it only scrolls the user down slightly. “About us” could be combined into the primary nav bar. “Contact Us” could be added to the footer of the page as this is a common placement for this information. “FAQs'' could be broken up into sections that it pertains to. “Language Assistance '' should be given a larger placement elsewhere to increase discoverability.
2. Utility search bar navigation
The search bar is easy to locate because of its size and placement which ranks it high in the hierarchy of the page. However, the search bar does not consistently give helpful results and may not be the navigation tool that needs the most emphasis. Recommend making it smaller to allow it to be a secondary navigation tool.
3. Primary navigation bar
This navigation bar has a good placement near the top of the page and is noticeable to users right away. It includes the most useful categories for users. Category organization seems logical for this information. Recommend building a drop-down menu into this menu to allow users quicker access to the specific content they need.
4. The second primary navigation bar
This tool is a repeat of the primary navigation bar just including pictures and a brief explanation. It includes the most useful categories on the site. The second navigation bar is by far the most notable section on the homepage. However, it a repeat of the primary bar which could be confusing to some users. Recommend just one primary nav bar to free up space and reduce confusion.
5. Local navigation side menu
This is on the center-right of the homepage. Its purpose is to help a user navigate quickly to specific forms or links without traveling through the different header categories. It likely provides quick links to commonly searched for items, but it does not appear to have any organization to it so users will likely only use it when they stumble onto it by accident. Recommend integrating links into logical categories to make them useful.
6. Footer
Here we have the same actions as the Primary and Secondary navigation bars. However, this one has secondary titles and direct links. This seems unnecessary and redundant. Users may be confused by the same links appearing on the page multiple times. Recommend integrating most links into primary nav to reduce clutter. Recommend keeping social media links as this is where people usually look for them. Card sorting will help assess where links should be located.
Accessibility- Color Contrast
All the colors passed the contrast tests for accessibility.
Information Architecture
The heuristic evaluation and usability tests revealed that the structure and layout of links were overwhelming, redundant, or confusing at times.
The main hurdle for users was finding information and links without getting frustrated.
If we can appropriately categorize and find a home for each link it will clear up confusion.
Sitemap
How can we find a home for each link?
What are the most logical categories for information?
What makes the most sense to include in the footer?
How can we eliminate redundant links on the homepage?
Desktop Iterations
4 quick usability tests were conducted.
A/B testing was done for the light mode vs the dark mode iterations of the homepage.
Light mode felt more educational to users.
“Feels clean and light.”
“Feels heavier, not educational.”
Desktop Navigation
Feedback was consistently good for the main nav and footer.
5 second tests were done to gather first impressions and people’s thoughts about the site design.
Mobile Layout
The mobile view needed further iterations based on it feeling a little too tight and close together is user tests.
The mobile navigation layout tested positively and seemed intuitive for all users.
“The clear navigation and easy to find things.”
Style Guide
How can we make this experience less stressful and overwhelming to users?
Create design elements that give users a sense of clean, light, friendly, educational, and organized structure.
Colors are education in tone with blues and grays but also kept warm and friendly with yellow. The primary blue and yellow are also school/educational in feeling.
Typography is kept sans serif to be clean and not distracting, as well as, professional.
Photos are chosen to be bright, cheerful and include diverse groups in active poses participating in school activities with both students and teachers. Photos need to represent teachers, students, students with special needs, elementary, high school, and college, graduates, and teachers with covid precautions.
Graphics are cartoony, flat, modern, warm, and friendly in tone.
High Fidelity Mobile Wireframe
5 usability tests were conducted. Users were asked to navigate the clickable prototype to test its usability and look for areas of improvement. Received positive feedback on the navigation.
First Impressions
“Clean, friendly, approachable graphics, not cluttered, links are located where I expect them, info is simplified”
Tasks
Locate the Covid 19 Handbook
Find info on applying for student loans
Find info on consolidating student loans
Each task was successfully completed without struggle.
Iterations In Response To Testing
Some iterations were required in response to user comments.
The homepage felt a little cramped/crowded to some users. So more space was added and a horizontal scroll which tested positively in the next round of tests.
The student loans page had a small point of confusion in which users attempted to tap the arrows between cards in the top section instead of swiping. The arrows were removed and the cards were pushed closer together to clear things up.
Homepage V2
Homepage V1
Student Loans V1
Student Loans V2
High Fidelity Desktop Wireframe
They loved it!
5 usability tests were conducted on the desktop view as well.
Navigation, aesthetics, and the information layout all tested positively.
Users successfully found the information they were asked to discover. They enjoyed the clean look of the site and the bright cheerful graphics. They found it to be a pleasant experience.
Prototype - Final
Conclusion
The Solutions
Removed redundant links, and cleaned up the footer.
Restructured information to find a home for links that were located all over the homepage.
Removed redundant navigation bars
Grouped content into cards to make them more digestible and scannable.
Carefully selected graphics and photos to give a more friendly updated look, as well as, reflect the audience of the website.
Built-in accordion sections to the loans page to reduce the overwhelming feeling of the number of links.
The User
Our user, a college student, was overwhelmed by links and text when looking for information about student loans. They weren’t finding information. When they did find the information they needed, they still felt that the existing website was outdated and uninviting.