How to design a great medical app

21 Dec 2017

In previous posts, we’ve talked about best mHealth apps for patients and discussed how to build an effective medical mobile app, how to protect personal data, and why you should invest in developing a medical application in the first place. What we haven’t taken a closer look at yet, however, is the critical aspect of medical website design and app design.

What should a great medical app look like and what things do you and healthcare website designers need to consider when developing the user interface (UI) and user experience (UX) for this particular audience?

Good quality design is important for any mobile application, but it’s especially important when developing an app for sensitive target audiences such as those using medical mobile apps. Since many users in this sector will be elderly, might have sensory impairments or other disabilities, or may lack the technical expertise of younger mobile app users, it’s necessary to think ahead when creating your medical app design.

Creating a successful, effective app requires a constant focus on what works best for the app’s specific audience. Development should take user needs into account and the medical mobile app design should be centered around a clean, intuitive UI/UX.

As part of the medical website design and development process, you’ll need to choose the appropriate medical color scheme and healthcare fonts, as well as make decisions about important design elements and details. All of these different factors contribute to creating an easy-to-use, popular, and effective medical mobile website or app.

Choosing color schemes

When making a decision on your medical website color palette, remember that it’s no ordinary app. While crazy, vibrant colors might work well for a mobile travel application, a sensible medical app requires a more delicate and soothing color palette for a variety of reasons.

Users should feel calm and comforted when opening your medical mobile app, knowing that they’ve come to the right place to address their healthcare needs, questions, and concerns. This atmosphere is best achieved with an appropriate color palette for a medical website that projects a sense of well-being. There are many hues and tones to choose from on both the cold and warm sides of the spectrum.

Cold tones

Generally, we suggest using cold colors for the background of your app’s design. These tones establish an overall sense of tranquility that is necessary to help users concentrate on the more important features of your app.

White

White is often used as the background of apps because it represents reverence, innocence, and nothingness. This association calms people and influences their brain activity in a very positive way. The “color” is also very versatile, coming in a wide variety of different shades such as snow, seashell, ivory, baby powder, and many more options that even the most meticulous mind can choose from.

Quip is a great example of a medical service that primarily utilizes shades of white in its design.

Blue

Blue symbolizes a sense of calm, peace, harmony, trust, honesty, and knowledge. In cultures around the world, blue most often translates into trustworthiness and reliability. It is also regarded as the color of survival and healing support (perhaps hinting at why medical staff across the globe tend to wear blue-toned scrubs).

Many medical apps make use of blue hues to promote a tranquil environment for their users.

Green

Green is often associated with health, good luck, youth, vigor, generosity, and fertility. This is why it’s commonly used in apps for healthcare professionals, especially those who provide paramedical or pharmaceutical services, as well as in platforms that promote healthy lifestyles (like yoga, pilates, aerobics, and more).

how_to_design_a_great_medical_app_image_101

Warm tones

Warm tones also have their place in health app design. However, for medical mobile apps, we suggest using them thoughtfully and sparingly as highlighters, unless you’re planning to design the whole app using warm colors (which could be appropriate in some cases).

If you do prefer using a warm color palette as the foundation for your app’s design, we strongly recommend only using softer, more neutral shades. Vibrant colors can be quite irritating and hard on the eyes and they also tend to be much more difficult to combine with other colors aesthetically.

In the user interface design for healthcare applications, warm tones are best used as particular design elements (such as icons or CTA buttons), in combination with a cold-toned background. By using palette contrasts appropriately, you can create a medical app interface that has a clean, calming effect on the user, while also contributing to intuitive UX design.

Pink

Pink is the color of childhood, tenderness, sensitivity, and romance. It is often associated with babies and mothers. So if you are wondering how to design a medical app or website related to women’s health and childbirth, go with pink.

Jackson Women’s Health Organization provides family planning services focused on meeting the unique healthcare needs of thousands of women. Their website combines a beautiful pink color palette and well-placed accents with a cold-toned background.

Therefore, using pink in gender-neutral platforms may not be appropriate or could be considered offensive or gender-biased because of this association.

Yellow

Yellow is a gentle color, often associated with joy, happiness, sunshine, and hope. Yellow tones are very versatile, combining in aesthetically pleasing ways with many other tones, both warm and cold. However, be careful when combining it with other colors for your custom medical website design as it’s easy to overdo the vibrancy effect.

The color works especially well for child-care platforms. For example, Little Crown is a children’s dentistry website that features various warm and cold colors, including yellow, creating an ideal combination of the two palettes.

Important notes on choosing color schemes

1: Choose subtlety

Since medical apps deal with sensitive information and personal health issues, it’s important to make sure that the colors used in the app’s design are soft, neutral, and don’t call for too much attention. This will help users safely look things up on their mobile devices, even in public, and is an especially critical aspect of developing an app focused on chronic conditions that are often stigmatized (such as HIV/AIDS, diabetes, mental health disorders, etc.).

Two great examples of color scheme subtlety in action are the Fonds Salamon website:

Another great medical website design template is the Comprehensive Breast Care Center website:

2: Know your audience

Studies show that color perception changes with age. Children tend to prefer bright and vibrant colors that attract their attention. Older people are more likely to enjoy softer, more soothing colors. Make sure to take your target audience’s demographic details into account in order to choose the best, most appropriate tones for your app.

3: Colors for the colorblind

If your medical mobile app uses colors that could be problematic for colorblind people, you might want to consider adding color inversion options or creating a separate menu for the app’s color configuration. By taking the needs and abilities of various types of users into account, you can develop a website or application that more people can comfortably enjoy.

Choosing fonts

Fonts for medical websites are another invaluable part of any app’s design. They’re like your business card, your outfit, or the way you comb your hair - they represent who you are and what you do. By carefully selecting fonts that effectively combine with your chosen color scheme, you can ensure that the first impression your app or website leaves on new users is a great one!

how-to-design-healthcare-web-and-mobile-apps_image_8

As with colors, there are many dos and don’ts to consider when choosing appropriate fonts for medical mobile applications. The sheer number of font styles makes the choice a rather difficult one, especially if you’re unfamiliar with best practices in digital medical typography. Our experience has taught us that approximately three-quarters of fonts won’t be appropriate for a medical type of mobile app. In fact, we can narrow it down even more than that.

Sans Serif versus Serif fonts

You’ll most likely want to go with a Sans Serif font when developing your medical mobile app. Although some people argue that Serif fonts make long, printed passages of text easier to read, this theory has yet to be proven. However, it’s a well-known fact that Sans Serif fonts are better suited to digital mediums. But why?

how-to-design-healthcare-web-and-mobile-apps_image_9

A Sans Serif font is, literally, a font without serifs. This type of font is very versatile in the digital world because of its overall minimalism and simplicity. Sans Serif fonts are easy to display across various devices and screen specifications without any problems.

Serif, on the other hand, is a type of font that contains little details at the ends of each letter’s stroke, visible in the red, circled portions of the image below.

These details make Serif fonts appear smaller, thinner, and more elegant, often reminiscent of classic book-like typography which many people prefer. However, not all devices and screen sizes are capable of displaying Serif font details properly, making them problematic to use in mobile app development.

Since medical applications target a wide range of users with varying abilities and device specifications, it’s important to use simple, easily readable fonts. Ensuring that the available information is accessible and consistently displayed across your user base will be a key component to developing a successful medical mobile app or website.

Other fonts to consider

Apart from Serifs and Sans Serifs, there are many other fonts that could be appropriate for your application. However, we still strongly suggest using a Sans Serif font for a medical app (unless, of course, you have a very good reason not to).

Best practices for font configuration

Generally, best practices recommend using no more than three different fonts per platform.
Make sure to adhere to Android or iOS typography guidelines, depending on your preferred publishing platform.
Consider using simple fonts to positively influence users, helping them accomplish more with your app by applying scientific research to develop effective Call-to-Action (CTA) buttons.
If your medical app’s target audience primarily consists of elderly people or people with visual impairments, you might also want to make all typefaces a font size or two larger for accessibility.
Font color should be easily readable and contrasting with the app’s background. Avoid using colored fonts as their visibility tends to be rather poor. Usually, a black or dark-gray color on a light background is the best choice.
Keep in mind that string length can vary, depending on screen size, so it’s best to plan those numbers carefully in the early days of medical web development. Proper string length really adds to overall readability, making it vital for platforms that provide users with large quantities of text (such as medical reports, test results, articles, recommendations, and more).
Apart from choosing an appropriate font, make sure to also pay attention to the font’s X-height. Generally, the higher this is, the better, but make sure that lowercase letters are easily distinguishable from titles and uppercase characters.
You can also consider adding a small control panel to your app, allowing users to customize how the app is displayed based on their own preferences.

Of course, your final font choices should be made based on the needs and peculiarities of your platform’s target audience and should be in tune with your app’s UI and UX design. Choosing simple, readable fonts and configuring them with the help of best practices will allow you to develop an accessible, useful medical mobile app.

Other important elements of medical mobile app design

There are a lot of other important details to consider when developing a medical mobile app. Not only do you want the product to look great, but you want it to be comfortable to use as well. Small details such as button size, kerning, spacing, alignment, icon sets, and image display all add up to bring your medical web design or app design together into one smooth user experience.

Button size

The average width of an adult fingertip is 10mm. Generally speaking, if your product’s target audience consists of elderly people or those who might possibly have visual impairments, we suggest making all buttons larger than that average.

In their recommendations for interface design, Android suggests properly configuring the viewport and setting the size of all active elements to at least 7mm (or 48px in CSS). As for Apple, their recommendations specify that all buttons should be no smaller than 44x44px in size.

Kerning

Kerning, the distance between separate characters in a font, is a very important element of healthcare website design. It affects a great number of things on the screen, including general aesthetics, readability, and comfort.

Many fonts available online make great use of kerning, but it’s much more likely that your product will need some specific, personalized configurations which a professional designer can achieve quickly.

Interline spacing

Interline spacing, also known as line spacing, is the vertical distance between lines of text. Like kerning, this is another element of design that can have a significant impact on the overall readability of text, especially important when creating an accessible medical mobile app.

Text alignment

Usually, aligning paragraph text to the left of the screen is considered best practice. However, certain regions (such as the Middle East) require unconventional text alignment because they primarily use right-to-left language formats. If you’re developing or designing an app for RTL regions, make sure to adjust text alignment accordingly. Proper alignment also removes the need for hyphenation, making the screen less cluttered and the text easier to read.

how_to_design_a_great_medical_app_image_11

Icons

Icon sets used in a medical app should be obvious and very intuitive so that users can easily understand what a particular icon represents. However, if you want to add more creative symbols into the mix, make sure to include their detailed descriptions somewhere that is easily accessible to avoid the possibility of confusing your users.

how_to_design_a_great_medical_app_image_12

Images

Any image that you want to add to your product must be in high resolution to appear sharp in quality on both smartphones and desktop computers.

Generally, it is a good idea to add a magnifying feature to your app. Even if the user isn’t able to see an image properly by default, this feature will ensure that they can always get a detailed version of it.

There are many aspects that go into creating a successful, usable medical mobile app. These are just a few of the design elements that you’ll need to consider before developing an app of your own.

Logos

Your logo is an important part of a hospital website design. The majority of studied midwestern websites use simple and flat design logos of uncomplicated shapes. They turn to a common practice of placing the logo and name in the upper left corner of their websites. The choice is easy to explain: their target audience reads from the left to right. And the top left hand corner is an appropriate logo placement because that is the first place a website user looks on a page.

Glovaldev first-hand experience in healthcare application development

Globaldev has developed a number of medical applications, and we’d like to show you one of the medical apps we developed throughout the years.

Benemedic operates as an online doctor, allowing for real-time medical consultations between patients and medical professionals. We implemented a non-basic approach, using soft pastel-based hues of blue and highlighting the important elements with either mint greens or warm pink colors. This creates a soothing balance, which is very important in the sensitive area of patient-doctor interactions. We would also like to underline that, having different target audiences, the two products present quite a contrast in their design.

The app, being primarily targeted at the Malaysian audience, presents the usual for Asian applications abundance of medical content and detail, appearing to be a web app rather than a mobile application the Westerners would normally be used to seeing.

benemedic_app-project-details-image-centered-min

The product utilizes sans serif font, Athiti. The font is very clean and ensures comfortable readability of all written material.

Medical website and app design cost

Medical website design cost isn’t set in stone. Prices depend on various factors like the number of pages you need on your website and what elements the pages will include. Also, the cost depends on the complexity of the visual design, UX design, sitemap, imagery collection, and page structure generation.

Custom feature development like that of shopping carts, paid plugins, visual aids, linked lists, or videos will cost extra.

The more complex a website design is and the more custom features need to be added, the more time the medical website design company needs to implement them. Eventually, the cost is going up.

However, a fully customized and unique medical website brings benefits like visual appeal, attractiveness, ease of use, and user loyalty. And it’s safe to assume that in the long run, these benefits can outweigh the medical website design price.

Utilizing mobile technology in healthcare to design an effective medical app

As the health sector continues to adapt to technological innovation, it is increasingly important for those looking to enter the mHealth market to be aware of the best practices associated with creating effective UI/UX for medical apps. Taking color schemes and font selection into account, as well as making smart decisions on various other elements and design details is critical to an app’s success.

Medical mobile apps that cater to users with sensory impairments or those that lack the technical savvy needed, such as elderly people, must be designed and developed in a way that makes every single feature as crystal clear and accessible as possible. It’s good practice to always test your final product’s design to make sure that it is accessible and comfortable for all of your users.

If you’re looking for another real-life example of medical application design, there's also a Dribbble shot of a Qatar-based startup we developed not so long ago.

If you're looking for healthcare software developers that will fit your budget and deadlines, consider reading our article that goes in-depth about picking the right development partner for your project.