Omnipod 5 CGM Graph Redesign

Role

Lead Designer

Teams collaborated with: Product Management, Systems Engineering, Software Development, UX Research, Human Factors.

Project timeline: 6 months

Overview

The CGM Sensor graph that launched with the v1.0 Omnipod 5 app for Android was built on a legacy design system with custom components that can potentially add to tech debt when future OS versions are released that could impact UI.

Opportunity

Omnipod 5 customers have expressed desire to see their blood glucose data in more than 3 hourly segments.
Shift internal design system to use native Material Design components for scalability of OS updates.
Design parity with coming iOS version of Omnipod 5.
Resolving tech debt.

Challenges

Designing for Android devices and their various screen sizes.
Development timeline and scope.
Finding alignment between the MVP and Ideal solution.
Designing for localization and responsive design behavior.

Process

Explore Material Design native component options.
Consider localization into design for international releases.
Prioritizing content layout.
Factoring Dev scope into to strategy.

Solution

The graph header became the focus of the redesign effort, having the largest impact visually and functionally. Without affecting Dev scope.

Design Highlights:

Words over color: The old design didn’t properly indicate which mode the app was running in. Instead using color changes in the header to show that in Automated mode with the color purple for example.

Information hierarchy: Using larger text to emphasize CGM and IOB values.

Matching Home screen trending arrow: Using the same trending arrow from Home screen adds familiarity and value of consistency for users.

Result

Adding 3/6/12/24 hour time segments using Material Design components.
Simplified and cleaner design.
Responsive design to work with smallest screen size, and various localization scenarios.

Screen Workflow

Localization Examples