Department of Education Redesign
A fresh, responsive web redesign that streamlines and simplifies the US Department of Education's website and allows it to be utilized across platforms.
Can a US Government website be usable, simplified and responsive across different platforms? We aimed to find out.
My Role: UX/UI design and research. Worked on color palette, cards, primary and secondary nav and typography. Worked extensively on mobile responsiveness.
Duration: 5 Weeks | Dec 2021 - Jan 2022
Team: Dilfira Aparjan, Kyle Roles, Nick Toney and myself
Tools Used: Figma, Invision, Miro, Trello, Google Forms
OVERVIEW
THE CHALLENGE
The US Department of Education's website is confusing, has too much information and is extremely difficult to navigate even the simplest of tasks.
THE SOLUTION
Redesign the website to simplify the information, creating hierarchy and order and make it easy to use on desktop, mobile and tablets.
THE IMPACT
Users are relieved from having to find the information and resources they need to utilize the website properly. Giving them a better user experience overall.
How might we make the Department of Education's website simplified, easier to navigate and aesthetically a better experience across multiple platforms?
DESIGN PROCESS
RESEARCH
We looked first at how people were utilizing the website to determine a user flow for our user persona. We found 90% of the users were checking pages on how to payback loans and access loan accounts and details.
KEY TAKEAWAYS
We needed to design a user flow to determine our user's experience with the website.
We based our proto persona on the data we found for usage on the website and hypothesized who our user might be.
A heuristic analysis and redline annotation on the website was definitely needed to have a better understanding of redesign needs.
Over 90% of users on website are looking for information on how to repay loans.
PROTO PERSONA
Our team created a proto persona for a typical user of the Department of Education’s website. We based our hypothesis on data we found for usage on site pages and how the current site intended users to engage.
USER FLOW
We now developed a user path which described why our user visits the website and showed each web page it takes to accomplish their goals. The path has our user navigating through the home screen, clicking on grants, finding out eligibility for individuals and to verify if they need to complete a FAFSA to be eligible.
Heuristic Evaluation and Redline Annotation
Once we established how to test the current site, our team annotated usability and heuristic issues for five webpages using the redline technique and heuristic evaluation checklist. This gave us a good idea on potential pain points of interaction with the start. We followed our user path to provide the pages we would evaluate.
Our team dug deep to find potential pain points and ways to improve the user's path through the website. We looked at the primary navigation and secondary navigation, link paths, components, photos and with the intention to simplify the walls of information which confuse and overwhelm the user.
We also ran accessibility testing for color and contrast for both AA and AAA accessibility. We found multiple components on the pages not in compliance and began to notate what changes need to be made. We also found the navigation bars to be potentially confusing as well.
Another big takeaway was the color palette for the entire site did not follow any reasoning of logic and were just utilized randomly. We now took this information, set it aside and attempted to find out if we could test for usability and have the same findings we did, or if we were completely off from what potential users might experience.
Usability Testing
Our next steps were to administer testing to six individuals in a one-on-one interviews. We tasked our testers to utilizing our user flow and see if we can spot major pain points to address. What we found was extremely helpful towards our next steps in design
Results
What we found as major pain points from our user's testing was:
-
Having navigation link between supporting sites
-
FAFSA Links were broken
-
Unsupportive Acronym usage
This supported our initial thoughts and we next developed a priority matrix to focus our points of emphasis in our next steps as far as design.
INFORMATION ARCHITECTURE
A major pinch point we had to address and an area of focus was navigation and layout on the home page.
Before we began next steps of UI, we had to make it easier for our users to navigate the site. For this part of the design process we redlined and annotated the primary, secondary and footer navigation.
We next tested four individuals after we made our annotations to see if we were headed in the right direction.
This gave us a good read on how to streamline the massive amounts of information and confusing manners of navigating our site that we found in our analysis and our user testing.
REDLINE & ANNOTATION
for primary and secondary navigation.
CARD SORTING
We next implemented a card sorting method to organize our navigation. This would help to simplify our primary, secondary and footer navs that were so confusing and overwhelming for our users.
RESPONSIVE DESIGN
Now that we had the bones of our design in order- that is our structure and user flow; navigation card sorting we now mapped out our homepage mobile & desktop navigation with wireframing.
The original website was void of emotion and color. We added a secondary color to stand out. We also added images, and iterated on our drop down menu.
Next steps were to begin to work together on a clickable prototype for our desktop and mobile homepages. The responsive nature of the original site was something that really lacked and we wanted to rectify that by really knocking it out of the park with responsiveness. Whether on a desktop, tablet or mobile device our goal was to make the site as recognizable and as easy to use on whatever platform our user utilized.
TESTING
5 Second Testing
We conducted 10 individual tests that spanned desktop, tablet and mobile applications. This gave us a good insight if we were headed in the right direction for our clickable prototypes and allow us to make final iterations on this massive project.
Common Feedback
-
Some individuals found the quotes and pictures on the navigation dropdown to be confusing and unnecessary
-
The popular links image does not reflect what the page would display
-
Enjoyed the design & simplicity in both mobile and desktop
FINAL RESULTS
After five weeks of working diligently with our team we accomplished what we set out to do- a complete responsive web redesign of the Department of Education's website. This took a LOT of work to research, design and implement. Our team grew close and sharpened each other's skills throughout the process. Our design elements are something we were very proud of as we not made the site more functional and simplified, but also beautified as well.
Lessons learned were not to get ahead of ourselves in the process of UI elements, allow the research to guide and inform on how to implement principles.
