Banner Photo of the Department of Education Website Redesign.

The U.S. Department of Education Website Redesign

The U.S. Department of Education (DoED) is an organization whose mission is to promote student achievement and preparation for global competitiveness. In this personal project, I redesign their website to match the mental model of a student.

View Desktop Prototype View Mobile Prototype
Scope: This was a personal project where my focus was a UX Researcher, UX/UI Designer, and Content Strategist. This project took place over the course of 2 1/2 weeks.
PROBLEM

The DoED site as-is has a lot of information but no centralized area of focus. The goal is to redesign this website so that it's easier to use and to give their branding a refresh.

SOLUTION

In this redesign, I chose to focus on a student looking to lower the cost of their tuition as a starting point. From this, I created a roadmap to help students get to the aid they need. Most of the work was in restructuring the content and messaging of the site to fit a student's mental model.

RESEARCH

I learned that students are overwhelmed while searching for grants and scholarships on the DoED’s website. With the data collected from my user interviews, these are the insights I gathered:

User Insights. 1) All users found using the DoED's website frustrating. 2) Most users think there's too much information to sort through. 3) Half of the users are concerned about paying for higher education.
Insights from User Interviews

From my own research, I could understand why students were frustrated with finding grants applicable to them. There's a lack of focus and way too much information.

Red-lining on the homepage. Issues revolve around competing images, disconnect between the imagery and related context, and walls of text in the form of links.
DoED's Redlined Homepage
Red-lining on the grants page. Issues revolve around lack of navigational context, important content looks less important visually, and there are walls of text and links.
DoED's Redlined Grant's Page

Additionally, I looked into accessibility. This is even more important since the DoED’s mission is to give equal access to students. The colors themselves contrast enough for readability but the screen reader needs work.

Accessibility. The website passes the contrast checker. The screen reader was difficult to use because of the long links, making it hard to move through the page.
Color Contrast and Screen Reader Results
DEFINITION

In the next step of the design process, I created documents that help keep me aligned to the goals set with consideration to the insights collected. One item being the user persona, which helped me empathize with the user.

User Persona showcasing Janet Wong. Janet is a senior in high school and has been accepted to her top choice schools. She want's to be self-sufficient and doesn't want to burden her parents with her tuition fees. Her goals are to go to a good school to become a doctor, while figuring out a way to pay for her tuition herself. Some issues Janet has is getting overwhelmed with large amounts of information. She also doesn't know much about federal aid since she's the first in her family to attend college. Currently she can only rely on the internet and her counselors for help.
User Persona

Card Sorting was necessary to sort through all the information housed on DoED. It helped give me clarity in organizing the contents of the site and cutting down on redundant links.

Card Sort to cut down on redundant links and restructure the current website to a roadmap.
DoED Card Sort

I wanted to give students a roadmap to find funding for their tuition. This was accomplished with a user flow that specifically helps with applying for federal grants.

User Flow: Applying for a Federal Grant.
User Flow on Applying for a Grant
ITERATION

I put some wireframes together and conducted a 5 second test. These quick test helped identify mental disconnects with a student. The biggest changes were made in the dropdown, sub-level navigation, and highlighting the Pell Grant.

Iteration 1: Navigation language was changed to better fit a student's mental model. 'Student Grants' was changed to 'Scholarship & Grants'. Scholarships and Federal Grants are term students are more familiar with, these changes are reflected on the screens. Additionally, I made Pell Grant easier to see. I found that students naturally seek it out.
Iteration 1

Style Guide

Colors were pulled from the logo to create a simple color pallet for the style guide. I wanted to keep screens clean and have images that convey proper imagery that's serious yet playful.

Style Guide: Colors were pulled from the logo. I kept the design clean with a white base and used blue and yellow as accent colors.
Style Guide

Iterating over Hi-Fi

Users had no issues navigating to where they wanted to go. What was surprising was just the concept of what is clickable and what wasn't. Below are the changes made.

Second iteration. Users had difficulty recognizing that certain menu elements were clickable. The underlining and bolding made them feel like they already clicked in so these were removed. I also paired down the menu to show one level of navigation down. Another issue users had was recognizing what is clickable. Targeted click points were needed to direct users. Users also thought something that looked card-like may not be clickable, so changes were made to make the items more button-like.
Iteration 2
RESULT
Responsive view of DoED Redesign: Homepage, Grants page, and Federal Grants page View Desktop Prototype View Mobile Prototype

Final Thoughts

  • This redesign was successful. It sets the DoED up for better alignment with their organizational goals that will ultimately impact future funding.
  • From this project, I was surprised by the confusion on what is clickable and what isn't. It's humbling to see confusion when I percieved an action as obvious. I learned that I was too close to the product in this sense. And I also saw how much more valuable user testing is because of this.
  • I think the next difficult but necessary area to design is the Student Loans page. It would be interesting to see how to best integrate a login from an external website.