Lingo hero.png

Revolutionizing Wellness with a $1.5B+ Glucose-Monitoring App Design

Revolutionizing Wellness with a $1.5B+ Glucose-Monitoring App Design

Date completed: 2023

Note: The product images on this page have been “sanitized”, meaning they have been stripped of confidential, sensitive, or proprietary details to maintain client privacy due to NDA constraints and does not visually represent the actual product launched.

Role: As the Product Design Lead, I defined the future-state vision with C-Suites, coached and mentored my client counterparts and junior designers, built a scalable design system, designed hi-fidelity wireframes, worked closely with developers to Design QA, conducted qualitative and quantitative user feedback, and launched the product

TL;DR

This was McKinsey’s largest global business build of 2023. We partnered with a major MedTech company to help build their first consumer wearable product that translates data from a physical continuous glucose monitor (CGM) to an app. They were traditionally a B2B company and needed help to shift to becoming a B2C company. I led the app design for 200+ edge cases, across 300+ screens and worked closely with developers to build, QA and launch the product in 2 large European markets with a fast-follow in the US. Additionally, I led a future-state visioning workshop with C-Suite executives to define the next stage of the product.

The Impact

The project opened up a $1.5B+ market, creating 200 jobs, 500+ customer touchpoints through the end-to-end delivery of 3 products: a direct-to-consumer website to market the app, the app, and a go-to-market strategy.

72% (n=360) of beta users indicated positive experience (4.5 out of 5) when onboarding the app, including ease of use connecting the wearable device with the app. 65% (n=325) of beta users shared a very positive experience (5 out of 5) with the delivery and packaging.

The App

This project was extremely complex due to 3 key reasons:

i) A highly regulated environment: given that the CGM is a medical device, the app and website were subjected to heavy FDA regulations which created additional constraints on the designs

ii) A multifaceted (and often, fragmented) stakeholder ecosystem: the clients had brought together a myriad of third-party and in-house teams (regulatory, science, brand, UX, and engineering) to work on this product which made cross-team collaboration particularly challenging

iii) Competing (and sometimes, conflicting) priorities of each team: while the design team was solving for seamless UX, the engineering team was solving for build feasibility, and the science team was solving for precise representation of glucose science

The complexity of the project culminated in one of the hero features: the live graph showing the data from the CGM in real-time. The limitations of bluetooth meant that the CGM could only send data to the app in intervals of 5 minutes which conflicted with the brand and marketing’s intent to market the product as a “real-time live graph”. To add to the complexity, the science team wanted to use red and green colors to indicate negative vs. positive glucose spikes even though those colors were not included in our design system.

After several rounds of iteration, deliberation and user testing, we landed on adding a pulsating dot GIF to represent the “real-time-ness” of the graph while using graph lines to represent the actual live data. We tested additional colors with users and expanded our design system to included shades of orange and pink to represent negative and positive glucose while staying within brand guidelines.

My role was to advocate for strong UX without compromising on the clarity of the science, distinctiveness of the brand while ensuring the tech feasibility of the build. I translated research into quick prototypes to test and learn with users per sprint. I took a native-first data visualization approach to achieve simple sophistication and documented 200+ edge cases to ensure holistic documentation handoff to our engineering teams.

The app consisted of 5 key components:

i) A hero screen that shows a user’s heart-rate in real-time reflected by the textures and colors of the wave,
ii) A live graph that translates heart rate to intuitive visualizations,
iii) Personalized wellness tips for daily practices,
iv) A daily and weekly “Spotify-wrapped” of their data and
v) A profile for users to track their progress over time

The Website

In addition to the app, we designed an e-commerce site for the marketing and sale of the app. We worked closely with the go-to-market teams to define the pricing and subscription model and tested the “customer voice” with users. What we found was that users wanted to i) be assured that the actual installing of the CGM on their arms would be pain-free, ii) understand the health implications of monitoring their glucose and iii) receive coaching and advice to improve their overall lifestyles. We tailored the messaging on the e-commerce site to cater to the needs of our users.

As this was our client’s first consumer product, we had to built a scalable and responsive design system from to work across native app and a mobile-responsive website.

The Process

All good design requires an iterative feedback process. I worked in 2-week sprints where user testing, refinement and design QA were baked into the process. In addition to the standard agile ceremonies, we had 2x weekly jams across the complex stakeholder groups: design x engineering x science teams. I worked closely with the engineering teams to ensure a smooth design to dev hand-off. I also led several future-state visioning workshops to define the 2-5 year product roadmap.

Personal Takeaways

  • Communicate and over-communicate: With a diverse team of skillsets (brand, design, engineering, science, regulatory) and competing priorities, it’s easy to run into conflicts. Over-communicating helps provide transparency to other teams and reminds us that we’re all working towards the same goal - product launch!

  • Agile ceremonies can be at odds with regulatory constraints: Given the app was regulated by the FDA, we had to submit each screen and interaction design to the FDA. Figma and similar tools, however, are built for continuous iteration which made timestamped submissions difficult. To that end, we had to resort to PDFs to manually document our Figma designs

  • Behavioral design is powerful and can have unintended consequences: Designing a fitness app that transforms users’ behaviors is good insofar as it helps people live better, fuller lives. However, like all technology, the app can also be misused e.g., leads to unhealthy relationship with food. To prevent any unintended consequences, we worked closely with the science team to ensure that the messaging of the app incentivized healthy life habits