UniLink Exchange Student App
Designing a community app for exchange students that provides real connection before one arrives at a new country
Project Type
Product Design, Community Building, User Content
My Roles
Design System, UI Design, Interaction Design, Prototyping
Team
Daphne Cheng, Brian Camilo, Ruhin Gharai
Duration
4 weeks
Situation
Feeling Lost Abroad?
Task
Talk to a local first!
logo animation
Action
Match & Book a Mentor
matching for mentors and booking
Results
1 Pitch, 2 Mentors, by 3 People, in 4 Weeks
Challenge
Design an app and prove the concept with research for a 4 week long designation
Results
8 out of 8 users feel more motivated and prepared for their upcoming exchange trip after using our app
5 min read
Case Study
please keep scrolling
The problem
Lost at a new place
By finding a community!
From day one, my teammates and I know we want to build something for the international student community.
Me/ came from Taiwan and worked at UCSC’s International Students Program
Brian/ moved to the States from the Philippines
Ruhin/ was an exchange student
We all know the struggles of moving abroad— we’ve all needed help and have given help.
Me as a global mentor, leading community event for international students
Finding pain points through user survey
To understand the community of students living abroad better, I helped design and send out a survey to our peers who are currently/have been on exchange programs/studied abroad. Our survey focused on open-ended questions to gather community needs.
1/ Lack of centralized & reliable information
Students spend excessive time jumping between multiple platforms to find what they need.
2/ Difficult connecting with people
Many feel isolated and unsure about making friends or integrating into a new culture.
3/ Knows WHAT to do but not HOW to do it
While participants voted that talking with someone is the best form of support, 65.2% of exchange students never had a mentor to show them the how to-s.
Discovery
Best advice is from a personal connection
I want to match people up!
Based on the 3rd survey insight, there's no better source of information about exchange programs than talking to someone who had physically lived and been there.
Our team voted to build a social app around a fun mentor-matching feature that pairs newbies with someone at their future university, making it simple to connect and learn.
brainstorming (brainwriting, affinity mapping, competitive analysis) on figjam
Here are some features we considered
It’s just as important to discuss features that we chose to leave out.
ask questions based on universities and exchange programs, a tagging feature similar to Piazza
students are already familiar with similar features on Quora/Piazza
real human answers and a way to track responses
see events happening based on universities, can rsvp, connect to group chat so people are motivated to go
channel online connections into real life involvement
digitization to socialization
call someone after matching
make users feel more safe to chat with someone real
answer students' questions about program details and policies
Shifts focus from our value as a platform to find first-hand information
Risks hallucination & misinformation
verify purchasing power and shows financial proof recognized across countries and banks
Too many policies to bypass
Stretching from socializing app to fintech
swipe for roommates/find people to room with
That's a university's job they already got the resources
Not a specific international students needs
one click button to notify local guardian/first point of contact; safety feature for help when you don't have anyone
A lot of competitors
Other apps already has them
And here are the lo-fi sketches of our main features
We want to focus on matching and connecting students with mentors
onboarding to gather data for initial matching
swipe to match mentors (gamification)
view mentors in a list with filter options (specific search)
messages with ui to prompt people to respond to messages
Design
Picking a visual direction
my notes to my team
Decide on the scope and user flow
By mapping out our user flow and Information Architecture first, me and my team were able to figure out exactly how many pages we needed, thus coordinating our tasks better.
very nice looking information architecture by Brian
what our flow was actually like (messy)
Quick iterations on the hifis
I like spreading out iterations of my hifis across the design file to see which version reads better from far away.
Of course, I made sure to label my pages as well as reviewed the pros and cons of design placement with my team and voted on the version we want to use.
this is the frame I'm making the hifi of
playing with tag hiearchy, school/country as an icon, as well as hints for user action
Design System
Building the design system
I started out designing the hifis from a partially done design system, and then slowly filled the reference sheet in with more information as we designed.
This has allowed my team and me to design more efficiently. By utilizing the library system, I can make global changes easily, which makes overall cohesiveness between multiple pages easy.
Design system at the start
design system when we finish
Logo
Coming up with a logo
I began my design by playing with mono and sans fonts, going for a super clean vibe. However, when I added the sample logo to our page, users who tested our prototype said the mono logo variation looked like a function they could click, instead of just the decorative purpose I wanted to use the logo for.
After showing the variations to my friends, we all agreed that a Serif really ties the look together. In the end, I chose Gilda Serif with the curvy ends to bring out the fancy side of our social app and make it pop as a decor element.
playing with the 'i' in uniLink
logo will be used as decoration in our actual page
Animating the logo
When users launch the app, I want them to immediately get what we're all about. So I designed a quick 3-5 second intro that instantly captures our app's essence.
explaining that "unilink" stands for "university link"
created using smart animate
Navigation Bar
Design iterations on the navigation bar
The nav bar is that one component that will show up on every single screen, so I believe it is the most important component to have to look good in terms of app design. A good nav bar should:
easy to navigate to the different pages
ties the app aesthetic together
can tell which icon is selected
you'll see this nav bar on every screen
final nav bar component
User interview
Testing to see what users see
One thing about user-centric design is that you can't trust your instinct; it has to be what the users want not what I want. So the best thing to do is to conduct live testings, while moderating so one can get feedback from a controlled environment.
Now that UniLink is coming together nicely with key screens made and prototyped, my team moderated usability tests with 4 target users— focusing on tasks completion and first-click test methods.
snippet from our interview doc
1/ Confusing Q&A page layout
"The Q&A page design can be better, and I think instead of filter maybe sorting to pick category questions would be easier"
— exchange student 1
⚠️ Issue
UX flow wasn't intuitive
❓Why
There are too many actions required before users can find the info they need
🛠️ Fix
Redesign layout referencing Reddit's UX flow that serves a similar function and is proven to work
before and after layout redesign
2/ Booking icon is hidden
"The booking symbol for scheduling was hard to find and I would rather have it on the navigation bar as I would check it out often"
— exchange student 2
⚠️ Issue
The booking icon to navigate to the bookings page is hard to find
❓Why
Icons in the top bar are for secondary actions, and users won't look for functionality outside of their normal movement zone
🛠️ Fix
Moved "bookings" to the bottom, which is where users' thumb pattern is most active
booking icon is moved from top bar to bottom nav bar
3/ I want to save an event
"I want to be able to save events I want to go maybe so I can apply closer to the date once I know my schedule better"
— exchange student 3
⚠️ Issue
User want to save events
❓Why
Users are expecting to have more "actions" that they can play around; more interactions
🛠️ Fix
By using the prexisting "starred" component created for the swipe mentor card, I quickly added the interactable "save" icon into our card design
event card has "star" function now
Conclusion
Match & Connect
Reflections
Our initial idea focused on student rentals, but research revealed a broader demographic. Narrowing down to exchange students led us to pivot toward a mentorship platform that directly addressed their needs.
Results
Deep research helped us recognize the complexity of our original idea. Understanding the feasibility of different solutions allowed us to refocus on a more impactful and achievable platform.
Things I'll Change
Since our primary users are exchange students, we now want to deepen our understanding of mentors' experiences. What would incentivize them to participate? What challenges do they face? I believe that by balancing mentorship growth and student support, we can enhance engagement for both sides.
