OPTUM NOW
Evolving a Sub-Brand Design System (DS) and Handoff Process
When the Optum Store design team began work on Optum Now, I was tasked with revamping the Optum Store DS and handoff process.
An opportunity to improve systems for a more complex product and team
Optum Now integrated Optum Store's e-commerce with Healthline's information and Healthgrades' provider search capabilities.
This required a larger team, a revised handoff process, and an expanded design system.
Project goals
Enhance communication between designers and developers
Set up the DS to enable quick changes to color, typography, spacing, and corners
Boost internal and brand consistency
Improve responsive design (in comparison to Optum Store)
Optum Now: Everything healthcare all at once
Optum Now aims to be an all-in-one consumer health hub. It's owned by RVO Health, a joint venture of Optum and Red Ventures.
Optum Now went live in 07/2024 and absorbed Optum Store in 09/2024.
Optum is a subsidiary of UnitedHealth Group (UHG), serving over 120M consumers, with a 2024 revenue of $253B.
A separate DS for existing + expected divergence
The Optum Store creative team had always had a separate DS from Optum.
A vague, CEO directive to "push the brand" required a DS we could change.
Role
Design System Manager
Stakeholders
2 VPs, 6 Directors, 4 PMs, 7 Designers, 8 Engineers, 2 Marketers, 2 Content Designers
Skills
Design systems
Handoff
Strategic planning
Component design
Cross-functional teamwork
Why have a researcher manage the DS?
I was hired as a UX Researcher, and there were 7 designers on my team. So why did the Sr. Director and VP of UX choose me to upgrade the DS and handoff process?
Big-picture thinking
I'd shown that my decisions considered impacts beyond the next year and beyond the creative team.
Brand knowledge
I demonstrated a deeper knowledge of the Optum brand guidelines than other team members.
Strategy + consistency
A competitive evaluation I did for Optum Store showed initiative, strategic thinking, and an eye for consistency.
Tech savvy
I was more skilled with Figma than anyone on the team—especially with variables—and was known for learning software quickly.
Enhancing communication
between designers + developers
Consult engineers
To see how design file setup could make coding easier and visually closer to designs
Observe + train designers
To learn current designer practices, and incorporate developer-friendlier ones
Solution: Incorporate absent design best practices
Due to a siloed approach with Optum Store, the design team lacked the knowledge or habit of best practices for communicating with engineers. So I changed that with trainings.
Auto layout
Makes updates faster and easier (than groups + spacers)
Layer naming
Clarify why layers exist, and help eliminate redundant ones
Design tokens
They help establish consistency, and ease maintenance and system-wide changes
Design multiple breakpoints
Without breakpoint designs, developers have to guess at adjustments (or not make any)
Variables for quick changes
Although variables made brand realignments and responsive design quicker, designers on my team didn't want to use them.
Why use variables
Update efficiency
Facilitate design system scalability
Improve consistency
Help establish design tokens
Simplify bulky components and prototypes
Reduce design-to-code gap
Challenges with variable implementation
Wrong default mode
I asked the team which default breakpoint to use for variables, the team chose mobile-first.
Problem
For as long as I worked there, designers never designed mobile-first.
Effect
This made it more difficult for designers to use variables, and much more resistant to ever learning.
A new way of working
No designers on my team were motivated to work with variables.
Problem
Although I offered multiple trainings, they did not want to change their process.
Effect
Designers didn't try using variables until several months after I applied variables to the DS.
What I'd do differently
Set the primary breakpoint based on current practices, not aspirations.
Better convey to my manager the minimum variable knowledge required by designers.
Watch designers working, and create trainings showing how to incorporate variables into their processes.
Boosting internal + brand consistency
Variables were one way I increased consistency.
The other was reviewing designs prior to handoff, to ensure adherence to brand and design system guidelines.
Before: Optum Store
After: Optum Now
Elements within each block or card now share the same alignment.
Improving responsive design
When I started, Optum Store designers only designed the largest breakpoint.
When we switched to Optum Now, I got them to design the smallest breakpoints, too.
After half a year of pushing for medium breakpoint design, I convinced them to also design for medium screens.
Before: Optum Store
After: Optum Now
Carousel cards became smaller (consistent with e-commerce patterns), image-text orientation rotated to portrait (more efficient use of space), and swipe scrolling became smooth (instead of one-by-one).
Impacts of my DS work
Better communication between designers + developers
I taught designers how and why to format files for easier interpretation by developers.
Improved internal + brand consistency
Components, spacing, color, and photography became noticeably more consistent.
Superior responsive design
I advocated for designing for small and medium screens, and variables made responsive design much quicker.
Nimble brand updates
The way I set up the DS allowed us to quickly make changes caused by brand realignments.
Learnings + different doings
Separation for changes
Any updates should be in a different section, branch, or file; so it's clear which components are in production
Base on actions, not aspirations
When it comes to making irreversible system decisions, you need to base it on current habits, promised habits.
Everyone has a different process
People of every role have individual ways of working, so it's best to gather input from more than one of each role when designing systems.
