Connecting newcomers and locals through shared city experiences.
UI｜UX Design
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
Research
Background
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 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
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.
Competitive Analysis in SWOT for Citygaggle
1-1 Interview
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
Affinity Map
POV & HMW
Point of view & How might we
Define
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.
Site Map
COMPONENTS
User Persona
Ideation
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.
Project Goal
I explored early concepts through sketches and experience mapping, drawing inspiration from analogous products and services that help people feel connected in unfamiliar environments.
Then I made In-depth competitive research using SWOT to identify gaps and opportunities in the existing landscape.
Task Flow
User Flow
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
Story Board
Exploration of ideas
In-depth competitive research
Sitemap for Citygaggle
Task Flow for Citygaggle
3 user flow for Citygaggle
User Persona
Explore of idea
In-depth SWOT analysis
In-depth SWOT analysis
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 for Citygaggle
Design Decision
Together, these explorations helped shape the foundation of a product that connects newcomers with local communities through shared activities and meaningful interactions.
Design
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.
Mid-fidelity Wireframes
COMPONENTS
Mid-fi Sketches
Branding
UI Kit
Low-fidelity sketches
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.
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 1:
To address this, I explored more expressive CTAs that combine microcopy and iconography to better reflect the appeal, personalized nature of the 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
Branding
High-fidelity Wireframes
Friends list
City Gaggle High fidelity wireframe
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
Recent attended
Recommend events
Low-fi Sketches
Event detail（Horizontal & Vertical scroll）
Homepage（Horizontal & Vertical scroll）
City Gaggle Demo video
Task 2: Find a partner with same interest to come together
Mid-fidelity wireframe for task2
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.
