Case 05 · Product Design · Startup Concept

·change

An application built for exchange students.

Role
Lead Project Manager & Designer
Team
4 (design, dev, business)
Context
Innovation studio · startup pitch
Methods
Interviews · Fly-on-the-wall · SUS
Tools
Figma · Adobe XD
Process
Design thinking, end to end
Outcome
Hi-fi prototype + investor pitch
Market
6M international students
Research paper Investor presentation Live prototype
X-change: Translation into Practice. The login screen on a phone, partnerships and digital advertising, on a royal-blue banner
The mission

Safely connect foreign students in America.

Study abroad is growing every year, but a student's knowledge of their destination is built on online research and word of mouth. X-change is a social platform built only for exchange and international students, to share information, find people from home, and stay safe in a new country.

0M
International students worldwide, with no app for them
0%
Face financial & logistical challenges abroad
0%+
Of non-white students say cultural needs go unmet
Why it started

It began with a real student's frustration.

The team spent weeks hunting for a problem worth solving. The breakthrough came when our teammate, an exchange student herself, described what her own arrival in the US had actually felt like: confusing, isolating, and unsupported. That lived experience became the whole project.

Problem 01

No help with the logistics

Little to no service guides students through visas, local laws, COVID rules, or even how to get from the airport to campus without overpaying for a taxi.

Problem 02

No channel to meet people

There was almost no way to meet others from the same country or ethnicity, a key buffer against homesickness, and a hard ask for introverts.

Problem 03

No one source they trust

Universities focus on the business of hosting students. The lifestyle, safety, and belonging side gets left to chance.

The process

Design thinking, end to end.

As lead PM and designer, I ran X-change through the full design-thinking loop. Research came first and shaped everything: we used three testing methods up front to strip out the team's assumptions before a single screen existed.

01 Empathize

Define the user

Micro-analyzed the audience into three subsets: international, introverted, and safety-conscious students. Named their real wants and needs.

02 Ideate

Shape the features

Translated frustrations into a feature set and a wireframe, sorting wants from needs so every screen earned its place.

03 Prototype

Build it in Figma

Designed a rough hi-fi prototype in Figma and Adobe XD across five core pages, structured around the verified subsets.

04 Test

Validate & refine

Ran a second round of SUS and A/B testing to fine-tune features and split needs cleanly across the app.

How we removed bias

Three ways to listen before designing.

Method 01

Formal interviews

Asked the target audience what they wanted to see. Interviews translated raw frustration into clear, designable wants and needs.

Method 02

Fly on the wall

Observed the difficult tasks and social barriers international students face firsthand, without prompting or leading them.

Method 03

SUS & A/B testing

System Usability Scale, user feedback, and journey mapping, so two versions could compete on real productivity, not opinion.

Who we built for

Two students, two journeys.

Personas kept the team honest. Shanté and Aria represented the introverted and the safety-conscious ends of the audience, and every feature was checked against their goals and frustrations.

User personas: Shanté Quinn, 20, design student from France struggling to meet people; and Aria Yuen, 21, biology student from Taiwan whose top priority is safety
User personas · Shanté Quinn (France) and Aria Yuen (Taiwan)

What students actually told us.

Interviews and fly-on-the-wall sessions surfaced the same ache again and again: existing resources flatten very different students into one "international" box. These are real voices from the research.

"I want to connect with other students that also speak my language and are from my exchange program."

Student from Taiwan, ethnically Burmese

"I hate how my only resources are multicultural clubs. We aren't the same people."

Student who is "Asian, not Asian American"

"I feel lied to about the program here. I wish I had resources to guide me with honesty, and to show me what I can do in my area now."

Student who feels "catfished by college"
The ideation

Five pages, each with a purpose.

The final architecture split the experience into five pages, each mapped to a real need. Safety is the number-one priority, so verification and document storage are built into the core, not bolted on.

Home · landing feed

Global posts, events, and verified reviews of schools, programs, and homestays. A feed tuned like TikTok or Instagram.

Network

A personalized view of groups and events from direct connections, nudging students out the door and into their community.

University

Followers, school descriptions, ratings, and reviews so a student can judge fit and find their community before arriving.

Profile · passport

Languages, embassy info, and secure storage for visa, passport, and vaccine card, tracking the student's journey and return.

Notifications

Events, connection requests, and region-specific safety and pandemic information surfaced when it matters.

Verification, throughout

University or program verification plus ID upload gate the whole platform. Safety is X-change's first principle.

The wireframes

Low fidelity first.

Before any color or brand, I sketched the five pages in grayscale to test structure on its own. Wireframes let the team argue about flow and hierarchy without getting distracted by visuals, and made it cheap to move things around after testing.

Login · verify
Home · feed
Network
University · reviews
Profile · passport
Medium fidelity

Adding color, content, and brand.

Once the structure held up, I brought the wireframes into medium-fidelity drafts: real copy, the X-change palette, the node logo, and the five-tab navigation. These are the working drafts where the feed, profile passport, and university reviews took their actual shape.

Medium-fidelity login screen with the X-change logo on a blue-to-mint gradient
COMMUNITY
Medium-fidelity home feed: stories, a homestay post, and a homestay rating
INSTITUTION
Medium-fidelity network screen: your events, past events, and your groups
LOG IN
Medium-fidelity university screen: The College of New Jersey with exchange and international counts, ratings, reviews, and population
HOME · FEED
Medium-fidelity profile screen: languages spoken, and a Taiwan-to-USA exchange journey tracker
Profile · passport
INTERACTIVE MID FIDELITY MOCKUP

The polished, clickable mid mockup.

The medium-fi drafts were refined into a high-fidelity, clickable mockup in Adobe XD, with every screen linked into a real flow. Tap through it below: login, the landing feed, network, university reviews, and the passport profile.

The interactive mockup.

Built in Adobe XD, the mid-fi mockup links every screen into a real flow so testers could click through tasks, not just look at static drafts. Each of the five pages was wired to the verified subsets of users we defined in research.

This is the same mockup I ran the second round of SUS and A/B testing on, then refined into the final design.

OPEN MID-FI MOCKUP IN XD
QR code linking to the X-change Adobe XD prototype
Scan to try it
Opens the live prototype on your phone
High fidelity

Refined with the research in hand.

The interactive mid-fi mockup did its job: it exposed where testers hesitated. The high-fidelity build is where I acted on that. The visual language went dark and glassy for contrast, the five tabs were re-balanced against cognitive load, and the safety-first verification flow was given real weight. Tap through the live screens below.

Home
Checklist
High-fidelity Community feed: verified exchange-student posts filtered by Visa, Banking, and Housing
Community
Network
High-fidelity Profile: verified student, exchange progress ring, stat tiles, and completed tasks
Profile

Safety, made tangible.

Verification is X-change's first principle, so the hi-fi gave it a dedicated, reassuring flow: explain why, upload the student ID, and confirm, with encryption stated plainly to lower anxiety at the most sensitive step.

Verify your identity screen: why we verify, upload student ID, and an encryption reassurance
Verify · upload ID
Verify your identity screen after upload: student_id.jpg uploaded, ready to submit for verification
Verify · confirmed

What changed from mid-fi, and why.

Every shift between fidelities was driven by the second round of testing, not aesthetics. Three changes mattered most.

Events near you Home

One screen was doing too much

The mid-fi crammed events, feed, and updates into a single "Events near you" view. NASA-TLX scores flagged it as a cognitive-load spike, too much information architecture in one place. In hi-fi, the feed became its own focused Home, so no single screen overloads the user.

NASA-TLX · cognitive load ↓
Profile draft Profile

Progress had to be glanceable

Students needed to gauge their settling-in progress and completed tasks at a glance, not read a list. Hi-fi introduced the exchange-progress ring, stat tiles, and a completed-tasks panel, and demanded high contrast, which is exactly why the dark glass panes were introduced.

Visual hierarchy · high contrast
Social drafts 2 & 3 Community + Network

The checklist earned its own tab

The mid-fi merged social browsing and tasks together. Testing showed the onboarding checklist was too important to bury, so it was promoted to its own tab. The social drafts condensed into a verified Community feed and a Network tab, keeping each job distinct.

IA · task separation
Test & validate

The mockup held up.

After the drafts, I refined the hi-fi mockup and ran a second round of SUS forms and user testing. The signal was loud: students did not just tolerate X-change, they wanted it to exist.

0%
found it mostly easy to use on the first prototype
0%
rated the content clear and concise
0%
wanted the app to actually be made
0%
said no other app does this for them
The business plan

From prototype to pitch.

As lead PM, I carried X-change past the screens into the logistics of a real startup: a freemium model, partnership strategy, a lean tech stack, and revenue projections we could defend to investors.

Model

Freemium

Free to download with core features, paid upgrade for premium. The most cost-effective, low-friction way to grow a brand-new app's user base.

Partners

Trust by alliance

Education USA, NHSMUN, and TOEFL (used by 11,000+ universities) supply verified students and certify safety, at no cost to join.

Stack

Lean & scalable

College developers on GitHub with AWS EC2 & RDS free tier, scalable and cost-broken, so first-year spend is mostly just developers.

Business model slide: freemium value, target market of exchange and international students at Rutgers, Princeton, and TCNJ, partners, distribution, and revenue streams
Business model · freemium, partnerships, and revenue streams
0K
Monthly active users targeted in year one
0K
International students at Rutgers alone, from 125 countries
$0K
Estimated first-year API worth of the data
"There is no other application on the market that offers this. Out of the 6 million international students in the world, none had catered to the needs and wants of this market."
X-change research paper · the innovation
The team

Four people, one platform.

S

Sabrina May

Lead PM & Designer

Led the design-thinking process, ran research and testing, designed the prototype, and built the business plan and investor pitch.

G

Gabriella Barquin

Research & insight

The exchange student whose lived experience sparked X-change, and who grounded the team in the real problem.

T

Timothy Wood

Strategy & testing

Shaped the testing approach and the challenges analysis, from feasibility to competitive positioning.

C

Choong Nyeon Kim

Product & tech

Worked through the technical feasibility and the architecture that made the platform buildable.

Next case · 06 of 07
Old Barracks Museum
Open file