Design System for EHR
- Industry: health care.
- Product type: Design System for Electronic Health Record System (EHR).
- Duration: 6 months.
- Tools: Sketch, Zeplin, Confluence.
Delivery
- — Sketch library
- — Zeplin library
- — DS description in Confluence
Meet the team
Project manager, 3 designers, 2 developers.
Our task was to make a truly complex product easy to understand. And also make the development process understandable and simple for the team.
Our team has been working on the EHR system (see the case here) 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.
So we decided to create
a Design System
A design system is a collection of shared design patterns, practices, and interactions that allow our team to build quality consistent interfaces. 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.
Creation Process
Challenges we had
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.
Questions we had to answer
-
How to create a DS?
Make research and just do it.
-
Where we should keep it?
Confluence for all
Sketch library for designers
Zeplin library for developers
-
How we are going to describe it (going deep)?
Let’s stay on the basics:
How does it look?
How does it work?
Where it is?
Additional comments
-
How to keep versions (System Versions or Entities Versions)?
Let’s keep entities versions
-
How to keep quality?
🖼 See the picture
We created a structure
-
About DS
-
Vocabulary
-
Versions
-
Entities
We created a guide
We created a vocabulary
We decided how to work with versions
We created first entities
Evaluation
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 decided to make a research.
These were our goals:
- Determine whether it is convenient to use the system for the first time.
- Understand whether it is convenient to use the system for everyday work.
- Determine if convenient tools are used now (zeplin and confluence).
- Determine whether the nesting and the structure of entities are convenient.
- Collect data to improve the Design System.
And our hypothesis
We believe, that developers and designers have a need to learn the Design System before they start working with it. We can resolve it with DS on-boarding.
We believe, that developers and designers use Zeplin only.
We can resolve it by adding an entity description to Zeplin.
We believe, that developers and designers don’t use Confluence to work with the system. We can resolve it by moving the system to a platform where the description and code are stored together.
We believe, that it’s difficult for developers and designers to navigate the system entities. We can resolve it by creating a system map.
We have prepared the survey for our designers and developers
How did we collect results: we decided
to highlight good reviews and bad to see how we go
Outcome
We created a system that helped a huge product. The product is 16 years old. During this time, it was created and improved by various experts.
Thus, the product was extremely inconsistent and not user friendly.
A design system became a collection of shared design patterns, practices, and interactions that allow our team to build quality consistent interfaces.
-
DS description
in Confluence
-
Assets Library
is Sketch
-
Assets Library
is Zeplin
Results
- I like that confluence has excelent descriptions of every pattern, what they are used for, and most importantly, we now have a Zeplin screen where can use their assets.
- It provides us a way to apply specific css styles easily.
- It's like a constructor.
…Been a fully staffed team, they are able to handle multiple concurrent requirements without problems. Each team member at Angle2 provides us with new insights and ideas for our products that help make it better…
Ricardo Pineda
NeoDeck Holding
