Overview
McKesson launches an oncology technology and insights solutions as a new business ‘Ontada’ which is designed to support innovation, acceleration, and evidence generation to drive better outcomes for patients with cancer.

As a new business, UX design team created an integrated design system to support the brand and establish a new design language.

My Role
UI/UX Design, User Research, User Testing

Platforms
Component Library, Styleguide, Website

Work Year
2020 - Present

Background

There were 4 major products and 8 data platforms to be Ontada business. At the beginning, either they just carried over McKesson’s standard styles as a legacy or have their own style sheet.

We aimed to holistically reskin all Ontada product portfolios by introducing a new design system and improving usability as a unified look and feel.

Phase 1 – Research and Analysis

Phase 1

Research and Analysis

Phase 2

Ideation and Concept Development

Phase 3

Design Foundation

Phase 4

Building Reusable Components

Phase 5

From Design to Code

Phase 6

Final Thoughts

Interview and Findings

We have conducted online user research by interviewing Ontada Design System users to better understand their needs and see current pain points.

Participants
• 2 group interviews with 4 Ontada UX designers on each interview
• 1 group interview with 3 Ontada software engineers

Duration
30 minutes

User Interview Agenda

1. Overview – What is Design System

2. Our current design and overall feeling

3. What we want to accomplish

4. Q&A

Problems

From the internal audit and user interviews, the team agreed that we do not really have a Design System level of reference, but just a superficial style sheet with no documentation. Ultimately, we’ve concluded the following problems to solve.

No Design System – Disconnected UX

1. There are multiple, but no standard stylesheet.

2. A lot of components in the stylesheet are not reusable and are mostly one-offs.

3. There's a lack of description or missing documentation to use as a reference.

Goals and Challenges

After all the research and analysis, the entire UX design and engineering team agreed on building a comprehensive and fully accessible new design system with 4 following major objectives beyond just a collection of asset sheets.

Objectives

1. Create a holistic ecosystem including design principles, components, and documentation that are interconnected together.

2. Make it easy to update and scale going forward, and be available for all product engagements.

3. Completely meet the accessibility requirements and make it fully accessible to any users and any screen size.

Phase 2 – Ideation and Concept Development

Phase 1

Research and Analysis

Phase 2

Ideation and Concept Development

Phase 3

Design Foundation

Phase 4

Building Reusable Components

Phase 5

From Design to Code

Phase 6

Final Thoughts

Core Attributes

UX and brand design teams collaborated and had a brainstorming session to discover the core attributes of our products and the best digital experiences to provide for our users. We found the 4 Core Attributes Responsive, human, reliable, and efficient, and then added its value, user experience, visual, and tone of voice on each pillar accordingly.

Design Elements Ideation

We put those values and principles together into a mindmap diagram to visually organized information and pictured the successful design system we want to build.

Moodboard

Moodboard was very important and efficient process to compile all the visual inspiration and it helped us to envision the ideal look and feel of our design languages, communication style, and UI aesthetics.

Phase 3 – Design Foundation

Phase 1

Research and Analysis

Phase 2

Ideation and Concept Development

Phase 3

Design Foundation

Phase 4

Building Reusable Components

Phase 5

From Design to Code

Phase 6

Final Thoughts

Major Color

We narrowed the most critical product attributes and keywords Responsive, Efficient, Reliable, and Human. From the moodboard, we picked each color to represent those values and adjust the hue, saturation, and brightness to best display our design languages.

Functional Colors

Along with the Major Colors, we have added a few additional colors to work for functional purposes. For example, greens are a success, and reds are errors or warnings. This approach entails self-explanatory affordances and make our Design System intuitive and user-friendly.

Data Visualization Colors

Data Visualization Colors are also strategically selected. There are three different color palettes to be used that depends on the type of data to display. The Sequential Palette is used for progress or scale type of data. The Diverging Palette is used to compare the data based on the central value. The Categorical Palette is used to indicate stand-alone value and compare each other. Those are not supposed to be a part of UI colors.

8pt Grid System

8pt grid system is a core guideline to use and scale in every aspect of design elements such as typography, iconography, and layout. Based on the 8px standard value, any elements are supposed to scale up and down by multiplying 8 in order to create consistent and pixel-perfect spacing. The best advantage of it is it scales perfectly in all the different screen displays on the web, iOS, and Android, and it provides flexible and consistent scales.

Standard Layout

There are few layout options to use in different use cases depending on uses, navigation, and type of content. All of them come with a12 column grid to cover various layout dynamically. Primarily, 3, 4, 6, and 12 column widths are supposed to be used.

Typography

We meticulously compared and audited 16 different font options to verify which one best represents our core values of the Design System and is the most accessible. The team agreed that Nunito is the best in terms of simplicity, legibility, and product accessibility. We also embraced the 8pt grid system idea here by making all font sizes to multiple of 8 and resizing each line-height to fit in the 8pt scales.

Iconography

We found an open-source icon package that could successfully represent Ontada products’ core attributes. However, the challenge was there are too many options (more than 15,000 icons), so we focused on providing efficient guidance to our designers on what icons to use and how to properly apply styles such as color, spacing, and sizes.

Icon Principles

Color Usages Guideline

Icon Size Guideline

• Icon size, padding, and margin values reflect the 8pt grid system spacing guideline.
• Icons may be scalable depending on different use cases and it allows at least 14px width and height minimum ratio.
• Always keep it within square frame format to maintain the proportion.

New Icon Drawing Grid System

Illustration

We developed the Illustration style to use as marquee assets to visually represent the core messages. This is basically evolved version of the iconography and simply accommodates the line-drawing approaches. We've developed those assets for both light and dark modes.

Phase 4 – Building Reusable Components

Phase 1

Research and Analysis

Phase 2

Ideation and Concept Development

Phase 3

Design Foundation

Phase 4

Building Reusable Components

Phase 5

From Design to Code

Phase 6

Final Thoughts

Components

Once we defined the DNA of our design system, we applied them to each specific user interface design. We always kept in mind that all components have to be scaleable and cover many different edge cases without detaching the instances, so there needed considerable efforts to build the strategic component structure.

Patterns

Patterns are combinations of multiple components and templates that showcase common behaviors of repeating features or elements. It is a very helpful reference for both designers and engineers with additional context on how to apply our Design Systems.

Accessibility

Accessibility was also a very critical process while we were building components and patterns. I worked closely with our Accessibility QA team to verify all designs comply with WCAG (Web Content Accessibility Guidelines) 2.1 including color contrast, font sizes, and touch target area to work for any users and any screen sizes.

Phase 5 – From Design to Code

Phase 1

Research and Analysis

Phase 2

Ideation and Concept Development

Phase 3

Design Foundation

Phase 4

Building Reusable Components

Phase 5

From Design to Code

Phase 6

Final Thoughts

Design Systems Website Architecture

In order to share our Design System with the broader team as a real single source of truth, the UX team proposed to bring it to a web presence beyond Figma. We started putting the idea into a simple Information Architecture to envision the ideal structure of the site.

Website Wireframes

Basically, the website needs to reflect the basic structure of the Design Systems in Figma (Foundation, Component, and Pattern) in addition to code base pages. We tried to make all resources accessible here for every team player including designers, engineers, and project managers.

Ontada Design Systems Website

Ontada engineering team was very supportive and passionate about evolving our Design System in Figma to the website version, so all product people can access it easily as a single source of truth. They were able to implement it quickly by taking an open-source website builder Docusaurs which focuses on the documentation purpose of editorial websites.

Phase 6 – Final Thoughts

Phase 1

Research and Analysis

Phase 2

Ideation and Concept Development

Phase 3

Design Foundation

Phase 4

Building Reusable Components

Phase 5

From Design to Code

Phase 6

Final Thoughts

Results

Launching the Ontada Design System radically streamlined the design workflows and communication processes. I'm very pleased with so many tangible outcomes that we accomplished through this project.

Outcomes

– Consolidated 5 style sheets into a single source of truth

– Design System website

– Asset management process

– Handoff process and a standard documentation template

How do we manage going forward?

There are continuous efforts and attention to maintain the quality of the Design System. Firstly, we have a Design Systems Assembly with the UX team internally to review the Figma Library Analytics and monitor what performs well and what could need refinement. The second is the biweekly check-in with the engineering team we review what component needs to be built or changed and manage the timeline.

Fig 1. Figma Library Analytics for a weekly design team sync.

Fig 2. Project management example for a biweekly dev team sync.

Key Takeaways

1. Having ownership and playing an educator role

It was critical to effectively share and teach technical topics to various team players and get them always updated.

2. In-depth understanding of the engineering workflow

It was a great opportunity to see the engineering work flow holistically and closely worked together to review component build process via Storybook and Chromatic in GitHub.

3. Effectively maintaining the quality of work and keep evolving

The design System itself is a live product and is a hub of many related products. It needs even more and continuous attention than normal products to maintain quality, compatibility, and accessibility in the long-term.