Design System

A rich component-based pattern library upon which Genospace builds user-centric, accessible and consistent products

Overview

I was hired as the second designer on Genospace's product and design team. Previously at Genospace, there wasn't an established design team nor a formal design process until my team lead Beth and I joined within the same month. However, as Genospace aims to really expand the product scale and to reach more users and clients, it is critical that a design process and good design practices be established as we start out expanding.

It can be hard to create space for systematic design without a firm process set up - especially in a quickly iterating, rapidly growing startup.

Therefore, we took on the challenge to establish our core design principles and the design system to provide all our product owners and engineers with a single source of truth for how Genospace platform and applications should look and feel to our users.

My Role

I collaborated with the fellow designer to define Genospace principles.
I also initiated the effort to design our first ever design system and collaborated closely with the lead front-end engineer to build out the Genospace component library.

Tools & Methods

Sketch
Design Workshop

Problem

How might we improve team efficiency and deliver better product quality through a shared design system?

A design system is a collection of user interface (UI) components, patterns, guidelines and processes aimed at creating unified digital user experiences. Design systems provide engineers with pieces of code, which in many cases are bundled into reusable packages that can be added to new or existing applications, preventing engineers from building the same pieces over and over.

Over the past few years, we’ve seen a rise in companies building design systems, driven by the need for efficiency in design and development workflows, consistency in user experiences and unification of branding. We've all had the experience spending much time specifying all the detail specs, margins, paddings, border radius when delivering a design. A design system has those answers built into the code.

But a good design system isn’t just a repository of code, it’s a curated collection of code and ideas that backed up by our core design principles. A good design system comes as the result of thoughtful and intentional choices, which take into account consistency across applications and experiences, the representation of our brand, best practices from a design, user experience (UX) and accessibility perspective. It should also include supporting documentation that helps users navigate and understand all of this information.

More importantly, while a design system provides guidelines and standards to keep a team aligned, it shouldn’t be a static resource. It should constantly adapts to feedback and evolves as the platform and applications grow.

A Design Workshop to Align on Core Design Principles

Before diving into creating components and UI elements, we felt the need to establish Genospace core design principles that we can always refer to in our product design. The two of us held a mini workshop to research and brainstorm on design principles we hope to abide, especially in the healthcare and data domain.

Process

How did we design and implement a design system?

Select a Framework

We started with Brad Frost’s atomic design. By starting with the most elemental UI components, such as a humble button, one can build a design system that’s lean, organized, and adaptable. One shortcoming of atomic design, as several have pointed out, is that it doesn’t differentiate between styles and assets. We opted to build a modified version of atomic design system that would separate certain stylistic components into their own swim lane.

Build the Component

Once we had all the big decisions in place, we were ready to build the components! We discussed what parts of the current component designs we wanted to take the opportunity to enhance and tackled questions like, “How do we make the most reusable components while still enforcing our brand?” and, “What configurable options for components are we going to allow?” In our early phases, we went with a more configuration-based component architecture where many components would accept arrays of data to inject into the UI. We’ve since started to transition to a more composition-based architecture because we found it allows for more flexibility for developers and gives the components more room to grow.

Release The Design System And Push For Adoption

To help teams with any questions that might come up in the first release, we set up a support email, a workflow for handling GitHub issues and a support chat channel. Our main goal was to be as available as possible to help teams get integrated with Spark. We found huge success in holding show-and-tell sessions and regular office hours.

Check Out Our Genospace Design System

Outcome

Ultimately, everything we do at Genospace is in service to our clients and users, and Genospace Design System is no exception. It speeds up our development time, not only allowing us to roll out new features to our users as fast as possible, but also allowing our engineers and designers to focus more of the time and energy on innovating and coming up with new ideas to take our company and client experience to the next level.

Most importantly, Genospace Design System brings together our product experiences, giving our clients confidence and clarity. It makes all of our applications easier to use, which at the end of the day, makes it easier for our users to navigate the process of clinical research and providing the best care to patients.

Thank you for your time reading this case study : )