During the pandemic, access to medical care became increasingly restricted.

In response, many health tech companies made a concerted effort to enhance the digital patient experience.

Amid the growing demand for virtual pharmacies, which were already widespread in the US and beginning to enter the UK, Truepill positioned itself as a leader in healthcare innovation by offering a partner service that allowed companies to build, manage, and scale their online pharmacy solutions.

To support this, a flexible and scalable design system was needed. While a design system offers clear benefits, its development is an iterative and collaborative process that requires ongoing refinement and alignment across teams to ensure scalability and consistency.

In 2020, as part of a small UK-based design team, we took on the challenge of developing a system that would better support designers across the company. As a product designer, I played a key role in the creation and documentation of 'Capsule,' Truepill's design system, to ensure efficient product delivery.

Our approach was inspired by the atomic design methodology, by Brad Frost.

The process starts with "atoms" (akin to the most basic chemical elements in the periodic table), representing visual styles, and builds up to molecules and organisms, (representative of digital components and UI patterns) and page templates.

We can utilise design systems to apply predefined solutions to common problems. When we work systematically, we are freeing ourselves up to tackle wider challenges, whilst also benefitting from the harmony, consistency, and efficiency delivered by design systems

We started with the smallest foundational elements; styles.

Grids

The grid system was designed to serve online experiences of all sizes. Across desktop, tablet, and smartphone viewports, designers were encouraged to create responsive layouts by re-ordering and re-sizing objects on the page according to the grid.

Spacing

As a crucial, foundational design element, spacing contributes to visual structure and rhythmic flow. We used 4px spacing increments to maintain an 8px soft grid for interface design. Designers worked quickly and consistently with spacing values in  Figma, with the option to toggle visibility for faster design to code implementation.

Typography

As a highly functional and expressive aspect of design, typography aids in visual hierarchy, consistency & communication. We created a type system to help designers hit the ground running with typography in their projects quickly and without being too constrained.

Fonts

We created a strong foundation by limiting our font choice to one sans-serif with a substantial number of weights. Having several weights available meant that we could communicate effectively and clearly while keeping accessibility in mind.

Scale

The typographical scale was designed to strike a good balance between artistic expression and speed of output. Designers were able to choose from carefully selected, pre-configured styles for body copy, headers, and utility text, rather than having to create a typographical scale from scratch.

Line height

Each line height value that was proportional to both the individual style and a 4px baseline grid, assisting in compliance with the 8px soft grid. For readability, headings benefited from a more narrow line height than that of the body copy.

Accessibility

The design system documentation provided recommendations for an optimal reading experience. This included standards such as optimal line length, colour contrast compliance and font considerations to contribute to to readability, legibility and a good user experience.

Progressing through component design, atoms & molecules join together to form organisms. When components are combined, UI Patterns are formed. A text input, for instance, consists of:

• 1 x label
• 1 x input
• 1x icon

Multiple text inputs, arranged with a button, constitute a form. Eventually, we can generate page templates that provide our fellow designers with a well-considered starting point for every design.

Despite several challenges, through diligent research, best practices, and thorough testing, we successfully launched Capsule V1 a few months later. This resulted in a flexible, evolving design system that facilitated faster, more consistent delivery of telehealth products. By streamlining design decisions, the product and design team was able to focus on larger strategic challenges, ultimately saving time and resources for both the company and its clients

Documentation

Documentation is an essential component of every design system, and the best approach is to document as you go.

Design documentation is a collection of documents covering every area of the design system. As a single source of truth, documentation increases productivity and saves resources by aiding decision-making. It also enables teams to build a shared language, ensuring consistency and alignment across the duration of a project.

We created our documentation in Zeroheight enabling the organisation to gain a deeper understanding of Capsule. The main body of our documentation was a showcase of Capsule's visual component examples. For each component, we listed a definition and guidelines, often touching upon design principles, accessibility knowledge and best practices. I was responsible for writing the component definitions and guidelines.