Visual Design for Medical Apps

Sunday, March 29, 2020

Visual Design for Medical Apps

While the world is looking towards the medical space at the moment, it only makes sense that design for these applications are touched upon during these times. So it's time for another episode of savagery and purely informational, yet comical, satirical, and eloquently lyrical discussion on what is good design. All of which is probably completely off, or - completely a home run. And this week - we're talking visual design in the realm of med tech with careful consideration towards its users.

Color Theory

While working relatively recently on an app catered towards patients with a particular illness, one of the cornerstone features that was vital to the app itself was the ability to log information. The target user demographics was quite a wide range since the illness does discriminate when it comes to the patient's age. And those that are affected, the lifestyle that these users lead is quite tedious and requires a lot of monitoring, many throughout their whole lifetime (some from birth, others develop it). Many of these patients use an app to log their biometrics on a daily basis, several times throughout each day.

So keeping this in mind, note that a user's everyday environment can strongly affect their mood and mind space. If their room is messy with thirteen Snickers wrappers on the floor, and the wall is painted gray, the last thing you want is for the user to use an app for logging their biometrics, has this illness, to look dull and is cumbersome to use. With something as simple as the colors you use, you can bring some light onto their life! So to start things off, let's take a look at how colors can be used to improve usability.

White vs. Black/Darker Shades for Background Color

White. It's light. It's quite pleasant in sight. We should have plenty of it, right? Correct (for backgrounds) - and let's analyze how white stacks up against black or darker shades for our particular user's point of view. It is already quite clear how difficult their lives are when it comes to maintaining/monitoring their biometrics such as insulin level. For many, it is a matter of life and death. While considering these thoughts, the color white can help our users feel a little more 'free' and 'open' to using the app to log their information daily. Subtle, but powerful.

On the other hand, the color black offers an alternative take on how the user may feel with its presence. It offers a feeling of secrecy and upscale. And there is a good chance that a lot of our users do not want to expose their medical condition necessarily, and may find it even embarrassing. Hence, a feeling of secrecy may prove to be useful for users when logging information.

Bottom Line: A white background for the app may allow our users to feel less insecure about their medical condition and diet, while a darker color background can create a sense of security when logging their information.

Green for Comfort

I see trees of green, red roses too- sorry distractions. Quarantine mindset, the nuts and bolts are loose a little in the head. 🤷

An emerald/nature tone of green can quickly create a sense of "life," "hope," and "growth," for our users - all of which are probably on our user's mind for the most part. This may be an important color to consider when creating accents for the app's color palette.

Bottom Line: Green accenting for vector artwork, icons, or buttons, may help develop a level of trust with our users!

Soft Blue for Calm

The blues are something. Oh yes, they can be everything feel alright. With the right tone, you can create a very relaxing atmosphere. Definitely, a strong competitor against green, as this color may also allow our users to have a sense of trust with the app. Also, other than just the ocean, it is the color of the sky. Shades of soft blues can easily invoke a sense of 'freedom' and 'space' for our users.

Bottom Line: Almost equally as competitive as green for accenting. What the decision should probably come down to when deciding is: what emotions are we trying to invoke from our users - life, hope, growth, or trust, relaxation, and freedom?

Red for Energy

Red is a great color to consider for our users since thoughts about their medical condition can easily make the user feel depressed or lazy. Energizing the app with red can create a sense of urgency/importance, as well as invoke a feeling of "action," and "progress," kind of like burn charts.

Bottom Line: Red may be a winning accent color in terms of being able to create a feeling of urgency for the user to get their logging done. However, the accent colors will probably come down to all of the emotion we are trying to make our users feel.

At the end of the day, it all comes down more than just color theory. Figuring out our information architecture first will probably help us in determining the color palette better. May be we end up using all of these accent colors and have them categorized into sections (i.e. medication logging is a red UI; nutrition is a green UI; data visualization and "home" is a soft blue UI).

Interaction Design & Animation

Liquid and buttery-smooth UI animations are important for our users. These create a sense of delight, excitement, and control - all of which will keep our users engaged in desiring to use this application. In addition, strong interaction design can significantly improve long logging processes through well designed transitions. Yes, this is how you buy loyalty 😉


Onboarding should be as quick and delightful as possible. Forms shouldn't feel like the user is visiting a doctor's office for the first time (3-5 pages of manually writing in all profile information). The goal is to keep the app user-friendly as well as light-weight. Since this app will require the user to build a medical profile, it is quite possible that this process can get quite lengthy. Interaction design will play a very important role in keep the user engaged. It may also allow for the user to feel a sense of progress while completing each required form field, lengthy or not. Typeform is a perfect example of this. Progress is felt, rather than just shown.

Button Interactions

Since the app is light, there is a good amount of space for creativity - literally. Buttons shouldn't simply lead to the next screen. Instead, buttons can easily be used to create 'delight' when interacting with them. For example, when the user taps a 'submit' button for logging their medication, perhaps the button animates/transforms into a pill which gets dropped into a vial labeled with the time and date of submission (confirmation screen). Bottom line here is, there is plenty of room for creativity at this stage it seems.

The Takeaway

Strong visual design in the medical space can significantly improve a user's experience. Or rather patient experience (PA)! Haha, didn't think that was a thing did you? Well now it is. (Honestly, no research has been done on if this terminology actually exists already). The future in this industry will definitely gravitate towards applications that allow users to quickly and easily monitor their health. So it is worth keeping in mind the user journey and experience from the standpoint of your target patient!

And besides, remember, at the end of day - bad design will always cost you more than good design! 😉

Ready to create something awesome or transform your platform? Unlike anyone else in our industry, we can turn it around in less than 10 days, no matter the size of the project, and still cost 70% less than the national average creative agency price. Oh and all of our prices are up front, final, and transparent. So there's no random agency fees that we can sneakily add on overnight unfortunately. Strictly located in the USA. Beat that and we’ll get on the next shuttle SpaceX off of this planet.

Let’s talk!