HOOPOE

A mobile app for U.S. high school students to celebrate cultural diversity virtually
Design Lead of the Group Project
Product Designer
UX Research & Design, Visual & Interaction Design
Adobe XD, Adobe Illustrator, Adobe Photoshop
The prototype mockup cover image
Learn Cultural Diversity through 360° Immerse Festival Experience
App feature: flexible exploration through calendar or map
Flexible Exploration
2 pathways to explore the events and flexibly switch between the map and calendar page
App feature: immersively explore the events
Immersive Experience
Integrate educational content with 360° immerse videos to introduce different cultures
App feature: expand the social connections
Social Expansion
Make friends in a safe space of the same events and get a sense of belonging
The ProblemUX ResearchInsights & PivotIdeationPrototypingFinal DesignReflection
The icon for back to top
Design Process
Design Thinking + Lean Startup

Through the project, I implemented 2 design process (Design Thinking and Lean Startup) in our product development process in order to identify the real problems correctly and create the right product to solve the problems effciently.

The design process and timeline
The Problem
Cultural Identity
The image for the HOOPPE problems

Several topic spaces were discussed during the discovery period. We chose the aspect of culture to delve deeper and wonder How do cultural difference manifest in the workspace?

Many thoughts and hypothesis spring up in our mind... What if everyone recognized and accepted the difference between people of different cultural backgrounds? What if bias towards different ethnicities was more openly spoken about in the workplace? What if first-generation children all felt a sense of belonging, despite enduring the delicate dance between different practices within their family and outside their household? What if we could contribute to this future?

Migration is the topic that I was given.
According to the World Economic Forum, 1/7 of the world’s population are migrants (those who move from one place to another, either locally, domestically, or internationally). While specific reasons for migration vary, many people continue to relocate to facilitate better lifestyles for themselves and/or their loved ones via better job opportunities, public services, or community structures. However, relocation may also result in the disruption of familiar societal norms, kinship, and symbols.
User Research
How might we design impactful solutions that celebrate cultural identities between first-generation immigrants, their local peers and families?
A belief that we can design impactful solutions that celebrate cultural identities between first-generation migrants and their local peers. Solutions can be applied at an individual, workplace, or community level.

For the purpose of this project, we need to define our research participants:
‍First-generation as people who are born as U.S. citizens to migrant parents or those who are born elsewhere but raised (from the 0-6) in the U.S.
‍Non-first-generation young professionals as people who are born in the U.S. and their parents are from the U.S. and currently are 21-35 years old.
The picture of how we did the UX research
Research Guideline
We outlined 3 key research questions to follow up specific areas that we want to uncover how immigrant parents and their first-generation kids experience, to further know their pain points of experience different cultures at workplace environments.

Research Question
Why Ask?
â‘ 
For first-generation individuals, what does acceptance into a new community look like?
The arrow icon
The term “community” is subjective; we need to understand the different variations of community (if there is one)
②
What role does cultural background have in workplaces between first-generation individuals and their non-first generation counterparts?
The arrow icon
To understand how cultural background affects/shapes workplace environments.
③
What are the relationship dynamics between first-generation children, their migrant parents, and their social networks outside their home?
The arrow icon
To better understand the pains and gains of growing up as a first-generation child to migrant parents within their selected area.
Interview Synthsis
After talking to 18 people (6 for each participant sample: immigrant parents with first-generation kid(s), 6 first-generation young professionals, 6 non-first-generation young professionals), we created these 3 archetypes to understand user needs, goals, and pain points.
The image for the interview synthesis
The Insight
The first-generation professionals experienced the cultural pain points in high school not after entering the college.
The journey map of how a first-generation child grow up

Initially, we envisioned that the findings would pile up after entering the college or workplace; however it happened in high school. Therefore, we grouped the findings in 3 possible themes, which are teacher's role, parents involvement, and community stereotypes  for further investigation. But after illustrating both first-generations and immigrant parents' journey maps, I identified 2 major cultural pain points first-generations experienced in high school:

Hiding cultural heritages
First-generations rarely speak about their culture. Knowing different languages creates a gap between first generation children and their friends in middle and high school.
Feeling singled out as minority
The feeling of cultural difference makes first-generations feel singled out and they try really hard to assimilate “I’m different from my friends", especially during high school.

For more details, I also include how first-generations' journey map of growing up and how immigrant parents' journey map of raising their first-generation kid(s).

Problem Re-statement
The icon for restatement
How can we develop solutions for high school students to showcase the value of cultural diversity and multilingualism…
…and how can we do this without singling people out?
Ideation
How do we decide creating a mobile application?

We started to do competitive analysis on both physical and digital solutions relating to cultural diversity, figure out our opportunity space, then brainstorm some possible ideas. Through the process, we thought of developing a website, VR game, workshop, app, and board game, but we decided to go for an app not only because of the accessibility, but also we want to help more high school students engage in learning cultural diversity during COVID-19 pandemic.

The image: dote vote on the most impactful HMW statements
The image: Brainstorm ideas on the selected HMWs
Dote vote on the most impactful HMW statements
Brainstorm ideas on the selected HMWs
The image: Brainstorm on the chosen HMW (problem statement) with sketches
The image: Did competitive analysis on the digital solution (mobile app)
Brainstorm on the chosen HMW (problem statement) with sketches
Did competitive analysis on the digital solution (mobile app)
Positioning Statement
How do we stay focused on the problem to solve?
For U.S. high school students, we support a virtual event celebration app that help them embrace and respect cultural differences safely. Unlike other services, we provide an exposure of cultural diversity through 360 degree immerse videos and educational contents of events, which makes them not feel singled out.
UX Design
Lo-fidelity Wireflow to Keep the App Structure Solid
I started with sketching out the idea, then created a low-fidelity wireframe to structure the app flow. Then, making a medium-fidelity wireframe with user flow to lay out the user's movement from entry point right through the final interaction before going through a high-fidelity prototype.
The workflow image for the app structure
Usability Testing
After talking to 4 first-generation participants (2 are high school students; 2 are college students), we have received 90% positive feedback and 10% valuable suggestions to improve our app. Our goal is to validate the idea and experience of the product and understand and get feedback on the workflows of our app.
During our conversation, we created 4 tasks for them to accomplish to test out the effectiveness, efficiency, and satisfaction rate.
â‘  Please go ahead and explore the application.
② Can you find the Sky Lantern Festival on the application for us?
③ How would you like to explore the Sky Lantern Festival?
④ Share your thoughts about overall experience with us.How would you like to explore the Sky Lantern Festival?
The result image for usability testing
UI Design
Design Guideline
The design guideline for HOOPPE
Design Solution
An mobile app for U.S. high school students to celebrate the value of cultural diversity and multilingualism virtually and safely
The Flexibility to learn different cultures on their own preferences
The video: how to use the app
A sense of control in exploring the events and cultures
There are 2 pathways for user to explore the events, either through calendar or world map. Both pathways provide date, keywords, position and basic introduction of the events to get the high school students' attention.
Address what problem and insights?
The pain points that first-generation high school students tend to hide their cultural heritage in an effort to assimilate their classmates and friends. Even sometimes they cannot do and learn what they like at home since they have dissimilar understandings. However, everyone carry distinct cultural environment but we ignore that values.
"To fit in, in school I used to secretly watch popular shows because it wasn't allowed at home. Sometime I feel people just don't get it." ─ A first-generation interviewee
How did I choose the calendar and world map pathways?
From the interviews, I found some high schools didn't have the cultural diversity awareness because they were not exposed to those people who have different cultures from them. Therefore, we want to also help students build the culture diversity awareness in time and geographical perspectives through promoting calendar and world maps to explore the events/festivals.
Integration educational content with engaging 360° immerse videos
The video: how to explore the event through 360 video
Immerse, experience, and learn others’ cultures
Heavy texts are not going to attract high school students, therefore, we integrate educational contents with 360° immerse videos and promote engagement to try some authentic activities at home.
Address what problem and insights?
There are lots of biases and stereotypes in high school and students are constantly trying to fit in with surroundings. For non-first-generation people, they want to work in a diverse environment and believe non-judgmental  community can reduce stereotyping, but they don't know how and where they can learn different cultures.
How did I decide the hierarchy of current celebration room layout?
We heard a lot of complaint about the current school textbooks. Most students feel boring about reading heavy texts and long paragraphs, so we put the 360° immerse videos on top to attract our users to click through. Once they experienced the video, we hope it can trigger them to learn and try something fun at home.
A safe space to interact with others and get a sense of belonging
The video: the chat room and social networking
Talk to someone who share the same cultures with you
You can not only choose who you want to interact with, but also expand the social connections through events celebration. We got a lot of positive feedback from our  usability testing that first-generation students like to have this feature to know someone who understand them.
Address what problem and insights?
The first-generation students feel their friends and classmates cannot relate their cultural differences, which makes them feel singled out.

"They [their classmates] just don’t understand!"  ─ A first-generation interviewee
Why a switch button for the chatbox?
We give the right back to the high school students and let them decide if they want to have digital presence. Most of the apps ask users to log in their account and grant with specific functions, but we want to advocate a sense of belonging and safe for the high school students.
Reflection
Lessons I Learned from This Group Project
The possibility icon
Try to articulate as clear as possible in a group setting/project
Ambiguity is an unnecessary process of user experience design. However, I can bring up questions or discussion points to the table. In that case, we not only help each other collaborate the project effectively, but also communicate our thoughts thoroughly for new spark.
The flexibility icon
Be used to staying flexible in the process and unclear environment
I learned how important it is of being flexible in the process because I cannot predict what will come next, but I can rapidly modify the actionable plans in response to new information and circumstances. Also, sometimes crisis is often the turning point for the better.
The conversation icon
Effective communication is critical for teamwork and collaboration
Clear team communication helps everyone develop deep understanding and increase productivity, especially in a remote setting. At the same time, we also need to ensure every member have the same level of understanding, so if there is a dashboard to document the process will be better.