Case Study
Loot.
A mobile app that provides a supportive learning experience about loot boxes: their odds and your spending behaviour. When it comes to gaming, Loot makes sure their players never get looted again.
.png)
Project Type
Academic
(Capstone Project)
Timeline
10 Weeks
(Jan - April 2021)
Role
Sole Product
Designer
Tools
Figma, InVision, Pop App, Pen & Paper
Final Prototype
Below you can find the final product outcome. Feel free to test out the final prototype yourself as well!
I. Project Overview
I began with the discovery of a rising problem: youth gambling and its multifaceted harms. One main association
is video gaming, in particular, loot boxes were often correlated to youth gambling problems. In response to this correlation, I prototyped an iOS app as a creative proposal to firstly address the on-going and unresolved
situation of loot boxes in video games, as an attempt to support youth problem gambling implicitly.
II. Objectives
1. USER GOAL
To make realistic, tangible impacts through helping users gain control and awareness of their loot box spending habits.
2. PROJECT GOAL
To develop an appealing brand identity for the target audience (youth) and produce an effective MVP prototype of the app.
III. Design Question
"
How might we support youth who engage in video games with loot box features, early in their experience, so that they understand and do not suffer the harms of gambling?
IV. Project Framework
"
Progressing through these 10 weeks, I relied on the Double Diamond Design Process. I began with Research to discover the problem and then narrowed my scope. Once defined, I moved into Design where I progressed from sketches, to lo-fi, hi-fi, and eventually, a final prototyped product that effectively met my users' needs.
1. RESEARCH
A) Discover the problem
Based upon Canadian Statistics, a growing area of concern are the blurring lines between gambling and video games and the potential consequences this may have on youth aged 12-24 years old.
"Youth aged 18-24 years old make up the smallest group of gamblers, yet, largest population of gamblers experiencing Problem Gambling"
"Since money is traded for the chance to win a random reward, loot boxes in video games share many parallels to gambling."
"Relative to non-gamblers, gamblers were more likely to play video games.
Relative to non-video gamers, video gamers were more likely to gamble."
What is Problem Gambling & Why does it matter?
Existing on a spectrum, Problem Gambling is any form of gambling, regardless of its severity, that disrupts a person's day to day functioning. It is the stage before a clinical diagnosis of an addiction.
The impact of Problem Gambling exists on an individual and societal level. Particularly for the person, research has revealed problems in:
#1
greater likelihoods
of developing other addictions
#2
severe declines in mental health and increased mental health disorders
#3
greater rates of suicides and suicidal ideations
Explanations for Problem Gambling?
Although the research is still inconclusive, a popular correlation that has been observed for youth gamblers who experience problem gambling in particular are video games.
attraction to video games for the psychological reward or challenge increases interest to gamble
video games have in-game features that replicate real-life gambling behaviour
the earlier the exposure
to gambling and related features in video games (ex: loot boxes), the greater the risk of developing problem gambling
B) Explore and Define
Once the initial research was conducted, I proceeded to conduct primary research and additional secondary research to develop a comprehensive understanding of the youth directly impacted by The following research methods were used to achieve deeper learnings:
Competitive
Analysis
researched for existing mobile apps for gambling addictions or excessive loot box spendings
Semi-Structured
User Interviews
created interview script and spoke with:
- 3 video gamers
- 3 gamblers
- 2 industry experts
Competitive Analysis
The market research revealed a large gap for mobile apps that supported video gamers' and their use and purchases of loot boxes. This was a major insight that affirmed my decision to tackle the gambling problem space implicitly through addressing the underlying problem of gaming first.
#1
Site & Link
Blocker
#2
Journalling
#3
Mood, Trigger, Activity Tracker
#4
Goal
Setting
#5
Behavioural
Intervention
Vs.
#1
Simulator
Interview Insights
The outcome was initially daunting. The new information I learned did not match my secondary research exactly -- gamblers did not play video games and video gamers did not gamble. Taking a step back from my findings and owning the fear I was experiencing of potentially having to discard my work, I realized by shifting my mindset from the expectations I held, I was able to extract valuable insights.
These 3 insights were unique themes shared by youth gamblers and gamers which formed the foundation for my design decisions. They reflect the core problem most important to the affected populations.
Shared Experiences
Lack of support and awareness of the potential harms associated with their activities and industries
#1
Difficulty tracking spendings and getting lost in the activity
#2
Tendencies to ignore the signs or are unaware of a gambling/gaming problem
#3
Synthesis: Persona & Journey Mapping
I synthesized all the research and interview findings I had learned up to this point and it was apparent a pivot was required in order to best address the needs of my users. The focus could only be on gambling or game, not both.
Due to considerations of privacy and ethical issues in gathering insights from those battling a diagnosed addiction, better understanding where users would benefit from a support from an app, and the market research, I decided to focus on the youth affected by gaming and loot boxes specifically to target gambling in an indirect manner.
Narrowing down the scope of the problem space and the target users allowed me to create a persona and journey map to document my findings and guide this design project
Design Challenge
This process allowed me to refine my How Might We statement or design question based on my findings to best reflect the affected population in my problem space. This original statement was revised 2 more times to arrive at the final challenge:
"How might we help youth better detect and understand their unfulfilled needs (through listening to their thoughts and feelings) by teaching them effective coping mechanisms?"
"How might we support youth who engage in video games with gambling-like features early in their experience so that they understand and do not suffer the harms of gambling?"
Final Version
2. DESIGN
C) Develop & Test
After completing the first diamond in the double diamond design approach, I stopped to ask myself:
What features would best meet Sam’s needs?
How would Sam benefit from using our potential app?
How does my potential MVP address the larger problem space?
User Stories & Epics
Before diving into a solution, I reflected on the needs, motivations, and pain points of my current users to determine a point of entry for a potential digital intervention. A list of 25 of potential actions were created and sorted into 4 categories based on my learnings.
Task Flow Selection
Reflective of a major pain point expressed by interviewees in both gambling and gaming categories and further affirmed by video gamers for their loot box spendings, I initially believed that the problem space could be helped with a behavioural education program. The intent was to eliminate the behaviour.
With feedback, a new task flow was drafted up for an immersive learning simulation. Instead of eliminating their behaviours, the refined goal was to bring awareness to their current behaviours and the feeling of engaging in the process of playing with loot boxes so they have better control in a real game.
%201.png)
Prototype & Iterations
After deciding on the main task flow, 3 rounds of rapid iterations were conducted for the sketch phase, building lo-fi wireframes, and prototyping hi-fi wireframes.
The initial idea resembled a cross between behavioural training and gaming app. Either too bare like the home page or too crowded like the navigation bar.
Overall idea was still messy and directionless. There was too much unnecessary content (ie: Train and Learn), and basic UI was not applied
.png)
Although more refined and organized, such as in the navigation bar, and better UI theory was applied, the colour palette was not fitting for youth and concept. It was too minimalistic and cold and a light theme is uncommon in gaming apps.
Final Version
.png)
.png)
.png)
From the navigation bar, to appropriate font selections and text hierarchy, to effective content, the final hi-fidelity prototype is not only aesthetically fitting for the target users, it was also confirmed through user testing of its potential efficacy.
Visual Identity
My goal for this stage was to ensure I kept my potential users at the forefront of my design. A visually appealing MVP has the ability to inspire an atmosphere of hope and learning to help users take back control during their game play. I began with a few keywords and a mood board. From there I extracted colours from the inspiration to create a set of brand colours. A wordmark and logo were also designed.
-
To establish the word mark, I began with digital text samples, however, I was dissatisfied and resorted to the good ol’ pen and paper.
I sought feedback for my creations from 6 users in order to decide on the final word mark.
A digital copy of the favoured design was created and brand colour were applied.
Once the word mark was created, inspiration arose for a potential logo. Drawing on the boxes in the word mark and the animated and fun atmosphere of a gaming app, the logo evolved from word to a character of a friendly animal, to an abstract look of both. The logo was the 1 main component where I was able to freely create as a designer, a foreign yet exciting feeling as a new designer.
UI Library
The final component of the visual portion of this project was to create a UI Library. This document standardizes the design process for potential front-end development in the future. The content is organized by Atoms, Molecules, Organisms, Templates, and Screens and includes a set of master components, style guides, and specific measurements to scale.
D) Deliver & Listen
Marketing
6 iterations later, the final product is complete. A fully responsive marketing website for mobile and desktop viewing was created to highlight the product.
Reflections & Learnings
🤝
Through these past 10 weeks, I see the critical role teamwork plays in UX/UI design. I am grateful for the network I have, designers or not, and the unique perspective each person has. I’ve learned how to reach out for help and better frame critique so that the insights
I gather can all be applied directly to improve my work.
🚫
I am also reminded by this project that there is no such thing as perfect work. Regardless of the number of user testing sessions and critique, there will always be changes to be made. It’s important that I don’t get stuck in this process and continue to create.
💡
-
Designs cannot be a 1
size fits all approach -
Designing for everyone
meant that no one would
be satisfied in the end -
Just because a small
sample did not match my
initial research does not mean these real people do not exist