U.S. Department of Education

Overview.

The Department of Education (DoEd) was founded in 1980 and has supported over tens of millions of American students and their families in paying for college through grants, loans, and work-study programs.

The DoEd provides access to information about the laws, regulations, policies, and data surrounding education in the United States.

Role

UX Research, UX/UI Design, Brand Design

Team.

Anita C., Zach. M

Tools.

Figma, Figjam, Adobe Illustrator

Next Steps.

Research

Ideate

Design

Iterate

Original Website.

The DoEd website contains so much information, mostly in the form of links, and has no central area of focus. Users are frustrated with information overload and are unable to complete tasks in an efficient or timely manner.

The Problem.

Our team conducted user research to address pain points with the current website. After analyzing this data, we brainstormed and worked together in restructuring the site with better content chunking, more streamlined UI, and a focus on a friendly and mature tone for our users.

The Solution.

User Research.

User Persona

Testing.

Objectives

Understand user needs for visiting DoEd website
Determine main tasks for users to accomplish goals/needs
Create prompts for these tasks for user testing
Gather data on users’ ability/inability to complete these tasks

K-12 Grade Students, College Students, Families, Educators

Target Users

Create a FAFSA Account - from the DoEd homepage, find the FSA form for students to fill out

Task 1

Task 2

Explore Loan Eligibility Requirements - from the DoEd homepage, find the basic student loan eligibility criteria graphic

Task 3

Find Disability Discrimination Laws - from the DoEd homepage, find the overview of laws for the Disability Discrimination Act

Task 4

Find the Federal Student Aid Estimator - from the DoEd homepage, find the Federal Student Aid Estimator Tool

Findings.

Formatting Issues:

Formatting glitches and slow loading times hinder usability

Content Overload:

Excessive text and links throughout site and navigation makes users feel overwhelmed and confused

UI Inconsistency:

Site’s lack of streamlined and unified UI creates more confusion for calls to action, location of hyperlinks, buttons, etc.

Information Architecture:

Finding important information is challenging because of dense text and poor hierarchy of information

Technical Reliability:

The site consistently crashed on users, causing frustration

After a successful card sorting session, our team developed a new and improved sitemap for the DoEd site
Simplified the navigation menu to reduce clicks and eliminate user confusion
Reduced amount of links from each drop-down tab

Information Architecture.

Card Sorting

New Sitemap

With a new sitemap, user research, and a redesigned navigation, we created wireframes of the DoEd website for desktop and mobile.

Wireframes.

Meeting accessibility standards, I developed a brand and UI style guide that revamps and unifies the DoEd’s existing branding.

Design Solutions.

Mid-Fidelity Prototype.

Usability Testing.

Tasks

Scroll through the carousel on the homepage
Click on the Instagram button to open the link in a browser window
Click on the hamburger menu, click About and scroll through that new page
From About page, click on the top Nav button to be redirected to the homepage
On the homepage, find the For Educators card and click on the link
Go to For Educators page, and click on the ARP Fact Sheet button

Feedback

Make the font bigger and bold the headlines
Create more space in between content
Change the background from space gray to white
Simplify the buttons
Add drop shadows to the drop-down menu
All actions were clickable
Back-buttons need to be added to certain pages

Final Prototype.

Closely following our brand and UI style guide, research findings, and low-fidelity prototype, I created a high-fidelity clickable desktop prototype , and a mid-fidelity clickable mobile prototype of the DoEd website.