Department of Education
Case Study
The Dept. of Education was completed in 2022 with a 3 week deadline. My involvement included spearheading the
research, storyboarding, redesign, and user testing, and iterations.
UI/UX Designer
Overview
The Department of Education proved to have critical design flaws that interrupts
the user flow. Through thorough research and analysis the site was redesigned to provide clear navigation and
content distribution for a seamless experience.
My Process
Research
A thorough analysis and heuristic evaluation was conducted to include, navigation, load time,
content layout, legibility, and broken links. I redlined to highlight areas to be adjusted.
Some key opportunities found:
- Inconsistent font styles and sizes
- Overwhelming content flow
- Navigation
- Broken or confusing icons
- Legibility
Redlining
After the heuristic evaluation the site was broken down through redlining to highlight the pain points & critical adjustments in content layout & navigation.
Competitor Analysis
A competitor analysis was completed including indirect competitors. This helped confirm their offerings and website structure to further understand their differentiators, pain points, threats, and growth opportunities.
Proto Persona
A proto persona was developed to better understand the users goals and frustrations. Key takeaways: Highlighting financial resources.
studious
low income
mature
Kelly Williams is 19 year old high school graduate. She works a part time-job and doesn't have money saved for college. She wants to go to college for art but isn't clear on how to get financial aid or potential grants.
User Flow
After research and evaluation of the website, a user flow was formulated. This process helped highlight flaws in the navigation process. The current layout only showcasing priority pages only in the footer navigation.
Analysis
The user interview feedback was prioritized to confirm the key changes needed for the website,
what's most important for the Dept. of Education and for the user.
High priority changes included:
- Legibility of text
- Broken links
- Navigation confusion
- Content flow overwhelming
Card Sorting
The card sorting process was used to help determine what navigation categories are similar. The navigation options were broken into 6 groups. Once the groups were formed, the navigation was organized into a hierarchy to highlight the main pages and the subsets.
Ideation
From the card sorting data, a site map was formed to distinguish the hierarchy of the pages and
further organize how the navigation will operate.
This site map was further updated to:
- Combine ED offices and social links on the main contact page
- A drop down of the important pages in the main navigation rather than just in the footer
Style Tile
Utilizing feedback from user interviews, a style tile was formed to create an eye catching contrast that sparks inspiration.
Empathy Map
I formed an empathy map to further explore the users experience & what they may be thinking &
feeling, & their main pain points & potential gains.
This helped highlight focus points for the government site:
- Guidance resources
- Grant and inancing options
- Scholarship
- Eligible schools
Accessibility
I put the color combinations through Adobe Color to confirm contrast for accessibility. All colors passed through the checker.
Wireframing & Lo-Fi
Wireframes were developed with the user in mind. They were structured based on the interview feedback, Z formula, & simplicity of navigation. The original site has minimal visual stimulation, images were added to accentuate content.
- Links were made consistent
- Easy access to important pages
- Clear headers and scholarship CTA
Navigation Prototyping
The navigation was updated using hierarchy, alphabetical, and category methods to have easier access to the widely used pages under the main navigation. These pages were originally only in the footer or you had to travel to the specific page to find it.
Design & Style
A number of homepage variants were created to evaluate layout options, the color palette, and the best placement for the graphics and content.
- Navigation placement
- Sidebar for quick links
- Card design
- Press release links
- Color contrasts
- Imagery placement
Hi-Fi Prototype & Testing
Based on 5-second usability tests on desktop, I moved the navigation to the top of the page & added the contact to “about us” section. Adding the navigation to the top of the page provides more room for small screens. The email updates & offices under contact us don't need their own page.
Based on 5-second usability tests for mobile, I added a graphic and moved the navigation to blend better with the screen. I changed the heading section and reconfigured the mobile design to match the desktop.
Re Evaluation
Additional feedback was gathered from the first round of iterations made and broke it down into a
matrix to separate the high and low priorities for the Dept. of Ed and the users.
High priorities included:
- Mobile home button
- Missing headline
- Icon confusion
- Header image adjustment with text
Final Iterations
The desktop design was updated to integrate the additional user feedback and improve the overall look and functionality of the page.
7 additional users were interviewed. Valuable insights were gathered to increase consistency and efficiency for the mobile page. The interviews brought to my attention that there was no search feature or home button, the navigation had an additional contact section, the desktop font size could be increased, and the header on the loan page was illegible.
Let's Work Together!
I look forward to the opportunity to connect and discuss your project needs and company goals!