Hero Image

Designing a Modern Healthcare Website

Anyone who has walked into a Canadian healthcare institution has felt the cold, sterile patient experience we have come to expect. The typical healthcare experience includes floor-to-ceiling white paint, minimal windows and wide, empty hallways. Naturally, this doesn’t bring about a positive sentiment for patients.

Many of Canada’s leading healthcare providers have recognized this and made changes. Organizations such as these are pushing the boundaries of patient experience in Canada. One such healthcare institution is Holland Bloorview Kids Rehabilitation Hospital. The Toronto hospital has recognized that these places can be intimidating for child patients and heartbreaking for their families. Among a number of patient experience initiatives, the hospital building includes floor-to-ceiling windows, neutral colours and a “living” green wall inside the cafeteria.

These types of industry-leading initiatives are driving patient experience design across the country. Hospitals such as Holland Bloorview are recognizing that the healthcare experience starts long before a patient’s arrival at the hospital, and ends long after they leave. This is why healthcare website design is fundamental to the patient experience. Today, we uncover healthcare design trends at the forefront of the industry’s digital landscape.

Hero Banners

Hero banners play a crucial role in the healthcare website experience. As the first visual components that a user will see, a hero banner generally includes eye-catching statements, bold visual elements, and imagery reflective of the organization’s landscape, people or events.

From the standpoint of healthcare website design, a hero banner has to reflect the patient experience you are attempting to convey. Due to the large size of the image, it can effectively display the hospital’s architecture, for example. In the case of the Royal Adelaide Hospital, the hero banner displays the modern architecture and landscape of the hospital location. The building appears modern, exciting and welcoming, while the landscape is filled with green space. This hero banner is an encouraging first touchpoint for someone who wishes to avoid the cold, sterile hospital experience.

The hero banner sets the tone for the website visitor’s journey, not only online, but for any real-world interactions, a user may have with the organization. Furthermore, a user-centric design approach means that hero banners can leverage calls to action for a guided user journey, ensuring a positive experience.


Slideshows are used in many areas of healthcare websites, enabling users to cycle through items in sequential order. More often than not, these slideshows are used in conjunction with a hero banner to highlight a variety of key topics.

A core aspect of healthcare experience design is sensitivity. Many patients and their families deal with sensitive and personal medical issues. For a person to truly feel connected and trust their healthcare provider, they have to feel as though the organization is sensitive to and understands their particular situation. Take, for example, the Alzheimer Society of Canada’s website. Their home page features a hero banner with a slideshow, presenting a variety of key information. The content is meant to connect with different audiences so that each visitor will find information that encourages the belief that the organization understands the issues they face.

An important note about slideshows is that this design trend has been declining in use over a number of years. This is because user research shows that audiences scroll too fast to view more than one or two slides. This design component can exist as white noise or even a distraction because it occupies a large amount of real estate. To overcome this challenge, healthcare organizations must use slideshows as a storytelling element for branded narratives and tailored calls to action.

Custom Icons

The purpose of custom icons is more than simply to visualize specific topics. Custom icons can enrich the user experience by showcasing brand personality through colour and style. This is a natural extension of the physical patient experience. Where hospitals use colourful doorways and “living” green walls, they can also create a more welcoming and engaging website experience.

MD Anderson Cancer Center uses custom icons with vibrant colours across their website. Their brand focus is on patient experience and creating messaging that resonates with their audience. Icons are a visual representation of real-world objects. For this reason, they have to be easily understood and simple in design. Icons are a tool to introduce playfulness, reduce cognitive load for users and make deeper connections between the online and real-world experience.

Menus and Footers

For healthcare organizations, menus and footers can be difficult to design. How do you design a menu that is trimmed down to the necessary elements, while including information for all stakeholders? Many hospitals provide patient care, family support, community activities, investor relations and foundation info, all from one site.

The key is a focus on user experience. Rather than an information dump, a menu is an opportunity to be creative in encouraging users to explore the website. Just as entering a hospital can be daunting, so too can a huge, unstructured mega menu.

Finding the right information on the first try is fundamental to the patient experience. What is already an emotionally taxing experience is often made worse by a website that is not user-friendly. The user journey needs to be well-researched and understood. The above image from Peter MacCallum Cancer Centre demonstrates a navigation menu that is simple, designed to meet the needs of all users.

Effective user experience design involves the use of data. Making assumptions about an audience is risky, particularly when the audience consists of so many stakeholders. Performing real user tests will establish the effectiveness of the navigation in your current menu. Are users finding the information they need? How many attempts does it take before they find it? Are they taking the most efficient path through the website to get their information? Tools such as Treejack are at the cutting-edge of UX design, enabling the healthcare design agency to develop a menu that works.


Modern healthcare experience design is vastly different from what users have come to expect. That’s a good thing. Users are people, not robots and this mentality should define every design element in healthcare digital experience. The healthcare experience examples in this article are a few of the key design trends in the industry.

OPIN partners with Canada’s leading healthcare firms, helping them break through the noise and create industry-leading designs. OPIN’s data-driven approach to design has played a key role in our work with Holland Bloorview Kids Rehabilitation Hospital. The hospital tapped OPIN as part of an effort to revitalize its patient experience to match the real-world experience offered by the hospital.

Julia Adler

Marketing Coordinator

Julia is a creative and passionate content creator who thrives in a fast-paced, dynamic environment. She uses her background in communications to drive results. Her readiness to take on a challenge and eagerness to contribute allows her to think differently with a consumer-centric approach.



135 Laurier Ave. West, Suite 100
Ottawa, ON K1P 5J2
TEL: 1 (877) 257-6746

Saratoga Springs

153 Regent Street
Saratoga Springs, NY 12866
TEL: 1 (877) 257-6746