Andronik K Mamayan
UX | UI Researcher. Designer. Empathetic Listener.
The Ed*
*a redesign
The Department of Education (ED) website lacks visual appeal, congruity and is not at all intuitive. It would hardly make the grade for responsiveness yet millions visit the site annually. This case study looks at what a responsive web site should look like.
BACKGROUND
The agency is tasked with ensuring education in the United States is of a good quality and fairly accessible by everyone. Ironically, the website does not pass muster.
The ED has specific areas that it focuses on in order to reach its main goal. These areas include creating policies about financial aid and distributing financial aid, collecting data on education in the U.S., bringing attention to key education issues and preventing discrimination. This site currently deserves a failing grade but after some major tweaks, I believe we were able to get it to passing. This case study goes over that process.
TEAM MEMBERS
myself
Kelsey S.
Cara. S
DURATION
3-Week Sprint
TOOLS
Figma, Adobe XD, Google Docs, Miro, Maze
The Situation
PROBLEM STATEMENT
Based on initial survey results, we observed that the website is confusing, riddled with dead-ends, and often takes users out of the site altogether with no way of returning short of clicking the browser's back button. A bad user experience.
How might we improve on the navigation and design of the ED website to help make the information and the brand more clear to various users?
USER INTERFACE ANALYSIS
We found our users to be frustrated when attempting basic tasks like a) applying for a loan or grant, b) finding the ranking of a school or c) obtaining resources on diversity and inclusivity for teachers and parents.
PROTO-PERSONA
Who normally comes to visit ed.gov ? A diverse crowd of digital natives, of course!
3 million adolescents graduate from high school in the U.S. each year. The majority of which are "individualistic, progressive, and overwhelmed," according to 9 Important Insights about Generation Z author, Sean McDowell.
With the right tools, these young scholars are able to accomplish more than their parents and grandparents, if only they paid attention for long enough.
UI DESIGN ANALYSIS + TESTING PLAN
As a researcher, my goal is to identify all the pain points for users navigating through the Ed website. It's to develop empathy in addressing the design problem.
There is never an obvious solution, only obvious problems. The task of resolving these issues starts with a plan to test the current state of the site (image on right) then sorting those responses into an organized blueprint.
The following section is a summary of our research, organized by the following areas: website analysis, a heuristic evaluation, color accessibility assessment, the research plan, select responses transcribed, a matrix of those responses, and a redline annotation of the website as it exists today.
Ed.gov Website Analysis
The below link will direct you to a thorough analysis of the site's homepage and primary tasks/webpages: Student Loans, Grants, Laws, and Date.
Heuristic Evaluation
The link below takes you to the evaluation and accessibility test.
Tab 1 is the heuristic evaluation which scores various elements on a scale of 1-3.
Tab 2 takes you through the color accessibility test. Screenshots were taken from webaim.org.
Usability Tests
The following links summarize the objectives, steps and organized results of 5 user tests.
Survey Results
What works? What doesn't? and What's down-right awful on this site?
We parsed through the answers for your eyes to glance over.
Redline Annotation
The following link is to a PDF listing all the heuristic and usability issues users face when going through the various pages of Ed.gov.
Navigation Analysis
Taking a look at the existing navigation, specifically the footer, header and each sub-section, we considered how it is organized, what's working, and what's not.
INFORMATION ARCHITECTURE
This section takes what we've learned from a heuristic perspective and dive into card sorting, creating a new site map, and prototyping a brand new navigation UI based on that sitemap.
INFORMATION ARCHITECTURE
Card Sorting
An exercise to capture the primary and secondary navigation of the ED.gov website (including footer elements). Card sorting is used to help organize, design, and evaluate the IA of a site. Through card sorting we aim to organize topics into categories that make sense. Additionally, it may help the UI design team discover groupings they were not considering or create labels for these groups.
Iterated Sitemap
As the cards were resorted into new categories, as well as having some categories re-labeled. The new iteration of ED.gov’s website navigation became apparent. Student Loans became Get Funding; Grants became Operations to avoid confusion or misleading students; Laws became Policy; Data became Data & Research; and About Us became About the ED (as ‘Us’ is too informal).
Wireframing
In this first prototype we bring a new navigation sitemap redesign. It is based on the LATCH (location, alphabet, time, category, or hierarchy) Principle of navigation. Greater emphasis was put on the user visiting the site for the first time to obtain financial aid. Next, the sitemap mentioned in the prior slide is used as the template for design. The goal is to organize, relate, and store information in a cleaner, leaner fashion so that the user can easily find what they seek.
Click here for the interactive, first iteration of the wireframe
RESPONSIVE DESIGN
Following the standards of responsive web design, each element of the site (navigation, content, images, etc.) was pieced together in such a way that any environment will communicate the message of the Ed.
INITIAL PROTOTYPE
The Clickable Prototype
Progress on the navigation evolved into adding hover states on all clickable links. Which will be seen by moving your mouse over the links in the top navigation as well as the buttons in the body of the homepage. The addition of hover states and an overlay brings this prototype into mid-fidelity, where it’s starting to resemble an actual website.
Click here to view the clickable prototype in another tab.
5-second User Tests
As with all prototypes, we had to test it. We performed five 5-second usability tests to glean what we could about user behavior. Using the service provider, Maze, the goal was to assess user comfort with the navigation, how well they recognized what steps to take, and to get a sense of the overall aesthetics of bo the the mobile and desktop sites.
I can't tell if people were just being nice but the results were fairly positive.
INTERACTION DESIGN
After several iterations of the site punctuated by a round of testing with each iteration, a final prototype was developed.
The purpose of this style guide is to make sure everything on the site is “on the same page”. This goes for not only how it looks, but the language that is used as well. Having consistency throughout your design helps customers recognize your website.
FINAL PROTOTYPE
Redesign and application of the style guide to the design of a responsive homepage for desktop and mobile screens.
Going through the original ED.gov website, I found many areas of potential improvement: navigation, layout, flow, and overall location of links. The task of reorganizing, emphasizing and illustrating these key areas were all in the spirit of making the site easier to navigate for both students and teachers. Where there was once a dead-end link to an external page, now there is at least a warning that you are going to a third-party website.
UI STYLE GUIDE
Priority One is to allow for consistency and uniformity across the entire site. Something the existing site is severely lacking.
FINAL THOUGHTS
As with all things UI and UX: Iterate! Iterate! ITERATE! However many times the navigation changed from one state to another and yet to another, it was all in the spirit of making the site better. Please send some extra time discovering the various hover states, gentle animations, and crisp layout that I am sure you will delight in. It has been a pleasure!