Content Strategy
Information Architecture
User Research
Web Design
SEO Strategy
BYU-Idaho
From Chaos to Clarity: Financial Aid Website Makeover
How I led a team that transformed a confusing and unorganized site into a student-friendly guide for financial aid success.
Quick Overview
My Role
Senior UX Designer
Duration
4 Months
The Team
|
Goal
|
Guiding new UX designers
My role as mentor
In this role, I led a team of student employees who were just beginning their UX design journey. My responsibility was to teach, mentor, and manage the project while coordinating with stakeholders.
The students learned the design process, developed solutions, and presented their work to stakeholders. Their final designs demonstrate the team’s growth and contributions while also delivering a meaningful solution for both the students and the financial aid office.
BYU-Idaho UX & Web team
The Problem
How did it get this way?
Over the years, stakeholders had added content with the best of intentions trying to cover every possible question a student might have. But instead of clarity, the site had become a maze. Pages were overloaded. Navigation was chaotic. And users, especially students, didn’t know where to start.
Before content strategy and after content strategy…big difference!
it's deeper than a layout
As part of the university web team, I took the lead on rethinking the information architecture (IA) from the ground up. This wasn’t just a design task, it was a restructuring challenge. This required deep research, stakeholder alignment, and content strategy.
Research as the background
We kicked off the project with a three-month research phase.
The UX Research team conducted 116 interviews and usability studies, which revealed three primary user personas. All three groups wanted clear, simplified, and concise information, with many requesting a step-by-step format.
We learned that:
Financial aid is an overwhelming and confusing process for both current and future students.
Current terminology often went over users’ heads.
FAFSA (Federal Student Aid) information was difficult to find and understand.
Stakeholder Collaboration
feedback from both sides
Throughout the process, our student employees took the lead in collaborating with Financial Aid stakeholders. They met weekly to validate decisions, share wireframes, and ensure stakeholder needs were being met. This experience gave the students a valuable opportunity to learn how to work directly with stakeholders, build confidence in presenting their ideas, and grow professionally.
The collaborative nature of these meetings also kept the project aligned and fostered buy-in, which made implementation smoother.
Team progress with ideation whiteboards and attending stakeholder meetings
Jumping into information architecture
identifying the mental model
We ran multiple brainstorming sessions with the UX team, content experts, and stakeholders. Inspired by the research feedback that “people just want a guide,” we landed on a step-by-step based content structure. That structure became the backbone of our process.
We categorized content into four primary phases:
Explore Your Options
Apply for Aid
Receive Your Funds
Keep Your Aid
Categories in a step-by-step guide
current state ai audit
We used AI to run an audit of the current site and to streamline the analysis and sorting of the results. We also used tools like Claude, NotebookLM, and ChatGPT to handle some of the more tedious tasks, helping us access current information and ensure no content was missed.
addressing project overwhelm
Giving the students this project, it was quickly appearant that this tast was very overwhelming for them and they had a hard time starting. We worked together to create a design strategy, starting with organizing, then jumping into things section by section. Starting with our "Explore" section then to the next 3 steps.
Categorizing our shared Figma file and utilizing the "comment" tool to avoid overwhelm
Overcoming roadblocks
While restructuring, we faced several challenges. There is so much information a student needs to understand. For example, within the FAFSA category, content could range from a simple overview to very specific cases such as a transfer student with fewer than six credits who is not attending that semester.
We ultimately settled on the following solution:
Keep main site pages overview-oriented and easy to skim.
Add a dedicated FAQ section module for edge-case questions.
Create a help and definitions section to clarify confusing terminology.
The FAQ pages with left side navigation
The final result
🚀 Live site launching end of September 2025!
a simplified homepage
We streamlined the homepage to focus on the five core topics students need to see first. This approach effectively meets the needs of all three user personas, while the updated typography gives the page a cleaner, more modern look.
Financial Aid homepage prototype
Clearing up scholarship confusion
We organized all types of aid under the “Explore” section, starting with a high-level overview that gradually narrows into specific qualifications. This structure supports both students who are browsing and those looking for quick, direct answers. Each detailed page also links to related FAQs for hyper-specific scenarios.
Explore showing all scholarships available with simple scholarship pages
View full figma prototype 🔗
Creating a Skimmable Experience
One of my favorite parts of reworking the information architecture was identifying which high-level content should come first. We replaced long paragraphs with graphics, bulleted lists, and charts to make the content easier to skim and more user-friendly.
The example below shows the before and after of the Academic Scholarships page. It was important to make it easier for a student to visually skim. Simplifying the information into charts, short paragraphs, and moving some content to FAQs.
Example: Academic Scholarships
Before
No information flow
Information overload, too much content
Hard to skim
After
Information flows (simple to more detailed)
Less content, easier to find
Quick skim while still finding details
Before and after of the Academic Scholarships page
Example: FAFSA overview
Before
High level and detail mixed together
Too much edge case content
Lots of text & reading required
After
Clear information flow (high level to details)
Edge case content moved to FAQ's section
Visual hierarchy established
Before and after of the FAFSA Overview page
Anticipated Impact: Fewer Calls, Less Confusion
While the new designs are currently being applied, we’re anticipating significant impact:
Reduced call volume to the Financial Aid office for simple tier 1 questions.
Fewer student support tickets for tier 1 issues (ex. "where is my money?")
Improved engagement metrics and interaction with FAQ section.
Increased FAFSA applications for Winter and Spring semesters.
And most importantly? A smoother, less stressful experience for students trying to navigate the often confusing world of financial aid.
Key Takeaways
Reorganizing the Financial Aid site was like decluttering a messy room—making it easier to find what you need and more pleasant to navigate. This project reminded me that sometimes UX simply means taking a step back to see the full picture: understanding how people actually use a tool, rather than how we assume they do. It’s easy to underestimate the power of information architecture, but when done well, it can turn confusion into confidence.
One of the most rewarding parts of this project was guiding student designers from the very beginning. Starting with research, all the way to a final product that impacts thousands of users. By giving them hands-on ownership and real stakeholder collaboration, they not only learned the process but helped deliver meaningful change. It took patience, iteration, and a lot of listening, but the outcome was well worth it.
What's next?
More case studies →
