Boston Scientific
Anatomy Design System
Boston Scientific's global design system, powering 3+ platforms, and 20+ digital products, in just 3 years. The system serves as a platform-agnostic collection of principles, guidelines, components, patterns, and resources.
Data Snapshot
Since MVP release in December of 2021, the system has realized over a 25% adoption rate by digital products, plus improved overall quality and DCI scores across web properties.
10.5 million in cost savings
62% increase in accessibility scores
65% reduction in development time
Organizational Landscape
Boston Scientific is a global medical device manufacturer, with 6 primary franchises, and customers that span across healthcare professionals, patients, and investors.
48K employees worldwide
$1.4B invested in research & development
15,000+ products developed
37M+ patients treated each year
$14.2B in net sales
My Role
Identified the organizational need to mitigate fractured experiences, and significant design and tech debt. The organization had over 6 disparate platforms, without any documented best practices or design standards to connect the customer’s experience.
Led the development of the business case and sales pitch to the C-suite, achieving investment in a design system, along with a cross-functional product team.
Discovery & Scope Definition
The Challenge
As the first UX practitioner to the join the organization in 2017,
my initial assessment outlined the following areas of opportunity to enable the organization to reach their digital transformation objectives.
Absence of guidelines and best practices
Outsourced resources for design and development
Fragmented experience across websites and apps
12 platforms in use with decentralized teams executing
Duplication of efforts recreating common elements
Lack of governance to enforce quality and WCAG standards
Problem Statement
Disconnected approaches to website technology and design have created fragmented digital products and inconsistent brand experiences across the globe.
Significant gaps in the UX organizational structure at Boston Scientific have perpetuated this fragmentation, resulting in the duplication of resources, loss in efficiency, slower speed to market, and excessive spend on product development.
Define the System Users
Provides a more inclusive, intuitive, coherent, and trustworthy customer experience.
Enables a focus on innovation and new design challenges, instead of repeatedly solving the same problems that add no customer or business value.
Aligns teams across departments and regions, creating greater efficiencies in time and money.
Design System Strategy & Scope
After an assessment of the organizations design system maturity, teams were operating at a 2, out of a 1-5 scale. There were style guides and some reusable design sytles to build off of, but work to be done in order to get to a pattern library or robust design system that could scale design and code.
Strategic Goals
Identified 3 core initiatives to propel design system integration, improving the experience and providing consistency. Reach level 4 design system maturity, through a 3 year road map, reducing design and tech debt. Align designers and devs to standard design tools and front-end frameworks.
MVP Scope Definition
Based on our community feedback loop, and ranking of must-haves through core team workshops, the first release included; foundations, components, documentation, code and accessibility standards, reusable code, the core part of workflows, detailed road map for 2 quarters.
Sub-atomic particles (system foundations), and atoms (components) prioritized by the community through office hours and demos of the system backlog.
Deliver immediate value
Identified and leveraged high-growth business products to test early phases of the system, and gain momentum through the community.
Medical realism
Heavy focus on medical procedural content utilizing bleach bypass, and B&W. High use of color utilizing our 3 first colors of the design system.
Human flourishment
Heavier focus on outcome and lifestyle photography. Full Color Photos only. Rich use of color with the color palette expanded into warmer tones.
Research Findings
Design Direction – 'Technology for Life’ aligns best to the core values of integrity, curiosity, innovation, and quality. This direction is also most representative of ‘Advancing Science for Life’.
Multi-level Navigation
Participants enjoyed the ability to save time and get straight to what they want. Their preferred flows were defined and outlined; Most Visited, Product with pictures, and Procedure.
User Research Feedback
Oversaw and led the planning, facilitation, and synthesis of insights from a 40+ user study, which included equal segments of Healthcare Professionals (sampled from 6 specialties), and Patients & Caregivers. Each study was one hour long, and shared a randomized representation of both the mood boards, and each concept in application.
Stimuli
Two variations of upper funnel pages in the customer journey were featured for each segment, and they showed applications of the concepts to gather input on perception of the brand, imagery, iconography, and overall aesthetic for a medical device company.
Ideation & Refinement
Concept Development
Developed mood boards to facilitate research with customers, focusing on core design system foundations and key brand elements applied to highly trafficked page types. Intended outcome was a refined design direction.
“[This one] is more useful because you have the product and procedure menu expanded - On the [other], browse by product is buried in a different color underneath. And I think it would be more obvious to me, the way it’s set up [in this one], that you could browse by product and procedures.”
– HCP, Neurology
“I like the other one ( Start Up ) better because in this one (Traditional) the picture takes a lot of space and it does not really… provide anything. There is no picture of the products…”
– HCP, Urologist
Tech for life
Balance between medical and patient content. Full Color Photos only. Color palette is extended but stays in the “cool” ranges. Lighter use of color giving blue prominence.
Design Refinement
As the UX Leader in the organization, my role was to drive site experience evolution and adoption of Anatomy Design System, which solved for the pain points that were discovered through user research including; improved navigation, simplified way finding, clear visual language for products and the ability to find product information at an increased speed.
Integration Strategy
Phase 1: MVP
Phase 2: Intermediate
Progressing to technical maturity
(Year 2-3)
Ship tokens and React component library via npm
Reduce duplicative development work
Enable the ability to make sweeping changes efficiently
Advanced technical maturity
(Year 3+)
Anatomy is automatically in sync with the platforms it powers
Ensure consistency
Eliminate duplicative manual efforts
Manual Integration
(Year 1)
Copy code from Anatomy and paste into platforms
Begin to align visual styles and code across platforms
Inform component requirements for future phases of Anatomy
Phase 3: Advanced
Stakeholder Evangelization and Community Feedback
A playbook on how to leverage the system was developed as a resource for all teams as they adopted the system throughout their workflows.
The core Anatomy product team actively held office hours, lunch and learns, working sessions, as well as design and code pairing sessions as system elements were used, or there were recommendations to iterate on an existing component.
Design Iteration & Migration to Figma
The design system was refactored to Figma and Storybook at the beginning of 24’ in just 3 months, achieving the integration of theming with tokens. This established a theming strategy for microsites and digital products, and how they scaled from the core corporate system. Additionally, I led the enterprise onboarding to Figma, planning training and facilitation of workshops.
Data and the Impact of Anatomy
The design system demonstrates excellence in quality, accessibility, sustainability, and improving the core brand recognition–exceeding industry benchmarks.
