<`!DOCTYPE html> Kelly Dern | Product Designer
Back to Work.
dashboard

Health and Wellness Mobile Experience

Project Overview

Mobile app wellness tracking for Life.io

2016-2017
  1. Branding & identity design
  2. New feature planning
  3. Design system
  4. Prototyping and animation
  5. Visual design
  6. User research and analysis
  7. Co-led design workshops for clients
  8. UI styleguide refresh and implementation

The Background

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 initially developed as a companion to the web app experience and is optimized for quick inputs and gaining an overall health picture.

Feedback from Life.io's insurance clients and users suggested that a mobile app would allow them to better track and manage their health and wellness on the go.

Design Constraints

Since Life.io's products are licensed to insurance companies, the identity of the project would be white-labeled and needed to be adaptable. The overall framework would need to be flexible so that sections could be rearranged or removed based on the needs of the client.

The Approach

I tackled everything in designing the native iOS and Android app, from wireframing, user journey mapping, design, illustration and motion, 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.

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

Life.io mobile
Results from feature planning brainstorming session

User Journey

The user journey took several rounds of iterations until finalized. I made iterative adjustments after rapid usability testing, which uncovered areas of improvement. 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

Defining the Dashboard

I had to translate Life.io's core feature set, which focuses around earning points and rewards for healthy activities, to the mobile space. I knew that the core experience would center around quick inputs from the main dashboard. Insights from graphs and content would also have to be accessible from the main Dashboard area.

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

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.

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

Onboarding New Users

New users were prompted to set up a health account and pair their fitness trackers. Life.io incorporated fitness data from Fitbit, Garmin and Withings to help users understand their fitness goals and path. Pairing trackers provided data for workouts and sleep tracking. After completing onboarding, the users are directed to the main Dashboard.

wireframes
Onboarding new users

Dashboard Experience

After onboarding, the main health Dashboard is the central hub from which users can access their entire health and wellness overview.

mobile notes
Dashboard ideation sketches
wireframes
Earning rewards for quick inputs

Optimizing for Quick Inputs

A main focus of the app involves data entry and syncing with health trackers. As a result, users have the 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.

wireframes
wireframes

Surprise and Delight

I experimented with Lottie to integrate subtle and appropriate animations for loading screens or supplementary hero images.

wireframes
mobile notes mobile guide

Key Learnings

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.

Get in touch.