IDseq
Client: Chan-Zuckerberg Initiative
Projects: Help Center Web Design/Development, Design System
I have been working with the IDseq team at CZI since the fall of 2019. This page highlights two major pieces from that work. The first is the on-going project to create a design system for IDseq to provide “one source of truth” for both design and engineering. The second was to create a help center for IDseq users.
Designers:
Janeece Pourroy
Jenn Tang (project supervisor, IDseq designer)
Year:
Fall 2019 - Now
Help Center
The IDseq Help Center was the first project I worked on with IDseq. My first step was to assess the restrictions that come with using Zendesk, and designing a custom theme/template. I built a custom Zendesk theme to match IDseq and modified the Zendesk page templates to meet IDseq’s needs.
Design System
As an ongoing project, I have been working with the IDseq team to establish a design system from the existing product.
The goal of the design system is to create a consistent product, build a cohesive language between design and code, and expedite the design and engineering process.
Planning
We decided to base the design system on the theory of atomic design, and created our own system of “particle” sizes based in biology: Bases, Genes, DNA, Chromosomes, and Cells. We then made a list of components we knew we would need, adjusting as new patterns were discovered. We also established a new naming system for all components to support a consistent structure.
Auditing Design + Product
For each design system variable or component, I audited the existing design files and product to understand how the component was used, what it looked like, and any inconsistencies.
One Source of Truth: Design and Documentation
After auditing, I designed how a component should look; this will become the standard for what will be updated and for future designs. The design was usually a negotiation between original designs and existing product. When the design is finished, the component is documented in the Design System document detailing how it looks, how it’s used, the component name, and style information for engineering.
Implementation
After design for a component is complete, I create a list of changes, additions, or removals that need to be implemented by IDseq’s engineers to sync the product with the Design System.