top of page
Top of Page

I See Myself: Building Mental Wellness by Gaming Together

Introduction

​

How might we address the mental health crisis through gamification? I joined a group of four designers who were approached by a startup interested in developing a gaming app that improves wellness. Building off the research of a previous group, we refined user flows and designed high fidelity screens over the course of four weeks. I See Myself is an app that brings together elements from mental health experts and role-playing games to create an enjoyable, team-oriented experience. My group laid the foundation for it to be developed further, and perhaps change lives in the future.

Empathize

Empathize: Background

​

The United States is experiencing unprecedented levels of mental health issues in youth. A 2018 study conducted by the American Psychological Association found that only 45% of Generation Z (born between 1997 and 2012) reported having strong mental health, and a 2016 study by the American College Health Association reported that 62% of undergraduates suffer from overwhelming anxiety. Mental health can be a difficult subject to discuss openly, and finding resources can be a challenge. Smartphone apps have attempted to change this, but they often focus on a single activity such as meditation or put all of the responsibility on individuals to improve their wellness.

pexels-andrea-piacquadio-3807747.jpg

Empathize: Client

​

I See Myself is a Philadelphia-based startup that seeks to address the Gen Z mental health crisis by developing a smartphone wellness game. The company believes that adding gaming elements will encourage continuous use and form positive habits. Additionally, the app will make the topic of mental health more approachable by providing opportunities for group activities and messaging. The goal is to use the smartphone, a ubiquitous tool for the vast majority of Gen Z, to improve mental health rather than damage it.

Logo.png

Empathize: User Interviews

The startup had previously conducted interviews with potential users and sought the help of a team of four UX professionals to organize its findings. The team found that there was no single factor that caused the most stress, nor was there a single strategy that many used to combat stress. An important note was that almost every potential user stated they didn’t rely on parents as a support system. In fact, discussing mental health with family members was less popular than discussing it with friends.

Affinity Map.png

Selections from affinity map

Empathize: Competitive Analysis

​

The team also conducted a competitive analysis of six mental health apps currently on the market. They found that no app accomplished all of the goals of I See Myself, and only one incorporated gaming elements at all.

Competitive Analysis.png
Defne

Define: "How Might We..." Questions

​

Combining the research findings with the startup’s business goals, the team generated a list of primary objectives for I See Myself. When my team began our four week process, we further refined this into a list of four questions.

How Might We.png

Define: Persona

​

The previous team also created a persona we used to guide our design process. Our primary user group was a member of Gen Z transitioning from high school to college and experiencing mental health issues. Their current coping strategies aren’t enough and they could make better use of the technology they are well-versed in.

Persona.png
Ideate

Ideate: Pre-Test

​

The team created several user flows and expanded the flow for a daily mental wellness quest into a low fidelity prototype. The prototype incorporated an extensive onboarding process and a somewhat lengthy set of steps to accomplish the wellness quest. Elements from role-playing games such as friendly characters and battle stats were also included. The prototype did a good job of remaining approachable and fun, as well as including features like a chat room to bring users together. However, when the team tested the prototype, they found that it could quickly become too complex and confusing for users who may already be overwhelmed.

Test

Test

​

Five moderated user tests were conducted for the low fidelity prototype. All of the users were members of Gen Z, and several of them expressed the same difficulties with certain aspects of the prototype. The team compiled the users’ responses into three key findings.

Chat Interface

All five users expressed confusion about the welcoming template for the chat.

​

They mentioned that the placement of text made it difficult to determine what was sent. Some users also felt the introduction should be part of the onboarding process.

Reflection Mission Details

Three of five users had difficulty navigating through the reflection mission.

​

They didn't understand what would happen after they submitted their tasks to the group.

Challenge Mission

Three of five users had difficulty understanding how to accomplish the challenge mission.

​

They became confused about how to record their stretching activity.

Ideate 2

Ideate: Post-Test

​

When my team was introduced to I See Myself, we understood that the product was not yet ready to go from low fidelity to high fidelity as the previous team had recommended. The confusion expressed by users during the testing phase was related not just to the design elements of the prototype, but also to the app’s user flow. We determined that the most effective course of action would be to refine this user flow and create several iterations of increasingly high fidelity screens. These could then be used as a blueprint from which to build the rest of the app and conduct future user tests.

Ideate: User Flow

​

Our first task was to simplify the previous team’s user flow. We removed the onboarding process and distilled the mental wellness quest to only its most important elements. We incorporated the chat feature, but to a smaller degree than the previous team in order to focus on the principal flow of the app. The new flow should be a much more straightforward journey for users without losing the joy of the initial prototype.

User Flow.png

Ideate: Design Strategy

​

My team decided that to maximize the quantity of ideas, we would design low fidelity screens individually and then combine the strongest elements into a single set of wireframes. We chose to iterate on a mindfulness quest, where users would record three things they could see, three things they could hear, and three things they could touch. The goal of this quest was to help users stay in the present moment, and it provided a good opportunity to involve unique features and communication between friends.

Group Wireframes.png

Initial group ideas

Ideate: Wireframes First Iteration

​

We were drawn to a home screen that featured a grid of mental wellness quests, with a daily quest highlighted. When the mindfulness quest was selected, a monster was introduced, and the user had the option to add users to their team. A short set of instructions informed the user what was about to happen, and reminded them why it was important. From there, the user proceeded through the quest, with the ability to take photos or record sounds in place of typing. Once the quest was complete, a celebratory message appeared, and users could view their progress towards rewards such as coffee discounts, food delivery coupons, and even video calls with licensed mental health professionals.

Ideate: Wireframes Second Iteration

​

The I See Myself team encouraged us to further incorporate group elements into the wireframes. For our second round of screens, we added indicators of which friends were online, and developed several ideas for a bottom menu bar that could be used for navigation. We also developed a screen for what it might look like to schedule a mental health call.

Ideate: Wireframes Third Iteration

​

After presenting the new wireframes to the I See Myself team, they were satisfied with the flow and basic features. We focused on improving design consistency and refining the bottom navigation bar.

Refine

Refine: Style Guide

​

As our four week timeline approached its end, we pushed to design high fidelity screens. The I See Myself team envisioned a space theme with charming cartoon elements and a purple highlight color. We chose a font that was futuristic yet easy to read, and a cohesive icon system that would let multicolored elements shine through.

Branding.png

Refine: High Fidelity Screens

​

The high fidelity screens also introduced some new features meant to improve the team dynamic. Quests could no longer be completed without every team member accomplishing each step, and users could see what each team member had posted. We brought back the messaging interface, which could be accessed at any point during a quest and used both typed and audio messages. These improvements should give users the sense that they and their friends are truly on a quest together, and should encourage discussion of mental wellness issues.

Analyze

Analyze: Current Product

​

While my team’s iterated wireframes are still just a step in the process of making I See Myself a viable product, they simplify the user experience and bring the design closer to high fidelity. We addressed each of our four questions and created something that could act as a foundation for future development.

Screenshot 2022-09-19 013859.png
Screenshot 2022-09-19 013938.png
Screenshot 2022-09-19 013922.png
Screenshot 2022-09-19 013956.png

Analyze: Future Development

​

My primary recommendation for I See Myself at this stage is to test these new screens with potential users. Working with members of Gen Z to flush out any usability issues will be key to making sure the quest flow my team developed can act as a modular system for all of the other quests I See Myself will contain. I would also recommend developing a strong information architecture to determine exactly what features and activities will be available when the app launches. This startup is still in the early stages, which means a strong foundation of research and design could guide the app more efficiently towards success.

pexels-cottonbro-6214560.jpg

Conclusion

​

I See Myself is an innovative solution to the daunting Gen Z mental health crisis. My team utilized research and analysis from other designers to further refine a gamified user experience. Our screens encourage users to work together, and make the process of building consistent mental wellness strategies fun. They will act as a blueprint from which to create a more complete experience, and eventually develop I See Myself into a real product. I can’t wait to see how the app is able to help people in the future.

Screenshot 2022-09-05 155339.png
bottom of page