The U.S Department of Education Site Redesign
This project involved a comprehensive redesign of the U.S. Department of Education’s website, focused on improving accessibility, navigation, and overall user experience for educators specifically.
Overview
The U.S. Department of Education’s website redesign was a project I completed during a UI/UX BootCamp. The assignment was to redesign one part of the website, and I chose to focus on improving the experience for teachers, one of the site's key user groups.
The project addressed critical areas like information architecture, navigation, and accessibility while updating the site’s branding, typography, and responsiveness. The original site had a cluttered layout and confusing navigation that often frustrated users. By conducting user research and testing with teachers, I applied user-centered design principles to create a more intuitive, accessible interface, resulting in a streamlined and visually appealing platform that better supports educators in accessing crucial resources and information.
Role
UX/UI Designer
Tools
Figma, FigJam, WCAG 2, Accessible Colors
Duration
4 Weeks
Proto Persona
Lauren is an overwhelmed elementary school teacher who needs guidance to help her plan the curriculum for the next school year. She is going to have a student with disabilities in her class, so she needs to find resources to support that student while also planning larger lesson plans for the rest of the class.
She will need to be able to easily find:
Resources to support her in teaching students with disabilities
Resources for K-12 education
Practice guides
Uncovering the Problem
While the Department of Education holds a wealth of resources for multiple personas, users fail to find the information they are looking for. To understand why this is happening, I conducted a Wire-flow Usability Test and a Heuristic Evaluation of the current site.
Wireflow Usability Test
First, I created a wire-flow to map out the path a user would need to take to find the content I wanted them to access. Then, I tested it with 5 users to observe how they navigated the site.
Testing Results
100% of the users failed each task and were not able to find the content they were asked to.
Navigation was not labeled clearly and was not intuitive. Users had to guess when navigating the site.
There was no specific hub for teachers, students, parents, or administrators, making it hard for a user to be clear they were in the right place.
Heuristic Evaluation
I wanted to determine the prominent UI problems with the site, so I conducted a heuristic evaluation and focused heavily on the navigation, as that was a core problem discovered in my usability tests.
Testing Results
Lack of error prevention and flexibility of use: The only way for users to find content for teachers is to search ‘site map’ which isn’t obvious or intuitive.
Design is not minimalistic: Lots of text and no imagery, icons, or hierarchy - hard to skim the page to find content
Users cannot recognize content and are forced to recall it: It is hard to detect where to find information. There are no verbal or visual cues - especially in the primary navigation.
No visibility of system status: There is no indication of where the user is, how to continue through a flow, or how to go back to where they came from.
The Solution
Redesign the Department of Education’s sitemap so that the site’s contents are organized for all users to find content specific to their needs
Redesign primary and secondary navigation so that content is clearly labeled and organized for users to navigate effectively
Make the design of the site more minimal so that the user is not overwhelmed by the contents of the page
Align with the visibility of system status heuristic by making it clear to users where they are on the site
Definition and Synthesis
From the heuristic analysis and user testing, it was clear that the information architecture needed improvement. The current website made finding content impossible and was not intuitive for users. Because of this, I began the process of reorganizing the contents of the site through card sorting, which led to an updated site map.
Card Sorting
In order to improve the site’s information architecture, I created individual cards for every piece of content on the site and reorganized them in a way that made more logical sense.
Site Map
From there, I defined the primary, secondary, and tertiary navigation and assigned each category a color. I then mapped out the site's contents to illustrate how each category connects and relates to one another.
Components and Wireframes
After gathering UI inspiration, I created navigation components for mobile and desktop that reflected the new sitemap.
Navigation Components
Defining a Grid
After creating my initial navigation components for the site, I defined a grid for both desktop and mobile to ensure the site could be built responsively and maintain consistent margins and gutters throughout.
Components
While designing my wireframes, I created smaller molecule components to incorporate into my larger site. I had fun in Figma creating hover states and small animations where I could.
Lo-Fidelity Wireframes
After creating my initial navigation components for the site, I then defined a grid for desktop and mobile to ensure my site could be built responsively and that there was consistency in margins and gutters across the entire site.
UI Style Guide
The UI style direction is meant to allow users to navigate the site without feeling overwhelmed or intimidated. The brand should incorporate rounded elements to add a smoothness and softness that feels pleasant to read and interact with.
Color: The brand uses blue as the primary color so the user feels a sense of trustworthiness when using the site.
Imagery: The images used for the site should be clear and crisp and reflect learning and education
Typography: The US department of Education uses the typeface Rubik as it is a typeface that is easy to read yet soft and approachable due to it’s rounded edges.
Button Styles: The button styles should be rounded to play to the soft and smooth approach to the brand
Iconography: Icons should have a rounded edge to match the softness of other brand elements
Testing
In order to validate my redesign of the Department of Education website, I wanted to test both the look and feel of the site as well as its usability. I aimed to ensure that I addressed the initial problems users faced when interacting with the site. To test the look and feel of the site, I conducted 5-second tests as well as usability testing.
5 Second Test
After defining the UI style guide, I applied the styles to the homepage and had five users look at the homepage for five seconds to get their first impressions of the UI style.
User said the homepage felt…
“Clean, bright, friendly and educational–serious but not scary”
“Curated to address specific groups of people as well as provide palatable information
“Academic”
Usability Test
I tested five users and had them complete the same flow that I asked them to in the wire-flow test of the original site.
Results
Users were able to complete each task with 100% success rate and in a short amount of time without any misclicks.
Some users noted that they didn’t always use the secondary navigation on desktop and mobile because it wasn’t clear it was interactive and they were able to find information otherwise
Iterating
Based on user feedback, it was clear that the secondary navigation did not look interactive on desktop or mobile, so users were not using it to navigate the site. To solve this problem on desktop, I added chevrons to indicate that these are menu items that lead to more content. On mobile, I added plus icons to indicate that each category opened up to more content.
Final Prototype
Final Thoughts
This project was a great opportunity to practice organizing existing content into something more user-friendly and easy to navigate. I enjoyed challenging that part of my brain. I also enjoyed diving into Figma and expanding my knowledge of components, variants, micro animations, and design systems. I am excited to apply what I learned to future projects while also working on my Figma organization skills so that my pages are cleaner and I can ensure consistency. If I were to do this project again, I would conduct another round of usability testing to see if the changes I made to the secondary navigation solved the problem.