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 insurance buyers. My quick internal research shows people resist changing habits without strong motivation or clear goal, but the word “game” sparks excitement and curiosity. How can a game help establish a new behaviour?

Resource & goal

After stakeholder interviews, the product owner and I identified core features like step counting, 3rd party data import, and displaying partner vouchers. We prioritised these for the MVP while the game concept underwent initial research.

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)