Scaling Digital Workflows in the Healthcare Industry
Enterprise Design System with Figma
Working in the healthcare device industry means that clarity and accessibility aren't optional—they're essential. I had the opportunity to lead the development of a modular AEM component library in Figma to create more intuitive, accessible experiences for patients and caregivers.
Taking a systems-based approach helped ensure that digital touchpoints—from mobile navigation to interactive elements—met WCAG 2.1 standards while remaining visually consistent and on-brand.
A key part of this work was closing the gap between brand vision and what’s actually buildable, giving cross-functional teams a reliable foundation for launching web experiences across dozens of international brands and markets.
12
Column
Grid
380+
Button
Variants
18
Distinct
Text Styles
Core Guidelines & CMS Governance
A structured governance model was established to balance creative flexibility with technical consistency. By documenting standardized spacing, responsive behaviors, and both rational and emotional styling logic, the framework provided global content authors with clearer guardrails—reducing design drift without limiting creativity.
Design Foundations & Brand Integrity
Static brand guidelines were translated into a living digital system, defining spatial rules and responsive behaviors for the primary logo and signature angled shape across all viewport sizes, helping protect brand consistency globally.
Responsive Logic & The Grid
A 12-column grid system was developed to serve as the structural foundation for all page layouts. From a 1680px desktop maximum down to single-column mobile views, consistent subgrid and margin rules help ensure predictable, clean content reflow across breakpoints.
The Atomic System
The UI library expanded to include more than 380 button variants, covering interaction states such as default, hover, focus, and disabled. A 40x40px minimum touch target was implemented across all mobile breakpoints to support WCAG 2.1 compliance and enhance usability for all users.
Typography & Iconography
Eighteen responsive text styles were defined using Noto Sans and mapped with em units to support accessibility at scale. A custom SVG icon library was also implemented to reduce reliance on generic icon sets and improve rendering performance across the platform.
Modular Content Architecture
The system shifted from rigid components to a more flexible structure. Enhanced styling options and element visibility gave content authors greater creative freedom while maintaining CMS governance, making it easier to build dynamic pages without introducing inconsistencies.
The Editorial & Teaser Ecosystem
A hierarchical teaser system was designed to help regional marketing teams surface and prioritize content more effectively. Multi-column desktop layouts—spanning 8, 6, and 5 columns—were developed to reflow cleanly on smaller screens, keeping content easy to scan across devices.
Data & Information Display
Dense content areas such as newsrooms, event calendars, and breadcrumb navigation were standardized into reusable functional components, making it easier for users to navigate complex healthcare and financial information without friction.
High-Complexity Interactive Elements
Detailed functional specifications were created for interactive modules, including accordions, galleries, and carousels. These specifications defined behaviors across all four breakpoints, enabling developers to implement complex interactions accurately and efficiently.