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.
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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
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:
Content within these blocks can be rearranged to highlight different sections. For example, numbers can be emphasized by increasing their typographic scale.
Defining the primary color variables and grayscale palette allows for seamless customizations for client white-labeling.
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.
Early concepts explored animated transitions when loading the screen.