Lifemode App

The Lifemode App keeps you healthy, recommending fitness activities and diets, and tracking them. Choose and combine 28 different programs that fit your unique lifestyle.

[unex_ce_button id="content_86f1mchmy" button_text_color="#ffffff" button_font="light" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="1px" button_bg_color="#a3a3a3" button_padding="10px 40px 10px 40px" button_border_width="1px" button_border_color="#a3a3a3" button_border_radius="30px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#152235" button_border_hover_color="#152235" button_link="https://play.google.com/store/apps/details?id=net.reea.lifemode&hl=en" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]GET IT ON GOOGLE PLAY[/ce_button]

My role

I was responsible for all the stages of product development: creating and testing new features, wireframing, alligning the product with the company strategy, collaborating with programers, designing user interface and user experience, designing marketing visuals and texts for online promotion, and publishing. We build a version for Android and one for iOS*.

* As part of the company's strategy, the iOS version is finished but will be published later on.

Visual Identity

 

Design

The app is part of the company's plan to complement its line of nutritional products (B!tonic Nutrients). When I joined the team, there were only a few wireframes of how the app should look like. I started by assessing each function individually, rearranging and redesigning the screen flow and user experience. 

Lifemode is catered to middle-aged women in Moldova, Romania and Austria. For a more engaging experience, we experimented with gamification elements like personal avatars and point systems. The information architecture had to serve the purpose of both informing and educating the user on nutritional and fitness activities.

Tools and methods

> Competitor analysis; user interviews; personas; customer journey; in-context immersion; wireframing

> Marvel Prototyping; Adobe Photoshop; Adobe Illustrator; Adobe Indesign

Explore

A Lifemode is a 2-week program that contains a fitness and diet plan. The user can choose from 28 different Lifemodes, grouped in 6 categories (Attractive, Energetic, Athletic, Balanced, Hard-working, and Relaxed). The tick indicates selected Lifemodes, the star recommended ones. 

Lifemode Details

To have an overview over several Lifemodes, the user should be able to compare them. We searched for attributes that can be compared, and displayed them as sets of 5 bars: Overall effort, Fitness level, Energy level.

Lifemode: B!tonic Capsules, Elements and Fitness

Each of the 28 Lifemodes contains B!tonic Capsules (the company‚Äôs main product), Elements and Fitness. We made use of color to structure this information, allowing for fast recognition. The use of expandable cards keeps the displayed information at a minimum, while allowing the user to dig deeper at his wish.

Profile

The user's profile contains several parameters that help cater his experience inside the app. Combined, they set the basis for the recommended Lifemodes.

 

My Lifemodes

The user's personal dashboard. It includes overall progress, tracking possibilities, and suggestions for diet and fitness improvements. Each Lifemode comes with its own avatar, which is fully revealed at the end of the program.

 

Track daily progress

A simple, Tinder-like way to track elements and fitnesses. 

Spotlight

From sketch to published design

User storyboard

We identified the relevant user touch points before installing the app, during usage, and after exiting the app. This served as the basis for structuring the functions and screen flow.

Putting 28 Lifemodes into 6 categories

The Lifemodes have been in constant change, as the company's product line was developing. We continiously adapt and restructured the Lifemodes in a more logical way.

From sketch to published design

We started with rapid iterations with paper prototypes, made digital and clickable with Marvel Prototyping. Once we had consistent user feedback, we created the digital versions. Further testing led to slight changes.