UI｜UX Design
Team worked to design a more accessible and effortless autonomous travel experience in future Bay Area.
Overview
At some point, we all arrive somewhere new, whether by choice, chance, or necessity.
In those first days, what we often need most is not just information, but connection.
CityGaggle is a platform that helps newcomers feel less alone by recommending local events tailored to their interests. By turning shared experiences into meaningful encounters, it bridges the gap between new arrivals and longtime locals, making unfamiliar cities feel like home, one gathering at a time.
ROLE
UI/UX Designer
SKILL
Figma
This project began with a focus on international students and the many challenges they face when studying abroad——social, financial, and cultural...
But through interviews and field research, I found that the sense of disconnection and uncertainty is something many people experience when moving to a new city. This insight led me to broaden the scope to all newcomers, aiming to design for a wider yet deeply human transition.
Research
Background
Research goals
Understand the emotional, social, and practical challenges faced by international students when adapting to a new environment.
Identify patterns of disconnection, loneliness, or hesitation commonly experienced by people who move to a new city.
Explore how local experiences and shared activities can serve as bridges between newcomers and local communities.
Investigate the role of technology and recommendation systems in supporting smoother cultural and social transitions.
Discover opportunities to foster belonging, confidence, and meaningful local connections through human centered design.
SWOT Analysis
SWOT Analysis
Competitive Analysis in SWOT for Citygaggle
1-1 Interview text record
HMW provide access to counseling services that understand and address the unique challenges of homesickness and social isolation?
HMW have some interesting ways to help them understand local culture, law, life facilities meanwhile practice using local language?
HMW create an app that connects international students with local services and resources based on their needs?
I talked to four interviewees about their experiences, some of whom were native speakers some of whom were not. But all of the interviewees shared a lot interesting experience and give me some really helpful information. After the interview, I transfer their words to the Interview record.
To make sense of the qualitative data collected from user interviews, I used affinity mapping to cluster related observations and uncover emerging themes. This process helped visualize not just individual pain points, but patterns of emotion, behavior, and need across different participants.
Following the affinity mapping, I conducted a synthesis debrief to reflect on what these themes revealed about the user journey. By reframing the findings into insights, I was able to define Point of View (POV) statements and generate meaningful “How Might We” questions that guided the design direction.
1-1 Interview
Affinity Map
After interviewing four users with experience of living in a foreign country/location I collated their views and looked at how might we can do points of opportunity in response to these views.
Integration into a new country where many of the resources of life are unfamiliar.
New comers always experiencing homesickness and social isolation, forming close friendships and maintaining their mental health in a new country is hard
Competitive Analysis
User Interviews
Affinity Map
POV & HMW
Design Decision
Interview insights revealed that the struggles of adjusting to a new place: loneliness, disconnection, and unfamiliarity, aren’t unique to international students but to everyone, even native speaker.
I expanded my target audience to include all newcomers, aiming to design a tool that helps people build meaningful connections in unfamiliar cities.
Interview Key Findings
Both the interviews faced common challenges of social integration, academic adjustments, and managing homesickness.
Their proactive use of digital resources, university services, and community engagement helped them navigate these challenges and enrich their study-abroad experiences.
Their journeys highlight the importance of comprehensive support systems and the value of cultural exchange in personal and academic
growth.
View Full Document
part of 1-1 Interview photo
part of 1-1 Interview photo
Affinity Map & Synthesis Debrief
Synthesis Debrief
POV & HMW
Point of view & How might we
Many newcomers feel disconnected and overwhelmed when arriving in a new city, unsure of where to start building a sense of belonging.
This project defines an opportunity to support that transition by creating a platform that connects newcomers with local people through shared experience. By fostering real life experiences and collective memories, the app aims to ease isolation and help users integrate into their new community more naturally.
Define
User Persona
COMPONENTS
In-depth SWOT analysis
Explore of idea
User Persona
To translate research insights into actionable solutions, I began the ideation phase by defining both user goals and business objectives to align impact with feasibility.
Ideation
I explored early concepts through sketches and experience mapping, drawing inspiration from analogous products and services that help people feel connected in unfamiliar environments.
Project Goal
Exploration of ideas
Then I made In-depth competitive research using SWOT to identify gaps and opportunities in the existing landscape.
In-depth competitive research
Design Decision
Together, these explorations helped shape the foundation of a product that connects newcomers with local communities through shared activities and meaningful interactions.
Site Map
Sitemap for Citygaggle
Task Flow
Task Flow for Citygaggle
User Flow
3 user flow for Citygaggle
I have created three user flows for different functions, they are
The user flow of find an event partner and book meeting with them.
The user flow of setting match preference
The user flow of selecting local event
Design Decision
Based on the ideation and feature flow, I decided to focus on two key user paths for the interface design.
Event Discover Flow
Personalized event recommendations that help users discover local events tailored to their interests.
Connect Partners Flow
Emphasizes social connection, allowing users to find potential activity partners and send invitations to attend events together.
Story Board
Story board for Citygaggle
Design
COMPONENTS
Mid-fi Sketches
Branding
UI Kit
I started the design process by sketching some possible homepage layouts.I explored various ways to organize the content and structure.This helped me figure out what the other page's layouts would be.
Low-fidelity sketches
Mid-fidelity Wireframes
I made the Mid-fidelity wireframes by following 2 tasks:
Task 1: Gamification to find local fun
Mid-fidelity wireframe for task1
Challenge 1:
The personalized event recommendation feature is a core value of the app, driven by AI.
Initially, the CTA was designed as a simple button interaction. However, I found that this approach lacked visual appeal and did not effectively communicate the uniqueness or playfulness of the feature, potentially reducing user curiosity and engagement.
Solution 1:
To address this, I explored more expressive CTAs that combine microcopy and iconography to better reflect the appeal, personalized nature of the experience.
Challenge 2:
To encourage users to share their event preferences, I initially using direct manipulation intuitive icon based toggles.
While the interaction still felt static and too similar to a form-filling process. It lacked the playful energy I wanted for a first time experience.
Solution 2:
I shifted to a gamified interaction model.
Users are presented with playful decision point, like branching paths in a game and where their choices reveal their event preferences.
This approach introduces surprise, agency, and light narrative, turning what once felt like a questionnaire into a mini adventure.
Picture here was generated by ChatGPT
Task 2: Find a partner with same interest to come together
Mid-fidelity wireframe for task2
Branding
The logo represents a small bird in motion, symbolizing newcomers gathering, finding their voice, and joyfully connecting with others. Like a gaggle of birds, City Gaggle is a space where people come together, share stories, and build a sense of belonging in a new place.
The primary color, a soft purple pink, was chosen to evoke a sense of magic, curiosity, and gentle transformation. It creates an atmosphere of warmth and wonder, like stepping into a whimsical journey, while remaining neutral and inclusive across cultures and genders.
CityGaggle UI Kit
High-fidelity Wireframes
Homepage（Horizontal & Vertical scroll）
Friends list
Event detail（Horizontal & Vertical scroll）
Recent attended
Recommend events
City Gaggle Demo video
Low-fi Sketches
City Gaggle High fidelity wireframe
Test
Microaggressions are subtle, often unintentional comments or behaviors that reinforce stereotypes or biases, impacting individuals emotionally and socially. While these interactions may seem minor, they can accumulate over time, leading to stress, self-doubt, and isolation.
Many people struggle to recognize, process, or respond to microaggressions in real-time, and existing support systems are often inadequate or inaccessible.
Task 1: Get an Branding
TASK INSTRUCTIONS
Microaggressions are subtle, often unintentional comments or behaviors that reinforce stereotypes or biases, impacting individuals emotionally and socially. While these interactions may seem minor, they can accumulate over time, leading to stress, self-doubt, and isolation.
TASK NOTES
Microaggressions are subtle, often unintentional comments or behaviors that reinforce stereotypes or biases, impacting individuals emotionally and socially. While these interactions may seem minor, they can accumulate over time, leading to stress, self-doubt, and isolation.
Task 2: Get an Branding
TASK INSTRUCTIONS
Microaggressions are subtle, often unintentional comments or behaviors that reinforce stereotypes or biases, impacting individuals emotionally and socially. While these interactions may seem minor, they can accumulate over time, leading to stress, self-doubt, and isolation.
TASK NOTES
Microaggressions are subtle, often unintentional comments or behaviors that reinforce stereotypes or biases, impacting individuals emotionally and socially. While these interactions may seem minor, they can accumulate over time, leading to stress, self-doubt, and isolation.
TASK COMPLETION RATE
100%
TASK COMPLETION RATE
100%
Iterations
Microaggressions are subtle, often unintentional comments or behaviors that reinforce stereotypes or biases, impacting individuals emotionally and socially. While these interactions may seem minor, they can accumulate over time, leading to stress, self-doubt, and isolation.
Problem:
Microaggressions are subtle, often unintentional comments or behaviors that reinforce
Solution:
Problem:
Microaggressions are subtle, often unintentional comments or behaviors that reinforce
Solution:
Microaggressions are subtle, often unintentional comments.
Microaggressions are subtle, often unintentional comments.
What I learned
Microaggressions are subtle, often unintentional comments or behaviors that reinforce stereotypes or biases, impacting individuals emotionally and socially. While these interactions may seem minor, they can accumulate over time, leading to stress, self-doubt, and isolation.
