United States Department of Education Seal

United States Department of Education Website Reconstruction

UX Design | Information Architecture

Organized the website's information architecture and navigation to support stronger brand cohesion and accessibility.

This project was completed in four weeks in the fall of 2020. This was an independent project.


The current USDE website

As a means of becoming familiar with the structure and design of the current website, I annotated the current USDE website for applied or lacking design heuristics. I found:

Annotated screenshots of the USDE website, indicating accessibility issues
Heuristic evaluation on select USDE pages


After conducting a heuristics analysis and several usability tests on the current USDE website, it became dramatically clear how inaccessible and confusing the website is for all audiences, specifically ESL (English as a Second Language) audiences. To ensure my redesign was user-centric, I empathized with Sofia Santos, my proto-persona for this project.

Proto persona for this project, Sofia Santos
Proto-persona, Sofia

When using the USDE site, Sofia's main objectives are:

Usability of current website (part one)

I asked five usability testing participants to complete Sofia's objectives in order to understand the potential pain points and difficulties Sofia may have when finding information on the USDE website.

Summary of usability testing

I arranged all the information gathered from the usability testing in an affinity map to better understand the communal pain points and experiences participants had in common.

Photo of an affinity map on a whiteboard
Sticky notes arranged on an affinity diagram (the ol' fashioned tangible style)

Usability of current website (part two)

Since most of the participants used the search engine to navigate the website, I was curious to know if the participants would actually be able to complete Sofia’s tasks without using the search engine. I discovered participants could not complete the tasks, as they would give up after several minutes of trial-and-error.

Definition & ideation

Defining scope

In combining the results from the Heuristics Analysis with the results from the usability testing, I decided to focus on three main areas of the USDE website to redesign:

Measuring success

To ensure the redesign of the USDE website improves the information architecture, accessibility, and branding, I set three measurable requirements:

For the sake of the scope I assigned to this project, I decided to stay away from redesigning the search engine. Since it was powered by an outside source (Bing), I was uncertain if I would be able to redesign the order of the search results as a UX designer without a programmer's help. I decided to focus on redesigning the navigation so that a user would not rely on the search bar for all tasks.


Reconstructing the information architecture

To gain a better understanding of the mental model of potential users of the USDE’s website, I asked seven people to sort a collection of all the titles of the USDE’s secondary pages into categories.

In response to the card sorting, I added the “Publications” and “Schools and Colleges” categories after I noticed that people grouped school- and college-related content together and press release-related content together separate from the already existing four categories.

Renewed information architecture for the USDE site
Proposed sitemap

Early prototyping

The low-fidelity prototype focused on implementing the new information architecture into the primary site navigation as best as possible. After conducting usability testing on the prototype, I noticed simply adding more tabs to the primary navigation panel was not enough to help users with finding their desired information.

The testing participants felt overwhelmed and confused by the structure of the navigation system. In some circumstances, an opened navigation tab would take up nearly the whole viewport.

Screenshots of the low-fidelity prototyping
Low-fidelity navigation

In the mid-fidelity prototype, I decided to place a stronger emphasis on organizing the information hierarchy on each page to support the user in finding their desired information, so that information on hot topics (the COVID-19 pandemic, for example) could be better streamlined. I also restructured the main navigation system to be more mobile-friendly and condensed.

Screenshots of the mid-fidelity prototyping
Low-fidelity (left) and mid-fidelity (right) home page designs
Examples of the mobile and desktop headers
Mid-fidelity navigation and footer

After the second round of usability testing, participants were still having trouble with finding language support. In order to help users find prevalent information faster, I added cards aside of the main page content, which could contain contact information, language support, or the date in which this page was last updated (whatever type of information was most valuable for the user for each page). For example, on the "COVID-19 Resources for Schools, Students, and Families" page, the aside card lets the user know when this page was last updated.

Screenshots of the mobile and desktop prototypes for the renewed USDE site
"COVID-19 Resources for Schools, Students, and Families" page, with card indicating the last time this page was updated

Revising the style guide

In line with strengthening accessibility, I created a style guide for my proposed design. Since this is a site expected to deliver credible and reliable information, the U.S. Department of Education's interface must communicate that the information one would find on this website is credible and from a reliable source. However, as stated in the mission statement, the Department of Education is centered around people, communities, and improving education across the United States. With that in mind, the UI should be basic and formal in structure, but also friendly and warm.

Style guide
Style guide
Proposed style guide


The final product

During the last rounds of testing my high-fidelity prototype, none of the participants used the search bar in order to navigate and could easily find the information. All of the participants found the contact and aid card in less than two minutes. All the colors used meet WCAG 2.1 AA guidelines.

For both mobile and desktop usability testing, all my users were successful in finding the requested information.

. . . In other words, within the applied scope and timeframe, this project was a success. 🙌🏻

Note: I do not condone nor approve of Betsy DeVos' actions as the United States Secretary of Education.

High-fidelity redesign

I revisited this project two years after it was completed, and decided to update the high-fidelity wireframes to the current branding of the USDE site, since it's very unlikely I would have the ability to completely re-do the branding and UI of the entire site.

Updated high-fidelity design of the desktop Home page and the "COVID" page

Next steps

The next aspects of this USDE redesign will entail focusing on strengthening the language accessibility, exploring the website’s screen-reader mode, and understanding the constraints with reconstructing the search engine.

Return to Work ->Arrow