Designing an MVP for children struggling with gaming disorder

Designing an MVP for children struggling with gaming disorder

Designing an MVP for children struggling with gaming disorder

Overview

Gaming disorder adversely impacts child’s behaviour by affecting their interpersonal relationships with friends and family, especially their parents. It is even detrimental for their academic and non-academic performances.


Mindmate is a web app that offers an online program created for children with gaming disorder to help them reduce their gaming time in a controlled and responsible way. The program is divided into 12 levels and includes interactive exercises to help the parents and their children identify the causes and effects of uncontrolled gaming.


I collaborated with the Designit Germany studio for this project.

Gaming disorder adversely impacts child’s behaviour by affecting their interpersonal relationships with friends and family, especially their parents. It is even detrimental for their academic and non-academic performances.


Mindmate is a web app that offers an online program created for children with gaming disorder to help them reduce their gaming time in a controlled and responsible way. The program is divided into 12 levels and includes interactive exercises to help the parents and their children identify the causes and effects of uncontrolled gaming.


I collaborated with the Designit Germany studio for this project.

Gaming disorder adversely impacts child’s behaviour by affecting their interpersonal relationships with friends and family, especially their parents. It is even detrimental for their academic and non-academic performances.


Mindmate is a web app that offers an online program created for children with gaming disorder to help them reduce their gaming time in a controlled and responsible way. The program is divided into 12 levels and includes interactive exercises to help the parents and their children identify the causes and effects of uncontrolled gaming.


I collaborated with the Designit Germany studio for this project.

Team

Designit - 1 designer, 1 Project manager

Designit - 1 designer, 1 Project manager

Designit - 1 designer, 1 Project manager

Client - 1 developer, 2 psychotherapists

Client - 1 developer, 2 psychotherapists

Client - 1 developer, 2 psychotherapists

Roles

My role - Research, conceptualisation and UI/UX design

My role - Research, conceptualisation and UI/UX design

My role - Research, conceptualisation and UI/UX design

Psychotherapist's role - Determining the content for the program

Psychotherapist's role - Determining the content for the program

Psychotherapist's role - Determining the content for the program

Timeline

Sep 2021 - Nov 2021

About the client

The client, based in Germany, brought a wealth of medical expertise to the project. Their team consisted of a developer as well as two highly experienced psychotherapists, each with years of experience working with children struggling with gaming disorder.

The client, based in Germany, brought a wealth of medical expertise to the project. Their team consisted of a developer as well as two highly experienced psychotherapists, each with years of experience working with children struggling with gaming disorder.

The client, based in Germany, brought a wealth of medical expertise to the project. Their team consisted of a developer as well as two highly experienced psychotherapists, each with years of experience working with children struggling with gaming disorder.

Disclaimer - I did this project during my tenure at Designit. To comply with my non-disclosure agreement, I have omitted the confidential information.

Disclaimer - I did this project during my tenure at Designit. To comply with my non-disclosure agreement, I have omitted the confidential information.

Disclaimer - I did this project during my tenure at Designit. To comply with my non-disclosure agreement, I have omitted the confidential information.

The ask

“To design a responsive MVP that incorporates engaging gamification elements and adheres to a unified structure throughout all levels of the online program”

“To design a responsive MVP that incorporates engaging gamification elements and adheres to a unified structure throughout all levels of the online program”

“To design a responsive MVP that incorporates engaging gamification elements and adheres to a unified structure throughout all levels of the online program”

Process

Process

Stakeholder interview and desk research

Stakeholder interview and desk research

Stakeholder interview and desk research

During the kickoff meeting, the client informed us that they had previously worked with another designer on this project, and had conducted primary research to determine the content and target users for the course.


We had multiple stakeholder interviews where they shared the findings of their research and outlined the course content with us. To augment the client's research, we carried out additional research to gain a more detailed understanding of the target users.

During the kickoff meeting, the client informed us that they had previously worked with another designer on this project, and had conducted primary research to determine the content and target users for the course.


We had multiple stakeholder interviews where they shared the findings of their research and outlined the course content with us. To augment the client's research, we carried out additional research to gain a more detailed understanding of the target users.

During the kickoff meeting, the client informed us that they had previously worked with another designer on this project, and had conducted primary research to determine the content and target users for the course.


We had multiple stakeholder interviews where they shared the findings of their research and outlined the course content with us. To augment the client's research, we carried out additional research to gain a more detailed understanding of the target users.

Insights

Insights

Insights

Assessing the existing wireframes

Assessing the existing wireframes

Assessing the existing wireframes

The client shared their wireframes with us to give us an idea of the user flow, content, and layout that had been established up until that point.

The client shared their wireframes with us to give us an idea of the user flow, content, and layout that had been established up until that point.

The client shared their wireframes with us to give us an idea of the user flow, content, and layout that had been established up until that point.

However, upon assessment, we identified several issues, the two primary issues were -

However, upon assessment, we identified several issues, the two primary issues were -

However, upon assessment, we identified several issues, the two primary issues were -

Lack of responsive design

Lack of responsive design

Outdated content and features

*The designs shown below do not reflect the actual copy and the tone of voice.

*The designs shown below do not reflect the actual copy and the tone of voice.

*The designs shown below do not reflect the actual copy and the tone of voice.

📊 Dashboard

📊 Dashboard

📊 Dashboard

During the ideation phase, I created wireframes for two different concepts for the dashboard. As the team desired to gather user feedback on both options, I then developed each concept into a full-fledged UI.

During the ideation phase, I created wireframes for two different concepts for the dashboard. As the team desired to gather user feedback on both options, I then developed each concept into a full-fledged UI.

During the ideation phase, I created wireframes for two different concepts for the dashboard. As the team desired to gather user feedback on both options, I then developed each concept into a full-fledged UI.

Concept 1 - In the first version, the user can easily access the quests for a specific day by viewing them on the dashboard and then navigating directly to them. The "weekly schedule" CTA on the dashboard allows user to view their schedule for the week.

Concept 1 - In the first version, the user can easily access the quests for a specific day by viewing them on the dashboard and then navigating directly to them. The "weekly schedule" CTA on the dashboard allows user to view their schedule for the week.

Concept 1 - In the first version, the user can easily access the quests for a specific day by viewing them on the dashboard and then navigating directly to them. The "weekly schedule" CTA on the dashboard allows user to view their schedule for the week.

Concept 2 (Final) - In the second version, the user's dashboard initially shows only the total number of tasks and duration for the day, with the option to expand and view the weekly schedule. The client wanted to test this layout with users as it is similar to a school timetable and the team believed that users may relate more to this layout, despite the visual noise.

Final designs

Establishing the Level Structure

Establishing the Level Structure

Establishing the Level Structure

To ensure a cohesive and effective approach, we then established the structure of a level. Insights from psychotherapists, who are well-versed in understanding our target users, proved invaluable in this process. Through multiple rounds of discussions and revisions, the team settled on the following structure -

To ensure a cohesive and effective approach, we then established the structure of a level. Insights from psychotherapists, who are well-versed in understanding our target users, proved invaluable in this process. Through multiple rounds of discussions and revisions, the team settled on the following structure -

To ensure a cohesive and effective approach, we then established the structure of a level. Insights from psychotherapists, who are well-versed in understanding our target users, proved invaluable in this process. Through multiple rounds of discussions and revisions, the team settled on the following structure -

1️⃣ Starting with level overview

To provide context and avoid guesswork, each level begins with a brief overview that includes the level's theme, the types of quests, and key takeaways to keep in mind.

2️⃣ Personalizing the week's schedule

Based on feedback from stakeholders, we recognized that our target users prefer autonomy in their learning journey. This step allows them to plan their weekly schedule by selecting from a list of quests and assigning them to specific days.

3️⃣ Setting the tone with an introductory video

3️⃣ Setting the tone with an introductory video

3️⃣ Setting the tone with an introductory video

The third step features an introductory video that serves to introduce the level's themes and objectives, and to motivate the user to complete it.

4️⃣ Engaging in quests

From the fourth step onward, the user begins completing the daily quests they've scheduled in step 2. They earn points for completing each quest.

5️⃣ Evaluating progress with an assessment

5️⃣ Evaluating progress with an assessment

5️⃣ Evaluating progress with an assessment

After completing all the weekly quests, the user takes an assessment that comprises of multiple choice questions. The assessment can be retaken multiple times.

6️⃣ Reflecting and Archiving

At the end of each level, the user has the opportunity to move their progress data (e.g images, answers) to an archive for future reference. The archived data will be accessible even after completing the course, while the unarchived data will be inaccessible.

Sitemap

Sitemap

Sitemap

After finalizing the level structure, I initiated the process of creating sitemaps to establish the content for the MVP. The sitemaps served as a guide for prioritizing and defining the necessary screens for the MVP.

After finalizing the level structure, I initiated the process of creating sitemaps to establish the content for the MVP. The sitemaps served as a guide for prioritizing and defining the necessary screens for the MVP.

After finalizing the level structure, I initiated the process of creating sitemaps to establish the content for the MVP. The sitemaps served as a guide for prioritizing and defining the necessary screens for the MVP.

Low-fi wireframes

With the sitemaps finalized, I began crafting low-fi wireframes for selected screens to provide the client with a visual representation of the modified layout. The objective was not to revise the wireframes from scratch but to make necessary adjustments to align with the new content.

With the sitemaps finalized, I began crafting low-fi wireframes for selected screens to provide the client with a visual representation of the modified layout. The objective was not to revise the wireframes from scratch but to make necessary adjustments to align with the new content.

With the sitemaps finalized, I began crafting low-fi wireframes for selected screens to provide the client with a visual representation of the modified layout. The objective was not to revise the wireframes from scratch but to make necessary adjustments to align with the new content.

Exploring visual direction with Moodboards 

Exploring visual direction with Moodboards 

Exploring visual direction with Moodboards 

This was a significant step in the design process as it provided insight into three potential visual directions for the platform's UI - an online education platform, a gaming platform, and a therapy platform. Considering the project's timeline, the team decided to forgo the gaming platform concept.


I designed 2 moodboards concepts -

This was a significant step in the design process as it provided insight into three potential visual directions for the platform's UI - an online education platform, a gaming platform, and a therapy platform. Considering the project's timeline, the team decided to forgo the gaming platform concept.


I designed 2 moodboards concepts -

This was a significant step in the design process as it provided insight into three potential visual directions for the platform's UI - an online education platform, a gaming platform, and a therapy platform. Considering the project's timeline, the team decided to forgo the gaming platform concept.


I designed 2 concepts -

Calm and relaxing
Calm and relaxing
Calm and relaxing
Playful and exciting
Playful and exciting
Playful and exciting

The client's team didn't want the product to look like a therapy platform, so they discarded concept 1. They preferred the second concept, and proposed a few modifications before finalizing it.

The client's team didn't want the product to look like a therapy platform, so they discarded concept 1. They preferred the second concept, and proposed a few modifications before finalizing it.

The client's team didn't want the product to look like a therapy platform, so they discarded concept 1. They preferred the second concept, and proposed a few modifications before finalizing it.

Final concept
Final concept
Final concept

🗓 Plan your week

🗓 Plan your week

🗓 Plan your week

Outcome

Outcome

Outcome

As of mid-2022, the program was completed by 10 children, with an average reduction in gaming time of 30% after completion of the course. 60% of the parents reported an improvement in their child's behavior and 30% reported an improvement in their academic performance.

As of mid-2022, the program was completed by 10 children, with an average reduction in gaming time of 30% after completion of the course. 60% of the parents reported an improvement in their child's behavior and 30% reported an improvement in their academic performance.

As of mid-2022, the program was completed by 10 children, with an average reduction in gaming time of 30% after completion of the course. 60% of the parents reported an improvement in their child's behavior and 30% reported an improvement in their academic performance.

Learnings

Working on this project gave me a deeper insight into the impact of the disorder on children's lives and the importance of addressing it. Collaborating with psychotherapists added valuable knowledge to my understanding of the issue. Key learnings -

Working on this project gave me a deeper insight into the impact of the disorder on children's lives and the importance of addressing it. Collaborating with psychotherapists added valuable knowledge to my understanding of the issue. Key learnings -

Working on this project gave me a deeper insight into the impact of the disorder on children's lives and the importance of addressing it. Collaborating with psychotherapists added valuable knowledge to my understanding of the issue. Key learnings -

Every single detail matters

While working on this project, I realized how crucial small details like the organization of tasks and task duration are for the product and how they play a major role in helping kids successfully finish the course.

Being pragmatic in approach

We had lots of ideas on how to build the product, like making it look like a game with micro-animations, but we had to make some cutbacks to meet the deadline. In the end, we delivered the best MVP we could.

Exploring Gamification possibilities through Competitor Analysis

Exploring Gamification possibilities through Competitor Analysis

Exploring Gamification possibilities through Competitor Analysis

After conducting stakeholder interviews and reviewing the existing wireframes, the team wanted to align on the gamification elements to be incorporated in the product. In order to supplement their prior research and explore a wider range of gamification options, I conducted competitor analysis for our client.


Given that the product aligns with the intersection of addiction cure platforms, e-learning, and self-care, we selected a variety of highly-rated and well-reviewed apps within these categories.

After conducting stakeholder interviews and reviewing the existing wireframes, the team wanted to align on the gamification elements to be incorporated in the product. In order to supplement their prior research and explore a wider range of gamification options, I conducted competitor analysis for our client.


Given that the product aligns with the intersection of addiction cure platforms, e-learning, and self-care, we selected a variety of highly-rated and well-reviewed apps within these categories.

After conducting stakeholder interviews and reviewing the existing wireframes, the team wanted to align on the gamification elements to be incorporated in the product. In order to supplement their prior research and explore a wider range of gamification options, I conducted competitor analysis for our client.


Given that the product aligns with the intersection of addiction cure platforms, e-learning, and self-care, we selected a variety of highly-rated and well-reviewed apps within these categories.

After conducting the competitor analysis, we held internal discussions to determine the most suitable gamification elements for our platform. We decided to incorporate the following elements -

After conducting the competitor analysis, we held internal discussions to determine the most suitable gamification elements for our platform. We decided to incorporate the following elements -

After conducting the competitor analysis, we held internal discussions to determine the most suitable gamification elements for our platform. We decided to incorporate the following -

⭐️ Levels and Points

Users will earn points for completing exercises and unlock new quests as they progress through levels to encourage participation and motivate progress.

🏆 Quests

To keep children engaged and motivated by providing a sense of purpose and accomplishment as they progress through the program.

⚡️ Streak

We had identified that the users might not stick to their weekly schedule and might use the platform irregularly. To motivate regular participation, we introduced a streak system rewarding users with bonus points for completing a 7-day streak.

📈 Progress/Feedback

To provide users with updates on their progress, keeping them engaged and motivating them by giving them a sense of direction and accomplishment.

🪧 Signposting

We recognized that target users have a lower level of patience, which could lead to frustration and disengagement with the course. To address this, we included signposting to eliminate uncertainty and provide a clear understanding of progress and objectives.

🏆 Quests

🏆 Quests

🏆 Quests

📒 Diary entry

📒 Diary entry

📒 Diary entry