HCA Healthcare

Neutron Design System - Mobile component development

Primary role

Senior UX Design Consultant

Year

2023

Main tools used

Figma, Mural, FigJam, Mobbin

Firm foundation

for future design system work and empowering developers.

Estimated 35% increase

in effective UX team cohesion

POC proven

for justification to invest more into design system

Project goal

Create one design system for iOS and Android experiences to speed up development and utilize all capabilities of mobile apps.

Project description

At HCA Healthcare, along with another UX consultant, led a transformative initiative to create a unified mobile design system that bridged iOS and Android experiences. This wasn't just about component standardization—it was about fundamentally changing how one of the largest healthcare providers in the US approaches mobile development and design cohesion.

Major pain points to solve

The situation was complex and hard to navigate:

Disparate experiences across iOS and Android platforms.
Duplicated development efforts across operating systems.
Previous design system (Neutron) faced adoption challenges.
Inconsistent brand presence across mobile applications.
Time-pressured development cycles compromising consistency.

Additional out-of-scope accomplishments

As we worked with the design team, we noticed some team members didn't have the support they needed to work through usability issues or techniques to find the right problem to solve, so we identified critical opportunities beyond the initial scope in order to achieve better value for the client:

Established comprehensive color and typography standards.
Expanded component library beyond initial requirements.
Created detailed implementation documentation.
Built support systems for UX team problem-solving.
Integrated accessibility compliance into core design decisions.

Established comprehensive color and typography standards.
Expanded component library beyond initial requirements.
Created detailed implementation documentation.
Built support systems for UX team problem-solving.
Integrated accessibility compliance into core design decisions.

Previous examples using using iOS and Android design systems separately to design their mobile apps.

Now… let's workshop!

With such a short timeline and many things to achieve, we went right into discovery! We then facilitated to following activities:

Created a sandbox environment for visual exploration.
Established parallel workflows for design and development.
Implemented a token-based design system in Figma.
Built comprehensive handoff documentation for SwiftUI and Kotlin.
Integrated dark mode considerations from the ground up.

With such a short timeline and many things to achieve, we went right into discovery! We then facilitated to following activities:

Created a sandbox environment for visual exploration.
Established parallel workflows for design and development.
Implemented a token-based design system in Figma.
Built comprehensive handoff documentation for SwiftUI and Kotlin.
Integrated dark mode considerations from the ground up.

After these activities were completed, we also led a series of design thinking workshops that completed a competitive analysis and inspiration gathering, affinity mapping sessions with designers and developers, iterative feedback rounds with key decision-makers and visual direction alignment sessions. These were designed to get key insight into how to move forward with our design system and confirm its direction before creating the structure for its documentation and development.

Workshop examples in finding the right direction in addition with other designers, developers and project managers.

Here are all the options we provided for review. We categorized them by style. From subtle tones to pops of color, we wanted to follow best practices of effective IA and accessibility practices in order to make effective layouts easier for users to navigate effectively.

Refine visual direction for example screens after workshops and group design sessions.

Now it's token/systemitize time 😎🤘

Components were now ready to be created, tokenized and documented! Here were specific resources we crafted in order to deliver the final product:

Unified component library for SwiftUI and Kotlin programing languages.
Design token structure for seamless developer handoff.
Accessibility-compliant color systems.
Variable-based token organization in Figma.
Documentation for scale and maintenance for future enhancements.

Components were now ready to be created, tokenized and documented! Here were specific resources we crafted in order to deliver the final product:

Unified component library for SwiftUI and Kotlin programing languages.
Design token structure for seamless developer handoff.
Accessibility-compliant color systems.
Variable-based token organization in Figma.
Documentation for scale and maintenance for future enhancements.

Here are page examples for design system structures & documentation of component usage and guidance.

After project reflection

After the delivery of the design system, the project's impact has possibilities to expand beyond mobile. Stakeholders commented that its influence of web standard improvement, establishing new collaboration between design and development and setting new standards for accessibility compliance would grow business capabilities:

“In general, just doing this work—having this mobile design kit to take forward will not only impact our native app design language, but should also push and level up the Neutron web standards. It’ll also equip us to expand these components to iPad versions as needed, which is relevant to quite a few projects coming up”

“Gaining momentum and focus to an area of Neutron (Design System) where we haven’t historically had the ability to focus. Also, partnering with a group of UX professionals with experience in this type of work”

Despite challenges including of a five-week timeline constraint, inaccurate initial scoping, communication barriers with the HCA design team, and a meeting overload out of our control, we delivered a comprehensive system that exceeded expectations and set new standards for the organization.

This transformation demonstrates my ability to:

Lead enterprise-level design system initiatives.
Navigate complex stakeholder environments.
Deliver beyond scope while maintaining timeline integrity.
Build scalable, future-proof solutions.
Drive organizational change through design leadership.