UniLink: App for Exchange Students
Designing a community app to connect students with mentorship and integrate to new country and culture
Project Type
Product Design · UX/UI Design · Mobile
Duration
4 weeks
TOOLS
Figma, FigJam, Google Forms
My Roles
UX Research
Design System
Interaction Design
Prototyping
Situation
Does studying abroad has to be SO isolating?
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
Does studying at a new country HAS to be so isolating?
…by finding a community!
Our Background:
Me
Taiwanese 2nd gen immigrant + global mentor @UCSC’s International Students Program
Brian
Philippines 1st gen immigrant
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.
Organizing community event for international students
Identifying pain points
I helped design and distribute a community survey (60+ responses) and interviewed 4 international students.
1/ Fragmented info scattered across multiple platforms
2/ Difficulty finding reliable local help
3/ No centralized space for mentorship
Discovery
One powerful insight emerged
How to match people?
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!
We mapped out feature ideas and cut scope aggressively based on user impact.
ideation (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 of the features that made the cut
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
Design always begin with a visual direction
notes to my team
Scope and stick to the plan
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.
information architecture (clean, presented version)
what our flow was actually like (messy)
Iterate quickly
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
Don't try to get everything done in one-shot
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
2/ Logo
Ideation
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 peers for quick feedback, it was unanimously agreed that a fancier Serif 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 to engage
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
3/ Navigation Bar
Most important component
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
Iterations
Final nav bar
final nav bar component
Usability Testing
Moderated sessions with 4 exchange students:
Booking icon was too hidden → moved to nav bar
Q&A flow too complex → redesigned like Reddit layout
No way to save events → added "star" icon for bookmarking
composing the 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.
Next Project
BridgeUs
Redesigned the page to view responses from a guided activity
#education #responsecollection