Case Study: Department of Education Redesign
Team: Kena Sherman and Thao Nguyen
Before Redesign:
Intro: As a team our goal was to redesign the department of educations desktop and mobile website to better fit users needs. The website was very cluttered, disorganized, and hard to navigate making it not very user friendly.
Project: UX/UI Redesign for desktop and mobile website.
Analysis: We performed website evaluations, redlined, tested color accessibility, did user testing and based of the user testing created a user persona and prioritization matrix to help us start the redesigning process.
Redlining:
We found,
Without scrolling down there were 2 links to the same main topics i.e. Student loans, Grants, Laws, and Data.
Irrelevant topics such as Press Release and Links that talked about important people rather than important topics like COVID-19 were not mentioned until you scrolled down further.
Heuristic Evaluation:
We found,
Of the 34 evaluations, 13 things were clear and consistent, but 21 things turned out to be confusing and unclear.
Color Accessibility Testing:
We found,
That of the 6 possible color combinations, there were only two color combinations that fit all the WCAG criteria's.
Usability Testing:
We tested 5 users. We first gave them the task of finding the Dept. of Education’s website, and then giving them various tasks to see how they navigate the website.
Findings:
Every user we interviewed had a problem with being transferred to a new website rather than being navigated within the website. They found this confusing since they have already gotten used to the Dept. of Education website, but was transferred to another.
Prioritization Matrix:
From usability testing we created a prioritization matrix to organize the most important information for redesigning the website to fit users needs.
We found:
The buttons/links on the website were the most confusing to our users. And all of the links took the users out of the website which made things harder to find since the user was already used to the Dept. of Education website. Some of the users found the main homepage to be unorganized. Also links to unrelated articles were on the main page.
Card Sorting:
From the original website as a team we card sorted everything to help us figure out where information should belong. Based on the navigation usability testing, we organized all the primary and secondary tabs based on relativity and similarity so that our users wouldn’t get confused while navigating.
New Sitemap:
Based on our card sorting we created a new sitemap that is more clear and organized.
Primary tabs will be on the top of the page and then leading down to secondary tabs. The bottom of the page will be the footer, which we didn’t change to much.
On the top is the utility tabs which we omitted except for one which is the “Language Assistance” tab.
Wireframes:
We sketched then created wireframes to do user testing to see what worked well and what didn’t.
UI Style Tile:
We then created a UI Style Tile in order to keep the website consistent and approachable to our user.
Desktop Low Fidelity Redesign:
We redesigned the desktop homepage to better fit our users needs. We made it so it was easier to navigate and so that all the links that were everywhere randomly were in a place that users understood. We also created breadcrumbs and animated buttons to show user where they are on the page.
Mobile Low Fidelity Redesign:
We redesigned the mobile homepage to better fit our users needs. We made it so it was easier to navigate and added a hamburger menu to make information easier to find.
5 Second User Testing:
We performed 4- 5 second tests on different users to see what stood out and what could be done differently.
We Found and Iterated on Mobile:
Users pointed out that on the mobile they thought it was a mobile website about covid 19 information not education- so we made the covid information appear at bottom of screen instead of having them at the top.
Users would like to see more relevant education information on the main page- so we added a fsa login and federal student aid estimator.
We Found and Iterated on Desktop:
We added radio buttons to the language assistance instead of just having it be a list.
We added a carousel instead of just having the pictures.
We also made it so when you click the pictures at the top they change to different ones.
High Fidelity Prototype:
Based off the low fidelity prototypes and 5 second testing's we iterated and created high fidelity prototypes for desktop and mobile.
User Testing on High Fidelity Prototypes:
After creating the high fidelity prototypes we decided to do more user testing to make sure everything went smoothly. We conducted seven new usability testing's.
We found:
Fonts were too small.
Carousel dots need to be clickable.
On Mobile prototype the radio buttons for the language assistance were too small.
Iterations:
We changed the font from 20-24.
We made the Carousel dots clickable and draggable.
On Mobile we made the radio buttons larger so they were easier to press.
UI Style Guide:
After the prototyping, testing, iterations, and more testing we created a UI style guide in order to keep the website consistent and approachable
to our users.
Final Thoughts:
As a team throughout our redesign process we iterated on just about everything.
It was difficult to find a good way to organize all the information the page offers because there's so much. Doing card sorting really helped us define where all the information should live.
