Sanju Jacob
www.ed.gov
Department of Education
A Responsive Redesign Case Study
UX/UI Designer
My Role
Abigail Scott, Solene Lee & Myself
Team
Figma, Miro, InVision, Adobe Illustrator, Adobe XD, Adobe Spark, Zoom, Slack
Tools
Overview
The Department of Education was created in 1980 by combining offices from several federal agencies. The department's mission being to "promote student achievement and preparation for global competitiveness by fostering educational excellence and ensuring equal access". About 25 million people visit the department's website per month, but the overwhelming amount of information, inconsistent page layouts, and cluttered navigation make it difficult for users to find relevant information quickly.
We believe we could help users find relevant information on the Department of Education's website quickly by offering them a more intuitive information architecture with simple layouts and navigation.
Impact
To redesign the ed.gov website to help users find relevant information on the website quickly by offering them a more intuitive information architecture with simple layouts and navigation.
Problem
Users who visit the Dept. of Education's website find it difficult to navigate through and obtain the relevant information they are seeking due to the overwhelming amount of information and cluttered layout and navigation
Solution
Methodology
We decided to focus on three main questions:
-
For whom is the website designed?
-
What is the main purpose of the homepage?
-
What is the mission of the agency?
​​
We used the following methodology to tackle this project: ​
User Research
We began our user research by studying the U.S. Departments of Education Strategic Plan for Fiscal Years 2018-22 document to focus on one user flow that we may be able to improve. We searched for a task that was a high priority for both the department as well as users and noticed the significance of grants being echoed throughout the document.
“Improve the quality of service for customers across the entire student aid life cycle.”
-Dept. of Education's Strategic Objective
Site Analysis
We did a site analysis and found some potential answers to the three questions we posed before we began our research:
1. Users: Students, parents, & educators.
2. Purpose: To provide information about the US education system
3. Mission: To promote student achievement and preparation for global competitiveness
Heuristic Evaluation
We performed a heuristic evaluation on the site to test if the site is user-friendly. Red-lined annotations note areas for improvement on the page. We evaluated the homepage as well as four other pages for this purpose.
Next, we ran a AA compliance test on the color palette used across the site. This allowed us to analyze if the site met accessibility requirements and if the color scheme needed to be modified.
We found some accessibility issues that we decided to remedy with a revamped style guide.
Persona
We created a persona in order to understand the needs of our customers that we are servicing within the student aid life cycle. This allowed us to understand the pain points our typical users experience. Meet Mary Kay!
Mary’s Pain Points:
-
Do not want to take on a big student debt
-
Can't find the necessary financial aid
-
The Dept. of Education website is tough to navigate and find relevant information
Next, we created a user scenario to learn how Mary would access and utilize the website.
-
Mary is looking to go back to school to pursue her dreams of becoming a Chief Operating Officer for a large SaaS company.
-
She is fiercely independent but does not have the financial resources to support herself.
-
She is hoping she qualifies for financial aid so that she can stipend some of her income from her two jobs to focus on school.
-
She needs to visit the Department of Education’s website in order to apply for a Grant.
User Path
1. The four-column grid simplifies the page layout, but the rest of the page is text-heavy with misaligned texts and components.
​
Mary clicks ‘Grants’ to explore further.
2. The Grants-overview webpage
is cluttered with links and the call-to-action button, to apply for grants isn't given its proper prominence among other content on the page.
Mary clicks ‘Apply’ hoping to start the application process.
3. The Apply for a Grant webpage is text-heavy with confusing grant titles and information.
Mary decides to explore the first grant further, she clicks ‘Apply’.
4. She is taken to an external website grants.gov with yet another “apply’ button to continue the application process. There are no indications or prompts to make the user aware that they are leaving the Department of Education’s website.
Mary ends up on an external website.
Usability Testing
Next, we performed usability testing on the site’s design & function. We tested 7 users on the current user path of the website. Our focus was on : Site's general design & function and Navigation
Analysis of Feedback and Test Data
We analyzed the data from the usability testing and sorted them into high priority vs. low priority. This helped us understand what feature redesigns would have the most impact for the end user.
General Design & Function
Navigation
Definition & Ideation
Next, we moved to our ideation phase, which is where we strategically and creatively worked through redesign ideas.
Mood Boards
We started this phase of our project by creating a mood board of UI samples and inspiration, UI patterns, and Images to help us understand what components we felt were needed in the redesign of the current site.
UI Style Tile
Based on our test data analysis and our mood boards we created a style tile of the UI components we would be using in our website redesign. This includes the following imagery, color palette, typography, button states, logos, etc...
Card Sorting
We did card sorting to analyze the current sitemap. This allowed us to visually move around the site information to organize and find areas of improvement.
​
We initially sorted the current sitemap in Miro:
After going through the current sitemap, we did a closed cart sorting to come up with simpler and improved information architecture to match user needs.
Finally, based on all the feedback and card sorting, we built out a new information architecture with the goal to reduce clutter and improve navigation.
​
Here is our final sitemap:
Prototyping
Based on the outcome of the ideation& definition process, we moved into prototyping the redesign.
Low Fidelity Sketches
Keeping our users and their feedback in mind we started the prototyping process by sketching Mobile and Desktop versions. We then did a round of preliminary user testing by importing the sketches into Figma and creating hot spots.
​
We did paper as well as digital sketches, starting with the mobile pages first and then the desktop pages.
Mid-Fidelity Wireframes
After finalizing the sketches, we created mid-fidelity wireframes in Figma and ran several usability tests to see if the design was accessible, intuitive, and communicated well with the users.
We started with mobile-first keeping Responsive Web Design in mind, then we moved on to the less restrictive desktop webpage design.
Testing & Iterating
We ran a 5- second usability test on 4 users on our mid-fi wireframes to gain valuable feedback from our users. This helped us to gauge the redesigned homepage’s effectiveness in communicating the department’s message to the user and to optimize user engagement in future iterations. We tested both: The redesigned desktop and mobile web pages.
5-Sec Usability Test findings & Iterations
Having collected all the usability test data, we analyzed it to gain insights into our users' pain points. We analyzed all the honest feedback we received and worked on iterating our first version of the mobile and web pages.
Here are a few of the changes we made on the mobile homepage (we made similar changes on the desktop version as well):
​
Mid-Fi Version 1
Mid-Fi Version 2
Hi-Fidelity Prototype
After analyzing the usability tests on our mid-fi wireframes and iterating them to incorporate the findings, we moved to the next step in our design process – High fidelity prototyping.
Prototypes - Version 1
We created the first version of Hi-fi prototypes based off the Mid-fi Version 2. This version includes our color scheme, imagery, and typeface selections.
Hi-Fi Mobile Version 1
Hi-Fi Desktop Version 1
Online Tests & Iterations
Next, we ran several online one-on-one tests on our Hi-fi designs to understand how the user fully experiences our redesign.
We tested and interviewed 7 users to evaluate our redesigned interface for its functionality and effectiveness in communicating the department's message with users.
We had a lot of positive feedback and also identified some opportunities for improvements as well:
Final product
High Fidelity Prototype in Action - Mobile
High Fidelity Prototype in Action - Desktop
Next Steps & Reflections
We learned so much from this UX & UI case study. Mainly, the importance of responsive web design and uniformity in design.
In the future we would like to work on new features such as filtering options, combining the external grant application page into the Department of Education’s website, and so much more that would make this government website more intuitive and navigable for users.
Thank You!
More Projects...
A Mobile App Case Study
Tune Up
