Desktop & iOS
Department of Education Redesign
Redesign and update of a government website's layout and navigation to get users the information they need efficiently and intuitively.
The Department of Education is an invaluable resource for students, parents, and educators, but has an inconsistent and confusing navigation and layout. The sheer amount of information available is presented in large blocks and links scattered around the pages. Reorganizing that information in a more clear and organized structure was the objective of this redesign.
Case Overview
Project Type: Responsive Web Design
Timeline: 3 Week Sprint
My Roles: UX Research, UX Designer, UI Designer
Tools Used: Figma, Google Suite, Trello
The Problem
Government websites are resources that often favor function over form, and are infrequently updated. The U.S. Department of Education's site has an inconsistent, outdated navigation and poor information architecture.
The Solution
Redesign the navigation and information architecture in line with modern heuristics and patterns that users are comfortable with.
The Research
Before you can fix something, you have to know what's broken about it. I conducted 5 usability tests instructing users to navigate to the "Student Loan Forgiveness" page and a heuristic evaluation. While all 5 users were able to complete the task, post-test questioning revealed several pain points:
-Lack of a consistent navigation system across pages
-Loan services require redirection to a different site
-Poor hierarchy and organization of information and content
-General confusion due to duplicate and dead links
User Persona
This is Athena. Given the prevalence of "Student Loan Forgiveness" in the news concurrent with this project, the goal for Athena's persona was to develop empathy for someone burdened with student debt trying to access the relevant information on the ED website as simply as possible. Her perspective guided the design process to create a more effective user experience.
Updated Sitemap and UI Wireframing
Given Athena's goal, displaying information about debt relief more prominently became a priority, as did a more standardized navigation to make getting around the website easier. Card sorting was done to determine the most useful elements of the existing site's information architecture. The results were used to design a new sitemap that would provide a more intuitive flow for navigating the site and consolidate redundancies.
A new navigation bar was the first element to be redesigned, which was then integrated into desktop and mobile wireframes, with the goal being a responsive web design layout. Content chunking into categorized cards was also done to present an organized and easy to digest design, as was a hero image carousel cycling through frequently requested content that was currently displayed in a bullet listed sidebar.
Design Style
The color palate was inspired by the Department's seal with AAA accessibility in mind. Typography was chosen to inspire confidence and authority in the information presented. Imagery showing students, graduates, teachers, and school settings were selected to reinforce a positive educational atmosphere.
Usability Testing
Final RWD Prototypes
Material Design principles were utilized in conjunction with the UI Style Tile to apply visual design to the wireframes with the goal of presenting a vibrant, colorful style that would encourage engagement, and also group related information.
The official seal was used in place of the existing logo, and buttons were resized to match Material Design guidelines. For the final mobile design, user feedback suggested iconography be added to the navigation menu to increase affordance, and the search bar was redesigned to expand across the navigation bar to increase the usable area in the form field. The padding in the footer was also adjusted to make the clickable area for each link larger.
I designed two additional navigable pages (“Loans” and “Student Debt Relief”) to fully realize the intended user “happy path”. Design elements from the homepage were also applied here.