Destiny Design System

Client: Myriad Genetics, Inc.
Year: 2023 - 2024
Engagement: Component and token system design

Myriad Genetics provides various genetic tests to both healthcare providers and patients. The company takes test orders via their portal, but the portal had various problems such as inconsistent UX caused by mergers, and an outdated look & feel that did not fully reflect the company's brand identity. Destiny design system was a realization of a unified, consistent, and seamless experience across Myriad products that reflected its brand promise. Ryu was tasked to drive the design side implementation of the design system, working closely with Myriad's internal team.

Final design

Final design was created with a tight collaboration with Myriad’s internal team including UX designers, visual designers, front-end engineers and a program manager.

Ryu was a great partner in helping us move from a vision of a unified UI library to building the library with our development team. Ryu brought advice on strategy and tools as well as a strong attention to detail to the project. He easily integrated with the design team and was a regular member of our working sessions and stand-ups. He worked on a design-dev process and helped setup the right Figma workflows and templates. I highly recommend Ryu for his deep experience crafting design solutions, his collaborative style and his expertise.

Julie Baher, VP of Customer Experience, Myriad Genetics, Inc.

For designers and front-end engineers

In this project, Ryu's direct customers were UX designers and front-end engineers. By listening carefully to UX designer's voices, Ryu created the design system components in a way so that it's easy for designers to use. To achieve this, Ryu went through a continuous iteration. By working closely with front-end engineers, Ryu created the design token system that was easy for front-end engineers to use.

Under the hood

All variants (states) are built-in to every component so that designers can easily switch from one state to another, and do various customizations via a side panel with ease. All the component variants were "tokenized" - which means every single design attribute such as color, font, border, border radius, spacing were specified as design tokens. Design token set was published to GitHub as a json file, which was then grabbed by a front-end engineer to release it as a version package.

Values and benefits of the design system

Figma design system components and design token system together connected the design and the actual product's front-end, literaly serving as a "single source of truth" of a product's look & feel. As a result, it enabled values and benefits for both UX designers and front-end engineers, especially around efficiency and consistency.

UX principles

UX principles were defined after the initial research and analysis, leveraging the company's brand guidelines, so that the design system was closely tied back to the brand.

Artifacts from the process

Below shows various artifacts produced during the early phase of the process.