UniLink: app for exchange students
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
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. 3 People. 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 knew we wanted to build something for the international student community. A good community makes academics, culture, and daily life easier, better, and stronger.
Me
Came from Taiwan and worked at UCSC’s International Students Program
Brian
Immigrated to the States from the Philippines
Ruhin
Attended Yonsei University as 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 a user survey
To understand the community of students living abroad, I helped design and sent out a survey to our peers who are currently or 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 relatable, from someone you know
I want to match people up!
Current resources that offer mentorship for exchange students are 100% local, tight knit in-person communities, and hosted by universities. We want to scale those local events and resources into an online experience, where more people can connect and help each other out!
Our team built 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
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
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
notes to my team
Deciding on the scope and user flow
By mapping out our user flow and Information Architecture, my team and I 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
Figuring out the design language, while designing
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
Coming up with a logo
Conveying the right vibe for our app
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
Design iterations on the navigation bar
This is the most important component of an app
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
Some ideas I tried…
The final design
final nav bar component
User Interviews 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 approach is to conduct live testing while moderating so you 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 task 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
Creating a community by matching & connecting
Results
After the lengthy design journey, my team and I asked our participants from surveys and tests to try our app again. 8 out of 8 participants demonstrated satisfaction with the improvements within the app, and agreed that the app would be helpful to them on their exchange journey.
Reflections
Our team's initial idea focused on finding housing for international student, but research revealed a broader impacted demographic. Narrowing down to exchange students as our user group let us pivot into a mentorship platform that directly addressed their needs.
I learned that our first solution is not always going to work out, and I should continue to test and research as I create. Don't be afraid to pivot and re-scope a project, as not trying is a bigger crime than failing.
What's next?
Now that we addressed our primary group of users— exchange students, our next step is to design for our other group of users— mentors! 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.
Acknowledgements
Shoutout to mentors Stefanie Mclaren, Nick Hoh, and Andy Leyman for taking the time out of their day to help guide our project direction, provide industry feedback, and help answer our questions with design thinking! Cannot thank passionate designers like them enough in creating this community that let young designers like me and my friends grow.
Giant thank you to my friend Mary Kay, a professional copywriter, for helping me write and revise this case study.
Most of all, so grateful for my teammates Ruhin and Brian. Without them, UniLink would not have happened.
