Redesigning the U.S. Department of Education Website
A Responsive Mobile and Desktop Case Study
Designed to better convey the mission and services of the U.S. Department of Education and establish a more enjoyable and streamlined experience for users, the responsive web redesign of the department’s website addresses current UI pain points and implements desktop and mobile solutions through high-fidelity prototypes, demonstrating new navigation, page layouts, information architecture, and atomic design.
Project Overview
Background
The U.S. Department of Education’s mission is to promote student achievement and preparation for global competitiveness by fostering educational excellence and ensuring equal access. The department educates people about education requirements, laws, data, funding/grants, and equal opportunities in education, and provides a framework for the education sector, acts, and legislation to promote equal learning opportunities.
The Problem
The site is designed for use by the public sector - specifically college students, parents of children of all ages, and researchers - school officials, and educational institutions, but does not provide clear paths for these different users.
The Solution
Our team used user-centric research and design to address existing problems and pain points relating to the current website navigation, information architecture, and UI and determine how the site could better tailor information to its key users, present extensive and important resources in a streamlined fashion, and embody a pleasant and helpful tone for those seeking educational information.
My Roles & Responsibilities
- Conducting User Interviews
- Designing and iterating wireframes for the Homepage, Navigation, and Primary and Secondary pages
- Developing the new Sitemap based on card sorting for enhanced information architecture
- Creating the UI Style Guide Design
- Developing the new Sitemap based on card sorting for enhanced information architecture
- Creating the UI Style Guide Design
Deliverables, Tools Used, Timeline & Scope
Deliverables
Responsive website for mobile and desktop, including homepage, navigation, all primary and secondary pages (About Us, Student Financial Aid, Resources & Data, Laws & Guidance, For Parents, For Teachers, For Administrators, Homeroom Blog)
Tools Used
Adobe XD, InVision, Miro, Procreate, Zoom, Google Slides
Timeline & Scope
6 Weeks - Design and Test Navigation, Homepage, Primary/Secondary pages, and UI Style Guide
Research & Findings
Persona
We constructed our proto-persona, Maria, to help us tap into some of the challenges our users may be facing when visiting the U.S. Department of Education website.
User Flow
By establishing a User Flow, we determined that Maria must navigate to a variety of areas on the site to complete her goal. She can do so through multiple paths, as demonstrated in our wireflows.
Heuristic Evaluations
Our Heuristic Evaluations resulted in poor marks in aesthetics, navigation, and content, implying a poor overall user experience. The site scored fairly well in efficiency/functionality.
Accessibility Tests
When testing the color accessibility of the site, we uncovered issues with the current font colors, some of which do not pass the AA standards - particularly the main content colors and link colors.
Usability Testing
We conducted five Guerrilla User Tests to determine how easy the website was for users to navigate and observe if any paint points emerged. Through usability testing, we discovered many frustrations that arose from navigation and lack of context and clarity, as well as poor information architecture. We then determined which pain points were high priority for both the user and the website, allowing us to pinpoint the areas that needed the most attention.
Definition & Synthesis
Using redlining and annotating, I then combined the users’ pain points with our heuristic evaluations and color accessibility test results - applying them to the site pages in the form of design recommendations.
Navigation Analysis
Our team completed additional redlining/annotations for the home page and four main pages: Home, Student Loans, Grants, Laws, and Data. This allowed us to look closely at the existing navigation elements and determine which were working and where changes were needed.
Ideation & Analysis
Ideation
Using the I Like, I Wish, What If method and the Prioritization Matrix, we took our user interview and survey data and expanded on our findings to come up with three unique features that could be used to address our user’s pain points. Our features included Volunteer Profiles, Donate by Category, and Individual Success Stories.
Card Sorting
During our card sorting stage, we defined and grouped the existing website categories to analyze the information architecture and develop a more effective system for our users.
Sitemap
The current Hope for Children website sitemap does not present clear, intuitive categories for users. Our updated sitemap regroups elements to offer clarity to users, particularly in regard to what the organization does and what individuals can do to get involved and help the organization’s mission.
User Flow
Our team established an ideal user flow from our user’s goals, focusing on how one would confirm the organization’s credibility and past performance, learn how to get involved, and donate.
Protoyping (low-hi)
Navigation UI Prototype
I used Adobe XD to create wireframes of the primary and secondary navigation elements, which were then incorporated into InVision to create a clickable prototype of this new navigation developed from our the usability testing and heuristic evaluations.
Navigation Components
The navigation components for the mobile and desktop redesigns of the U.S. Department of Education focus on ease of use, clarity, a bold look, and simple shapes.
New Wireframes Incorporated the following Key Updates:
- Additional negative/white space
- More images that better correspond to the content
- Clear page sections, cards, and dividers to make information easier to view and find
- More space dedicated to new menu items to make navigating the enormous amount of information on the site easier.
- Additional negative/white space
- More images that better correspond to the content
- Clear page sections, cards, and dividers to make information easier to view and find
- More space dedicated to new menu items to make navigating the enormous amount of information on the site easier.
I used the wireframe mockups to create a clickable prototype that could be used to showcase and test the new navigation system and wireframe layouts.
UI Style Tile
The new Style Tile for the U.S. Department of Education aims to create a bold, helpful, authoritative, but also approachable brand feel for the website redesign. Friendly, colorful imagery of people and students, existing graphics from the department’s social media campaigns, and a more striking variation of the blue and green color palette were all incorporated.
UI Style Guide
The UI Style Guide expanded upon the Style Tile for the U.S. Department of Education. The guide added many new elements - lists, dropdowns, checkboxes - to contribute to the site’s bold look and organized, streamlined layout. I then applied the UI Style Guide to my desktop and mobile wireframes.
Mobile Wireframes
From the desktop wireframes, I then created a responsive web design grid system that would adapt to a mobile layout.
The final desktop and mobile prototype redesigns include iterations based on User Testing, incorporating menu and navigation changes, altered information architecture, and consistent, bold design to better convey the department’s mission and services.
User Testing + Outcomes
Rapid User Tests
In Rapid User Tests, I collected information on initial impressions.
- Was the website’s purpose clear?
- Was the initial impact appealing and trustworthy?
- Were users inclined to remain on the website?
- Did the menu navigation provide straightforward path for the users’ goals?
- Was the initial impact appealing and trustworthy?
- Were users inclined to remain on the website?
- Did the menu navigation provide straightforward path for the users’ goals?
Users found the homepage to be bold and eye-catching, the site easy to understand and navigate, and the menu items straightforward and helpful - particularly For Parents, For Teachers, and For Administrators. They were also drawn to the Feature cards. One user pointed out confusion with the Login button’s purpose, leading to iterations on button name.
Second Round of User Testing
Overall, users found the mobile site easy to navigate and visually pleasing. There were a few notes and suggestions to consider for iterations:
- Reordering select information sections, menu items, and buttons
- Making Contact Us even more prominent and easy to find
- Further utilizing the Helpful Links section
- Reordering select information sections, menu items, and buttons
- Making Contact Us even more prominent and easy to find
- Further utilizing the Helpful Links section
From User Testing insights, I applied changes to the prototype to address remaining paint points:
- Contact Us added to menu items
- Newsletter sign up added to mobile
- Student Financial Aid menu reordered to start with Eligibility Requirements
- Additional desktop menu iterations
- Helpful Links tailored to match current page
- Contact Us added to menu items
- Newsletter sign up added to mobile
- Student Financial Aid menu reordered to start with Eligibility Requirements
- Additional desktop menu iterations
- Helpful Links tailored to match current page
Conclusion + Future Opportunities
The redesign of the U.S. Department of Education aimed to improve the navigation and visual elements of the desktop and mobile website so users could more easily find information and understand the department’s mission and services.
In the future, I would like to add more tertiary pages, as well as incorporate more components that could further streamline information within the page structures, such as additional dropdowns and bullet lists, which are currently used on only a few key pages but are helpful in reducing and organizing text.
