Hollo

Mental health is a significant problem in Hong Kong. Hollo has a mental health plan to help people come to terms with it. To increase patient retention and adherence, we gamified it.

Created at Press Start using Figma

Background

There is a mental health crisis in Hong Kong. Even though 61% of Hong Kongers will suffer from poor mental-wellbeing, only 26% will actually seek help (source). Hollo aims to identify these symptoms early using AI and help them reach a healthier mental state.

To achieve this, Hollo adapted a mental health framework into something that could be followed day by day in an app. To increase retention in the program, they wanted to gamify the journey and activities. There was just one problem, they didn’t know how to gamify it.

Context

Photo by National Cancer Institute on Unsplash

Hollo’s target user was specifically cancer patients. The user research was done by another design firm called MAKE Studios. Some of their findings validated our initial assumptions, others were quite novel and interesting. We considered the following when ideating and prototyping:

Patients want something fun, but not condescending or patronizing
Patient’s energy and ability may fluctuate day to day — cognitive and physical bandwidth
Patients want a relaxing environment
Patients want the app to feel like a human is interacting with them

Research

Grouping insights

Task

Sebastian - UX/UI Designer & Creative Lead
Brandon - Visual Designer & Artist
Cedric - Artist

The Team

Design a journey that would engage patients through gamification
Provide detailed documentation about the game mechanics and rules
Design high fidelity wireframes complete with in-house art assets

Our Mission (if we choose to accept it)

Armed with insights, inspiration instantly struck me. Relaxing? Human? Animal Crossing was exactly what we needed. For the uninitiated, Animal Crossing is a very relaxing game where you decorate your island and make friends with the anthropomorphic villagers. There’s no winning, no time limit, no points, nothing to push you outside of your comfort zone. A relaxing island adventure was exactly what the users needed — a brief respite from daily life, which in Hong Kong could be quite fast-paced.

The characters in the game are also very human, each with their own distinct personality (like Beardo who heard I was planning a concert and gifted me a trashcan). Even more, these characters can remember your own interests and hobbies, for example, if you mention that you prefer watching TV or reading, they will bring it up in future conversations. All of this melds together into the closest thing a video game has gotten to beating the Turing test. If Nintendo ever does use chatbots, it’ll probably be for the Animal Crossing characters.

The Plan

Beardo giving his thoughts on my project

Surrounding his house with trash in response

Execution

Throughout the project we were constantly iterating on the designs. However, one core theme stuck with us: game visuals. The placement of the text, even whether the text popped up on the screen versus came up one letter at a time was important to achieving that game-like feel.

Documentation was quite important not only for the client’s understanding but also for the developer. We had base exercises/interactions that would be used in many of the lessons, so we categorized where those would be based on the order of the lessons as well as grouping them by exercise. Furthermore, I held a series of alignment meetings to explain how the patient would progress through the game.

Wireframes

Documentation

The Game

So, how did we translate Animal Crossing to mental health? First, we picked out the pieces that we felt like could solve some of the pain points the patient felt. For the relaxing environment, I suggested a garden as it could be a place to meditate. In addition, the outdoors and greenery would be relaxing. Then, the question of the more human side came in. Did we want to have the character looking at you? Did we give the patient their own person who the character talked to? For many of these considerations, I discussed with the clients to make sure they understood the reasoning behind our suggestions.

A series of moodboards that we used to align with the clients and give suggestions

Before and after: dialogue

Documentation for which interactions go with which lessons

Conclusion

Wireframes

Although we had some setbacks in the end, the clients were happy with the final result. We had gamified a few of the lessons so that playing the game would actually reflect the learning objective. In addition, the art assets were high quality and would help immerse the patient in a relaxing island adventure. The end product comprised 62 screens and dozens of art assets. Everything, from signup to the exercises, would be there for the clients to pass on to their developers, and with the documentation they would have little problem figuring it out.

Reflections

The main gap that was highlighted during this project was my visual design skills. While the basic wireframe was helpful for Brandon to go off of, my high-fidelity wireframes would often have to be polished by him.

As the team lead I also should have allocated more time towards the creation of the art assets as it became a bottleneck towards the end of the project.

Proposed KPIs to Track

% change of Patients that finish the program:
- Measuring how much more effective the new program is than conventional approaches
- Finishing the program is one of the key objectives for Hollo
% of Patients who return to therapy within 6 months:
- Finishing the program is pointless if it has had no effect on them and they still require therapy after
- Hollo communicates with therapists so this information would be available
- However, just because patients still require therapy does not mean the app has had no effect