Best medical website design practices

Abstract illustration with various shapes and colours

Are you a healthcare provider or medical practice finding it hard to create the right website for your patients? Here are a few tips I’ve learned while working with my medical website design clients. These are all long-term working relationships with successful providers and clinics, so we must be doing something right!

Easy for patients

Keep it simple. We can’t predict our website visitors’ needs. Your website must work for anyone and everyone. That means:

  • clear information architecture
  • plain, authentic language and media
  • inclusive, accessible design.

Information architecture

How will visitors navigate through your website?

Menus and call-to-action buttons will be your primary navigation methods. Other navigation examples include submenus, which are common but best avoided. A blog or news section can benefit from carefully considered categories and tags to help visitors find content.

The key is to minimise the number of steps needed to reach the right information. For instance, the gov.uk website has one primary function for each page, with clear links to related content. “Aha!” you might say, “that spartan approach won’t suit every website”. Maybe not, but we can use it as a guide to reduce information to the essentials.

example of article introduction featuring title, date, author and the categories general health and nutrition
Article categories can help visitors easily find related content.

Let go of stakeholder ego. That’s right, we all have content we are precious over, me included! Instead, start by identifying patient “top tasks”. These are the main reasons patients visit your website. This can include finding contact methods, booking appointments or looking for more information about your services.

An anonymous survey is ideal for creating a top tasks list. Once you have a workable list, you can create your site architecture, prioritising the top tasks in your site structure. The rest of your site content can be organised using the list to create a hierarchy of importance.

Plain language

Use plain language when you can. Make things easy to read for everyone. Many healthcare workers are brilliant at keeping things simple when speaking to patients. Website copy should follow that clarity. Unless the content is aimed at your peers, write it for the layperson who has no knowledge yet.

My trick is to speak the words out loud. If it doesn’t sound right, change it! Or you could use an online tool like Hemingway to help create more clarity in your writing.

Authenticity

Not only is plain language on websites more inclusive, it’s more authentic. People appreciate the human touch on a website.

When it comes to authenticity, don’t forget your visual content like images and videos. Where possible, these should be genuine professional photographs or videos of real staff. Why not include workplace content of you and your staff with patients? If patient privacy is a concern, don’t include their face. Crop it from the photo or take it from behind.

Heading text 'our clinicians' with two professional headshot photos below
Professional photos can make a huge impact to your brand visuals and create a sense of authenticity.

People are surprisingly good at spotting stock images. Stock imagery can be off-putting because it lacks authenticity.

Inclusive and accessible design

I’m all about inclusive and accessible websites. I hang my hat on making sure everyone gets a good website experience. Don’t hold back on investing time in this — it really is the right thing to do. If that isn’t enough to convince you, consider that it can mean missing out on potential patients, or even lead to legal repercussions.

Web Content Accessibility Guidelines (WCAG) have been created to give the best possible experience for everyone. Here’s a link to a great WCAG 2.1 overview from gov.uk.

Three of the main issues reported by the WebAIM Million report on website accessibility are:

  • Low colour contrast
  • Missing alternative text for images
  • Missing form input labels

This leaves visitors with blindness, low vision and other users of screen readers with a poorer website experience. A contact form with no labels is a struggle waiting to happen.

Screenshot of contact form with labels and inputs, alongside telephone number and address
Form inputs with the correct html labels are best for screenreader users. Placeholder text within the input field will not be announced.

Trust & authority

Everything I’ve mentioned will help visitors build trust with you. With your brand.

Decisions are often made based on trust and authority. Build it however you can. If you have accreditation within healthcare field, show it off! Let everyone know how well-respected you are by other medical professionals.

Screenshot of testimonials with link that says 'more testimonials'

Get your best third-party recommendations on your homepage (within the scope of patient confidentiality). Nothing speaks of your service like the good experiences of other patients. Link to external reviews if you have them. Sites like Doctify are a trusted source of patient feedback. They even offer an embeddable widget with your ratings.

Easy contact or appointment booking methods

Make sure your contact methods are clear throughout your website. Have contact details on all pages if possible. Include them in the website header or footer, or both. Make contact details clickable with the correct link techniques like [mailto:] or [tel:]. These take visitors directly to their default phone or email app instead of copying and pasting. Remember, reduce interaction steps when possible to reduce friction.

screenshot of website contact details, featuring telephone, fax and email address

If you have a medical practice or clinic location, make your address clear, along with helpful directions and transport routes. Add additional instructions if your clinic is hard to find or if you can recommend a good place to park. Embedding a map can be helpful, but be aware that map software might use tracking which will infringe on your visitors’ privacy (more on privacy later).

Appointments should be easy to make. If that is a “top task” for your website, make it the primary call to action. Put a great big “book now” button in your header or navigation menu. Style it so it looks like a primary call-to-action and draws attention.

screenshot of website header featuring logo, navigation menu and call-to-action button with the text 'book an appointment'
CEMED’s top task is booking appointments at one of their clinics. Styling it as a call-to-action moves it up the visual hierarchy in the header.

Secure payments

If you need to take payments for appointments through your website, make sure your payment system is secure. Use an SSL certificate to encrypt and secure customer payment information.

Check whether the payment platform you use is compliant with GDPR, HIPAA (for practitioners in the US) or other applicable regulations. GDPR-compliance is common among payment processors, but HIPAA-compliance is not. I like Stripe because UK payment charges are low, but it doesn’t have HIPAA-compliance. Square looks to be the only large payment platform offering HIPAA-compliance.

Screenshot of appointment booking system with options to select times in the morning, afternoon or evening
When aiming for HIPAA-compliance, the entire system needs to meet those guidelines. This is my favourite WordPress booking plugin because it works so well for screenreaders. An added bonus is that it is HIPAA-capable within a website that is compliant in all areas.

Bear in mind I am making broad suggestions here. If you need to meet stringent legal guidelines, spend the money on professional legal assistance!

Secure your patients’ health information

Patient health information must be kept securely. Perform a thorough audit of all patient touch points to make sure any sensitive information can’t be compromised.

What should we be checking to ensure information security? The main regulatory bodies I’ve encountered are GDPR and HIPAA. I’m sure there are more I’ve not heard of. Again, get legal advice where necessary.

My UK-based clients require GDPR-compliance for their medical practice website designs. If you practice in the US, you might want to refer to Full Media’s HIPAA beginner’s guide for more information.

Encrypted messaging

All digital messaging between your healthcare practice and patients should be secured by end-to-end-encryption (E2EE) where possible. This is where only the communicating users can read or write messages. Messages can be sent E2EE through:

  • Email. Proton Mail is well-regarded by many medical professionals, but there are others that might suit.
  • Instant messaging apps. WhatsApp and Signal are both E2EE by default. Telegram offers E2EE, but not by default. It needs switching on manually!

SMS is not encrypted and not secure. No patient information through SMS please!

Encrypted forms

You might want to use a website form to collect protected health information (PHI). PHI is individually identifiable medical information, such as symptoms, conditions, or requested healthcare services.

Like payment processing, an SSL certificate will encrypt form data as visitors enter it in their browser. Be aware that form data encryption does not automatically continue through to its final destination:

  • If sent to an email account, the form information should be encrypted again before sending.
  • If the form information is intended to be stored on a server, US-based medical practices should ensure the server is HIPAA-compliant.

The best solution is to not collect PHI at all. One of my clients uses a system where patients book a consultation without needing to include PHI in the booking form.

Encrypted storage

Electronic documents containing patient information must be kept securely. If using cloud storage to store documents with sensitive patient information, be aware that most cloud software is not E2EE. This includes iCloud, OneDrive, Google One and Dropbox. Don’t worry, there are alternatives. I can personally recommend sync.com, which is E2EE and HIPAA-compatible.

Secure client areas/login details

If you have a patient login area, your website should enforce the use of strong passwords. You’ve likely encountered this on the web before. The password needs to be a certain length and include uppercase and lowercase characters alongside numbers and symbols.

Screenshot for a Health Advice Service page. It advices that the content is for members only and offers login or join now buttons
Client areas should be as secure as possible. Don’t forget to use strong passwords and two-factor authentication.

If you want to keep accounts extra secure, you could use two-factor authentication (2FA). After the initial login, a message will be sent to someone’s phone or email with a confirmation code.

Tracking

Don’t use Google analytics or Facebook Pixel. These will track your website visitors on and after leaving your website. This is a huge invasion of their privacy. If you need website analytics, there are privacy-respecting solutions like Fathom Analytics.

If you have an email newsletter, make sure to use a service without an opening tracker or where click-tracking can be switched off. If you must keep the click tracker for analytics, good etiquette would be to inform your newsletter subscribers on sign-up.

Avoid Homogeneity

Don’t copy other healthcare websites. By all means take inspiration from other sites, but make sure your approach is unique. An unusual design will make you more memorable to potential patients.

Screenshot from a website featuring an engraving illustration of the thyroid gland alongside a list titled 'why choose cemed?'. The list has 8 items, each with a matching icon
I suggested using engravings as a way of illustrating CEMED’s focus on endocrinology and diabetes.

Bite-size pieces

Break your content up into smaller pieces that are easy to understand. You can use tried-and-tested methods like:

  • placing content related to the main content in separate, distinct boxes. Change the colours and typography to enhance the effect.
  • iconography to help section your content
  • representing data visually using tables, bar graphs or pie chats. These can make complex information easier to understand.
  • adding illustrations if that clarifies the point you are making
screenshot of a table with two columns. The table contains data about staff absenteeism
Tables are a great example of making bite-sized information.

Iterating and maintaining your medical website design

As with many businesses, healthcare providers are constantly having to adapt to patient needs, or new health guidelines. All my medical practice clients make use of my monthly Care Plan. One benefit to this is the included 30-minute consultancy where I can make small iterations to a website without needing to invoice separately. In addition, maintaining a long-term relationship like this means communicating and implementing changes is much quicker and easier.

I hope you’ve picked up a helpful tip or two from this article. I imagine there is plenty that you knew before, but if you can benefit even from one new tip then it’s been worthwhile!