Department of Education
Improve the Department of Education websites and its usability
Overview
The problem: The department of education website contains an overwhelming amount of text, and a confusing navigation system that makes it difficult for users to navigate the site.
The solution: Creating a design that contains a minimalist amount of text, while still containing the important information.
Role & Tools
Role: UX/UI designer (Individual Project)
project type: Government Agency Responsive Web Redesign
Duration: Two Weeks
Tools: Figma, Figjam, Invision, Octopus.do
Research
For research I created a user persona, user path, and heuristic evaluation to uncover the issues the websites were having.
-
For the User Path we are going to be looking for users who come to the ED.gov looking for financial aid, and how to repay student loans, they will also look for grants and see if they are Eligible, and if they have any question to look for a way to contact DoED.
-
The overall heuristic evaluation for the EDg gov websites was that the website seems outdated, and texts heavy. At times it was confusing because I couldn't tell if I was clicking on a link or if it was just normal texts.
User Flow
User Persona
Heuristic Evaluation
Redlining
Sitemap
Definition & Ideation
By redlining the entire homepage of the website, I was able to analyze and annotate on issues that needed to be addressed in the redesign process later on.
For the style guide, I kept the blue color of the website that represents educational learning and went for a deep blue as the primary color, and light blue as the secondary color. as for the sitemap of the site, the biggest issues that was recognized was the overwhelming amount of text, and confusing navigation. so I wanted to establish a clearer visual form of information hierarchy by grouping related fields.
Style Guide
Prototyping
As this project was a responsive web redesign, I created a mobile, tablet, and desktop wireframe for the site.
-
The mobile Version of the website only has the hamburger menu, and logo, and have clickable sliders for the hero image.
-
The tablet view of the websites contain a primary, and secondary navbar. It still contains the hamburger menu. The hero image changes from a clickable slider to a time delay slider.
-
The desktop view of the sites contain 3 navbar and no longer have the hamburger menu. The menu items are listed to see on the third navbar.
Wireframes
.png)
Desktop View Wireframe
.png)
Tablet View Wireframe
Phone View Wireframe
.png)
Guerilla Testing Result
User Testing & Outcomes
For usability testing, I wanted to see how easy it was to find particular information pertaining to a user's needs. To see if the user was able to understand everything on the websites, how they navigate the websites, was the user able to accomplish the goal given to them without problem, if they were able to easily read the information on the websites.
Task:
-
Was user able to find information on student loan and repayment
-
Being able to find the forms to apply for aid
-
Finding a grant suitable to them
-
Locate the contact page
Key Findings:
-
Users had a difficult time getting back to the home page.
-
Couldn’t differentiate between links, and text
-
Dated and boring, layout, and look.
-
It was difficult to scan the pages, too much text, and links cluttered together.
-
From user testing of the low-fi, the main thing I got feedback on was that sliders weren’t clickable. Moving forward, I added different articles, and made the sliders clickable.
From the usability testing of the fidelity, the participant told me they like the flow, and aesthetic of the websites. Issues that participants told me they encountered was with sliders, where they had a difficult time knowing if they were actually switching between different articles, because all of the articles look the same to them. So to fix that issue, I highlighted the borders to different colors, and also, changed the color of the dates, authors to that of the borders.
Iteration
Conclusion & Future Opportunities
Throughout this process what I learned was, taking a website with a lot of information, learning to downsize it and organizing it while still having important information be easily available. So that users can find information they need more easily without having to search the entire website. I also learned the importance of arranging information in a way that it’s easier for users to navigate. For future purposes I would like to keep working on the website's prototypes more, and also do more user testing to see what important features are most used by users, and have that information be readily available.
Clickable Prototype
Mobile and Desktop clickable prototype to go through
Presentation
You can view the powerpoint to see additional work
More Works
BookFlip
How do I exchange books that I won’t read no more to new books?
TravelLingo
How do I find travel itineraries that are made for me?