GambleGuard

Recovery & support app for gambling addicted Indonesians

Comment

Try out this project: Click Here

Inspiration

A major issue that is plaguing Indonesian families all around the nation is online gambling. In fact, over 3.2 million Indonesians are active in these sites, risking their life savings only to lose them all. What’s worse is that unlike casinos which have rules in place to prevent minors under 17 from engaging in these acts, online gambling sites do not impose such restrictions. As a consequence, 440,000 pre-teenagers have been found gambling online, and shockingly, an additional 80,000 children under the age of 10 are found guilty too. This is a huge concern for families, especially the parents, as they need to act swiftly to protect their children from this crime.

Online gambling is designed to give you a dopamine hit and get you hooked as you are deceived with wins at first. However as this addiction worsens, so will their pockets as they start losing money. Even worse, their mental health will deteriorate, resulting in psychological issues, depression, family conflict, and potentially death.

Yet when they are their lowest, they may not know how to find the help they need.

Hearing this, we decided to create an app to help those who are addicted to online gambling a path to recovery and support. The app is called GambleGuard, and provides resources to quitting online gambling and support systems to improve their mental health back to normal.

What it does

GambleGuard is an app prototype that helps those who are recovering from gambling addiction. The app has the following features:

  1. Support Groups Sessions: Virtual support groups where users can share their experiences and support each other.
  2. Progress Tracking through Personalized Daily Challenges: Track and celebrate milestones in recovery, providing motivation to continue the journey. Daily challenges to refocus one's energy to good causes.
  3. Mood Tracker: Track emotions and triggers to identify patterns and develop coping strategies.
  4. Connect to a Therapist: Find and talk to a real certified therapist that can aid you on your road to recovery
  5. Talk to Guardie, an AI Recovery Companion: When you are down and need a friend to talk, chat with our AI Duck friend to express yourself
  6. Mindfulness and Motivational Videos: Guided mindfulness exercises and motivational videos to reduce stress and cravings.
  7. Emergency Contacts: Quick access to helplines and emergency contacts for immediate support.

How we built it

The app prototype was built using Figma, a collaborative design tool used for UI/UX design. There are a total of 17 final frames correlating to 12 different action flows.

The first flow we designed is the splash screen, which has the 3 different screens of motivational quotes to remind online gamblers that there is hope and a path to recovery. Illustrations were designed using OpenAI DALL-E. The second flow is the login and register page, where users can create an account for the app.

The third flow is the main Home screen, which is a dashboard to the following flows.

  1. A carousel for upcoming virtual support groups sessions with a timer countdown to join.
  2. A section for the current daily challenge with a count of how many days its been since the user stopped gambling. Clicking will reveal a calendar tracker as well as a checklist for all of today's challenges. One can earn points for completing these challenges to keep being incentivized to continue.
  3. A section for a mood tracker to keep track of daily feelings, such as when you are feeling awesome or upset.
  4. Two sections for getting support to talk to someone. One for an expert, which opens a list of therapists that they can then message and chat with. One more for Guardie, an AI companion that is design to be your friend during this road of recovery.

The layout of the homescreen was designed purposefully to be clear but aesthetic, with splashes of color. Yet our blue theme for the guard continues to play a role in the UI.

In the bottom navigation bar is another page for accessing mindfulness and motivational videos. There a search and filter function is added to help find the right type of guidance needed.

On the last page of the bottom navigation is the personal page where you have access to your account info, to edit your profile, and buttons to join support groups on Whatsapp, resources for mental health, and emergency services.

This was designed to run on iPhone 14 Pro but can be viewed on any platform. We paid particular attention to the colors, sizing of box/buttons, image placement, and so on.

Challenges we ran into

The first challenge we ran into is that our team does not have a background in UI/UX, so it was our first time creating a major project on Figma. We had to learn things on the fly and iteratively worked together to create a design that is functional and friendly. It was not easy to find the right colors and shapes to make the app look approaching. Even the layout of which flows goes first and which took priority was difficult, and then of which we had to animate the actions of pressing all the buttons to open new pages. All in all, we spent over 15 hours designing the interface to be as easy for a person who is struggling to feel comfortable and excited to use the app. We made sure that they are able to access these resources with ease and would actually want to use the app on a daily basis.

On a philosophical note, it was a challenge to figure out what are the necessary help that a person who is struggling with gambling addiction needs. We brainstormed a lot and came up with online support group session as a priority, followed by a personalized challenge that gamify the recovery process. Additionally, it took time to find and write the right quotes to make sure the user feels welcome in the app.

On a technical note, we wanted to then move this design to a real hosted app, either using Flutter or a HTML/CSS based web app. Unfortunately, current solutions for converting Figma prototypes into a native iOS/Android app did not work as intended as it exported code that technically is usable but is completely disorganized. Given the limited amount of time, we decided to pursue our efforts to instead build a functional navigational prototype within Figma itself using the design.

Accomplishments that we’re proud of

We are very proud of the design that we made given our limited UI/UX background. All in all, it was really fun and we enjoyed the whole process. We are also proud to tackle such a major problem that many teens like us face, and hope that we can inspire others to help the community around us.

What we learned

Access to technology can be a sword but also a shield. While online gambling is a devious act that can harm you, online apps like the one we built can also help protect you and aid you in recovery. It’s up to the choices we make that determine our paths.

What’s next for our project

Up next, we would want to recreate this app prototype on Flutter as a native iOS/Android app or as a HTML/CSS based app. Although we have a background in programming, most of us are not to familiar in app design, and as such this would be a great opportunity for us to turn this idea to real app that can truly then help people with this problem.

Built With

  • figma
Share this project:

Updates