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.

<span>69% of enterprise companies</span> are using a design system or currently working on 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.

Challenges of building and maintaining the Design System

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.

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.

UI Design
UI Design
UI Design
UI Design
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

Basics (B00.00)
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

Elements (E00.00)
Components (C00.00)

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

Components (C00.00)

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.

UI Design
Set survey goals
UI Design
Formulated hypothesises
UI Design
Conducted a survey
UI Design
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.

Product Map Product Map

As a Result

Coherent Design system
Coherent Design system
The product is 16 years old and was extremely inconsistent and not user friendly. We created a system that became an agreed source of truth.
Easy to learn and use
Easy to learn and use
A design system became a collection of shared design patterns, practices, and interactions that allow our team to build quality consistent interfaces
Continuous scaling
Continuous scaling
With description and versioning protocols product became easy to scale and thus opened new opportunities to develop new ideas.

Other Services

Design of Web Apps & SaaS
See more
Redesign of Web App & SaaS
See more
Full-cycle development
See more

all ears

Fill out the form to start the conversation — we’ll get right back to you

    Thank you so much!
    See you soon
    This Website uses cookies

    We use cookies to recognise your device and save the actions you have previously made on the Website, to prevent any malicious actions against the Website and its users, to improve users’ experience as well as to ensure the proper functionality of the Website.

    For these reasons, we may share your usage data with third parties defined in our Cookies Policy. By clicking “Accept all cookies”, you consent to store on your device all the technologies described in our Cookies Policy and Privacy Policy, while by clicking “Decline unnecessary cookies”, you decline to store on your device marketing and analytical cookies. You can change your cookie settings at any time by clicking “Cookies settings”.

    Please click on “Cookies settings” to see further information.

    To find out more about the categories of personal data collected and the purposes for which such data will be used, read our Cookie Policy.

    Cookies settings
    Decline unnecessary cookies
    Accept all cookies
    Cookies settings

    We use different types of cookies to optimise your experience on our Website. Click on the categories below to learn more about their purpose. You may choose which types of cookies to allow and can change your preferences at any time. However, be aware that if you choose to refuse or remove cookies, this could affect the availability and functionality of the Website. You can learn more about how we use cookies by reading our Privacy Policy and Cookie Policy.

    We use cookies in accordance with Article 6 GDPR based on the following grounds:

    a) consent of the user;
    b) legitimate interest of the Company.

    We collect the necessary cookies based on our legitimate interest, namely to ensure the functionality of the Website.

    Categories of cookies:

    First-party cookies are those cookies that are placed on the Website by the host of the domain, in particular Angle2 Agency.

    Third-party cookies are those that are placed on the Website by the domains other than the one the user is visiting. As a variety of features that are necessary to ensure the personalised and convenient experience of the user may not be delivered by the Website itself, the third-party cookies are used. We work with different third-party service providers in order to enhance your user experience and to analyse user behaviour on our Website.

    Third-party service providers may use their cookie files on our Website and you may find the relevant information about the use of cookies by them in their respective privacy documents. The list of the above-mentioned service providers is the following:

    c) Google Analytics;

    We only use cookies for the following purposes:

    Necessary Cookies

    We use these cookies to enable the functionality of our Website. You can choose to block Necessary Cookies in your browser settings. Nevertheless, remember, if you block Necessary Cookies, it may strongly affect the functionality of the Website.

    Statistic Cookies

    We would like to use them to understand how users interact with our Website (number of visits, behaviour) by collecting information anonymously.

    Marketing cookies

    These cookies and other tracking technologies are used to deliver relevant online advertising to you on other websites. These cookies are placed by us and selected third parties and enable adverts to be presented to you on third party websites.

    Confirm my choices
    Decline all
    Allow all
    Cookie Control Icon