Web Design for OpenBet

BETBETTER × OpenBet

Project Summary

Problem

Process

Team

Discovery

Brief:

Athena 2022 is a 24 hour hackathon host by Showcode. During the hackathon each team had to pick a theme from sponsors (Beamery, Lloyds Banking Group, OpenBet, PwC and Saltpay) and created a project in 24 hour. My team picked the theme from OpenBet. Which is find a safer way to bet.

Solution:

Our solution to the problem is tracking time spent gambling via browser extension and reporting it via website. When the user register an account their personal details will have to be real to pass the verification. Users can check their accounts from all the online betting platforms on BetBetter and use the dashboard to check the usage based on time.

Brainstorm

We started with brainstorming different ideas for each themes.

Research

According to the gambling-related harms evidence review from UK government:

  1. 13% of the population experienced some level of harm from gambling
  2. £570 million is the estimated excess cost of harmful gambling

User Research

We made a quick survey and I asked others in the event to fill up the form. However we have very limited time, so I got 2 responses for the survey.

Their are some insights we got from the user research:

  1. Users lost track of their time and money when gambling
  2. Their physical and mental health have declined due to excessive time spent gambling

Ideation

Our solution to the problem is tracking time spent gambling via browser extension and reporting it via website.

  • Website allows users can set time limit on their online betting
  • Browser extension tracks the time spent by the user on gambling websites
  • Website reports this information for the user
  • The app blocks the user from the gambling sites if they spend exceed their limit

After structuring the MVP, we decided to develop the project with different methods. The front-end developer made a mockup with JavaScript to show the browser extension. The back-end developer used databased and coded out how the data work with the gambling websites. As an UI/UX designer, I designer and prototype the website in Figma to show how the user register the account and verified their identity. Then, the user can see their usage summary on the dashboard.

User Journey

Wireframe

User flow

Validate

Front-end & Back-end development

1. Browser Extension

Front-end was developed by Isabella Mitchell

2. Data

Back-end was developed by Selin Bengi

Final Design

Metric of Success

Our metric of success will be seeing a fall in the amount of times the user has been blocked.

This metric shows that the user has increased their self-control with regards to online gambling, implying that their gambling problem has reduced

Reflection

In this project, the time was very limit so we did not have enough time to gather more user research. Also, for the future direction we came up some ideas about how to improve our product.

Add the factor of money to this app:

  • The users will set monetary caps
  • The app will track and record the money spent across gambling sites
  • The app will block the user for spending above monetary limit