UI/UX Design
Branding
Bios App
App & ecosystem redesign for GraphWear with pairing wearable.
TL;DR
Company
GraphWear Technologies Inc.
Timeline
Mar 2022 - Nov 2022 (8 months)
Role
UX/UI Lead
Tools Used
Figma, Jira
Project Goal
Redesign GraphWear’s clinical CGM app to seamlessly integrate with its glucose monitoring device, while establishing a distinct and human-centered identity that sets the brand apart from market leaders like Dexcom and Freestyle Libre.
key constraints
Compliance with FDA regulations for Class II medical devices
key Approaches
Data visualization, Brand research
Background
Redesigning GraphWear for a user-center Experience
When I joined GraphWear in 2022, the design of their consumer-facing app was still in its early stages. My role was to lead the redesign of the app so it could seamlessly integrate with their continuous glucose monitoring (CGM*) device. At the same time, I started reworking the branding system to feel warmer and more approachable—something that felt less clinical and more human.
*A Continuous Glucose Monitor (CGM) is a device that measures blood glucose levels continuously throughout the day and night, providing real-time data to help people with diabetes manage their condition. CGMs typically involve a sensor that is inserted under the skin.
GraphWear's early-stage Logo
GraphWear's product (CGM device)
GraphWear's early-stage mobile app
research
Shifting from clinical monitoring to lifestyle support
All good design starts with a deep understanding of the system.
So the first thing I did after joining the team was map out every possible diagram I could think of:
User Journey Map
App Integration Ecosystem Map
Stakeholder Map
Branding
GraphWear’s New Visual Identity
Competitive Brand Analysis
I also did a brand analysis across all the competitor products, focusing mainly on color palettes.
Color Ideation
Based on the keyword association exercise, I picked the primary brand color.
Logo Ideations
Drawing inspirations from chemical compounds and the form of the letter "G", I played with different shapes and compositions.
The final idea combines "G" and "W" as well as the shape of the device band.
Brand Guide
UX strategy
What we are missing in leading CGM apps
There are two major CGM brands dominating the market—Dexcom and Freestyle Libre by Abbott. But when it comes to their app design, both feel visually dull and lack the energy or warmth users deserve from a product they interact with every day.
Dexcom G6 App Interface
Freestyle Libre 3 App Interface
User Flow Charts
UI design
adding human touch to a clinical app
Homescreen
To ease the transition for existing CGM users, the app was designed with a familiar structure inspired by the two leading apps on the market. However, by introducing a refreshed color palette and thoughtful iconography, the experience feels more emotionally uplifting—less clinical, and more human.
Dexcom G6
Freestyle Libre 3
Our design
Data Visualization for TIR (Time in Range)
Time in Range (TIR) is one of the most important metrics in diabetes management. It represents the percentage of time a person's glucose levels stay within the target range—neither too high nor too low. The closer the number is to 100%, the better the glucose control. TIR is often used as a key indicator of clinical improvement.
Here, I explored different ways to visually represent the TIR percentage and how it changes over time.
Onboarding
The device includes a sensor that needs to be inserted and worn in a specific way. To help users understand the process easily, I created a series of instructional illustrations—delivered as GIFs within the app for clarity and accessibility.
Alert System
Glucose alerts are the core of the app—they’re what people with diabetes rely on to understand their current status at a glance. That’s why I designed a visual system that’s intuitive, straightforward, and easy to interpret in real-time.
Final UI
