A tool that helps students determine their eligibility for in-state tuition.
Overview
Overview
Role Designer
Team 4 designers, 2 developers, 2 PMs
Timeline 12 weeks
Tools Figma
Timeline
Team
Role
Tools
16 weeks
4 designers, 2 developers 2 PMs
Designer
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!
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!
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!
Overview of my design process
⋆ ˚｡･*⋆
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.
Instructions
Fill Form
Review
Results
The instruction outlines what users can expect to complete in the form
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
There were 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 affected their eligibility. UI wise, the tool was outdated and did not adhere to the brand identity.
The Solution
Now, students can access additional information, instructions, and definitions within the ISTT. The tool also communicates whether the inputs affect eligibility and explains why a student qualifies or not, and— if not—offers actionable next steps to qualify in the future.
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?
🖼️ 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?
💡 The Opportunity
⋆ ˚｡･*⋆
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
Success Metrics
⋆ ˚｡･*⋆
Research
We conducted research to uncover users' pain points (e.g., point of confusion, loss of trust)
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?
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
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
I'd have to go to a guidance counsellor since I'm not familiar with all the different definitions and rules
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
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.
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
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!)
Research
⋆ ˚｡･*⋆
PART 2
Define
Define
From Feedback to Insight
5 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
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!
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
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.
Since the ISTEC 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.
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!
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
Example of our key design decisions
⋆ ˚｡･*⋆
PART 3
Design
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.
Long-form
Multi-selection form
Horizontal Stepper
Vertical Stepper
Originally, the ISTT was a 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.
Long-form
Multi-selection form
Decision 2
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.
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.
Horizontal Stepper
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
Scroll to see the 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
Scroll to see the hi-fi wireframes
After finalizing the form flow and design, we designed mid-fi wireframes and tested them with 3 users.
Mid-fi Wireframes
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
Several edit buttons, overwhelming users
After
✅
Reduced edit buttons, added action oriented text labels (e.g., edit)
After
Comparison of 2 iterations of the "review" page
Challenge 2
Increasing Transparency
💡Solution
💡 Solution
💡 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
User Journey Map
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
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.
Design Challenges
🔄 Iterative Design
Before
❌
Colour red = negative user experience
❌
Low contrast colour for the requirements not met and met
After
✅
Higher contrast colour
✅
Change colour red to yellow
✅
Save to PDF feature
Comparison of 2 iterations of the "eligibility results" page
Design Challenges
Before
❌
Several edit buttons, overwhelming users
✅
Reduced edit buttons, added action oriented text labels (e.g., edit)
After
Comparison of 2 iterations of the "review" page
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
⋆ ˚｡･*⋆
PART 4
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.
Desktop, tablet, and mobile breakpoints
Desktop, tablet, and mobile breakpoints
Desktop, tablet, and mobile breakpoints
Desktop, tablet, and mobile breakpoints
Desktop, tablet, and mobile breakpoints
Desktop, tablet, and mobile breakpoints
Desktop, tablet, and mobile breakpoints
Desktop, tablet, and mobile breakpoints
Desktop, tablet, and mobile breakpoints
Desktop, tablet, and mobile breakpoints
Desktop, tablet, and mobile breakpoints
Desktop, tablet, and mobile breakpoints
⋆ ˚｡･*⋆
Accessibility Check
Breakpoints ensure a seamless user experience across different devices by adapting the layout, content, and interactions to various screen sizes.
To start, the ISTT outlines the steps to calculate eligibility to increase clarity and transparency.
Next, students answer 10-20 questions about their education and immigration status.
Next, students can edit and review their responses on the same page.
Lastly, the ISTT calculates eligibility and explains why the student is or is not eligible. For those who aren't eligible, the tool also suggests next steps to take to qualify in the future.
To start, the tool outlines the the steps to calculate eligibility to increase clarity and transparency.
After students answer all questions, they can review and edit their responses.
Lastly, the tool calculates eligibility and explains why the student is or is not eligible. For those who aren't eligible, the tool also suggests next steps to take to qualify in the future.
⋆ ˚｡･*⋆
PART 6
Reflection
Demo Day @ Develop for Good
What did I learn and take away?
I want to express my heartfelt gratitude to my fellow team members and mentors at Develop for Good! This was such a meaningful experience to learn and grow, especially as an early-stage designer. Through this collaborative experience, I've been able to contribute to a meaningful product that will positively impact the lives of countless students!
Creative vision, practical execution
I developed the ability to balance innovative design thinking with real-world implementation requirements, especially with the technical constraints of my designs and code. By understanding platform limitations and user needs simultaneously, I crafted solutions that were both visually compelling and technically feasible. This approach allowed me to generate creative concepts while ensuring they could be effectively created by the developers within project constraints and timelines.
Cross-functional collaboration is key!
Working across disciplines with stakeholders, designers, developers, and product managers taught me to navigate diverse perspectives effectively. By learning what matters to each role, I connected what the business needed with what users wanted. I learned to explain my design choices in simple terms, get everyone on the same page, and use feedback from different viewpoints. These skills helped me create a product that worked well technically, met company goals, and made users happy.
Thank you for visiting ⋆˙⟡.˚
I'm always happy to chat — please connect so I can get to know you!
