DEPARTMENT OF EDUCATION

The Department of Education’s (ED) goal is to prepare and promote student achievement and ensure equal access through financial aid programs. The ED website is an important access point for those who rely on educational and financial aid resources.

THE CHALLENGE

Visually, the Department of Education’s website has a lot of room for improvement. Diving deeper, I found that the main challenge is how information is delivered and received. There is an exorbitant amount of nested links with no context and important information is buried within several layers.

https://www.ed.gov

How might I improve the design of the Department of Education website so that students can easily access information on financial aid and feel successful and confident about it afterward?

THE SOLUTION

There were moments when users felt lost and didn’t have control over how they received information. In order to tackle this challenge, I focused on the information hierarchy and managed content volume.

1. Research

Research kicked off with analyzing ED’s website as well as its social media presence. With the understanding that the organizational goal is to provide financial aid for higher education, I recruited students and former students to be my focus group. Five users were interviewed to give their initial impression and perform two tasks while I observed how they interacted with the site and the paths that they took when searching for specific information.

The Tasks:

• Find information on Financial Aid

• Find information on Student Loan forgiveness.

Adding to my research, I completed a heuristics evaluation and red-lined the features of the existing homepage. By exploring and testing ED’s website, I was able to see what works and doesn’t work, and come up with some solutions for a more impactful design.

2. Define

With enough research data to gauge users’ major frustrations, high-level goals were prioritized:

1. Reduce the density of information and level of detail. Less is more, especially when it comes to tough interactions with the Government.

2. Create a better flow for finding information. The existing navigation is very repetitive and confusing making it difficult for users to feel confident when they are exploring or researching.

3. Keep information within reach. Allow users to find information within ED and only redirect to an external page or Gov site if necessary.

To help define the information hierarchy, I asked a friend to do an open card sort of the menu items as well as some frequently visited topics. I then organized the results into a site map to get an idea of how many actions or screens it would take to complete a task.

3. DESIGN

The site map went through several iterations before being ready for wireframing. To simplify the navigation, progressive disclosure was used in the mega menu, which allowed users to show and hide what they need to see when they need to see it. This strategy was implemented throughout the redesign to give users control and freedom.

When designing the menu components, I like to stay organized by clearly labeling each layer like I would with items in my pantry. This helps me find things quickly, prototype more efficiently, and satisfies my need to keep things orderly.

With paragraph structures, I used clear headers, bulleted items, and indentations for reader legibility. I also presented information upfront in situations where it shouldn’t be hidden or nested within links.

4. PROTOTYPE

Multiple iterations were made on the web and mobile wireframes as a result of user feedback. In the earlier prototypes, some of the suggestions for improvement include:

• Scale text and button sizes down

• CTA buttons and links need to be more consistent

• Need more contrast behind captions/text for legibility

• Menu drop-down items need more space, headings are too large

All these changes and more were applied, and the final prototype was tested again to measure success.

5. Test

Users were asked to revisit the same tasks from earlier in the research: Find information on Financial Aid and find information on Student Loan forgiveness.

Test Results:

• Users were able to successfully find information in more direct paths and within two clicks.

• Users felt they were able to browse efficiently for information.

• Users were able to find basic information without being ejected to an eternal website.

Overall, users had a much happier experience. They felt more connected and less overwhelmed.

UI STYLE

With any project, my favorite part is styling. This is when I can flex my creativity and organizational skills. I get to make decisions on how things are going to look and feel. For this project, I used ED’s original primary colors but went a little brighter to give it a fresh look, like adding a coat of paint. Details that I really focused on were consistency in the typography, imagery, and button styling. I wanted to build these details correctly because they matter in creating a cohesive final design.

See the design style in action with the interactive prototype I created in Marvel!

THE REFLECTION

It’s been a long time, but I somewhat remember what it was like to apply for federal financial aid. As a first-generation, college-bound student who navigated the process alone, I know I must have struggled on the site and this probably only added stress to an already stressful time.

Imagine if ED, and other websites similar, could be redesigned without the barriers and provide users with a straightforward and uncomplicated experience. I’m glad that UX exists today to move us forward and closer in that direction!

In this project, I learned to commit to improving. With each iteration, there were still problems identified in testing. I wanted to disagree with some of the suggestions I received, but I kept an open mind and accepted the criticisms. The design needed to evolve to meet the audience’s needs, and ultimately I was glad I didn’t resist.

You might also like…