Free quote
Free quote
Case studies / Electronic Health Record System (EHR)
Illustration

Upgrade of a 16-year-old desktop EHR system to a modern web application

Healthcare
Dashboard
SaaS
Data-heavy system
B2B
Duration 1+ year

Our client and we collaborated to create a modern and efficient web application that significantly improved the user experience for healthcare professionals in various fields and made the work of developers much easier

Illustration

Table of Contents

1
Project Roadmap
2
Onboarding and Research
3
Product Map
4
Wireframes
5
UI Design
6
Results
7
Team

Project Roadmap

1
Onboarding and Research
Onboarding and Research
Collecting Requirements
Estimation
Personas
Customer Journey map
Product map
2
Wireframes
Wireframes
General layout
Navigation
Basic interaction Principles
First screens
3
UI Design
UI Design
Design Language
First screens
Delivery
Changes
4
Development and testing
Development and testing
Stage 1
Stage 2
Design Review
Changes

Onboarding and Research

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 the development process understandable and simple for the team.

We started by exploring health care. It 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.

Onboarding
Mateo Fernández, Doctor

I want to feel good about the care I deliver.

My work makes it hard to have a life. It’s hard for me to be a great parent if I also want to be a great physicion and meet all the demands placed on me by my organization due to the amount of time it takes for me to meet them.

Why can’t my EHR work like my iPhone?

When I can be a doctor and not a clerk, I enjoy what I do. I am overwhelmed by administrative burdens from all sides. I have less and less time to spend with my patients.

Tasks
  • Continue the interview
  • Exam the patient
  • Record assessment
  • Diagnose
  • Request additional analysis
  • Prescribe medication
Goals
  • Be able to elficiently and easily share information about my patients with other providers.
  • Be able to spend less fime completing administrative or duplicalive tasks that get in the way of patient care, including delegating some of these tasks to practice staff.
  • Be able to communicate effectively with patients by providing information and directions that they con understand.
  • Identify and participate in an advanced care team solution so that the practice can improve its management of patients with multiple chronic conditions.
  • Identify more ways that technology can be used in the practice to save time or improve processes, workflows and tasks.
  • Become a totally paperless medical practice in the next two years.
  • Tasks
  • Goals
  • Painpoints
  • Continue the interview
  • Exam the patient
  • Record assessment
  • Diagnose
  • Request additional analysis
  • Prescribe medication
  • Be able to elficiently and easily share information about my patients with other providers.
  • Be able to spend less fime completing administrative or duplicalive tasks that get in the way of patient care, including delegating some of these tasks to practice staff.
  • Be able to communicate effectively with patients by providing information and directions that they con understand.
  • Identify and participate in an advanced care team solution so that the practice can improve its management of patients with multiple chronic conditions.
  • Identify more ways that technology can be used in the practice to save time or improve processes, workflows and tasks.
  • Become a totally paperless medical practice in the next two years.
  • Spend 2-4 hours every day offer work completing EHR tasks, which results in less time for continuing education, family and other non-work-related activities.
  • The practice cannot keep exam rooms full, because medical assistants must take fime after each visit to complete the post-visit quality reporting tasks required for each patient.
  • Daily frustrations when interacting with the EHR system, because there are so many clicks required for frequently used workflows, navigation is difficult, and the systems does not organize the data in an efficient way. Examples include:
  • Incoming CCDA core summaries that contain 30 pages of information and only one paragraph of clinically relevant data that the EHR cannot find.
  • Alerts are helpful... until they are rot. Alert fatigue is real!
  • Trying to document information in the EHR during the patient visit, while struggling to find the correct place in the EHR to document the information for quality reporting, distracts from interacting and communicating with patients effectively.
  • Prior authorization and other payer-imposed roadblocks contribute to inefficient care delivery for both clinicians and patients.
Painpoints
  • Spend 2-4 hours every day offer work completing EHR tasks, which results in less time for continuing education, family and other non-work-related activities.
  • The practice cannot keep exam rooms full, because medical assistants must take fime after each visit to complete the post-visit quality reporting tasks required for each patient.
  • Daily frustrations when interacting with the EHR system, because there are so many clicks required for frequently used workflows, navigation is difficult, and the systems does not organize the data in an efficient way. Examples include:
  • Incoming CCDA core summaries that contain 30 pages of information and only one paragraph of clinically relevant data that the EHR cannot find.
  • Alerts are helpful... until they are rot. Alert fatigue is real!
  • Trying to document information in the EHR during the patient visit, while struggling to find the correct place in the EHR to document the information for quality reporting, distracts from interacting and communicating with patients effectively.
  • Prior authorization and other payer-imposed roadblocks contribute to inefficient care delivery for both clinicians and patients.
Onboarding
Marisol Martínez, Nurse

“l am always on, thinking and working. And it’s not just that I am always on when I am there… l am on when I get home. It takes hours, sometimes days, to relax after a particularly bad day”.

“It’s like waiting tables when you have five to six patients, going from room to room all day, everyone always needing something. There’s a lot of repetition in tasks I perform”.

“My medication won’t scan… again!”

“What was I doing before I got interrupted? Did I finish all my notes? I regularly end up staying 30 minutes late to finish my charting, but is anyone even reading my documentation?”

Tasks
  • Modify Legend
  • Have an inferview with patient: reasons to come, what's wrong, what pains?
  • Check patients history: laboratory results, etc.
  • Check vital signs (temperature, etc.)
  • Send to doctor
Goals
  • Ensure that all patients receive their medications and other treatments on time.
  • Educate patients on a healthy lifestyle (medications, nutrition, exercise, durable medical equipment), and observe the patient putting the education into action.
  • Make sure each patient and family feels like they are getting the core and attention they need.
  • Organize the day to finish shift on time.
  • Complete all tasks. Don't leave a lot of extra work for the next shift.
  • Ensure patients are discharged in a timely manner so that waiting patients can use the beds.
  • Be able to easily see and communicate each patient's plan of care.
  • Tasks
  • Goals
  • Painpoints
  • Modify Legend
  • Have an inferview with patient: reasons to come, what's wrong, what pains?
  • Check patients history: laboratory results, etc.
  • Check vital signs (temperature, etc.)
  • Send to doctor
  • Ensure that all patients receive their medications and other treatments on time.
  • Educate patients on a healthy lifestyle (medications, nutrition, exercise, durable medical equipment), and observe the patient putting the education into action.
  • Make sure each patient and family feels like they are getting the core and attention they need.
  • Organize the day to finish shift on time.
  • Complete all tasks. Don't leave a lot of extra work for the next shift.
  • Ensure patients are discharged in a timely manner so that waiting patients can use the beds.
  • Be able to easily see and communicate each patient's plan of care.
  • Staffing shortages can put nurses at greater risk for patient safety issues.
  • Unable to locate patient records in one place
  • High percentage of nursing burnout, with nurses leaving the patient care workferce in favor of non-direct patient care types of nursing.
  • Unable to speak to some patients without interpreter due to language barrier.
  • Difficulty communicating with healthcere team efficiently so that all primary team members ate kept informed.
  • Spend a lot of time recording large amounts of information and completing documentation.
  • Common tasks can be laborious (too much clicking).
  • The doctor keeps reconciling the meds incorrectly, further lengthening the time required to discharge patients.
  • Rarely doing one task at a time and constantly interrupted
  • Nursing staff comes up with workarounds to keep everything and everyone straight.
  • Often feel the pressure and fatigue from the constant long shifts and don't see an end in sight.
  • There is no consistency. Other nurses are documenting same information in different areas of the EHR.
  • Complex tasks are not reflected in workflow, and it feels nurses are an afterthought when using the software/EHR. Tasks done all the time are so hard - so many steps becal
  • Can't easily see what is missing or what hasn't been done particularly around documentation.
Painpoints
  • Staffing shortages can put nurses at greater risk for patient safety issues.
  • Unable to locate patient records in one place
  • High percentage of nursing burnout, with nurses leaving the patient care workferce in favor of non-direct patient care types of nursing.
  • Unable to speak to some patients without interpreter due to language barrier.
  • Difficulty communicating with healthcere team efficiently so that all primary team members ate kept informed.
  • Spend a lot of time recording large amounts of information and completing documentation.
  • Common tasks can be laborious (too much clicking).
  • The doctor keeps reconciling the meds incorrectly, further lengthening the time required to discharge patients.
  • Rarely doing one task at a time and constantly interrupted
  • Nursing staff comes up with workarounds to keep everything and everyone straight.
  • Often feel the pressure and fatigue from the constant long shifts and don't see an end in sight.
  • There is no consistency. Other nurses are documenting same information in different areas of the EHR.
  • Complex tasks are not reflected in workflow, and it feels nurses are an afterthought when using the software/EHR. Tasks done all the time are so hard - so many steps becal
  • Can't easily see what is missing or what hasn't been done particularly around documentation.
Onboarding
Cia Rodriguez, Front Desk

“I am sorry you feel that way. Let me check with the doctor and see what we can do”.

“How can I help you?”

Tasks
  • Create new patients
  • Collect documents
  • Put to waiting list (nurse)
  • Scan documents, put to the next step (nurse)
  • Scheduling appointments
  • Patient communication (complaints)
  • Working with insurance companies and other industry contacts
  • Overseeing the supply situation and physical state of the
Goals
  • Not have patients get upset with or yell at me today
  • Return patient calls
  • Don't let the incoming faxes pile up
  • Get billing notices out
  • Call copier repair person (need to keep the equipment up and running)
  • Follow up on denied claims
  • Leave office on time
Needs
  • Earn a certificate in an additional set of skills to potentially advance career
  • Save enough money to retire at age 68 without too much worry
  • Keep the practice running smoothly through transitions of clinical staff
  • Tasks
  • Goals
  • Needs
  • Painpoints
  • Create new patients
  • Collect documents
  • Put to waiting list (nurse)
  • Scan documents, put to the next step (nurse)
  • Scheduling appointments
  • Patient communication (complaints)
  • Working with insurance companies and other industry contacts
  • Overseeing the supply situation and physical state of the
  • Not have patients get upset with or yell at me today
  • Return patient calls
  • Don't let the incoming faxes pile up
  • Get billing notices out
  • Call copier repair person (need to keep the equipment up and running)
  • Follow up on denied claims
  • Leave office on time
  • Earn a certificate in an additional set of skills to potentially advance career
  • Save enough money to retire at age 68 without too much worry
  • Keep the practice running smoothly through transitions of clinical staff
  • Low pay - need a raise.
  • Patients don't pay their bills on time and expect me to be able to reduce their bill.
  • The physicians do net listen to my ideas or treat me as a skilled team member.
  • System is slow; I have to keep telling people on the phone to pause.
  • I am asked to do things that other team members should bedoing. Doctors ask me to look up diagnosis codes; but I am neither a doctor nor a coder.
  • Insurance companies always deny claims in September and October.
  • The fonts on my screens are extremely hard to read,
  • I don't know how to get useful information and have to rely on others to get it for me.
Painpoints
  • Low pay - need a raise.
  • Patients don't pay their bills on time and expect me to be able to reduce their bill.
  • The physicians do net listen to my ideas or treat me as a skilled team member.
  • System is slow; I have to keep telling people on the phone to pause.
  • I am asked to do things that other team members should bedoing. Doctors ask me to look up diagnosis codes; but I am neither a doctor nor a coder.
  • Insurance companies always deny claims in September and October.
  • The fonts on my screens are extremely hard to read,
  • I don't know how to get useful information and have to rely on others to get it for me.

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.

Product Map

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.

Wireframes
Wireframes
Wireframes
Wireframes
Wireframes

UI Design

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.

Full Design System Case
Illustration

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.

1
Research
2
Created a dictionary, rules for naming entities in the system
3
Setup a Confluence space
4
Created a team
5
Created rules for supporting versioning of the system
6
Setup a library

Basics (B00.00)

Bases are the simplest entities. The whole system consists of them. These are the bricks in the construction of the system. Font styles, colors, icons are all examples of bases.

Fonts
Fonts Fonts
Colors
Primary
@RedBrand
#cf152d
#00a1de
@Cyan
#00a1de
rgb(0, 161, 222)
Shades of Gray

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 <span>(E00.00)</span>

Components (C00.00)

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

If you combine elements into some entity, but it is not completely independent, as a pattern, it is a component.

Components <span>(C00.00)</span>

As a result

As a result
As a result As a result
As a result
Consistent design
Consistent design
We have overcome the challenge of coherency in a huge product. We have created patterns, components, elements and bases from which everything is built.
Intuitive interface
Intuitive interface
We have created a very comprehensive product that is easy to use because of simple, but flexible navigation.
Wokrload optimization
Wokrload optimization
We have increased the efficiency of user interaction with the EHR and freed up time for doctors to work with real patients.

Happy client
is our routine

Our client
We reached 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

Project Team

https://angle2.agency/wp-content/uploads/1-2.jpg

Yevheniia Klysha

Lead UX Designer

https://angle2.agency/wp-content/uploads/2-6.jpg

Olesya Vdovenko

Senior UX Designer

https://angle2.agency/wp-content/uploads/3-4.jpg

Nina Prisniak

Art Director

https://angle2.agency/wp-content/uploads/4-1.jpg

Igor Alexandroff

UI designer

https://angle2.agency/wp-content/uploads/5-2.jpg

Eugeniya Zhuravlyova

UI Designer

https://angle2.agency/wp-content/uploads/6.jpg

Alex Smurov

Lead UI designer

https://angle2.agency/wp-content/uploads/7.jpg

Kristina Manzhaliy

Project Manager

We're
all ears

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

    Amazing!
    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.

    Necessary
    Statistic
    Marketing
    Confirm my choices
    Decline all
    Allow all
    Cookie Control Icon