End To End Case Study

Video Gaming for Mental Wellness

Click Here to View Prototype

Introduction

What:

Those who play video games need an app to improve their mental health.

Demographics:

Male video gamers ages 13 to 35 years old with mental disabilities.

Why:

Those with mental conditions can be misunderstood, and given unjustified biases.

With proper guidance and care, they can contribute in infinite ways to society.

Project Duration: 3 months

The role I played: sole designer.

Approach:

Generally linear step by step. Occasionally applied an iterative approach of change.

I would begin in the next research phase.

Research

I starting by creating a comparative analysis of other existing video game apps and mental health apps to get an idea of how my app should function and look.

From there, I began interviewing 5 participants to determine their experience with disability apps. I asked them questions, including:

1. What behaviors, thoughts, and/ or feelings do you feel when playing a video game?

2. What are major goals of a video gamer with a mental or physical disability?

3. What are major frustrations to a video gamer with a mental or physical disability?

Response rate: 2-3 days.

Either in person or I gave questions for them to complete.

Insights/ Key points:

• Many interviewees had fond memories of playing video games.

• Interviewees generally had a good opinion of video games although they felt they should be played in moderation.

• They felt the video gamer should take things one step at a time and engage in self-care.

Anecdotes and insights:

I watched those with disabilities on Youtube tell their stories and how they are able to perform well in society despite severe mental conditions.

I realized people can overcome mental disabilities with persistence/ proper techniques.

Define

With the research phase completed, I now knew that that my app should have info providing advice to those with disabilities.

I set out on creating an affinity map, a persona, a sitemap, and a user flow to get a better picture of my app and the info it should contain.

Affinity Map

I created an Affinity Map, click here to view:

Using the affinity map, I then created my persona of "Leo: the Gamer in Need:"

Final Persona:

Leo, a 25-year-old young adult living in New York, loves to play video games. He plays online or in person with friends. Leo struggles with ADHD, depression, and other behavioral health challenges.

Key insights:

Goals: Leo’s goals are to have equal opportunities as everyone else and not feel like his disabilities are holding him back from playing video games.

Motivations: He enjoys an app that would allow for teamwork with friends and online gaming communities which reduce his feelings of social isolation.

Needs: Leo could benefit from positive reinforcement and general advice for mental health.

With the persona of my user determined, I started thinking about how the persona's personal user goals, compared to the business goals in general. Therefore, I created a Value Proposition Diagram to compare and the contrast the user and business goals. To view click here:

Value Proposition Diagram

Lessons I learned from creating the Value Proposition Diagram:

I learned that both user and business goals are to have an app provide positive content for gamers.

Both the user and the business want an app that will influence the gamer to have a better, safer, and healthier experience while playing.

Since I had an overarching view of the user and business goals, I now wanted to view the app closely in more detail. I created a sitemap to organize pages that I had in mind for the app. Click here to view the sitemap:

Sitemap

Key insights from the sitemap:

I realized that the essential parts in the navigation bar that my phone should contain are:

Home Page, Gamer’s Chat, Gamer’s Advice, and Games Condition.

Thus, I decided to condense and refine my nav bar to look like this:

Now that I had the navigation set up, I created a User Flow to determine how one would click and go to the gaming advice pages. To view my User Flow click here:

User Flow

Having completed the User Flow along with the other research exercises, I gained a solid understanding of my app. In summary, my research led me to the conclusion that there is a necessity for an app that offers information pages about mental disabilities for video gamers, along with video games designed to their needs.

I therefore decided that my app should prioritize the following creative features:

o The user can click on info pages to learn about mental conditions.

o The user can send messages to peers on the gamer’s chat.

o The user can track mood and conditions daily and after 24 hours.

o The user can choose specialized games using a filter.

I now would initiate the design phase where I would take my research ideas for my app, draw them out on paper, and digitalize them in Figma.

Design

Wireframes:

I began the design phase by drawing out a low fidelity wireframe showing the layout of my app.

Next, I transformed the low fidelity prototype into a mid level prototype.

Midlevel Fidelity

With the basic layout of the app in place, I would now go about testing my prototype and refining it in the subsequent test phase.

Test

I started testing the usability of the low fidelity wireframe by presenting it to participants and noticing if it was intuitive for them to use.

Most commented that the app was intuitive but their were some minor adjustments:

One commented: the Nav bar could be moved lower down in the phone’s UI so that it is easily reachable to the thumb and fingers.

Using their feedback, I redesigned the app in Figma to create a midlevel and high fidelity prototype. Afterwards, I showed the midlevel/high-fidelity fidelity to participants to test its use.

The metrics to measure success:

Are they able to navigate to the info pages of mental health?

Are they able to go to the video game chat page?

My participants were successfully able to follow the metrics.

Iterations on the high fidelity prototype:

I made countless changes to ensure that everything had proper spacing, padding, and text hierarchy using auto layout.

I tested the wireframe and visual design. I found it functioned well.

I made sure the prototypes were live/ functional at all times.

My mentor also gave me helpful and supportive feedback:

Consistency in type, color, size and patterns (e.g. how the cards look and feel).

Adjusted spacing in the Gamer Chats, Nav Bar, graph, and throughout.

Adjusted line height and margins for advice texts and throughout.

Added message box, send icon, iOS keyboard, & close in Gamer’s Chat.

Added upper arrows to navigate back to home page.

High Fidelity: My favorite process as everything came to life in a harmonious way. The app was now concluded.

some of the corrections to my app were:

o Decreased oversized text and elements.

o Advice index container pills decreased with equal height/ width.

o Chose iOS wireframe kit for Nav bar.

o Added titles and removed unnecessary info.

o Removed spacing: header, text boxes in gamer’s chat, & throughout.

o Reduced line height for advice texts including Goal of the Day.

The final polished prototype of the app looked like this:

Conclusion

Front High Fidelity 14_edited

Tracking 14_edited

Games 14

Front High Fidelity 14_edited

1/9

Upon concluding my project, I felt that those with mental disabilities would benefit immensely from the gaming advice, game chat peer support, mood/condition tracking, and the game filter.

My users would learn from my app to engage in self-care activities such as relaxation. They would balance gaming with other aspects of their life.

Challenges I overcame:

Maintaining consistency in color, spacing, padding by using auto layout.

Entire sections sometimes had to be recreated from scratch to conform well with the rest of the app and retain clarity and professionality.

Lessons I learnt through the formation of my app:

I realized the need for flexibility and openness to new ways of thinking/ solving designs for my app.

I learnt to be resilient when fixing and reworking my app until everything was polished with proper alignment.

Auto layout and fill container I realized were vital tools.

The finalized app:

Clean/ polished UI

Consistent and professional

Intuitive and user friendly

Of everything, I most proud of the gamer’s chat. I feel that chatting with others, forming human connections, and relating to others will be essential to improving the user's wellbeing.

To view animation of the final prototype in Figma, click here:

Final Prototype

People with mental disabilities deserve a chance like everyone else. This app will give them that chance to achieve greatness and fulfill their highest potential!