Responsive Website Redesign

Department of Education

The Problem

Outdated site with hard-to-find info

The website was very outdated and some important information was hard to find because the site was a long series of inconsistent links.

The Solution

Improved navigation and visual appeal

50%

Faster Information Access
Department of Education Website Redesign

3x

Improved User Interaction
A redesign of a government website to increase ease of use and increase the functionality of user interaction.

My Role

UX Researcher

Primary and secondary research, persona generation, data synthesis

Mobile UI Designer

Existing site audit, information architecture, style guide, mobile design

Research Plan

A structured approach to identify user challenges and guide design improvements.

To begin this project, we needed to collect data from which to define the problems the users are having with the site in order to propose changes. We set out the following plan to achieve this:

Step 1

Audit existing site for accessibility and design issues

Step 2

Develop proto personas to form initial assumptions

Step 3

Conduct user testing to observe navigation and pain points

Step 4

Synthesize testing data into actionable design items

Step 5

Prioritize features using an impact matrix

Step 6

Create data-driven user personas from testing results

UX Audit

We started our process by looking closely at the current state of the website. We looked at basic site functionality and usability. We found the accessibility of its colors to be non-compliant. We reviewed web design best practices to see how they could be better utilized on this site and saw that the site’s linking system was inconsistent. Finally, we also checked the hierarchy to see what was the site telling us and couldn’t determine where the site wanted us to look. This is an issue because it makes the user confused and has to search for where to go.

We began our process by working on assumptions. With these assumptions, we created our proto-persona, Richard, to better dial in who our target user was.

User testing plan

We built a testing plan to see how users navigated the frequently accessed information that Richard would.
We did this by asking users to do the following tasks on the website:

1. Find information on Pell grants.

2. Navigate to where the 1098-E tax form information is found.

3. Locate the information page about the Every Student Succeeds Act (ESSA).

4. Find the general contact number from the Department of Education

User Testing

We performed six user tests over Zoom and asked them to complete the tasks in Research Plan. We chose our subjects based on their availability and the likelihood that they would be unfamiliar with the site.

Usability Findings

From our user testing, we came away with several insights. We were most surprised by how many different ways users found their way to the 1098-E tax form. There are a lot of redundant links for a specific form.

Synthesizing the insights came next. We took what we learned from the testing and assembled them into a matrix to decide what would have the most impact on helping Richard meet his needs.

This is the text area for this paragraph. Once you've added your content, you can fully customize its design using the tools available — adjust colors, fonts, font sizes, alignment, and more.

User Persona Overview

Now that we had definite data on who our user is and what their motives are, we proceeded to assemble that information and create our user persona. Meet Jennifer, a mother of a graduating high school student trying to figure out how to pay for his college.
[Placeholder]

Identifying all parts of navigation on the main page was a crucial step. The goal was to ensure the navigation remains simple and intuitive for every user.

This is the text area for this paragraph. Once you've added your content, you can fully customize its design using the tools available — adjust colors, fonts, font sizes, alignment, and more.

Card Sorting

[Placeholder]

Our team utilized the Optimal Sort feature from Optimalworkshop.com to find new ways of grouping the different web pages within the site. We used this information to aid in restructuring the sight map. One of the main takeaways from this activity was that almost every tester chose to place a majority of the errant links on the main page into the resources category. This allowed up to greatly improve the layout and hierarchy without sacrificing usability.

Site Map

Refining Navigation with User Insights

With the information from the card sorting activity, we continued to build a refined site map that better correlated to what the users were expecting.

Task Flow

To really gain a laser focus on what Jennifer needed to accomplish on the site, we defined the task flows for each step to isolate and verify that each task was as straightforward as possible.

Focused Steps

We proceeded to further understand Jennifer by hypothesizing what her path on the website would be. Since we found through user testing that the user flow was functional, we decided the site’s UI was all that needed updating.

[Placeholder]

Existing User Flow

[Placeholder]

We created a style tile to unify colors, typography, and UI elements for consistent design. Proxima Nova was selected for its clarity, and the original blue was darkened to convey trust and stability.

This is the text area for this paragraph. Once you've added your content, you can fully customize its design using the tools available — adjust colors, fonts, font sizes, alignment, and more.

User Testing

At this point, we conducted another round of user testing to be sure that the changes and designs were as functional as we intended. In the end, we found that our changes were successful and the user’s ability to complete the same tasks as the original tests had improved.
[Placeholder]

Try it for yourself. A fully clickable prototype.

Explore the desktop prototype to see how intuitive navigation and clear design come together to enhance user experience. This clickable model demonstrates practical solutions tailored for diverse audiences and screen sizes.
Also available on mobile. A fully clickable prototype.

Project Reflection

We spent a lot of time on this project but we feel it was well worth it. We are very proud of the work we accomplished. What’s more, is that we learned firsthand how important communication is. During the middle stages of this project when communication slowed down, it was very difficult to discern what other members were doing and collaboration was non-existent. Luckily, noticing this, we came back together and finished the project strong.