Yulife app

Mobile app

Yulife is an insurance startup that incentivises its customers to live more healthily. Users complete daily challenges in a game-like app that is provided as part of the insurance product. By completing these mental and physical exercises, such as walking, or spending time to focus on mindfulness, users are rewarded with in-game currency. This currency can be used to buy vouchers in the app from partners like Amazon, Asos, Avios; or for discounts on products from Garmin and Calm.

As the company's first and only designer, my job was to merge the concepts of physical and mental exercises, and the stakeholders’ vision of gamification; and to design the entire game experience in the app, from research, UX, UI to final product.

Role / UI, UX, art direction, illustration, animation
Client type / B2C
Tools / Photoshop, Principle, Illustrator, XD, Zeplin

Duration/
MVP (3 months);
Evaluation, research & art direction, (5 months);
Further UI, UX (1 year)

Gamifying Health Insurance

The target audience is quite wide: the user can be any age, hold any occupation, have any interest - it’s basically whoever bought the insurance. I conducted user research about people’s attitudes to changing their habits and discovered that people will stick to their lifestyle if there isn’t a good reason for them to change it. Conversely, the word “game” elicits excitement or curiosity. So how can a game help establish a new behaviour model?

Resource & goal

On another hand, after several interviews with the stakeholders, the product owner and I learnt that there were some core features like measuring step count, displaying vouchers from the partners etc.. so we listed the most basic core features and started building the MVP while the game concept was going through the initial research stage.

Visuals tell the story.
Positive emotion is the theme.

we decided to use visuals to tell the story first. The main character of the story is a giraffe, who is the brand mascot. The game plays out in chapters, each set in a different terrain from the natural world. In each chapter, the giraffe meets a different animal inhabitant, themed according to a unique positive emotion. There are four worlds in total: forest, ocean, desert and mountain.

Challenges

The quests range from different levels of physical to mental exercise. By doing it, the user gets yucoin which is a token that they then can redeem in the rewards section. Each day users can choose which challenge out of the 4 they would like to participate in. The difficulty level reflects on the yucoin they get.

UI strategy

To feel more like a game, we decided not to use the standard iOS or Android UI library. We did want to minimise the learning curve so we used a similar structure of conventional apps: a 4-button nav bar at the bottom of main pages, a top left menu, an overlay pop up screen. The scrolling map is also using the technology from Facebook newsfeed. This design allows the user to concentrate on the content of the app.

To create a more immersive experience, the layout almost always uses the full screen width, without visual borders.

Game mechanics

We studies the game mechanics and keep giving triggers - reward system to bring users back to engage more with the app. These include streak, surge, unlock challenges, chest box, leaderboard, and the progression on the map. 

Typeface

Bariol + geometric shape to convey maturity and friendliness

Information screens

In these screens it is vital to show data clearly: the voucher purchasing history, activity history, and past activity results. Another scenario is where we need to deliver a message, like a loading screen, activity success/failure, or a countdown.

Each of the chapters consisted of 7 quests, and 7 chapters in each world. The chapter is themed by the positive emotion such as: love, discipline, balance, endurance, connection, nobility, and unity.

Progress map is another important mechanic because it builds a mid/long term engagement. The final chapter of each world is locked so it creates surprise as well as a motivation to keep moving forward.

Nav bar

As the game evolved over time, the original nav bar became problematic for the infinite scrolling map. After trying different solutions, we landed on a non-intrusive solution by careful use of colours: the background image is edge to edge and the UI is clean, elegant and yet functional.
(Prototype: Adobe XD, principle)