.png)
Research
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:
- Poor information hierarchy (especially on the home page)
- Inconsistent grids and page templates
- Inability to scan and navigate to desired information
- Colors used for the headers and text do not provide enough contrast from the background in order to be ADA compliant
- Help and documentation was hidden (contact information for aid and support)
Proto-persona
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.
When using the USDE site, Sofia's main objectives are:
- Find a page with "IEP FAQs" in the title, or a page that promises to answer questions regarding IEPs (Individualized Education Program)
- Find what Individuals with Disabilities Education Act (IDEA) resources are available to parents
- Access language support
- Find an article through the ed.gov website (or sub-sites) that explains how public New York schools and IEPs are being affected by COVID-19 remote education orders
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.
.png)
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.
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:
- Information architecture
- Accessibility and aid
- Style and color palette
Measuring success
To ensure the redesign of the USDE website improves the information architecture, accessibility, and branding, I set three measurable requirements:
- During the testing of the final high-fidelity prototype, less than 25% of usability participants try to use the search bar to complete any task
- The final high-fidelity prototype colors and graphics meet WCAG 2.1 AA guidelines
- More than 75% of usability participants during the testing of the final high-fidelity prototype can find the contact and aid numbers in less than two minutes
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.
Process
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.
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.
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.
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.
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.
Conclusion
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.
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.
.svg){kind=icon}