PROJECT OVERVIEW
Hypothetical Project
Solo Project
User Research
Design Audit
Wireframes
Branding
Interactive Prototyping
Objective
Make the information on the U.S. DOE site more accessible and informational for college students.
TOOLS
Figma
Miro
Adobe Illustrator
The Problem
The current DOE site makes it hard for college students to access vital information about grants and loans because of unclear language and messy informational architecture.
The Solution
Create a main page that combines Grants and Loans that then branches off into separate grant and loan subpages in order to help students compare and contrast grant and student loan information.
The Impact
Simplified the process of applying for a loan or grant and educated the public along the way.
RESEARCH
Getting To Know The Problem
Objectives
With my background in education, I have a passion for making anything and everything education-related accessible and empowering. I knew this site needed some updates, but I wanted to be sure I was focused on the most mission critical issues for the user. I focused my research around these objectives:
1. I want to know why people visit the DOE site.
2. I want to know what first impression people have when visiting the DOE site.
Interviews
I wanted to hear from users directly while observing them navigate the original DOE site.
Interviewees
I wanted a diverse panel of interviewees so I could gain multiple perspectives including educators, parents, and recent students.
Carol
Parent
56, F
Daniel
Parent
35, M
Chelsea
Educator
30, F
Reputation
Main Takeaway
There’s a disconnect. The DOE has a strong reputation, yet the site comes across as chaotic and overwhelming.
DESIGN AUDIT
I wanted to close the gap between being reputable yet having an overwhelming layout. I conducted a heuristic analysis of each main page, but ended up zeroing in on grants and loans. I was inspired by recent events in the U.S. government spurring conversations about the Student Loan Repayment Plan.
Home Page
Grants Page
Student Loans Page
Main Design Flaws
Unnecessary links
Poor informational architecture
Lack of hierarchy
Inefficient use of white space
Overuse of jargon
Card Sorting
I assumed the poor information architecture played a large role in making the overall site overwhelming and unprofessional, so I asked 5 different users to card sort the site map. I focused my attention on the grants and loans portion.
4/5
participants sorted grants and loans into separate groups
100%
of participants placed grants and loans next to each other
Insights
Users know grants and loans are similar yet different. They should be near each other because they are associated but separated because they have distinct differences.
The Problem
The current DOE site makes it hard for college students to access vital information about grants and loans because of unclear language and messy informational architecture.
ANALYSIS
HOW MIGHT WE…
I focused my analysis and problem solving around these questions:
Improve informational architecture to make applying for a grant and/or loan seamless?
Update the copywriting to clarify the similarities and differences of grants and loans?
Create a user interface that is fun yet inspirational?
USER PERSONA
I wanted to focus on students getting ready to go to college. It was important to me that I represented a first-generation college student to ensure the information was laid out as clearly as possible. Everyone deserves access to an education and this was one way to ensure that.
Corbin Sanchez
18 years old
Recent High School Graduate
Dallas, TX
"I'm the first in my family to go to college."
“I’m scared to take out student loans, but it’s my only option.”
“I want to become a doctor so I can make my family proud.”
Grants Vs. Student Loans
It was clear that grants and student loans needed some clarification, so I made it plain and simple and prioritized incorporating this information into the redesign.
Grants
1
Do NOT need to be paid back.
2
Many different applicants.
Loans
1
Must be paid back.
2
Only students can apply.
The Solution
Create a main page that combines Grants and Loans that then branches off into separate grant and loan subpages in order to help students compare and contrast grant and student loan information.
BRAINSTORMING
Creating the Solution
USER PATH
Student loans are a common avenue students use to pay for college. To represent these users and help them get the financial support they need, I focused on this specific task.
User Task
Apply for a direct subsidized loan.
SKETCHES
I started quickly sketching up some layout ideas to help enhance the informational architecture and hierarchy. I focused on the grants and loans page.
MID-FI Wireframes
Grants and Loans Page
I started with the grants and loans page, because this would be the main page users would be able to compare and contrast the difference between grants and loans.
A/B Testing
Because grants and loans are mistaken as interchangeable, I anticipated users navigating to the wrong page. To help users ensure they were getting the correct information, I surfaced and separated assumed common user errors with improved actionable UX copywriting to make it easier for the user to correct their mistakes. I created two layouts, and I wanted to know which layout was preferred.
Users Preferred Option 2
more white space
easier to browse
grant description made more prominent
UI Style Guide
Education takes on many forms, so I challenged myself to lean into the complexity. My goal was to create a space where serious academia meets playful inspiration.
The purple represents royalty and the serious academia side of education. It also doubles as an equal representation of U.S. politics because due to the 10th amendment, education is primarily run by the state, not the federal government.
The orange added a fun contrast as it represents energy, excitement, and adventure. It’s a reminder that education should be playful and inspiring.
Lastly, I chose the butterfly to represent transformation and change. Education is so powerful as it can open so many doors for so many people. I wanted users to feel excited about their journey the second they visited the site.
IMPLEMENTING
Bringing the Solution to Life
Wireflows
The Impact
Simplified the process of applying for a loan or grant and educated the public along the way.
Final Results
CONCLUSION
Looking Back & Looking Ahead
The Problem
The current DOE site makes it hard for college students to access vital information about grants and loans because of unclear language and messy informational architecture.
The Solution
Create a main page that combines Grants and Loans that then branches off into separate grant and loan subpages in order to help students compare and contrast grant and student loan information.
The Impact
Simplified the process of applying for a loan or grant and educated the public along the way.
Learnings and Reflections
This project started out very unorganized. I had a hard time deciding what pages to redesign. I started out by redesigning all the main pages, but I soon realized having a clear user path would allow me to be more intentional and create a greater impact for the user. The positive is that I ended up redesigning way more pages than this case study covers, and I had a blast doing it. In the future, however, I aim to set my intentions early on so all my hard work aligns to bring a better experience for the user.
Next steps
Building out the other main pages of the website
Finding ways to merge the Federal Student Aid site and the DOE for user convenience
Conduct usability testing for quantitative impact data
Fin
