U.S. Department of Education Responsive Website Design

Project Overview

The Problem

The main navigation doesn’t have the second items, and a lot of important links (navigation) place below the fold. So users need to scroll down the long page to find the information, and it make users confused about where they are on the page.

The Solution

The primary navigation needs to be redesigned and restructured to help users find information functionality and fast. We could consider the mega menu to collapse a lot of links and shorten the long page.

Research & Analysis

Usability Heuristic Annotations & Color Accessibility

Usability Testing Plan

1. Objective
The objective of this testing is to find problems and errors in 2 task flows that need correcting on the Ed.gov website.
We are hoping to learn what works well and what does not work well for users on this website.

2. Target Users
Target users are college/university students or their parents, looking for information on financial aid for college.

3. Questions You Want to Be Answered
We need to learn about how well the website organization does or does not help users accomplish a task on the website.
We need to understand specifically what on the website helps or confuses users.
We need to learn about whether users can accomplish their task on the website.

Task 1: Locate a grant you can apply for to help pay for school.

Task 2: Locate an opportunity to have your student loans forgiven.

Task 3: Identify and Describe Pages

Usability Testing Analysis

Prioritization Matrix

Mention Frequency Key

Recommendations Based on User Test Feedback

Give structure to organization
Make sure levels of importance are clear
Keep fat footer
Fix known broken links
Keep search bar at top
Keep logo as home link
Place mission statement above fold
Create nesting/drop down menu
Align URL with content
Update overall look

Information Architecture and Navigation

Heuristic Evaluation

Navigation Usability Testing Notes

Too many clickable links(navigation) on the one page; it forces users read all of them in search for the information. It makes them frustrating, as it takes their time.
There is not the secondary item in the main navigation, so users need to go to each page for their needs.
Primary navigation design is not optimized for mobile device.
A lot of links are broken, and same links are repeated.
Users have a problem with abbreviation, so we need to spell out or adding description near the education jargons.
Footer is easily accessible, but it could be redesigned to find more easily.

Navigation Usability Testing Success Rate

Card Sorting

Sitemap

UI Design and Testing

Wire Frame

Navigation Wire Frame

5-second Low-Fidelity Usability Test

Things to keep

Clean design
Icons on the main banner
Font size
Typography

Things to change

Place more important content first. Switch the order of “Press Release” and “Featured News”
Not sure about the purpose of website
Kids’ pictures are too dominant
3 other hero images do not deliver any meaning
About Us needs more description
Color accessibility test

UI Style Tile

Responsive Web Design

Navigation

High-fidelity Prototype

Live Preview

High-fidelity Mobile Prototype

Live Preview

High-fidelity Mobile navigation Prototype

Usability Testing Plan for Mobile

Usability Testing Notes

Participant 1 Amanda
Press Release: switch the order of the title and date, considering remove the July press release and stacking the card.
Change the focal point of the last image of carousel. The last carousel needs to connect to the first image.
Remove utilities from the mobile screen. It looks too big
Change “Featured News” to the horizontal scrolling

Participant 2 Umnia
Clean and nice design
Navigation works well, clear and easy to follow
More diverse information on the K12 and post college
About Us is my last priority to read

Participant 3 Margie
Bigger logo
Classic and clean design
Corporate look and feel
Like the navigation and icon
Like the mission typography design
Effective communicating with Featured news and CTA on hero images

Iterate High-fidelity Mobile Prototype

Final Thoughts

How to Find Real Users?

Without having an interview with real users of Ed.GOV, it was not easy to design in user mind. During my usability tests with my colleague, friends and classmates, they tend to ask why the “Press Release” is on the homepage.
Here are the reasons;
First, the “Press Release” is displayed on the homepage of real Ed. Gov website.
Second, I think it captures the most recent information.
However, the testers and myself are not real users, so I designed the site with based on a lot of assumptions. I’m wondering that how to find real users of public website and test with them to understand how they really perceive and use the website.

Easy navigation and clean / modern minimalist design

During the user test of the original Ed.Gov site, users lost their path and got frustrated. I focused on designing easy navigation helping users find what they need within 3 clicks. I spelled out legal term and added icons on the primary navigation. Also, I tried to reduce any irrelevant design elements to contents to have a clean and simple design.