.png)
.png)
insight 1
External motivating factors are key
All participants indicated that they get more daily tasks done when there are external factors motivating them. For example participants are motivated to get up on time if they have work.
Petit – Augmented emotional support animal
UI/UX DEsign hackathon
Designing a mobile game that provides the benefits of emotional support animals to help users build a healthy daily routine
.png)
Role
As appointed team leader, it was my job to ensure that we were focused and on track to complete the MVP. I was responsible for heading the design process and tasking assignments based on team strengths.
My other responsibilities included user interviews, usability tests, secondary research, ideation, wireframing, creating illustrations and animations.
For the revised version I was responsible for the visual design, interactions and the 3D prototype.
My other responsibilities included user interviews, usability tests, secondary research, ideation, wireframing, creating illustrations and animations.
For the revised version I was responsible for the visual design, interactions and the 3D prototype.
overview
Petit is a conceptual mobile game that aims to emulate the structure and routine of an emotional support animal for people struggling with depression. The focus of our app is to help users build healthy routines through the gamification of their daily tasks. We achieve this by using Augmented Reality (AR) facilitated tasks and a reward system to motivate our users. Completing tasks gives users coins to customize their room, buy gifts for their pet and unlock upgrades.
This case study is a revised version of a hackathon project I completed with my teammate Monica Campana in May of 2022.
This case study is a revised version of a hackathon project I completed with my teammate Monica Campana in May of 2022.
Timeline
5 Days May 2022 (revised October 2022)
outcome
94% Success rate across all core tasks. Placed top 10 out of 200+ teams.
Solution sneak peek
Problem
Prompt
We were tasked with designing a solution within 5 days around the prompt: How can we intentionally make the world a better place using the metaverse?
Problem specification
Better place → Mental health
Since the prompt was very open-ended we decided to focus on an issue that was personally relevant to us: Mental health. Depression is considered a leading cause of disability worldwide. We wanted our solution to be a free resource that could help individuals struggling with depression with their symptoms.
Our process
Treading carefully
Since our topic is extremely complex and sensitive we wanted our solution to be well researched. We spent the first half of the project researching and ideating. We also prioritized user validation, which unfortunately resulted in a prototype that was less flushed out.
Research
Identifying essential information we need to fill in the gaps
After narrowing down the problem, we jumped straight into defining our understanding and assumptions. This helped us focus our research efforts on answering the following questions:
- What are some helpful coping techniques for people with depression?
- What are the difficulties people face with those techniques?
secondary research
50% of professionals have prescribed a pet for their patients
Since we didn't have much time and coping techniques are well documented in the literature, we heavily leaned on secondary research. We noticed emotional support animals (ESA) were commonly mentioned as a way to help people with depression. We wondered whether we could simulate some aspects of this experience in our solution. Upon further research we found the following specific benefits of ESA:
- Help depressed persons perform tasks such as getting out of bed in the morning.
- Company of animals is The company of animals is comforting and combats feelings of loneliness.
- Structure, routine, and balance were described as benefits derived from interacting with animals.
Interviews
Seeking some truth about motivation
In addition to secondary research, we felt it was crucial to gain insight directly for our target users: young adults aged 18 to 24 who have symptoms of depression. We weren't able to reach our direct audience within the timeframe, so we interviewed people from the ages of 18 to 24 who identified as lacking the motivation to complete daily tasks instead. We asked them each about their experience accomplishing daily tasks, beliefs about emotional support animals, engaging mobile game experiences, and frustrations they have with routines. We wanted to genuinely figure out why they have trouble completing tasks, and what is different about the times they do complete their tasks on time.
insight 2
Too many distractions
Most participants find it difficult to remain consistent with their daily tasks due to distractions, mainly their phones, and a lack of motivation.
insight 3
Achievement increases motivation
All participants believe having a pet would help them feel like they’ve achieved something. They also all indicated that achievement motivates them to do more in their day.
From our insights we developed the following persona of our target user:
Lana
Cashier / 22
High Level Goals
I want something that will help me feel motivated and build a consistent routine. When I don't have work, there is nothing pushing me to complete basic daily tasks, like getting out of bed, so I don't get them done. I wish there was a way I could start building a healthy routine for myself, even on the days I don't have work.
Frustrations
- I get distracted by by phone, and time gets away from me.
- When I start thinking about doing something, I think of all the steps, and I get overwhelmed.
- It's hard to know where to start.
Competitive analysis
Customization and collection is key for retention
Finally, before moving on to ideating, we wanted to conduct a competitive analysis. Mobile games/gamification were uncharted territories for our team. We audited mobile games, especially Gacha games, with a similar target audience to understand common UI trends and how they maintain their player base.
This was important to us as this would serve as the foundation for user motivation to complete tasks. A non-virtual pet has needs that you cannot ignore. Our virtual pet has no real needs, so what will drive users to keep up? Based on our analysis, we felt utilizing collection and buying gifts to pamper your pet could serve as a motivator.
Insight 1
Develop fondness
Gacha games drive users to log in through the attachment to their achievements and prizes. In this way, the games cement themselves as a part of the user's daily routine.
Insight 2
Limiting usage
Some Gacha games become too involved in user's daily routine. Based on online discourse I found that some people feel Gacha games waste too much time. Our solution needs to avoid this problem.
Define
HIGH LEVEL GOALs
Combining the above insights into four high-level goals
We defined our focus by combining learnings from the secondary research, user interviews, and market research as the following high-level goals:
Goal 1
Supporting routine building
The solution must support our users in building a healthy routine. We learned ESA's do this by providing motivation, a sense of accomplishment, and companionship. Therefore, we sought to integrate similar interactions between the user and their virtual ESA.
Goal 2
Leverage rewards
Many mobile games retain players by encouraging them to collect characters or items with virtual currency, and offer daily rewards for returning users. We should leverage this concept to prompt the user to continue meeting their daily goals.
Goal 3
Familiar & concise
Keeping the interface familiar and the onboarding concise is paramount to not overwhelm our users. Deciding to start working on your routine is already a huge step, we don't want to deter our users with a lengthy onboarding process.
Goal 4
Relevant visual design
We want our visual design to cater to our audience and provide joyful interaction to keep the user engaged. Integrating illustration and animation will enhance the retention rate of users. Paying attention to UI trends of mobile games is important.
Design
While keeping the latter half of the problem in mind, the metaverse, we expanded on the above goals using crazy 8s to encourage quick ideation. Then we evaluated each idea and discussed whether it helped us achieve our high-level goals.
IDeation
An Augmented reality solution
One idea we had was to simulate an emotional support animal using augmented reality (AR) to have the users physically do the task for their pet. By helping to facilitate that first step, the effort associated with the task is lessened. After doing some research we found the best option was to have minimal AR usage due to technical limitations: battery usage, lag, and turnaround time.
For the MVP we landed on three core habits to support the user in developing: waking up at the same time every day, eating meals, and going outdoors. We determined the habits based on secondary research. These are either daily tasks people with depression have difficulty completing or routines that can help lessen the symptoms of depression that narrowed down based on what made sense in the context of using AR.
User Experience
To keep our solution familiar with other mobile games we focussed most of our time on two main flows of the app: onboarding and task completion/trigger.
Onboarding flow
Before the user can start completing tasks, we need their routine input and pet preferences. We explored two options for the routine input. Option A was a longer multistep process, taking the user through each input option. Option B was shorter and allowed the user to choose which routine option they want to fill out. We discussed the pros and cons as a team keeping the target user in mind and their goals.
.png)
While we preferred that the multiple-step approach required less text on each page, we wanted the onboarding to be concise. If the effort of setting up is too high then users may be discouraged. We anticipate that users will likely want to start off with one or two goals to work on. Moreover, we already require more user input than most mobile games, so keeping onboarding tight was imperative to keep the app feeling like a game.
Task trigger
We had two options for how tasks could be completed:
Initially, we decided it was better to have the users do tasks whenever, so the game matched their expectations of a pocket pet. But coming back to this project, having the task cue appear only during the scheduled time highlights the importance of completing the task on time, reinforcing the vision of the app and preventing our game becoming another source of distraction. This also removes visual clutter, leaving more freedom for the user to interact with their pet and room. With the flows ironed out we moved on to wire framing and mockups.
Wireframes
Home screen iterations
The home screen was easily the most difficult screen to design. Initially, we put the tasks at the bottom and the rest of the buttons (store, items, coins) at the top right for no reason other than we thought it looked the most balanced.
.png)
While redesigning, I felt the bottom bar was too clunky and closed off the space. When looking at other mobile games, they very rarely have a bottom navigation bar. Instead, they overlay the navigation icons. Studying Genshin Impact's home screen, I noticed the most relevant actions (used to directly interact with the world) are placed on the bottom right for easy access. Less used navigation items are placed on the top right and top left, based on importance.
Following this logic, I changed the screen to have the task triggers on the bottom right, the store and storage on the top right, and settings on the top left. Keeping the permanent and less significant elements at the top of the screen helps open up the space.
Pet selection iterations
Knowing the components of the pet selection would be reused for selecting items in the rewards flow, the challenge became to design for multiple categories, of varying size. I came up with four general directions for the design.
.png)
Minimal, not distracting visuals.
Doesn't work for multiple levels of categorization (i.e different cat breeds and different dog breeds).
Too much scrolling for large number of options.
Better use of space
Interface is simple and straightforward.
Too much scrolling for large number of options.
Allows for multiple levels of categorization.
Options separated on different pages.
Less intuitive as you add more options (horizontal and vertical scrolling required).
Allows for multiple levels of categorization.
Horizontal scrolling not friendly for large number of options.
Hifidelity visual explorations
Naviagtion buttons
Our team was unfamiliar with the conventions of mobile game UI so we attempted to model our buttons drawing inspiration from 'cat game'. I wasn't satisfied with the visuals of the homescreen. So I studied more mobile games with a similar target audience, like Neko Atumse, Tamagotchi, and Animal Crossing (pocket edition), and came up with lots of iterations.
.png)
AR Prototype
I built a 3D model of the cat food in Blender. I then lit it and animated it over a video. Overall I think it looks good but my phone camera quality let me down a bit, the end result looks a bit choppy and slow.
Final Designs & rationale
Routine Selection
Using googles material design for the input forms makes the onboarding feel cohesive and simple. The three core tasks we help facilitate are going outside daily, waking up at the same time everyday, eating meals regularly. By working on these three aspects of a daily routine we hope our users would be able to build some habits that may help them feel more accomplished. Users have the freedom to customize each task to match their unique needs and can choose to start with just one aspect of their routine, or all three. Using googles material design for the input forms makes the onboarding feel cohesive and simple.
Typography
A round and playful type face was chosen for the design. Mobile games tend to push their typefaces, going for ultra playful. Our mobile game requires more onboarding than most so we balanced playfulness and legibility.
Color Palette
For the onboarding process I stuck to a minimal color palette. Pink for the call to action and purple as the secondary color. The colors are muted and pastel to appeal to our target audience.
AR Task Screens
The feature that distinguishes the app from a regular pocket pet is the use of AR to facilitate the tasks. Your pet requires you to physically go to different locations in your house to complete tasks. For example, getting for pet food requires you to go and "grab" from your fridge. Once the user is already up, completing the task for themselves feels less daunting.
Pet text bubble
I felt that the tasks would make more sense if your pet was asking you to do them. I chose create the overlay with a gradient background so the text bubble would be legible no matter the background.
3D model
While the illustration style of Petit is 2D, a 3D model of the pet food works better with AR. To help the can stand out from the background I chose a cartoony style, with bright colors and a logo of Petit along the side.
Rewards System & task trigger
Users complete tasks to gain coins that can be used to buy gifts and decorations. Coins are rewarded for the completion of tasks that correspond with the users ideal daily routine. Following the logic of Gacha games, we hope that the incentive of coins and in-game winnings would give users that extra nudge to help them start their tasks.
.png)
Modal micro animations
Micro animations are an essential element of mobile games, so I knew the modal pop-ups and buttons need to have some movement.
Illustration style
To appeal to our target users we went for a cute, very simplified illustration style.
Clickable prototype
Reflections
A little qualitative and quantitative feedback
- Participant quote: "It helps you to do task that are good for your mental health but in a cute way... I love it!" - Participant C
- 94% Success rate across core tasks (in a usability study with 4 participants).
- Placed in Top 10 out of 200+ teams, as evaluated by senior designers.
How I would evaluate success IRL
I can't really build this game but some things I would think about for the future of this project are:
User experience success
User retention rate
How many users come back everyday? When do users mostly drop off? Do we need to up the rewards?
User experience success
Conversion rate
How many users complete the onboarding process? Is the set up too long? How many users complete their first task?
edge cases
Missing tasks
What if the user misses tasks, how does that reflect in the game?
.svg){kind=small}
