
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.
Project manager, 2 UX designers, 4 UI designers.
Collecting Requirements
Estimation
Personas
Customer Journey map
Product map
General layout
Navigation
Basic interaction Priceples
First screens
Design Language
First screens
Delivery
Changes
Stage 1
Stage 2
Design review
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.
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.
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(Example doesn’t use any design)
Open / Close
a Navigation
Search
for a Module
Customize
modules
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.
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.
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: 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.
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.