Life.io Dashboard

BRANDING & UI DESIGN

THE CHALLENGE

Life.io, an incentive-based health and wellness app, needed a re-design of their main dashboard. I was challenged with increasing user engagement with the main health and wellness features on the dashboard. They also wanted to transfer to the structure of the design to a modular layout, allowing for a flexible experience that could adapt to future feature iterations.

dashboard

DASHBOARD LAYOUT

I started the re-design by researching the best solution for a dashboard design. Since the layout would need to take a modular approach, the best approach would be to create a system using flexbox.

Designing for flexbox

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

User research

When reviewing how users interact with the dashboard, we discovered that users weren't selecting health metrics to view more. Users focused their attention on the navigation and sidebar. 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
card

VISUAL DESIGN

The re-design 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 application. We eliminated unnecessary colors from the palette and created rules for the use of the grayscale palette.

Lifeio greys

UI Style Guide

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