BetterME by Liberty Life

Mobile App

The wellbeing portal

Health & Wellness

BetterME

Founded in 1957 as a South African life insurance company, Liberty Life has grown into a pan-African financial services company, offering asset management, investment, insurance and health products to 3.2 million people across Africa. In the business of helping its customers get the best levels of support, Liberty ensures that it also offers employees the backing they need to live better, healthier lives.

CubeZoo was contracted to develop the UX, UI, and front-end of a wellness application for Liberty’s staff. Originally web-based, the application is now transitioned into the world of Android and iOS.

The application, called betterMe, was designed to offer insights into employee health to enable better health measures within the company. Linking wearable technology to the application, employees are able to view their mental, physical and social wellbeing. betterMe uses the information provided by the wearables to offer tips and advice to assist individuals to better their health and lifestyle. For example, someone who may not be very active would be reminded that physical activity or exercise can improve health and reduce the risk of developing several diseases like type 2 diabetes, cancer, and cardiovascular disease.

client

Liberty Life

duration

5 Months

resources

services

- Functional spec

- Design

- Prototype

- Development

Design Direction: Mood Board

context

In developing the mood board for betterME we meticulously curated a palette of colours, typography, imagery, and visual elements that resonated with Liberty's brand ethos of trust, reliability, and innovation.

what we did

Drawing from deep-dive consultations, where we delved into the intricacies of Liberty's wellness ethos, and a keen exploration of wellness aesthetics, we meticulously curated a palette of vibrant hues reminiscent of vitality, paired with soothing illustrations that evoke a sense of tranquillity. Our choice of refined typography further enhances the user experience, ensuring clarity and elegance throughout BetterMe, Liberty's groundbreaking wellness app. This deliberate fusion of creative ingenuity and meticulous precision wasn't just about aesthetics; it was about crafting a visual narrative that speaks directly to Liberty's vision for holistic well-being and individual growth. Every element was chosen to deeply connect with users, empowering them on their wellness journey.

Style Guide

Design Elements

We crafted a digital guide to ensure consistency across BetterMe's platforms, meticulously outlining design elements like fonts, colours, and layouts. This not only enhances the user experience but also streamlines design tasks, making every interaction with BetterMe smoother and more enjoyable.

Colors

Typography

User Experience (UX)

In our pursuit of enhancing BetterMe's user experience (UX), we embarked on developing a mobile app that not only simplifies wellness tracking but also integrates innovative tools tailored for personal growth.

These tools empower users to set wellness goals, monitor progress, and access customised content and resources.

Our journey began with a meticulous approach, starting with the creation of wireframes. These wireframes provided the blueprint for designing an intuitive interface that prioritises seamless navigation and effortless functionality.

By honing in on pivotal features and embedding user-centric design principles, we guarantee that the BetterMe app delivers a seamless and enriching experience tailored to each individual's unique wellness journey.

User Interface (UI)

In refining BetterMe's UI, our journey was about harmonising aesthetics and functionality seamlessly.

Drawing inspiration from wellness apps, we opted for a crisp white backdrop adorned with lively bursts of vibrant icons, infusing the platform with vitality and allure.

Emphasising simplicity and a welcoming ambiance, we beckon users into a realm of captivating designs and interactive elements.

This distinctive blend of creativity and practicality not only elevates user engagement but also ensures that every interaction with BetterMe is a rewarding and enjoyable experience.

Our Challenge

Integrate the application with seven leading wearable manufacturers: Fitbit, Garmin, Strava, Polar, Google Fit, TomTom, and Suunto

As a result of the long-term plan to convert betterMe from a web app to a mobile app, CubeZoo had to work with a web and mobile hybrid to produce a dashboard interface. We decided to use Flutter because of its ability to transition the platform from a website environment and into a mobile app environment.

This was only the first hurdle, however, as the team had to integrate the application with seven leading wearable manufacturers: Fitbit, Garmin, Strava, Polar, Google Fit, TomTom, and Suunto. This was an enormous undertaking as the integration needed to be done with each wearable manufacturer individually due to the fact that they all have their own API’s and standards, making integration extremely labour-intensive.

A fantastic user experience was key to making this application a success, and CubeZoo put a lot of effort into overcoming the visual challenge of displaying users’ health scores in an exciting but professional way. A great deal of work had to go into solving this challenge, with the end result being dynamic animations that animate according to user interaction or input.

Our Solution

Help manage caching and session data, we were able to save time in development, allowing us to focus on solving other challenges, such as the API integrations for the wearables.

Using Google Flutter within a web environment, we had to establish how this framework would differ from conventional dashboard-enabled solutions. Following a framework spec to assess Flutter’s strengths and weaknesses, we made sure we were aligned with the platform's strengths to develop a responsive web app.

The final product performed seamlessly. By using only one page of code, we were able to detect the type of screen size, browser, and device, responsively adapting the app’s visual presentation accordingly. The dynamic animations were made possible through the integration of Rive runtime animations. This allowed for the creation of lightweight motion graphics that respond to different states and user inputs.

Using open source libraries to help manage caching and session data, we were able to save time in development, allowing us to focus on solving other challenges, such as the API integrations for the wearables. Partnering with a company that has an existing system for integrating with the most popular wearable brands, we were able to talk to a unified API instead of custom building an integration for each wearable on the market. This allowed for the easy aggregation of data from the wearables to calculate a health score, which is presented to the user through the dynamic animations.

BetterMe is being enjoyed by hundreds of Liberty employees through the web portal, and with our team’s attention to detail, the migration to a mobile app should be seamless.

Similar Projects

Wibernet

Our esteemed client, Wibernet, stands as a premier wireless service provider, revolutionising connectivity for all with its unparalleled blend of pure wireless and fibre internet solutions.

Cash4Trash

Cash4Trash is dedicated to revolutionising recycling practices across Africa, empowering communities while preserving our planet. Their innovative approach introduces the concept of green currency, incentivising individuals to participate in environmental conservation efforts.

SignalXpress

We had the privilege of collaborating with SignalXpress, a dynamic force in the beverage industry, since their establishment in 2012. With a steadfast commitment to crafting, producing, and delivering the most innovative beer and alcoholic beverage brands, SignalXpress has emerged as a leader in the field.