Electronic Health Record System (EHR)
- Industry: health care.
- Product type: Electronic Health Record System (EHR).
- Duration: 1436 hours, 8 months.
- Tools: Sketch, InVision, Zepplin, Confluence.
Delivery
- — Personas
- — UI language
- — Product Map
- — Design for all pages
- — Hi-Fidelity Interaction Prototype
- — Design System
Meet the team
Project manager, 2 UX designers, 4 UI designers.
Roadmap
new module
-
Onboarding and research
Collecting Requirements
Estimation
Personas
Customer Journey map
Product map
-
Wireframes
General layout
Navigation
Basic interaction Priceples
First screens
-
UI design
Design Language
First screens
Delivery
Changes
-
Development and testing
Stage 1
Stage 2
Design review
Challenge
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. Our task was to make a truly complex product easy to understand. And also make the development process understandable and simple for the team.
Personas
We started by exploring health care.
This is a complex topic. We studied the healthcare system in the market and gradually got acquainted with the structure of the existing product.
We had also created Personas to understand user needs.
Product Map
After that, we made the first attempt to create a product map. This attempt crashed. The product was too complex and we decided to work on the product map step by step.
We have created small maps for each module and combine them into the one in the end. In parallel, we worked on the first screens of the prototype.
Wireframes
We immediately took up the most difficult part of the product — the patient card. This is a complex module. There was the first and main challenge — navigation. Navigation was supposed to be flexible, capable of theoretically accommodating an unlimited number of items.
We created the ability to search for an item in the navigation list, and also added the ability to customize this navigation. The reason for that is due to the fact that different hospitals may use different modules in the patient card.
More about our wireframe
Wireframe &
Patient Card Navigation
(Example doesn’t use any design)
Open / Close
a Navigation
Search
for a Module
Customize
modules
UI design
UI Style
When creating the UI, we relied on Fuse - Angular 8+ Material Design since this style was most suitable for the task that we faced with, namely, an understandable, unloaded style.
Example
Fonts
We chose a font Rubik for this project because this font goes is a sans serif with slightly rounded corners and this font is well readable both large size and small size.
What is good for such a large project.
As a result
Design System
One day we realized that we already have 500 screens. And we have well-established patterns of behavior. We decided to create a design system for the product.
How we created the Design System:- Research
- Created a team
- Created a dictionary, rules for naming entities in the system
- Created rules for supporting versioning of the system
- Setup a Confluence space
- Setup a library
Research design systems
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.
Our design systems
Results
- We have overcome the challenge of consistency in a huge product. We have created patterns, components, elements and bases from which everything is built.
- We have created a very comprehensive product that is easy to use because of simple, but flexible navigation.
- We have reduced the user experience with the interface in order to free up time for working with real patients.
We reached to Angle2 for help with designing a new UI meant to replace our outdated software design. We not only got a new user interface, but a vastly re-thought and optimized user experience.
Angle2 has become our "go-to" agency for our design needs and I highly recommend them.