Skills
GUI Design
UX Design
Graphic Design
Interactive Prototyping
My role
GUI Design Lead
UX Designer
Timeline
Jul. 2022 - May. 2023
Team
Yu-Shu, Chen
Tian-Liang, Chou
Kuan-Xiu, Jin
Yen-Chen, Shi
Summary
A gamified approach through GUI design to form meaningful and stress-free social connections
Born out of the need for social connection during the COVID-19 pandemic, Glide offers an anonymous way to share photos of the sky along with short message exchanges, providing a sense of calm amidst the restlessness often induced by social media.
As the GUI Design Lead, I developed a unique storytelling approach through graphic design and interactive GUI design. I created the high-fidelity prototype, character concept illustration, and created a UI design pattern to implement through the application.
The problem
Social media overuse during the pandemic lead to increased depression and anxiety by 25.6%
In a survey of 10,000 participants showed that people are struggling to balance the need for connection with overexposure to social media, exacerbating feelings of restlessness, anxiety, and social pressure.
Design solution
Bridge connections with an ambient approach to socializing.
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.
01
Capture new skies with interactive games, share and connect with people from around the globe!
02
Express self-identity through your own unique customized glider.
03
Bring virtual experiences to life by creating physical postcards of your favorite skies.
04
Document your journey in a single glance with the map view, and explore real-life in the future!
Research
72% interviewed students faced various mental health issues during social distancing
We conducted in-depth background research, including 62 survey responses and interviews with 8 participants, where we noticed the cognitive impacts and behavioral changes that followed with adapting to social distancing.
😞
Lack of outdoor activities accumulates stress
📱
Overuse of social media cause social anxiety
🏠
Unmotivated to form new relationships
Behavioral archetype
One major cause of lower mental health was Virtual overwhelmment
While multiple causes of lower mental health aroused during our research, we found that one common theme mentioned repetitively was the stress to actively engage in online socializing. We synthesized the cause and user needs that grew out of this pain point, and created our persona:
We then crafted out a detailed journey map, highlighting the challenges of a student navigating social connection during social distancing. Ultimately, we decided on focusing on the intervention of transforming our user's virtual social connection experiences.
Design goals
Balance active participation with space for passive engagement
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: Exploration, Communication and Expression.
🪂
Stimulate exploration
Help spark student's motivation to stay connected with the world around them with sparks of "excitement".
💬
Embrace communication
Emphasize on fostering stress-free, meaningful connections between individuals by providing choices to actively share or passively engaging.
🌱
Encourage expression
Empowers students to build a personal identity that authentically reflects who they are though customizable features.
The birth of "Glide"
With the design goals aligned, we started brainstorming potential solutions that would encourage and facilitate people foster meaningful social connections despite limitations of social distancing.
Lo-fi Wireframing
Exploring the storyline with free-hand ideating
With the design goals aligned, we started brainstorming potential solutions that would encourage and facilitate people foster meaningful social connections despite limitations of social distancing.
Mid-fi Wireframe
Improving the flow and experience through wireframing
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.
Character concept design
Bringing the characters to life!
I started sketching out the avatar character representing the users using Procreate, 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
Building a world for users to explore!
I designed the app’s scenery with a narrative approach, creating a canyon view, combining with 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.
I created a refreshing and energetic UI design pattern and created simple components to comprehend with the theme of the design. Further on implemented to the final prototype to bring out its essence.
Hi-fi Prototype
Spike it up with some Fun & Engaging interactions!
Once the UI interface and flow was secured, I transitioned the hi-fi prototype into Protopie, and started experimenting with different interactions to craft an engaging experience!
01
Explore
Missing the exploration spirit? Each day, users can acquire new skies randomly from another user by capturing their favorite gliders in interactive games, getting a brand new perspective of the world each day.
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
Users 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.
Measure success
How do we make sure our design made impact?
I'm glad to have proposed this innovative solution as a twist in current social media platforms. While we didn't have much time to conduct usability tests, here are some metrics that I would use to measure the impact and success of Glide:
📝
Follow-up diary studies
To determine whether our design benefited the socializing formation of our users, an observation over diary study would reveal the cognitive and physical changes for further iteration.
💬
User engagement
Track the frequency of photo shares and message exchanges to gauge how actively users interact with the platform.
✨
User Satisfaction
Conduct surveys or collect feedback to understand how well the app delivers on its promise of providing calm and stress relief.
What did I learn?
Balance between functionality and creativity to 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.
