In-State Tuition Tool (ISTT)
A tool that helps students determine their eligibility for in-state tuition.
Overview
Role
Designer
Team
4 designers, 2 developers, 2 PMs
Timeline
12 weeks
Tools
Figma
TL;DR
Many students pay up to three times more in out-of-state tuition because they don’t qualify for in-state tuition. As a UX/UI designer, I worked on Immigrant Rising’s In-State Tuition Tool to support students in navigating the path to eligibility. My design process included user research, synthesis, wire-framing, prototyping, iteration, and design-to-development handoff. I ultimately delivered a responsive prototype to key stakeholders and I'm happy to share that the product has since shipped!
⋆ ˚｡･*⋆
Immigrant Rising 🤝 Develop For Good
Immigrant Rising, an NPO that strives to make education more accessible and affordable, came to my team at Develop for Good, an NPO that connects student volunteers to tech projects for other NPOs, to improve their widely used In-State Tuition Tool (ISTT), which supports over 20,000 students.
The Problem
The ISTT had many points of confusion, making it difficult for students to input the correct information. Many also stated a lack in transparency about why it needed their personal information and whether it would affect their eligibility. UI wise, the tool was outdated and did not adhere to the brand identity.
The Solution
In the redesign, students can access additional information — including external resources — directly within the ISTT. The tool also clearly communicates whether the inputs affect eligibility, explains why a student qualifies or not, and, if needed, offers actionable next steps to qualify in the future.
TRY OUT THE FINAL SOLUTION
Discover
PROBLEM SPACE
🖼️ Picture this
Your dream college is in California, but as an out-of-state student, you'll have to pay up to three times more in tuition. You learn that you can qualify for in-state tuition (!) if you meet the right attendance and degree requirements — what do you do next?
Typically, students turn to academic advisors, not realizing they can take the first step toward eligibility on their own. The ISTT simplifies this process—allowing students to check and track their eligibility anytime, anywhere. However, the original tool was complex and confusing. That’s why we redesigned the ISTT: to make navigating towards in-state tuition clearer, more accessible, and student-friendly.
💡 The Opportunity
How might we increase clarity and transparency of the ISTT to help students accurately calculate their eligibility and determine their next steps to qualify for in-state tuition?
⋆ ˚｡･*⋆
PROJECT GOALS
💼
Business
To provide a more trusted source of support for students by leveraging the ISTT
💫
Design
To instill trust, support, and confidence in qualifying for in-state tuition—while also updating the tool to the brand design guidelines
💻
Product
To develop an innovative, student-friendly tool that simplifies the in-state tuition eligibility process.
SUCCESS METRICS
I worked with project managers to define success metrics for our project goals and identified key quantifiable challenges to improve.
✅
Higher Accuracy
Increase accuracy of responses
🙌
Higher Completion
Increase completion rates
📱
More Devices
Responsive design on mobile and tablet
⋆ ˚｡･*⋆
RESEARCH
We conducted research to uncover users' pain points (e.g., point of confusion, loss of trust)
🧑Users
Since most users are students, we recruited research participants for our interviews from Immigrants Rising’s student network—students who had previously used the NPO’s resources and support.
User Interviews
Prior to this project, Immigrants Rising had already conducted user interviews. To make the most of our time and resources, we turned the interviews into insights and worked on other research.
What's going to happen if I don't qualify? Is there something I can do to still qualify?
If there were a tool to help me plan towards qualifying for in-state tuition— not just calculate — I'd use it
I'd have to go to a guidance counsellor since I'm not familiar with all the different definitions and rules
Usability Tests
We conducted usability tests with students to better understand their journey through the form flow. We tested the present flow and the re-designed flow (more on this later!)
Example of rough work from our usability tests
Define
FIVE STAGES OF SYNTHESIS
We synthesized users feedback from user interviews and usability tests and turned them into meaningful ideas to drive our designs. Check out the different stages of ideas in sticky notes!
Example of rough work from our 5 stages of synthesis
⋆ ˚｡･*⋆
USER JOURNEY MAPS
In addition the synthesis, we created a user journey map to visualize the form flow experience. This makes it easier to understand user pain points and the underlying reasons within the journey.
User Journey Map
⋆ ˚｡･*⋆
DEFINING THE DESIGN DECISIONS
From our synthesis and user journey map, we were able to define a set of design decisions to drive our designs. Check out some key design decisions!
Example of our key design decisions
Design
USER FLOW
Before redesigning the ISTT, we revisited the existing user flow to improve:
1.
User Accuracy
We added a review page, allowing users to review and edit infomration in the same page before submitting
2.
Eligibility Transparency
We added an intro page to set clear expectations and a results page to explain eligibility results and next steps
User Flow
⋆ ˚｡･*⋆
FORM DESIGN
Since the ISTT is a form, we started our redesign by understanding form design. We wanted to ensure we had the best form layout to support the tool — this came down to 2 design decisions.
⚖️ Decision 1
Long-Form vs Multi-Section Form
Long-form
Multi-selection form
Comparison of long-form vs multi-section form
Originally, the ISTT was one long form. To simplify it, we introduced a multi-section form, breaking it into shorter sections to complete one at a time. These sections are part of a logical progression, creating a less complex and more intuitive user experience.
⚖️ Decision 2
Horizontal vs Vertical Stepper
Horizontal Stepper
Vertical Stepper
Comparison of horizontal vs vertical stepper
To show users progress through the multi-section form, we added a stepper but debated between a horizontal and a vertical stepper. Horizontal steppers work well for long-forms with lots of scrolling. Vertical steppers work well for forms with lots of space on the sides of the screen, optimizing screen space. This also aligns with users' natural reading (left to right), ensuring information in the stepper is visible. Ultimately, we decided on a vertical stepper.
⋆ ˚｡･*⋆
WIREFRAMES
After finalizing the form flow and design, we designed mid-fi and high-fi wireframes and tested them with 3 users.
Mid-fi Wireframes
Scroll to see the mid-fi wireframes
⭐️
Aligning with stakeholders
We reviewed wireframes with our key stakeholders before proceeding to higher fidelity. These included the director of technology and director of education.
Hi-fi Wireframes
Scroll to see the hi-fi wireframes
⋆ ˚｡･*⋆
Design Challenges
CHALLENGE 1
Improving Users' Accuracy and Completeness
💡 Solution
Add Tool Tips and Integrated 'Learn More' Links
We added tooltips and a 'Learn More' link to improve clarity and context. However, 'Learn More' links, if used alone, leads to ambiguity and loss of information scent. So, we integrated them into the content to open a pop-up on the same page, rather than redirecting users to a separate page. Both tooltips and 'Learn More' links are user-triggered to offer users control over the content.
💡 Solution
Enable In-Page Review and Edit
We added a review page so users can review and edit their information without navigating back and forth through the form. This aims to reduce errors.
🔄 Iterative Design
Before
❌
Several edit buttons, overwhelming users
After
✅
Reduced edit buttons, added action oriented text labels
Comparison of 2 iterations of the "review" page
CHALLENGE 2
Increasing Transparency
💡 Solution
Break Down Eligibility Results and Next Steps
The ISTT calculates eligibility and explains why the student qualifies or not. In addition, the tool offers next steps for students who do not qualify. This significantly improves the user experience as many students struggle to understand how to qualify, necessitating a step-by-step guide integrated into the tool.
🔄 Iterative Design
Before
❌
Low contrast colour for the requirements not met and met
❌
Colour red = negative user experience
After
✅
Higher contrast colour
✅
Change colour red to yellow
✅
Save to PDF feature
Comparison of 2 iterations of the "eligibility results" page
Develop
RESPONSIVE DESIGN
The non-profit wanted to extend the design to both mobile and tablet devices. This meant my team needed a robust design system that would enable use to scale to different screen sizes.
Design System
We built a design system to ensure consistency and scalability across different devices. We leveraged the non-profit's existing brand guidelines to ensure seamless integration with their technology stack.
Design System
Breakpoints
Breakpoints ensure a seamless user experience across different devices by adapting the layout, content, and interactions to various screen sizes.
⋆ ˚｡･*⋆
ACCESSIBILITY CHECK
Breakpoints ensure a seamless user experience across different devices by adapting the layout, content, and interactions to various screen sizes.
