Building a comprehensive design system from the ground up in effort to unify Sema4 and GeneDx's product and brand teams, fostering a shared design language across the entire organization. The initiative aimed to enhance our ability to deliver superior and consistent design solutions efficiently.
Year
2023
Design
Daniel Alcala Senior UI Designer
Piero Jurado Senior UI Designer
Lauren Mancuso Dir. of UI Design
Additional Design
Alex Vessels Senior UX Designer
Stephanie Arnold VP of UX Design
Rachel Greer UX Copywriter
Jackie Colognesi Dir. of Content
Product & Engineering
Divya Raghu, George Wong, Avi Jonas, Rohil Shah, Keith Augustsson, Philip Kubiak, Jwun-Da Lu, Sharon Chang
01 Overview
A fresh start
A design system is a collection of reusable components, guidelines, and assets used to create consistent, cohesive, and user-friendly designs across different products or platforms. It serves as a single source of truth for design decisions and establishes a shared language and visual identity for a brand or organization.
In 2021, GeneDx, a genetic testing company previously known as Sema4, lacked a formalized design system. This led to individual teams creating their own standards for UI elements, components, and modules, resulting in inefficiencies and inconsistencies across products and platforms. To address this, the design team consisting of three UI designers, one UX designer, two product managers, two copywriters, and a creative director was formed to oversee the design system.
Stakeholder involvement was crucial for the project's success. This was achieved through department-wide presentations to share pain points and anticipated benefits, as well as early engagement with the engineering team to get their input and update them on the project roadmap. The engineering team felt like equal contributors, valuing their early involvement. Together we would create a robust design system was key for improved consistency across all new GeneDx products.
My Role
This project was the largest design project I worked on at GeneDx, and was the first opportunity to apply my knowledge of design systems across an entire company.
I was tasked with creating and defining the visual language for the patient portal website, which would heavily utilize elements from the new design system. My daily tasks included creating and maintaining the master Figma file, authoring embedded UI documentation, providing work streams with design reviews and support, and educating the organization on design best practices and process. Throughout the time of this project I was responsible for enforcing visual consistency and quality across the platform.
Reaching for the highest standards
We support multiple web applications at GeneDx. This includes a patient and provider portal where our users can order and view test results, schedule appointments, learn about genetics, among other activities. We also support data synthesis and visualization tools for our research users, which enable them to sift through and quantify large amount of data.
Our design system needed to support each of these applications and their individual users and use cases. And while it was clear that this project would require a lot of resources, planning, and time commitments, we knew that this work was a justified long-term investment in our company, brand standards, and our customers. Without a solid design system there would always be a disconnected user experience.
We outlined the goals for our design system as follows:
Facilitate consistency by aligning our teams and giving them a more structured and guided way to iterate easily across experiences and products.
Help efficiency. Decisions are made once, reducing the design and development cycle so teams can create and test layouts faster.
Improve brand perception and user trust through consistent experiences and fresh visual style that work for everyone and allow users to achieve their goals.
Promote accessibility by building accessibility and inclusion into our component libraries, both from a design
and code repository perspective.
03 Inventory exploration
Before building our new design system, we conducted a thorough review of our existing design components. This involved creating a UI inventory of our main interface elements and performing a comprehensive audit to identify all components used across our sites and products.
We then captured unique instances of key design assets, such as typography, buttons, icons, and input forms, and compiled them into a Figma file for team review. This process revealed significant inconsistencies in our design assets, highlighting the necessity for a more systematic approach to documenting, communicating, and maintaining our design system.
What we found
The inventory process helped us clearly see all discrepancies and inconsistencies across our sites and products. It served as a foundation for kicking off our design system work. Keeping the audit results in mind, we created a priority list for our design system minimal viable product (MVP), and started assigning designers that would lead the exploration and documentation of each component.
04 Foundations
Construction at the atomic level
The success of a design system relies on its fundamental foundations, which encompass every component, template, and prototype its built on. After determining a visual direction that aligned both GeneDx and Sema4’s brands, foundational elements were documented in Sketch and Figma and published to a Figma project. These resources were then shared with all teams for open discussion and visibility around the design decisions being made.
The design system, named Juno, was designed to scale for each product and encompass every potential UI element across all products. The focus initially was on the foundational elements (atoms) of the design system, such as color palettes, fonts, grid, spacing, and buttons, before progressing to more complex blocks and pieces (molecules, organisms, templates, pages).
Atomic Design framework
There are many methods for organizing and structuring the vast components of a design system but chemistry is the inspiration behind the Atomic Design Methodology.
The idea is inspired by the concept of chemistry, where all matter is composed of atoms that bond to form molecules, which then combine to create more complex organisms. Similarly, interfaces are built from smaller components, allowing for the breakdown of entire interfaces into fundamental building blocks.
This methodology aligns well with design systems, as it enables the documentation, styling, and reuse at each level of the atomic hierarchy, saving time and improving consistency across design and development teams.
Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our foundational elements such as colors, typography, or spacing.
Combining multiple atoms together gives you molecules. These groups of atoms are the smallest groups of a compound and include buttons, labels, alerts, and more.
Molecules give us building blocks to work with, and combine together to form organisms. These groups join together to form relatively complex sections of an interface like header navigation or modals.
Templates or “complex organisms” consist of organism groups stitched together to form pages. Here is where the design flows come together and we see layouts in action across various pages.
05 Building the system
Foundations of the structure
When we began building our design system, we set the following rules for ourselves:
1
Choose a spacing and grid system that would carry across element of size, rhythm, structure, and hierarchy in all our designs.
2
Align on a consistent and clear naming convention for both design and code to share to save time renaming components.
3
Whenever possible, make our components responsive with the auto-layout Figma feature, so we could reuse components when designing for different devices or layouts.
4
Design to cover all scenarios, or “states” in the system: hover, focus, filled out, error, and disabled state. Even if in some cases we did not currently use certain states, we wanted to future-proof and prepare for updates.
Grids and Spacing
The grid is the foundation for positioning elements onscreen. Consisting of columns, gutters, and margins, the grid creates a seamless, easy-to-follow structure for the layout of elements on a page. Consistent use of a grid system provides the foundation for harmoniously and consistently positioning text, images, and spacing elements onscreen.
We chose an 8 point grid system. Our base grid is 8 x 8 pixels, meaning that all elements are sized and spaced at even multiples of 8 (16, 24, 32, 48, 128, etc...) This makes our component system robust, responsive, and easy to use because all of the top screen sizes are divisible by 8 on at least one axis. This is important to help prevent anti-aliasing.
Desktop
Large layout grid (1600 px)
Spacing
Spacing examples
Color palette
We wanted to use colors purposefully to communicate how things function in the interface at GeneDx. This helps us create visual patterns that can make interacting with our product easier and more predictable for users.
Our color system uses a semantic naming structure, which means the names tell us about the purpose or use case of the colors rather than their hue. They are organized into 4 categories: Primary, Secondary, Neutral, and System. All color tokens are added as a color style so that they may be easily accessed.
Primary colors
Secondary colors
System colors
Accessibility & color contrast
Any design system is only as useful as its accessibility. We tested all of our brand and product color systems, ensuring that we had sufficient contrast across buttons, input elements, headers, and themes overall.
Each component was designed with accessibility in mind, ensuring that they complied with WCAG 2.1 AA accessibility standards. For example, see our intentional choice of color on a warning alert to achieve sufficient text contrast (checked via Stark Figma plugin) so that users with low vision can see and use our component.
Notifications
Input fields
Typography
As a genetics testing company, we prioritized accessible communication over aesthetics, ensuring that text is easily readable and helps users understand important information through a clear and well-contrasted size and color hierarchy.
We selected the Poppins typeface for its elegant and versatile sans-serif design, featuring geometric letter shapes and balanced spacing. This typeface offers several variations in weight, making it suitable for both headings and body text. All text sizes, styles, and layouts were carefully adjusted to ensure a seamless experience across various screen sizes, enhancing the overall user experience on the website.
Typeface
Hierarchy
Iconography
Our icons were designed to effectively communicate intent and enhance navigation. They symbolize various elements such as commands, files, delivery methods, devices, and services, and are also used for common actions like search, print, and edit. We prioritize simplicity and intelligibility, ensuring that each icon in our library is reduced to its minimal form to capture the essence of its meaning, thus guaranteeing readability and clarity even in small sizes.
Many of our icons are based on the Feather Open Source icon library, featuring simple and modern outlines and available in multiple sizes (16, 24, 32, and 40 pixels), making them easily scalable for any user's needs.
Voice and tone
At GeneDx, we prioritize clear and empathetic communication, recognizing the complexity of medical and health technology terminology. Our approach is to educate and inform, avoiding patronizing or confusing language. We aim for an intelligent yet informal tone, valuing clarity and relating to the challenges and passions of our users in a familiar, warm, and accessible manner.
Other components
Design systems are complex and there many components that have been built. The following are various highlighted components that round a small part of the vast elements of our design system.
Button scale
Elevation
elevation00
Zero elevation
elevation01
Low elevation
elevation02
Medium elevation
elevation03
High elevation
Text input
Text input with icons & button
Dropdown
Naming conventions (tokens)
Finally, to ensure everyone is on the same page and speaking the same language, we aligned on consistent, clear naming conventions between design and code, whether we are referring to font styles, colors, spacing, icons, and more.
For naming our scale, we mixed a variety of methods like enumerated value levels (1,2,3), ordered values like Google Material color levels (50, 100, 200), and clothing sizes (small, medium, large). Our goal was always to try to keep simple and be flexible in case we needed to add more or remove in the future.
Each component also received stepped interaction examples so that expected interactive states are clearly communicated. These are paired with detailed specifications around tab stops, spacing, atom and molecular elements.
06 Page templates
Bringing it together
Working with a blended teams across multiple departments created a need for easy to consume page templates. The ability to produce hi-fidelity prototypes spanning the entire GeneDx experience allowed designers to move at a fast pace that the project necessitated.
Because we work with many product and brand teams across multiple departments, we needed to create easy to consume, easy to adapt page templates.
07 Guidelines
Documentation
Our team knew that in-depth documentation and guidelines around design system implementation would be the key to its success and sustainability. Comprehensive component documentation is essential for an effective design systems library, providing the necessary tools for making consistent decisions.
To achieve this, we aimed to create detailed, organized, and easy-to-use documentation that covers every aspect of our design system. The design, content, and development teams collaborated to produce and maintain comprehensive documentation resources, including design principles, quick start guides, accessibility standards, and best practices for designing and testing.
08 Deliverables
The final touches
The team created several design resources throughout the project. The most important of all was the master Figma file which contained all foundations, components, page templates, and necessary documentation for implementing the new UI.
09 Review
Evaluating the work
Reviewing work was an important part of any design process to ensure we arrive at decisions collectively and align on details such as component design, documentation, and tools. For this project, we formed a multidisciplinary design system team that would meet every month to discuss the direction and progress of work. These practices allow us to collect everyone’s perspective and bridge the gap between design and engineering.
10 Outcome
Conclusion
The new design system at GeneDx enabled the design team to create consistent and unified features, while also helping the engineering team streamline their codebases. This led to a more efficient and user-friendly platform, surpassing management and engineering expectations and resulting in increased efficiency and overall performance improvement. User feedback was notably positive, particularly regarding the modernized Pregnancy Journey experience, which aligned with contemporary web and social media app standards.
While it's challenging to measure the impact of internal-facing projects like design systems, we are confident that the investment in our design system not only improved the system itself but also resulted in better designs being implemented and a clearer understanding of GeneDx's design direction. When a design system effectively addresses daily challenges, it gains rapid acceptance and trust within the organization, promoting familiarity, greater engagement, and product alignment.
What’s next?
The design system is an ongoing project. We iterate, change and learn a lot in the process. So far, we have a library of fundamental components in use. This has been game-changing for our team in terms of efficiency, consistency, and standardization. Some of our team’s next steps include:
1
Build processes for testing the components on compliance with guidelines and accessibility standards.
2
Raise awareness across the teams and promote adoption and contribution to the documentation.
3
Add more sections regarding brand, social media, illustration, and animation guidelines and resources.
4
Continuing to grow our component library and supplement it with more complex components and template libraries.
5
Improve accessibility requirements and get buy-in at all levels of the organization from the beginning to prevent these important features from being an after thought.
6
Cultivate processes and best practices for maintaining documentation to ensure that our library stays up to date and perfectly in sync both on the design and code side.