EHR design system that saved time and money for the development of 2,000+ screens

The project includes the EHR system development with over 2,000 fully documented screens, including all interface patterns, to enable future product growth and make the implementation process more effective.

Our team has been working on the EHR system for almost 2 years. We received a request to create an interface for telemedicine products, which will be integrated with the EHR system but still will be an independent product.

Our task was to make a truly complex product easy to understand. And also make the development process understandable and simple for the team.

Threfore, we decided to create a Design System. Design systems function as an ever-evolving central source of truth. They instill order, enable consistency, and improve efficiency. As of recent years, they are becoming the rule rather than the exception.

69% of enterprise companies are using a design system or currently working on one

This wave of popularity explains why 69% of designers surveyed in the 2017–2018 Enterprise UX Industry Report said that they either already had a design system or were currently planning on building one.

Challenges of building and maintaining the Design System

We have always to keep the Design System actual. We work on the Design System as long as we work on the product. Because in the process of product creation we always create new patterns. After the product is launch — the system is done. And we can improve the Design System while we improve the product.

And have a new version, as we have new versions of the product. It takes time and money to create and support the system. But on the other hand, the Design System saves a lot of hours in the future.

How we created the Design System

When developing a design system, we looked at the best examples for creating an optimal design system for this product. The best example for this project was the Atlassian design system.

Research

Created a dictionary, rules for naming entities in the system

Setup a Confluence space

Created a team

Created rules for supporting versioning of the system

Setup a library

Our Design System Structure

EHR Design System is a collection of shared design patterns, components, elements, and basics. This System allows the team to build quality consistent interface. Design systems function as an ever-evolving central source of truth.

Basics

Elements

Components

Patterns

Basics (B00.00)

Basics are the simplest entities. The whole system consists of them. These are the bricks in the construction of the system. Elementary, mean nothing by themselves. The button, icon, input field are all examples of bases

Elements (E00.00)

Elements are simple entities, they consist of bases. Not independent and often found in different cases and modules. They do not carry the semantic load by themselves. Are more technical entities

Components (C00.00)

Components are intermediate entities between patterns and elements. If you divide the pattern into entities, you get a component.

Patterns (P00.00)

A large independent entities that are often found in the interface in certain cases. Consist of components.  The description of patterns includes entity behavior, use cases, restrictions on use.

p01 | chart with controls

p02 | Table of contacts

We decided to evaluate our system...

After four months we have started to understand what we are actually doing. So the next question was how we are actually doing? So we conducted the research.

We have prepared the survey for our designers and developers to determine whether it is convenient to use the system

...and conducted a survey

Our Design System is a tool that should help teams work more efficiently. We have formulated hypothesises to compare our expectations of how helpful is Design System with the real experience of designers and developers in their everyday workflows.

Set survey goals

Formulated hypothesises

Conducted a survey

Gathered results

Survey Results

We collected results and ranged the answers from bad to good. We have seen overall that our client’s team is happy with the Design System guidelines, but found onboarding experience a bit complex. So, we made it better.