Back to Work.
dashboard

Modular Health and Wellness Framework

Project Overview.

Health and 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

Life.io, an incentive-based health and wellness app, needed a redesign of their main dashboard. I was challenged with increasing user engagement with the main health and wellness features on the dashboard, as well as launching new health tracking features within the dashboard framework. Life.io also wanted to transfer the structure of the web application to a modular layout, allowing for a flexible experience that could scale.

While at Life.io, I was the primary Product Designer and led the design, usability testing, supported implementation, and monitored success for many of their new features including:

  1. Workout Tracking
  2. Fluid tracking
  3. Points and rewards
  4. Content index
  5. Surveys
  6. Food tracking
  7. Sleep tracking
  8. Branding and identity refresh
  9. Rapid usability testing process

Design Constraints

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

  1. 75% of users are accessing the web app through Android devices
  2. The framework would have to adapt to a global audience
  3. The product will be white-labeled for client use
  4. The design will use flexbox layout
  5. The layout must be modular and adaptable to accommodate additional features
animation

The Approach

I started the redesign by researching the best solution for a dashboard design. Since the layout would need to take a modular approach to allow for future iterations, the ideal solution would be to create a system using flexbox using cards as the main building blocks.

card

Cards can be stacked or rearranged depending on whether the feature required showing or hiding different content areas. The first item appears in the top left and then proceeds from left to right. Cards have a flexible width and height, which can expand and contract depending on the device view. These cards can be arranged to promote or highlight different types of content.

card
card
card

User Research

When reviewing how users interact with the dashboard, we discovered that users weren't selecting health metrics to view more types of content. Instead, the actions were concentrated around the main navigation and sidebar areas. We used this information to inform some of the early iterations on the design.

heatmap
Previous dashboard design

Data Visualization Explorations

Data visualization is a large component of Life.io's dashboard. Since the dashboard is centered around inputting information to see immediate results, it was necessary to include clear visualizations.

card
Early explorations

A Modular Feature Framework

Each feature followed a similar UX flow so that users could begin to recognize patterns when using their dashboard. Users started by setting a goal (which they could adjust at any time). They then saw a different (active) dashboard card state which allowed them to use quick inputs and view more data trends on a separate screen.

card
card
Fluid tracking card states visual guidelines
card

User Flow

The user journey took into consideration the entire product flow, from initial onboarding and set-up through the main dashboard experience.

user journey

When I started mapping the journey of new features, I broke each feature into a separate flow.

user journey
Content Index user journey

Dashboard Explorations

When designing the new dashboard layout, I explored several options for the layout and arrangement. Since the app was designed to use flexbox and built in React, the containers would need to be flexible depending on the screen size.

dashboard content index
Example of components that Life.io customizes
content index

Componetizing Each Feature

When designing new features, I evaluated the design debt of creating a new component for that feature. If there was an existing component, then I would create a wireframe of the design and reference the component in the style guide. New components would require additional planning and outlining in the style guide.

When I was designing life events tracking surveys, my team and I determined that we needed to create three new components: radio button cards, check box cards and a likert scale button. I created the patterns for these components and they were refined in the web style guide for future use.

Similarly, when redefining notification patterns and the points and rewards system, I defined new components only when necessary to cut down on design and engineering debt.

Lifeio greys mocks
dashboard

Styleguide Application

The redesign of the dashboard required a refreshed style guide to ensure consistency of the card layout across device sizes.

Styleguide Audit

When developing the styleguide, we reviewed the use cases of the grayscale color palette. There were several not in use and others which had inconsistencies in the application. We eliminated unnecessary colors from the palette and created rules for the use of the grayscale palette. By narrowing the scope of gray usage down to 5 main colors, we were able to outline a design system which could be applied to any client project.

Lifeio greys
50 shades of grey

Refined Scale

Once we refined the scale and color use, we were able to narrow the palette and use of components. The grayscale map could be limited to 5 core colors after the audit.

Lifeio greys
Adjusted grayscale palette

Versatile Guide

The creation of the user interface style guide for the Dashboard took into consideration how the layout may change and adapt, since not all cards would be applicable to each client's goals and needs. The style guide documented how to create new cards and how they can be arranged or expanded within the interface. We made sure to create repeatable components, which will create harmony in the design and development.

mocks mocks

Results & Key Learnings

During the two years that I worked on developing the design system for the Life.io dashboard, I launched several new features for health tracking. We saw a 7% increase in friendships throughout the app, and redesigning incentives saw an overall increase in engagement of 500%.

Each feature had different challenges, but there were constant themes throughout:

  1. Develop a comprehensive design system, and stick to it: Life.io started out with a design language that included more components than necessary, but narrowing down the elements to just what we needed, we were able to increase product feature development and app speed.
  2. Test extensively, quickly: Using rapid usability testing, I was able to test early and often, which limited the decision-making process and helped guide the design.
  3. Design for flexibility: Flexbox is a design system where the containers expand and scale depending on browser window size. Along with the white-label constraint, components needed to be both modular and scalable, which extensively limited the design. I was able to work within these constraints to create features that could have their components, design language and layout adjust depending on the client need.

Get in touch.