Life.io Dashboard

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

THE CHALLENGE

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. Life.io also wanted to transfer the structure of the web application to a modular layout, allowing for a flexible experience that could adapt to future feature iterations.

Design Constraints
  1. 75% of users are accessing the web app through Android devices
  2. We have to consider a global audience
  3. The product will be white-labeled for client use
  4. The design will use flexbox containers
  5. The layout must be modular
animation dashboard

DASHBOARD LAYOUT

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.

Designing for flexbox

Instead of thinking of layouts in perfect pixels, I consider alignment to other elements within a page, stacking and arrangement. I consider my layouts in terms of parents and children or components instead of features.

Cards can be stacked or rearranged depending on whether or not you want to show or hide 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

Flexbox Challenges to Consider

  1. Designing for flexible sizes means that your pixel perfect designs aren't as important
  2. Consider edge cases. A user may be looking at the product on a Linux, a wide-screen monitor or a non-retina device
  3. Flat designs are good, prototypes are better
  4. Design in pixels but think in percentages or rems
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
Low-fidelity sketches

I typically start all projects with low-fidelity sketches. Sketches are less precious and I can move quickly through designs without focusing on pixel perfection. Through these sketches, I explore card configuration, the user journey, illustrations or icons and data visualization.

These sketches are low-fidelity and intended to show quick and unrefined ideas. Since I work on a remote team, I'll highlight areas of discussion and share these ideas during early feature ideation.

card
card
card

VISUAL DESIGN

The redesign of the dashboard required a refreshed style guide to ensure consistency of the card layout across device sizes. Cards have a defined shape and size.

Cards have 5 applications:

  1. Standard
  2. Wide
  3. Long
  4. Detail
  5. Inactive

They can appear stacked, they can be sorted by content type and they can be organized—either hidden or shown depending on the desired card display state. They come in two main states—active and inactive. Active cards have the option to view settings on the back of the card. Inactive cards have the option of setting up a goal or action.

50 Shades of Grey

When developing the style guide, 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

Adjustments to the Grayscale palette

Lifeio greys

UI Style 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.

Lifeio styleguide
Lifeio styleguide

Mobile dashboard card style guide

The style guide is broken into mobile, tablet and larger screen configurations. The style guide shows the various states of the cards and options for configurations full-width, horizontal and vertical.

mobile

Tablet dashboard card style guide

tablet

Large screen dashboard card style guide

Lifeio styleguide

Dashboard Wireframe

We've been exploring different configurations for the dashboard design. Dashboard cards can be used as an overview of progress or as inputs to log health records. Cards can have show page, which includes an overview of the feature and historical data.

Cards can be constructed using blocks of content, which include the following elements:

  1. Header
  2. Subhead
  3. Supporting text
  4. Action
  5. Graph or chart
  6. Settings

Content within these blocks can be rearranged to highlight different sections. For example, numbers can be emphasized by increasing their typographic scale.

Lifeio styleguide
card

White-labeled design

Defining the primary color variables and grayscale palette allows for seamless customizations for client white-labeling.

responsive

RESULTS

  1. There was a 7% increase in friendships overall
  2. There was a 75% increase in user sessions
  3. Dashboard cards are the most used features: Workouts tracking, Sleep tracking, Fluid tracking and Nutrition management

Feedback from user surveys has been overwhelmingly positive. The majority of users (87%) enjoy tracking their health metrics and 73% make it a regular part of their week. The overall usability of the product has been positive as well, with 93% of users indicating that the product is easy to use.

animation animation animation

Further considerations

Life.io has been going through a year-long redesign of their branding and core applications, which I've written about in a separate post. Further design considerations have included animations and transitions of the Dashboard graph items. We're also working on features related to chronic illness management for different types of communities.

Concepts for the graph animations

Early concepts explored animated transitions when loading the screen.

dashboard