Life.io Mobile App

Product Strategy | UX & UI Design | Prototyping & User Testing

OVERVIEW

The Life.io mobile app is a health and wellness product allowing users to track and monitor their physical wellbeing. By tracking records, they earn points and rewards. This app was intially developed as a companion to the web app experience and is optimized for quick inputs and gaining and overall health picture.

THE CHALLENGE

Feedback from our clients and users suggested that a mobile app would allow them to better track and manage their health and wellness on the go. The Life.io core app is a white-labeled product created using React Native and is available for iOS and Android.

THE APPROACH

I tackled everything in designing the native iOS and Android app, from wireframing, user journey mapping, design, and branding of the product. I approached the mobile app design first by delving into the research on the users, how they have been interacting with the web app and how we can translate that experience into a compelling mobile experience.

Life.io mobile
Life.io mobile Life.io mobile
Results from feature planning brainstorming session

THE USER JOURNEY

The user journey took several rounds of iterations until finalized. Adjustments were made after rapid usability testing, which uncovered sticky areas. Other considerations due to the unique characteristics of React Native's transitions and navigations made it necessary to further simplify the journey to eliminate additional screens. For example, we explored how we could eliminate segmented controls and instead contain the same information in one view.

user map styleguide notes

FEATURE PLANNING

I met frequently with the cross-functional mobile team (developers, product managers, content, and account management) to plan and ideate on features.

user map
Sketch of Profile section

user map
Feature ideation sketch for Rewards

user map
Sketch of Dashboard tiles

user map
Sketch of setting goals

user map
Rewards ideation

user map
Fluid and biometrics tracking

USABILITY TESTING

We evaluated the success of our designs as we worked through user experience issues. I used rapid usability testing methods to test assumptions as we worked on the designs. I conducted over 50 micro-usability tests on flat designs and the prototype as part of the initial testing.

Cards Component

The app uses a card component in various formats as a flexible container for information. We wanted to verify the findability, interactivity and readability of card container components. Cards can be swipeable, stackable and could potentially have horizontal and vertical scrolling.

Cards Pattern - Interactive

Question: "One of these designs is interactive and the other isn't. Which one do you think you can swipe to see more content?"

80%

Chose Option 1

mobile 1

Cards Pattern - refresh

Question: "You are reviewing a syllabus of content tailored to you. Please select where you would view your current Activity."

80%

Success Rate

mobile success

Inputs and Forms

A main focus of the app involves data entry and syncing with health trackers. As a result, users have an option to input data for points and rewards. Making the input process as enjoyable and delightful as possible was essential. After determining the user journey earlier in the design process, I developed several input patterns and tested assumptions about ease of use and test time.

Workouts input

Question: "Review this screen and select how you would input a workout. Where would you select first? How would you search for a workout?"

100%

Success Rate

mobile success

Qualitative Feedback

Desirability Test - Illustrations

Question: "Please review the following screen and answer a few questions about the layout and design."

80%

Clean

85%

Easy to Use

65%

Simplistic

55%

Useful

mobile success

Accessibility

As a data-driven designer, I try to consider edge cases and inclusivity when solving problems. To eliminate issues, I set up usability tests for error messages or other feedback mechanisms to test the readability and findability of the messaging or user interface. Below is an example of a poor design choice, (which I had assumptions about) and fully uncovered during usability testing.

Error Messages

Question 1: "Please review the following screen and answer a few questions about the layout and design. Pay attention to an error message on the screen."

Question 2: "Did you see an error message on this screen? What was the message about?"

Question 3: "Which element on the page did you focus on most?"

Question 4: "Did the brand appear trustworthy?"

100%

Recalled error message

50%

Focused on the error message

80%

Found the brand to be trustworthy

mobile success

THE SOLUTION

Developing a flexible mobile design system that could be applied to white-labeled products was a challenge. I initially developed wireframes as close to final as possible. I followed this process by creating a mobile style guide and customized assets to add further emotional design to the app. Initial desirability testing of the illustrations was overwhelmingly positive, so I continued to include appropriate imagery within the app.

Wireframes

wireframes

Visual Notation

Sketching ideas as I go is how I solve problems without committing to an idea. Oftentimes I keep these sketches to myself and only share the final wireframes with my team.

mobile notes
mobile notes
mobile guide mobile guide

THE PROTOTYPE

**FURTHER CONSIDERATIONS**

After focusing my attention on learning React Native, I now have a firm grasp on prototyping my ideas in order to view quick and accurate results. While I enjoy the process of designing and using a tool such as InVision or Principle, I would now take a different approach to designing this product by prototyping the app in React Native instead. Additionally, the characteristics of navigation in React Native and the thought for both platforms (also considering that 75% of the users I design for use Android) I would take an Android-first approach to design.