Chronic condition management

Livongo web app

A ground-up rebuild of the consumer web experience for diabetes, hypertension, and obesity management.

Timeline: 2019 Q4
Role: Research, Product Design, Design System
Team: 1 PM, 1 Frontend, 1 Backend

Overview

Livongo helps people manage diabetes, hypertension, and obesity by pairing smart devices with expert coaching and everyday lifestyle support, offered to members as part of their employer's benefits.

The outdated Livongo web app, prior to the rebuild

The challenge

A web app left behind

By 2019, Livongo's web app had fallen behind. Members leaned on our iOS and Android apps to manage chronic conditions like diabetes and hypertension, but the web experience lagged in both form and function. It offered limited support and only covered the diabetes program. Members were clear about what they wanted: a larger screen to view and log device data, review trends and insights, and connect with their Livongo coach. We saw the chance to rebuild the platform from the ground up and better serve them.

Goal

Seamless across every surface

Build a new web application that gives Livongo members a seamless experience across web and mobile. The MVP called for multi-condition support, feature parity with the native apps, WCAG-compliant accessibility, and a responsive interface that holds up across every viewport.

See the process Click to expand

Foundational responsive wireframe layouts across targeted viewports

Step 01

Research

Before designing anything, we dug into where members actually were. We reviewed recent foundational studies, analyzed user behavior across our existing platforms, and pulled the technical requirements for a responsive build.

Mined current Livongo and myStrength web analytics to set our breakpoints
Built foundational wireframes of key page templates across targeted viewports
Ran low-fidelity usability testing with internal stakeholders and participants

The lightweight design system built to keep components consistent

Step 02

System first

Rather than jump straight into workflows, I started with a lightweight design system. Getting the foundation right up front kept components consistent, made holistic revisions possible, and let design and development iterate efficiently.

Step 03

Implementation

From there, I translated our native mobile workflows to the web. Working alongside the front-end team, I designed end-to-end deliverables for every current Livongo program and feature, finally bringing members true parity across all their surfaces.

Diabetes management
Hypertension
myStrength SSO integration
Coaching
Account management
Member support

Step 04

Summative usability testing

To make sure it held up, we ran remote moderated interviews with 15 participants living with diabetes and hypertension. We focused on core health-management tasks, checking that people could navigate and correctly interpret their information across key flows, and that the interface met both usability and clinical safety standards.

The new web app