U.S. Department of Education Redesign
U.S. Department of Education Redesign
Enhanced information architecture, updated and refreshed the UI design, and provided educational copywriting to support the end user: college students.
Enhanced information architecture, updated and refreshed the UI design, and provided educational copywriting to support the end user: college students.
Background
In this hypothetical design challenge, I was inspired by the impact that could be made to such an important resource for students across America. The U.S. Department of Education's (DOE) mission is to make education accessible and equitable, but unfortunately, that narrative gets lost in a messy design. Coming from someone who has a lot of experience in the education sector, if there's one thing teaching is all about, it is scaffolding, or in UX terms, informational architecture. The information on this site holds so much importance, and with my redesign the people can actually access it.
Role - Solo Project
Usability Researcher
Interaction Designer
Logo Designer
UI Designer
Overview
Background
In this hypothetical design challenge, I was inspired by the impact that could be made to such an important resource for students across America. The U.S. Department of Education's (DOE) mission is to make education accessible and equitable, but unfortunately, that narrative gets lost in a messy design. Coming from someone who has a lot of experience in the education sector, if there's one thing teaching is all about, it is scaffolding, or in UX terms, informational architecture. The information on this site holds so much importance, and with my redesign the people can actually access it.
Role -
Solo Project
Usability Researcher
Interaction Designer
Logo Designer
UI Designer
Overview
Background
In this hypothetical design challenge, I was inspired by the impact that could be made to such an important resource for students across America. The U.S. Department of Education's (DOE) mission is to make education accessible and equitable, but unfortunately, that narrative gets lost in a messy design. Coming from someone who has a lot of experience in the education sector, if there's one thing teaching is all about, it is scaffolding, or in UX terms, informational architecture. The information on this site holds so much importance, and with my redesign the people can actually access it.
Role - Solo Project
Usability Researcher
Interaction Designer
Logo Designer
UI Designer
Research
Getting to know the problem
Interviews
I conducted 3 interviews each consisting of 5 questions.
Carol
56, F
Parent
Carol
56, F
Parent
Chelsea
30, F
Educator
Chelsea
30, F
Educator
Daniel
38, M
Parent
Objectives
Why do people visit the DOE?
What first impressions do people have when viewing the DOE?
2
1
2
Learnings
Reputable and important site 🤝
People feel overwhelmed 😰
Audit
I began deconstructing the site through annotations to get a better idea of where and why this disconnect—reputable and important yet overwhelming and confusing—was happening.
Home Page
Student Loans Page
Grants Page
Learnings
unnecessary links
poor informational architecture
lack of hierarchy
inefficient use of white space
overuse of jargon
unnecessary links
poor informational architecture
lack of hierarchy
inefficient use of white space
overuse of jargon
Learnings
Finding a Solution
How Might We…
How might we improve the informational architecture to make navigation seamless?
How might we update copywriting to be educational, inclusive, and inviting?
How might we create a user interface that is fun yet inspirational?
Card Sorting
4/5
participants sorted grants and loans into separate groups
100%
grants and loans were placed next to each other
After dissecting the original site further, I noticed the grant and student loan pages had a lot of overlapping language. Grants and student loans are similar in that they help students pay for school, but there is a massive difference that every student needs to be aware of:
Grants do not usually need
to be paid back.
Student loans usually must be paid back.
Research
Getting to know the problem
Analysis
Getting to know the user & finding a solution
What's the Main Problem?
Defining the User
How Might We…
How might we improve the informational architecture to make navigation seamless?
How might we update copywriting to be educational, inclusive, and inviting?
How might we create a user interface that is fun yet inspirational?
Card Sorting
4/5
participants sorted grants and loans into separate groups
100%
grants and loans were placed next to each other
After dissecting the original site further, I noticed the grant and student loan pages had a lot of overlapping language. Grants and student loans are similar in that they help students pay for school, but there is a massive difference that every student needs to be aware of:
Grants do not usually need to be paid back.
Student loans usually must be paid back.
Problem:
Finding ways to pay for higher education is unavoidable and often times stressful for students. Grants and loans through the DOE are a great way to reduce those anxieties, but the current site is confusing and cluttered leaving students frustrated and stressed.
Analysis
Getting to know the user & finding a solution
User Path
Apply for a Direct Subsidized Loan
The ultimate goal was to help users apply for a loan in a quick and easy manner while also educating them along the way about the differences between grants, loans, and the different types of loans.
Wireframes
Low-Fi/Sketches
Mid-Fi
Defining the User
User Summary
Our user is:
first generation college student
has no background in the college process
qualifies for federal aid
needs a student loan in addition
Rebranding
Grants
Option 1
Grants
Option 2
Problem:
Finding ways to pay for higher education is unavoidable and often times stressful for students. Grants and loans through the DOE are a great way to reduce those anxieties, but the current site is confusing and cluttered leaving students frustrated and stressed.
Mobile Side Menu
“Side menu might be better with a strong border.” - Andrew
Mobile Side Menu Updated
High-Fi Wireframes
Brainstorming
Creating the solution
User Path
Site Mapping
Grants & Loan Page
Apply for a Direct Subsidized Loan
The ultimate goal was to help users apply for a loan in a quick and easy manner while also educating them along the way about the differences between grants, loans, and the different types of loans.
Footer
“Consider switching the white and purple gradient on the footer so the white of the website slowly transitions to purple.” - Veronica
Footer Updated
Final Results
Loan Repayment Options
“Buttons without extra info should be fully clickable rather than having a ‘learn more’ button.” - Innes
Loan Repayment Options Updated
Apply for a Direct Subsidized Loan
Brainstorming
Creating the solution
Problem:
Finding ways to pay for higher education is unavoidable and often times stressful for students. Grants and loans through the DOE are a great way to reduce those anxieties, but the current site is confusing and cluttered leaving students frustrated and stressed.
Solution:
Redesigning the UI style guide, adding student-friendly copywriting, and using proximity to help students compare and contrast grants and student loans.
Impact:
Simplified the process of applying for a loan or grant and educated the public along the way.
I thoroughly enjoyed this project. I found myself getting lost in details before hammering out the main ideas. I learned to pause and go back to the basics in times of confusion and feeling overwhelmed. It helped me a lot to either sketch out ideas or simply throw together some wireframes to get my initial ideas onto paper.
Sometimes in a wake of confusion, I’d rather just jump in and try to figure it out as I go. At times, it works out, but when it becomes clear that my splashing and thrashing is not offering any solutions, I need to take a step back and look at the big picture.
Wireframes
Low-Fi/Sketches
Site Mapping
Grants & Loan Page
Mid-Fi
Grants - Option 1
Grants - Option 2
Grants Page
Layout Feedback
Users overwhelming preferred option 2
Having the grant description and CTA redirect separate offers better hierarchy
Doing full width cards looks cleaner and creates more white space and breathability
Impact:
Simplified the process of applying for a loan or grant and educated the public along the way.
Learnings and Reflections
Next Steps
Rebranding
UI Style Guide
Education is beautiful, enticing, and transformative. Education is also challenging, contested, and formal. To combine these two elements I was inspired to create an experience where playful inspiration meets serious academia.
Some asked me why I did not opt for the traditional colors of US government sites--red, white, and blue. Due to the 10th Amendment, education is primarily run by the state, not the federal government. It continues to be a contested issue, so in an effort to remain inclusive (part of the Department of Education mission statement), the site veered away from the traditional United States color palette.
Solution:
Redesigning the UI style guide, adding student-friendly copywriting, and using proximity to help students compare and contrast grants and student loans.
Implementing
Bringing the solution to life
High-Fi Wireframes
High-Fi Wireframes
Mobile Side Menu
“Side menu might be better with a strong border.” - Andrew
Footer
“Consider switching the white and purple gradient on the footer so the white of the website slowly transitions to purple.” - Veronica
Loan Repayment Options
“Buttons without extra info should be fully clickable rather than having a ‘learn more’ button.” - Innes
Mobile Side Menu
“Side menu might be better with a strong border.” - Andrew
Footer
“Consider switching the white and purple gradient on the footer so the white of the website slowly transitions to purple.” - Veronica
Loan Repayment Options
“Buttons without extra info should be fully clickable rather than having a ‘learn more’ button.” - Innes
Mobile Side Menu Updated
Footer Updated
Loan Repayment Options Updated
Mobile Side Menu Updated
Footer Updated
Loan Repayment Options Updated
Implementing
Bringing the solution to life
Final Results
Wireflows
Apply for a Direct Subsidized Loan
Impact:
Simplified the process of applying for a loan or grant and educated the public along the way.
Conclusion
Looking back and looking ahead
Problem:
Finding ways to pay for higher education is unavoidable and often times stressful for students. Grants and loans through the DOE are a great way to reduce those anxieties, but the current site is confusing and cluttered leaving students frustrated and stressed.
Solution:
Redesigning the UI style guide, adding student-friendly copywriting, and using proximity to help students compare and contrast grants and student loans.
Impact:
Simplified the process of applying for a loan or grant and educated the public along the way.
Learnings and Reflections
Next Steps
Building out the other main pages:
Statistics
Law
Pre-K
About Us
Finding ways to merge the Federal Aid site and the DOE site for user convenience
Conduct usability testing for quantitative impact data
Fin
Conclusion
Looking back and looking ahead
Get in touch
Get in touch