Free quote

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:
  1. Research
  2. Created a team
  3. Created a dictionary, rules for naming entities in the system
  4. Created rules for supporting versioning of the system
  5. Setup a Confluence space
  6. Setup a library
Full Design System Case

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

  1. We have overcome the challenge of consistency in a huge product. We have created patterns, components, elements and bases from which everything is built.
  2. We have created a very comprehensive product that is easy to use because of simple, but flexible navigation.
  3. 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.

Ricardo Pineda NeoDeck Holding

Similar cases

Telemedecine for EHR System

SaaS B2B B2C Healthcare

Design System for EHR

SaaS B2B Healhtcare Complex system design

We're here to help. Start a discussion.

Filed "Your Name" should contain at least 3 symbols
Filed "Company Name" should contain at least 3 symbols
Choose your budget
Enter a valid email address
Filed "Description" should contain at least 10 symbols

Amazing!Thank you! See you soon