Skills

UX Design

User Research

Graphic Design

Interactive Prototyping

My role

UX Designer

GUI Designer

Timeline

Jul. 2022 - May. 2023

Team

Yu-Shu, Chen

Tian-Liang, Chou

Kuan-Xiu, Jin

Yen-Chen, Shi

Summary

Reimagine socializing during the pandemic

Glide is a soul-soothing app that enables users to transcend the limits of time and space, connecting with people worldwide. Born out of the need for connection during the COVID-19pandemic, when social distancing kept people physically apart, Glide offers an anonymous way to share photos of the sky, providing a sense of calm amidst the restlessness often induced by social media. 

What did I do?

Created an interactive prototype with an immersive story line

I started out this project with 4 other team members throughout the research phase and ideation of key features. I then proceed on individually to continue the design of information structure, wireframes, design system, graphic design, mid-fi and hi-fi prototypes of the final product.

Design solution

A gamified virtual environment where users can engage in shared experiences to strengthen social bonds and reduce loneliness.

The final version of Glide presented a new way of initiating socialization without over interfering one's balanced lifestyle. The following specific features help bring out the creativity in students' self identification and curiosity to explore and communicate with others in different environments.

Peek into the solution

01

Capture New Skies

Users can acquire new skies by capturing their favorite gliders in interactive games, discovering new horizons!

02

Customize Glider

After uploading the sky photos, users can customize their glider and travel the world according to their preferences. The app provides multiple customizations for users to express their sense of identity in the online world.

03

Receive Skies & Create Unique Albums

Users will receive an anonymous photo of a sky from anywhere around the world each day. To keep track of all of the skies, users can create albums according to their prefered genres.

04

Receive Messages From Worldwide

The sender of the sky can receive surprising messages from  people who received their picture of skies. The map view allows users to pin point the places where they send/received pictures of the sky to/from, as a way to keep track of their journey.

Problem discovery

Social disconnection during the pandemic leads to various mental health issues

In response to the COVID-19 pandemic, an unprecedented strategy of "social distancing" emerged, which is crucial to curbing the spread of the virus. However, it has also come with significant costs.

 

Research indicates that many individuals have experienced profound feelings of social isolation and loneliness during this period, which could lead to serious mental and physical health consequences.

Background research

What trigger's people's feeling of isolation?

We conducted in-depth background research, including 124 survey respondents and 7 interviews, establishing key learning areas that our research tackled:

  1. Social distancing's impact on people's daily routines and their thoughts on it

  2. People's engagement in social media during social distancing

  3. People's overall mental wellbeing during social distancing

Key Insights

😞

Accumulated stress due to lack of outdoor activities.

Students experienced sudden decrease of time on outdoors activities, forcing change into their daily routines or hobbies. More importantly, restricted their ways of coping with stress, leaving them feeling anxious and depressed with excessive stress building up.

📱

Increased social anxiety caused by overuse of social media.

Students turn to social media to seek for sense of connection with others when they cannot see each other physically. This resulted in significantly increased amount of screen time, and further lead to increased social anxiety and mental stress.

🏠

Difficulty to form new relationships without in-person interaction.

Casual conversations, shared experiences in classrooms, and spontaneous gatherings—all key to developing friendships—were severely restricted during social distancing. Without these everyday social encounters, students struggled to meet new people or deepen existing connections.

Design Callenge

Hmw create a form of communication that transcends time and space, allowing us to interact with others without the anxieties and pressures of social media?

Behavioral archetype

What do people need? : Meet Emily, our student adapting distance learning

Based on subjects who participated in our research, we decided to focus on helping students like Emily, who struggles to form new relationships under social distancing in the start of their college lives. Also, not being able to explore and travel, which resulted in cumulating stress and depression.

User journey mapping

Navigating social anxiety during COVID-19

With the persona of Emily in mind, we crafted out a detailed journey map, showing specific moments of opportunity for intervention. Her story highlights the challenges of adapting to virtual interactions and relieving stress, cumulated through excessive social media use. We decided to focus on these two aspects into our ideation process.

Design ideation

Creating a stress-free socializing way

From the insights generated in user scenarios, We started brainstorming on potential solutions that can help address pain points identified in our persona. Our research insights informed the team to ideate under three focus areas: ExplorationCommunication and Expression.

  • Exploration helps students stay connected with the world around them.

  • Communication emphasizes fostering stress-free, meaningful connections between individuals.

  • Expression empowers students to build a personal identity that authentically reflects who they are.

The birth of "Glide"

At this point, we each brainstormed on possible themes that can tell our design in an engaging way. We came down to the concept of "Glide", which compliments our core value of exploring and communicating freely even under the restrictions of social distancing.

Wireframe

Improving the flow and experience

Based on research and conclusions, we began sketching out the main functional interfaces of Glide. I optimized the design to improve the user flow and simplify the user experience. This process also allowed us to analyze whether the hierarchy of each function in the interface arrangement is in line with usability. We then refined the final mid-fi prototype in Figma.

Submit photos/videos

Users can upload photos/videos directly from their phone albums or take an instant photo/video to start. After custpmizing their glider, they will be sent off to an approximate direction to a random destination.

Save skies and send messages

This feature allows users to create albums and collect the skies that they like. At the same time, providing the opportunity to send an anonymous message to the photographer.

Glider Tracker

Users can track where their glider is heading for once they have chosen their traveling direction. The map view shows an overview of all the gliders that are currently traveling and their approximate arrival time.

Create Postcards

Users can create postcards from their favorite skies to share with friends and familes. Or simply print them out for collection.
Information architecture

Connecting the dots

With all the pieces in hand, we now need to link them together into a complete information architecture. The information architecture comprises of 4 major domains aimed to bring out process of receiving and sending out skies - Home, Upload, Gallery, and Profile. 

Character concept design (Individual work)

Bringing the characters to life!

During this phase, each of our team members went off by continuing the visual designs on our own. I started sketching out the avatar character representing the users, connecting the core values of the app from the user's perspective with elements of the avatar. Even during the pandemic, I wanted to give users a sense of excitement to travel around the world, so I decided to create a glider as the user avatar for Glide, embodying an image of freedom, relaxation, and vitality.

Scenery design (Individual work)

Let's build a world for users to explore

In order to facilitate a smoother immersion into the context, I designed the app’s scenery with a narrative approach. I created a world view centered around a grand canyon, combining the avatar’s attributes of the glider to convey a sense of adventurous freedom. This concept will also be further extended in the future UI design of the app.

Visual identity (Individual work)

Let's build a world for users to explore

I chose a refreshing and energetic color palette and created simple components to comprehend with the theme of the design. Further on implemented to the final prototype of the app design to bring out its essence.

What did I learn?

When there's a balance between functionality and emotion, the two amplify each other

📖

Narrate a story that engages the users!

One of the most impactful approaches that I discovered throughout the project is the power of engaging users into the story. To be able to tell the story and get people involved in it, I spent a lot of time developing the background story and conveying it through illustrations and interactive components. This was definitely the most fun and exciting part of the design.

Search for the most effective, but also fun!

During the ideation process of this project, I really enjoyed gathering inspirations through a variety of aspects. Thinking outside the box to look for the spark that leads to touching design solutions. I was able to come up with an ultimate solution that connects deeply with the emotional side of the users, and at the same time provide functional solutions to the problem.

Let's talk

Drop me a line!

Connect with me

Email

yujie719@uw.edu

Phone

(626)689-9443

© Framer Inc. 2023

Let's talk

Drop me a line!

Connect with me

Email

yujie719@uw.edu

Phone

(626)689-9443

© Framer Inc. 2023

Let's talk

Drop me a line!

Connect with me

Email

yujie719@uw.edu

Phone

(626)689-9443

© Framer Inc. 2023