DEV Community

Cover image for UX Design for Healthcare and Medical Apps Case Study
bright inventions
bright inventions

Posted on • Originally published at

UX Design for Healthcare and Medical Apps Case Study

Heavy data, simplicity, clarity. Can we include all of these in healthcare app designs? Are you planning to hire a software development company to design and build your healthcare or medical solution? Check out the UX design challenges that you might face developing eHealth applications. Eventually, find out how to design medical data in a UX-friendly way.

Designing data for eHealth applications

In some cases, healthcare apps have to provide users with lots of information. As an example let’s work on a hypothetical app for hospital staff whose purpose is to help manage patients' medicine distribution.

In the case of healthcare apps, there is usually a lot of information that has to be designed in a way that is visible and accessible within a few taps or clicks.

Challenges for healthcare UX design

Designing the eHealth app for hospital staff requires dealing with these challenges:

  • How to prioritize information?
  • How to display data in the most accessible way, preferably on the main screen so users don’t have to look for it on different screens?
  • How to display all necessary information about patients on a tablet and even on a smartphone?

For the purpose of this blog post, we created a hypothetical mockup for an app for doctors and nurses working at the hospital. This is the possible answer to all of these challenges:

Healthcare app mockup

The mockup is a fictional design made exclusively for blog post purposes.

“Wow, that's a lot of information on one screen…” That is something that you could think of looking at the design. You instantly notice that this is not a nice lifestyle app that is supposed to attract you with a fancy design and a small amount of text.

Remember we are talking about an app for hospital employees and we need to meet their requirements. According to our research made while working on various eHealth products, the number 1 priority for eHealth app users is fast access to all necessary information thus they should be visible on one screen. In this case, doctors and nurses have access to patients’ names, rooms, and medicine distribution statuses on one screen.

Healthcare app mockup

The mockup is a fictional design made exclusively for blog post purposes.

Designing everything on one screen? That’s a challenge. A product designer’s instinct tells us to remove as much data as we can to present a more clear message. Yet, doctors and nurses know best what information needs to be quickly accessible to them and our job as healthcare app developers and app owners is to design it in the best possible way.

What else do you need to remember while facing these healthcare UX challenges? Check out UX best practices that help to deliver healthcare apps useful for their users.

Iconography in product design

The key in UX design is iconography which practically creates its own language to display information. So, you design icons that represent statuses, states, notifications, etc. Icons should be comprehensive even if we design them specifically for the app. They still should evoke the right associations. This best practice was deeply covered in Jakob Nielsen’s Usability Heuristic #2.

Naturally, the explanation of every icon in the product is still recommended. Because we are talking about an eHealth app that supports medicine distribution so users have to be well prepared to use it.

Icons Medical App

The design is a fictional design made exclusively for blog post purposes.

The icons that you can see are well-known and characterized by an immediate clear meaning. Even without knowing the app, we instantly understand the sentiment of the message that the icon is supposed to give us.

For sure, a very important part of these messages is coloring. 🙂

Color coding in product design

In UX design color, like iconography, has a special role. Color coding is simply a way to display information using different colors and shades.

As it is common in the digital world it originated from the past. 😉 Color coding is ubiquitous and takes a huge part in our daily communication. It has been used in industries like electricity or hydraulics.

If you ever renovated your apartment, you probably know that the plumbers' rule says that pipes with hot water are marked with a red color and pipes with cold water with a blue one.

In the case of electricity, in almost every electrical drawing you will find a ground marked in yellow and green colors. These are examples of color-code good practices from other industries.

To be fair, color coding could be found much easier, simply by walking in the street… 😉

Street coloring

UX design for offline mode

Offline mode is often an essential feature in healthcare apps and usually a huge challenge itself. When it comes to life-death situations you cannot rely on the internet connection. Following our case study example, the hospital staff has to have access to the app 24h a day even if there is an issue with the Wi-Fi connection. That’s not all though. The offline mode has to be followed by the right design.

UX design for the offline mode has to emphasize:

  • That the app is working at the moment in the offline mode.

Seems obvious but when you have to tap that somebody has taken meds, better to be ensured that your data needs to be synchronized.

  • What kind of data was provided in offline mode.

  • If data were synchronized after restoring the internet connection.

Clear communication about statuses is the first of Jakob Nielsen’s ten heuristics.

This is the mockup example including the top bar showing that the app is in offline mode:

Offline mode mockup

The mockup is a fictional design made exclusively for blog post purposes.

Can a beautiful design be ugly?

UX design in healthcare software development is all about managing the data. So users are able to... manage data as well. Sometimes these apps cannot be full of beautiful designs because this is simply not what users expect. Yet still, eHealth apps do their job and support medical staff actions. And these are the product design’s true colors. Good design exists only if it works. Isn’t that pure beauty indeed?

Special thanks to Alisa for her inspiration and contribution.

By Izabela Pawlik (Digital Marketing Specialist) @ Bright Inventions and Alisa Kashytska (Product Designer).

Top comments (1)

alinadunec profile image
Alina Dunec

Hi! Well done! We had another case in our practice.
Using a health app is invaluable. It makes the job of both medical staff and patients easier. I would like to add that a guide can be used to create a health app. Development involves not only the design of the app, but also coding, testing, and everything else. Choosing the platform on which the app will run is one of the important parts of creating a medical app. To create an app, there are a number of steps to follow:

  • Identify a niche
  • Think through a feature set
  • Determine research requirements
  • Hire the right team
  • Develop
  • Launch
  • And all the other things.

If you want more information about developing a medical app, you can find it in this article