Collatch

Overview

The problem with college search for international students

One of the biggest challenges international students face when applying to U.S. universities is the fragmented and limited information available online that caters specifically to them.

Sites like TopUniversities and Niche exist and might seem like they provide good insights, but the content is garnered from data of the average student body where local students make up the majority. As an international student in a U.S. college myself, I remembered how so many things about my college were not as they seemed online — how different my expectations vs. realities were of the schools that I chose.

I wished that there was a way I could have found out more before committing.

Solution

A personalized college-matching app

To design an app that centralizes information specifically for international students and allows them to read and compare information about U.S. schools based on their personal goals.

User Research

Understanding the international student experience

For this research, I surveyed international students who studied in the U.S. for either undergraduate or graduate programs. My target users were individuals who had already gone through the college search process, allowing me to dig deeper on how they felt during their decision-making phase versus how they felt in the schools they chose.

Survey Insights

🇸🇬

🇲🇾

🇻🇳

🇨🇳

🇮🇩

🇰🇷

🇨🇦

🇹🇭

I surveyed 14 international students from 8 countries and discovered these main pain points

→

International students felt that ...

... choosing a U.S. college was overwhelming because no single tool helped match schools to their personal goals.

... rankings alone weren't enough, and wanted recommendations based on career outcomes or long-term goals.

... existing school recommendation sites didn't tailor to international students.

... information was scattered across too many platforms.

Interview Insights

For the interviews, I spoke with 3 international students who studied in the U.S. at different academic stages to deeply understand their decision-making process, the criteria they used when choosing schools, and how their expectations compared to their lived experiences after enrolling.

🧑‍💻

Jun 🇲🇾

Malaysia

B.S. Software Engineering, Purdue University '24

"Purdue had the best Mechanical Engineering program in the country so I decided to go for that."

"I looked for programs where I could explore before choosing a specialization."

👩‍🔬

Esther 🇹🇼

Taiwan

B.S. Chemistry, Purdue University '24
Ph.D. Analytical Chemistry, Georgia Tech '30

"… I cared more about the reputation of the school and the overall ranking."

"I chose Chemistry because it suited my strengths and I was strong at it in high school."

👩‍💼

Cecilia 🇸🇬

Singapore

B.A. Economics, New York University '22
M.S. Integrated Product Design, UPenn '27

"I ultimately chose Penn because of its prestige and accessibility among the other schools."

"I prioritized interdisciplinary programs because I didn't know what I wanted to do."

Insight Statements

Based on my research, I developed an insight statement and a "How Might We" question that drove the direction of my design.

As an international student, I want to be able to explore schools based on my personal priorities, so that I can choose a university that best aligns with what I want.

How Might We

How might we tailor school recommendations based on international students' individual needs and constraints?

Ideation

From sketches to wireframes

Drawing inspiration from dating apps, I wanted the user journey to start off with a questionnaire that allows the user to select the attributes that were most important to them. Questions were drawn directly from research which included ones that are not typically asked and to tailor specifically to international students.

Brainstorming & Initial Sketches

Low-Fidelity Wireframes

Next, I developed lo-fi wireframes based on the rough drawings of my design flow. This part was crucial as I wanted to get a good understanding of how I had to build out my questionnaire and school comparison pages.

Swipe to view all screens →

High-Fidelity Wireframes

Bringing the design to life

Version 1 — Initial Pastel Palette

For the initial version, I played around with a pastel-like color palette as I wanted the site to feel inviting and youthful. For the questions and main components, I standardized them to purple, pink, and blue.

Swipe to view all screens →

User Testing & Feedback

Iterating based on real feedback

I did user testing with 6 individuals. Through these sessions, I gained a few key insights on what to change:

Issue: Users mentioned their confusion with the buttons, stating there was not enough differentiation between the BACK and NEXT buttons. The shape of the buttons were also too similar to the text boxes.

✅ Clearer disabled/enabled buttons · Changed to pill-like shape

Before

→

After

Issue: Users pointed out the % matches appeared again in the comparison page — they thought it should be removed since schools would've already been added to their respective categories. It added clutter to an already crammed screen.

✅ Removed the % bubbles · Clearer separations between categories

Before

→

After

Version 2 — Refined Interactions

In between my interviews, I continuously iterated along the way. Version 2 kept the same pastel color palette as I worked towards changing other design features based on user feedback.

Swipe to view all screens →

In addition to the feature changes, I knew I had to change the color palette as I felt that it was too playful for my app's idea. This brought me to my final design.

Final Design

The polished product

🔗 Prototype Link← click me!

I settled on one color and played around with its shades, resulting in a cleaner UI which significantly helped with making the app feel lighter. This also helped with the information-heavy pages, so the colors don't distract from the core content.

Question Screens

Swipe to view all screens →

Loading Animation

To bridge the gap between the questionnaire and results, I designed a clean dot loading animation — three dots pulsing in sequence to signal that Collatch is actively matching schools to the user's preferences. The minimalist approach keeps the experience feeling light and intentional.

Feature Screens

The app ranks schools by percentage match based entirely on the student's choices during onboarding, so no two students see the same results. Upon clicking into a school, each criterion is color-coded in green, yellow, or red, giving students a clear picture of how well a school fits what they care about most. From there, students can save schools to their personal list as a Target, Reach, or Safety.

Comparison

All saved schools sit side by side for easy comparison. In the prototype, swiping the criteria columns keeps all three sections in sync.

Profile

Students can revisit and adjust their preferences at any time, and the results will update to reflect their latest choices.

Colors & Fonts

Final Color Palette

Typography

Nunito

Why My Solution Works

Designed around what actually matters

This solution works because instead of pushing generic, ranking-driven recommendations like most existing platforms, it centers on international students and personalizes school matches around what actually matters to them — helping users find schools that genuinely fit their goals, priorities, and realities.