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:
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.
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.
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.
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.
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.
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.
The user journey took into consideration the entire product flow, from initial onboarding and set-up through the main dashboard experience.
When I started mapping the journey of new features, I broke each feature into a separate flow.
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.
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.
The redesign of the dashboard required a refreshed style guide to ensure consistency of the card layout across device sizes.
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.
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.
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.
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%.