It’s been a stressful, harrowing quest — but at last, after all the tears, sweat, occasional rage and countless revisions, you can gaze at your screen with contentment and relief.
After all, you’ve finally achieved a homepage design that’s nothing short of perfection:
The brand expression is subtle but dynamic.
Calls-to-action are irresistible as catnip to my two needlessly anxious cats.
All of which is served up with imagery worthy of the Louvre.
Now, all that remains is to design some engaging, human-centric service pages.
Sadly, this is where your weeping begins anew — as you now realize that functional issues have rendered your splendid visual design completely & utterly useless:
The lovely callout banners you’ve designed won’t accept more text without breaking.
Images are distorting and peoples’ faces are getting cropped.
The row that was built to hold four cards now needs to accommodate five.
Dear friends and readers, we’ve witnessed this scenario more times than we can count. And it’s exactly why, here at Kanopi, we focus on designing and building with web components.
The modular way to ensure your design works — always.
Strip away the visual styling and most web pages can be broken down into a few distinct content areas:
Navigation
Main headline
Body copy, including subheads, lists, and sidebars
Collections of images
Calls-to-action/pathways to take next steps.
These building blocks form the foundation of a reusable component library that can be combined and customized to create various types of pages. For example, a photo gallery page might only need a few components, whereas a longform article could require many. From the early stages of design and content strategy, we carefully plan the components a site will need and ensure they are designed to fit together seamlessly, enabling the creation of diverse and flexible layouts.
Design components from the American Society for Metabolic and Bariatric Surgery website
Examples of components:
Page headers and heroes
Card rows
CTA banners
Media galleries
Testimonials
Subnavigation and link lists
Ideal for websites of any and all sizes.
This is true even if you’re starting with just a single landing page. After all, what if you need to duplicate that page with variations for different audiences? Does the page lead to a form and link to ancillary pages like privacy policy and terms? Starting with components gives you the power to scale faster and more predictably than figuring it out as you go.
Modular doesn’t mean boring.
One of the coolest things about designing with components is that they allow us to create variants. Variants allow us to extend a component with different presentation styles, such as alternative color schemes, distinct text formatting, or layouts that switch between columns and rows. Even with all these different styles, the basic structure of the content stays the same, making it easy to read. This balance lets us keep the message consistent while adding variety, so each component fits the content just right.
The hero component we developed for Exploratorium uses variants to open up a universe of options for media display and content formatting.
Even more component benefits:
1. They align design and development.
If there’s one thing computers are good at, it’s duplicating things. Websites are coded in reusable blocks, so designing and planning content in similar blocks leads to a smooth handoff to developers. And since components live in a central library, a change only needs to be made in one place to propagate through the entire site. This is much simpler and less error-prone than making the same change manually in a thousand different places, wouldn’t you agree?
2. They simplify accessibility and quality assurance testing.
Teams can conduct preliminary accessibility and QA testing on components as they’re developed — making later rounds of testing faster and easier. No need to worry about whether a link is large enough or colors contrast adequately if those considerations have already been built into the component and its variants.
3. They’ll save you a bunch of money.
Of course, I saved the best part for last: components make estimating more accurate by breaking design and development deliverables into manageable chunks. Throughout the project, they act as guide rails to keep efforts on track and within scope, while also serving as a framework for content strategy and copywriting.
Looking for examples? We’ve got plenty.
As I mentioned, here at Kanopi we design all our websites using components, so feel free to check out virtually any of our case studies. However, if you’re curious to see our coolest examples — the ones that showcase the true potential of component-driven design — check out these sites in particular:
If you’re ready to explore the potential of component-driven design, our team is here to help you create a gorgeous-looking website that also works seamlessly for your needs. Even if you’re just curious about how your site could be reimagined with components, we’d love to hear from you.
With 89% of patients in the U.S. Googling their health symptoms before going to the doctor, your hospital website is essential to serving your community’s needs and providing accurate, trustworthy information.
Your website serves as a virtual front door for patients and potential visitors, providing them with essential information about the hospital’s services, specialties, and facilities. A user-friendly structure and design instills credibility and enhances the patient experience by allowing easy access to critical details, such as appointment scheduling, contact information, and directions.
To develop your website effectively and ensure it supports your community, we’ve created this guide, which covers:
Before someone goes to the doctor, they’ll likely browse through a couple of physicians, make sure they’re in their healthcare network, scroll through times for an appointment— and do it all online.
People also turn to your website to answer medical queries, get updated on recent healthcare news, donate to your institution, and access an online health portal where they can update appointments and pay bills. A well-developed site helps to:
Craft a recognizable, highly reputable brand. If your hospital website doesn’t exist or contains outdated resources, it’s more than likely that people will take one look at it and deem your institution unreliable.
Differentiate yourself from other hospitals. A well-designed website communicates your commitment to patient-centered care, innovation, and technology, which can set you apart from competitors.
Build customer loyalty. To build customer/patient loyalty, your website needs to establish itself as a reliable medical web resource so that individuals can use it to make appointments, contact doctors, and pay bills.
Offer 24-hour patient communication and information. Your website provides patients with important information and resources outside of normal office hours.
Simplify marketing for hospital events and needs. Use your website to promote hospital events, streamline donation appeals, and attract more patients.
While it may feel daunting to get started with hospital web development, it’s a worthwhile investment. Improving your online presence is the first step toward attracting and retaining more patients.
Features to Include in Your Hospital Website
Whether someone is coming in for a quick check-up or a visit to the ER, your hospital website is an integral part of their journey. To ensure it serves your community to the best of its ability, your website needs these specific site features:
Simple navigation and menus
A list of services your hospital provides
Appointment booking tools
Contact details
Interactive advanced search functionality
Doctor/team information
AI-powered chatbots to answer patient questions and personalize the visitor experience
Top Hospital Web Development Examples and Best Practices
The best way to determine if your hospital website is up to par is to look at other successful sites. Review these hospital website examples to inspire your web development efforts:
1. Simple navigation: Global Brain Health Institute
The Global Brain Health Institute (GBHI), an organization dedicated to protecting the world from brain disease and other health threats, wanted to ensure that visitors could easily navigate their site and locate different programs, services, and projects.
As a result, they worked with Kanopi to add a navigation bar that is logically organized and prominently placed throughout the website, so users can quickly find what they need. The site also features a fellowship directory that includes a search bar and filters. This is useful for medical students interested in pursuing a fellowship in a particular specialty, as well as for patients who want to learn more about the expertise of the hospital’s staff.
Why simple navigation is essential for hospital websites: As soon as someone lands on your hospital website, they should be able to find the content or service they seek. To ensure your site is easily navigable, consider mapping out the patient journey to better understand how people get to your site and what they do once they get there.
2. Clear CTAs: Mayo Clinic
The Mayo Clinic is a nonprofit academic medical center, known for its expertise in many areas of medicine and for providing high-quality care to patients. Their homepage features multiple calls to action (CTAs) that encourage visitors to schedule an appointment, donate, or learn more about a particular medical condition or procedure.
By including clear CTAs on their website, the Mayo Clinic helps visitors understand what medical services they provide, what treatments are available, and how to seek help if they need it.
Why clear calls to action matter for hospital websites: Carefully-placed CTAs let website visitors know exactly where and how to complete their intended action. As you create your own, consider the specific actions that you want visitors to take. Then, use clear and concise language to convey your purpose. For example, you might say “Schedule an Appointment Today” or “Learn More about Our Cancer Center.”
3. Patient-focused design: UCSF Department of Surgery
As a result, we helped enhance this website with a variety of user-friendly fixes, including:
Simple domain access with consistency across topics and departments
Human-led imagery of UCSF doctors and videos highlighting the patient experience
A mobile-first approach with a responsive design
Why patient-focused design is essential for hospitals: Your patients are the heart and soul of your hospital, and appealing to their needs will help you maintain high audience engagement. Patients should feel welcomed and comfortable using your website and signing up for your services. A friendly, patient-focused design helps foster a sense of community.
4. Consistent, bold branding: Cleveland Clinic
Cleveland Clinic is one of the top multispeciality academic medical centers in the country. To establish a strong, recognizable brand and reinforce their reputation, they included bold, eye-catching colors throughout their website.
Notice how all of the elements on their homepage are blue and green. When patients come across these colors in other mediums and materials, they’ll likely associate them with Cleveland Clinic.
Why consistency and bold branding is important for hospital websites: Consistent branding builds trust between patients and your hospital, which can be especially important in the healthcare industry where patients often have significant concerns about their health and well-being.
Adding color is a popular medical website design trend, with vivid and deep colors being sported on many successful hospital websites. Consider your site’s color palette before diving into web development to make sure your website branding is consistent throughout its pages.
5. Accessibility: Mount Sinai
Mount Sinai’s healthcare system prides itself on providing a wide range of services to diverse populations, including medical education, research, and patient care. To meet their patients’ varied needs, they prioritized creating an accessible website.
The accessibility tool in the bottom footer allows visitors to use a screen reader, navigate using their keyboards, and change the color contrast, if needed.
Why accessible design matters for hospital websites: Having an inaccessible hospital website will not only turn away those who might need your services the most but paints your entire establishment in a negative light. Because of the industry that you’re in, maintaining full compliance with the ADA and WCAG is essential. You want your entire community to feel accepted and at ease with your services, especially when it concerns medical care.
6. Inclusivity: Northwestern Medicine
Northwestern Medicine has a number of hospitals, all of which are committed to providing inclusive care to patients of all backgrounds and demographics. Maintaining an inclusive website is important for Northwestern Medicine, as it allows them to better connect with their patients and provide them with the resources and care they need.
Their Patients and Visitors page is extremely comprehensive, with CTAs that address a wide variety of concerns and questions.
Why inclusivity is important for hospital websites: Your hospital website content needs to represent the voice of all of your users, whether it’s patients, frontline workers, researchers, or caregivers.
7. Mobile-friendliness: Johns Hopkins Medicine
Johns Hopkins Medicine is known for its world-class medical facilities, including hospitals, clinics, and research centers. As a leading healthcare provider, they needed to keep up with changes in technology by creating a mobile-friendly website.
Their mobile-responsive site design allows patients to schedule appointments, access medical information, and communicate with healthcare providers, regardless of the device they’re using.
Why mobile-friendliness matters for hospital websites: With over 60% of the global internet population using a mobile device to access the internet, your hospital web design must work on all different screen sizes. For patients or families already in the hospital or waiting room, the ability to quickly look something up on their phone or tablet is critical.
Most content management systems (CMS) can create a mobile-responsive site automatically. However, there are some easy ways you can ensure your site’s responsiveness. For instance, use large buttons, a vertical layout, and avoid large chunks of text.
8. Accurate, updated information: Yale New Haven Hospital
Yale New Haven Hospital provides a wide range of medical services to its local community. As with any hospital, their website needs to provide accurate and reliable information about their services, facilities, and medical personnel. That way, patients can make informed decisions about their care.
Perhaps most notably, Yale New Haven’s homepage features emergency room wait times, informing patients where to seek care and what to expect when they arrive.
Why accurate and updated information is essential for hospital websites: When it comes to healthcare, accuracy is non-negotiable. It’s critical that your web content is consistently updated and provides the most high-quality information available.
9. Streamlined user experience: Colorado Health Foundation
The Colorado Health Foundation (CHF) is a statewide organization that aims to improve the health and well-being of all Colorado residents. The CHF partnered with Kanopi to clean up their site’s navigation and streamline the user experience.
Based on our research and expertise, our developers instituted impactful changes. We condensed the main menu to a cleaner version focused on the items that matter most to users. We also improved the visitor journey by:
Ensuring consistent page layout
Incorporating translation support
Adding accordions to streamline page design with collapsable text
Building a data display to foster accountability for the organization’s racial and health equity goals
Enhancing accessibility with clearer fonts, tab navigation, and meaningful links
Why a streamlined user experience matters for hospitals: Patients visiting your hospital’s website may be rushed or anxious. A simplified user experience connects them with the information or resources they need quickly and seamlessly.
Tips for Hospital Website Compliance
Your hospital website will likely have multiple services that collect and store patient data, whether that includes a health portal, appointment tool, or bill payment.
HIPAA is an act created by the American government to protect patient data such as names, phone numbers, email addresses, social security numbers, and medical records.
HITECH extends HIPAA requirements to bring additional benefits and protection to patients. This regulation establishes that patients should always have access to their health information online, and if hospitals do have a data violation, patients should be notified immediately. Depending on the seriousness of the data breach, your hospital may also incur various penalties and fees.
To ensure your website and software solutions not only comply with HIPAA and the HITECH Act but go above and beyond to ensure data protection, you need the following safeguards:
Tech safeguards include encryption software, data backups, and firewalls. Assess the state of your current healthcare cybersecurity system to ensure you have the proper safeguards in place.
Physical safeguards include only granting access to material records or electronic devices with the aforementioned data after proper authorization.
Administrative safeguards include the guidelines your hospital sets up to ensure that internal procedures comply with HIPAA.
Once these safety nets are in place, add a privacy policy statement to your website explaining your commitment to HIPAA and HITECH compliance. Publicizing this statement will help you build trust with current and prospective patients.
How to Maintain Your Hospital Website
Hospital website maintenance is crucial to ensure your site remains a high-performing, accessible, and convenient resource for your audience. Follow these best practices to future-proof and maintain your website over time.
Adopt a continuous improvement approach
Traditional website design and development takes a linear approach, with a clear pathway from strategy to implementation. However, a growth-driven, continuous improvement approach involves an ongoing, iterative process of:
Strategizing new website innovations
Implementing website changes to test your hypotheses
Tracking results and adjusting your approach based on feedback
This perspective pushes you to constantly update your website based on evolving best practices. Plus, you can avoid major site overhauls, which can cost your organization time and money.
Update your website according to accessibility innovations
New accessibility innovations are released constantly, helping to improve the online experience for users with temporary or permanent disabilities. Intelligent eyewear, a hands-free mouse, and AI-powered assistants are just a few of the exciting innovations we’re seeing this year.
Your website maintenance process should include accessibility updates to ensure your site stays usable and functional for all users. Take the time to adjust to the impacts of the following potential changes:
New assistive technology. Innovations in screen reader technology, AI assistants, assistive voice solutions, and other accessible technologies change how individuals interact with your web content. Make sure your website is structured properly, with clear navigation and heading structures, so it’s compatible with all assistive technology.
Accessibility testing techniques. Alongside updates to assistive technology itself, the way web designers can test sites for accessibility constantly evolves as well. Stay up to date on the best automated testing tools available as well as techniques for manually assessing your site. Resources like Kanopi’s guide to accessibility testing can be a huge help because our developers use these tools every day to ensure the sites we build or refresh are completely accessible and compatible with assistive technologies.
Changes to legal requirements. Laws like the Americans with Disabilities Act (ADA) and the Section 508 Amendment to the Rehabilitation Act govern web accessibility in the United States. Keep this legislation in mind as you refresh your website for accessibility. If you want to expand into new markets in other countries, be aware of their accessibility legislation to remain compliant.
Here at Kanopi, we take a holistic approach to web accessibility, learning about your website’s visitors and their unique accessibility needs to build a strategy that works best for your organization. Learn more about our approach in this short video:
Conduct technical fixes
The technical elements of your hospital website play a major role in your users’ online experience. Technical issues can slow down your website and leave it vulnerable to security breaches.
To keep your website in top shape, prioritize fixing the following technical issues:
Broken links. Broken links can hurt your SEO performance and create a negative user experience. Use an automated tool like Semrush or Google Search Console to identify and correct broken links with mass updates.
Security risks. Run core updates for your CMS and plugins or modules, encrypt sensitive data, require strong passwords for CMS users, and enable two-factor website authentication. In addition, host regular security training sessions with your team to ensure everyone is up to date with the latest security risks and best practices.
Slow page loading speed. Measure page load speed using a free tool like Google’s PageSpeed Insights or Lighthouse. Common performance issues include large image files, unused JavaScript or CSS, and large network payloads.
Set up recurring technical reports to get ongoing updates about your site’s health. Continuously monitoring your site and fixing performance issues will help you avoid smaller problems snowballing into major complications down the line.
Update your content
Your website’s content equips your audience with the crucial medical information they need to make informed decisions about their health. Updated, accurate content helps raise your hospital’s authority level and gives more credibility to your institution.
In your website maintenance process, make the following content updates:
SEO updates. Use SEO tools like Ahrefs or Moz to keep an eye on your search engine rankings. If any of your website’s most important pages, like high-value blog posts or your homepage, start slipping in the rankings, make a plan to refresh the content to enhance its SEO appeal. For example, you could better incorporate the main keyword, add more engaging visual elements, or refresh the page with updated health information.
Audience shifts. Your hospital’s core audience and their content preferences may change over time. New people could move into your coverage area with new online medical needs. Or, audience members may begin expressing interest in different blog post topics than what you normally cover. Pay attention to metrics like blog post engagement rates, time spent on each page, and audience demographics to ensure your content aligns with your audience’s interests and needs.
Interactive content additions. Interactive content is on an upward trajectory right now as more consumers seek out these engaging online elements. Interactive content can also lead to 2x the conversion rate of passive (or static) content. Find opportunities to incorporate this content into your hospital website, whether through online health assessments, quizzes, maps, surveys, or polls.
These content updates and the website maintenance process in general are most successful when working with a dedicated web development partner that has expertise and experience in maintaining websites like yours. Read on for an inside look at how the Kanopi team approaches hospital web development support.
How Kanopi’s Hospital Web Development Services Can Help
Partner with a website support and development agency to ensure you’re doing everything possible to improve your hospital website.
Kanopi is a top partner for hospitals with a continuous improvement team that has helped develop over 150 active sites. No matter what stage your hospital website is at, our team can conduct a full website redesign project or build it from scratch.
Content management system support tailored to user needs—whether you use Drupal or WordPress as a CMS, we have experts who can customize each platform to align with your organization’s needs and branding.
Custom module/plugin development—if you can’t find the right tool to perform a specific action, our coding team can create it.
WCAG 2.1 AA accessibility standards to ensure that anyone can access and engage with your healthcare services as needed.
Custom integrations for an online health portal or other solutions that can expand your hospital website’s capabilities.
Responsive, mobile-first design because we know that your online hospital services should be accessible from any device, anywhere.
Technical SEO strategy and implementation so that if anyone looks up your hospital’s name, a specific doctor, or a program, your hospital website is the first option on the search results page.
Even after your optimized site is officially launched, we will continue working alongside your hospital to create a website growth plan. This ensures that your site is sustainable for as long as possible and will support your hospital as it evolves.
For more information on website development, check out these resources:
Drupal vs. WordPress: Which One is Right For You? Drupal and WordPress are two popular content management systems that hospitals depend on. Learn which one is right for your organization in this guide!
Inclusive & Accessible Forms. Need to collect information via a form on your website? Forms ask your users to provide personal data, so ensure those forms are inclusive and accessible.
Webinar: Website Best Practices for an Aging Population. Kanopi’s Cliff Persaud discusses the challenges and opportunities facing healthcare providers and how they can ensure their website design meets the needs of aging patients.
How are we at the end of 2024 already? It feels like only yesterday that we were sitting right in this very spot asking, “how are we at the end of 2023 already?”
In any case, here we are — which means it’s time for that one special holiday tradition specifically mandated by our Marketing department: our blog about which visual web design trends are going to be hottest throughout the coming year. Only this time around, we’re giving you, dear reader, the opportunity to weigh in as well. Do you agree with our predictions? Let us know below (and maybe next year blogs that incorporate surveys will be on everyone’s list of trends for 2026.)
As we move into 2025, design trends are blending innovative technology with a deeper emphasis on human connection. From dark mode and playful accents to an increased focus on inclusivity, the themes emerging this year underscore a balance between creativity and accessibility. This post explores the top design trends to watch, providing insights on how they can be applied thoughtfully to create engaging and authentic experiences for users.
Dark Mode Slowly Creeps Along
Dark mode has become a standard on operating systems, but website adoption has been slower. While popular, dark mode design requires extensive adjustments to branding and color palettes, and often presents technical challenges. Until automation catches up, adding dark mode will remain time-intensive.
The key for brands is to align with their unique identity rather than chasing trends. As seen in high-profile rebrands like Burger King and Pizza Hut, success comes when brands stick with the visuals that truly resonate with audiences.
Even More Inclusive People Images
Inclusivity in visual media is evolving, with companies expanding representations to include disabilities, nonbinary identities, and various racial backgrounds. This trend moves beyond general categories to focus on individuality, showing a more nuanced human experience. Here’s our go-to list for finding inclusive images for your next blog or social post.
Playful Accents
Playful typography, ornamental elements, stickers and scribbles are seeing a resurgence, adding warmth and character to designs. Expect to see more ‘inflatable’ or ‘melty’ type treatments in packaging and branding. These organic elements bridge the physical and digital, reminiscent of creative touches like 2023’s Spotify Wrapped.
Return to the 90s and 00s
The nostalgia for 90s and 00s styles has influenced fashion, packaging, and digital design. However, rather than simply imitating, brands should aim to capture the underlying spirit of those decades — focusing on authenticity and individuality.
Proof of Humanity
In an era of rising digital distrust (hello artificial intelligence), brands need to show authenticity. This can mean avoiding generic stock photos in favor of real employee photos (which, trends aside, is something we’ve always urged our clients to do) and providing verifiable information to establish trust.
Customizable UI
User customization options are expanding, especially on platforms like iOSandAndroid, where users can personalize themes and icons. Young audiences are definitely embracing this trend, favoring platforms that allow for a tailored experience; however, it’s still too early to tell whether the OS trend will cross over to web design.
Cool, But What About AI?
AI in design is now mainstream but requires careful use, as AI-generated content very often needs to be refined by actual humans. While AI-driven photo editing is gaining ground quickly, it also raises serious questions about authenticity. Many companies now publish guidelines on responsible AI use, typically detailing their efforts to ensure transparency and accountability while addressing and mitigating bias.
Incidentally, our current policy at Kanopi is not to use AI in the generation of deliverables. However, we’re also keeping a close eye on developments in this area.
Final Thoughts (for the next 11 months, at least)
Design in 2025 will center on striking a harmony between the digital and the human, the bold and the soothing. By embracing these trends, brands can forge stronger connections with their audiences, combining aesthetic appeal with functionality and inclusivity.
Finally, let’s be honest — by 2025, there will probably be more blog posts about ‘emerging design trends’ than there are actual trends. Just remember: for every new color palette, there’s a designer somewhere writing a thousand-word piece on why this is the year of ‘soothing yet bold’.
Page builders are a great tool, but they’re not always the right solution. If you’re a small organization with minimal updates to your website — like changing your schedule or hours — page builders can be a fantastic option. They are simple, cost-effective, and user-friendly, which makes them a good choice for organizations with straightforward needs.
Common WordPress page builders:
These are the ones we come across most frequently here at Kanopi:
Elementor
Divi
WP Bakery
Beaver Builder
Why people like page builders:
One of the main reasons page builders are popular is because they save time and reduce costs. You don’t need a full development setup or specialized tools to get started.
Everything can be done right in the site’s interface, meaning there’s no need for code repositories (GitHub)or additional software licenses.
Heck, you can even use a public computer at your local library to make changes. This simplicity means you don’t need developers to build and manage a site with a page builder.
The trouble with page builders:
However, it’s hard to have it both ways; if your organization needs frequent custom updates, a page builder may not be the best fit. Page builders are often performance-heavy, which can slow down your site due to their reliance on plugins. And while they can be useful, they sometimes cause accessibility issues (see below) or limit flexibility. If you’re after a high level of customization or specific functionality, you might hit a wall with a page builder.
What about accessibility and performance with page builders?
Glad you asked: when it comes to accessibility and performance, page builders aren’t as “easy” and “worry free” as they may look.
Accessibility issues:
Semantic HTML: Page builders tend not to produce semantic markup. This can prevent screen readers from properly interpreting the content.
Keyboard Navigation: Page builders create very complex HTML for page and component layouts which can create barriers for keyboard navigation or even keyboard traps. Menus can be extremely complex, making it difficult to even navigate the menu with a keyboard, let alone a mouse.
ARIA Attributes: Page builders do their best to utilize these but it is very easy to have them incorrect, or missing.
Color Contract: Color is managed by the content editor which gives them great power and control. However this also very quickly can lead to an inaccessible site as the color contrast can easily and quickly fall out of the range of accessible.
Focus state: Focus states are used by keyboard navigation. These interactive states can easily become mismanaged or used in page builders creating a disorienting experience for users.
Performance issues:
Bloated code base: As mentioned earlier, page builders typically have very bloated code, using a lot of markup to create simple layouts, and creating loading a large amount of JS and CSS on pages. This slows down page load time.
Large DOM size: to piggyback on the above, complex layouts and long pages can have a large DOM size due to the number of elements that it creates. This slows down the page load as you have to wait for all those elements to render
Render blocking: Because they can load a lot of resources, internal and external CSS and JS files, those external resources may not be managed properly blocking page load until those payloads are downloaded first.
Database bloat: Page Builders can store a ton of data in the database. Depending on your site size and host, this can drastically slow down your overall performance
In short: if you’re truly trying to build accessible, performant, websites there are still many things to work around and manage with the use of page builder tools.
We’ve worked with several clients to help them move from page builders to more sustainable, flexible solutions. Here are a few examples:
California Prevention Training Center (CAPTC) – Divi
Issue: This website was over-engineered with Divi. We redesigned and overhauled the site, removing the unnecessary complexity of the page builder and improving the overall user experience and site performance.
The California Prevention Training Center (CAPTC) website before (left) and after (right) moving off of Divi.
Carmanah – Divi
Current Status: The site was outdated and had an overly complex backend. The client came to us seeking a redesign, with a focus on improving performance and security. We’re migrating away from Divi, which will streamline the website’s backend, improve load times, and enhance the admin user experience.
Adaptive Biotech – Elementor
Issue: Over time, the page builder became a hindrance, especially with accessibility and content entry limitations. We rebuilt key components of the site using Gutenberg blocks and Advanced Custom Fields (ACF). This approach removes the need for the page builder and its plugins, improving site performance and reducing load times.
DonorSearch – Visual Composer
Issue: The client couldn’t make content edits without breaking the layout. We rolled out a more manageable solution, using blocks within the editor and ACF to create custom blocks. This enabled a flexible redesign and content migration, with a focus on creating a dynamic, easily editable website. The new DonorSearch design also allowed for different content variations, so the site remains fresh and adaptable over time.
The DonorSearch website before (left) and after (right) moving off of Visual Composer.
Final Thoughts
While page builders offer an easy, cost-effective solution for simple websites, they have limitations regarding scalability, customization, and performance.
For organizations that need a more flexible, sustainable solution, moving away from page builders to custom-built sites using WordPress’s core features can make a significant difference. Whether you want to improve performance, accessibility, or content management, working with a development team to find the right solution is key.If you have any questions or issues with page builders on your WordPress site, we’re here to help. We’ve worked with numerous clients to solve page builder issues, and our team is ready to help you get the most out of your website — whether that means refining your current setup or transitioning to a custom-built solution.
According to the most recent E-Expectations Trends Report, college and university websites are the resource current high school students turn to most often for information about your institution. That means your college website matters — a lot.
A college website needs to meet the needs of many different users. It must provide vital information to current students, staff, parents, and alumni. At the same time, it must empower new students and donors and help recruit staff.
We’ve compiled our picks for the best college websites to explain what they are doing right and how you can replicate the best practices used in your own website strategy. We’ve grouped each website based on the strategies they execute particularly well, including:
Ready to feel inspired? In no particular order, let’s look at the best college and university websites!
Best College Website Designs
Design plays a crucial role in creating an effective college website. A well-designed website not only attracts potential students, but can also provide a positive user experience that encourages prospects to explore the site and engage with the content.
When designing your own website, remember that less really is more. Instead of cluttering the website with information, focus on clean, organized pages that are easy to navigate. Leave ample white space around important elements like calls to action (CTAs) to make them stand out. Doing so will help potential students find the information they need quickly and easily.
McGill University is a public research university located in Montreal, Canada. It is one of Canada’s top universities and is known for its prestigious academic programs and research. The McGill website provides a wealth of information about the university, including its history, faculty, student life, and research initiatives.
What’s excellent about McGill University’s web design:
Minimalist look: McGill’s homepage is clean and minimalist while still providing essential content to its users.
Inclusive language: The homepage call to action (CTA) uses second-person, inclusive language to help prospective students visualize their place on campus.
Simple but engaging typography: The McGill website maintains simplicity throughout its typography, but did you notice the switch between serif and sans serif fonts? This creative choice offers more visual intrigue without being distracting.
Based in Baltimore, Loyola University Maryland is one of the oldest Jesuit institutions in the United States. The Loyola Maryland website promotes the school’s Catholic values while providing plenty of information and opportunities for prospective students, donors, and faculty alike.
Standout features of Loyola University Maryland’s web design:
Straightforward navigation: The main navigation menu is streamlined with three CTA buttons — “Visit,” “Apply,” and “Give” — that link to high-demand pages.
Helpful white space: White space is used effectively to improve readability, enhance visual clarity, and draw attention to important information.
Dynamic homepage video: A professional, compelling video at the top of the homepage makes the website more dynamic and memorable.
Flagler College is a small private institution located in St. Augustine, Florida. The university’s website promotes its historic roots while providing easily accessible resources for students, faculty, and other stakeholders.
Why Flagler’s web design exceeds expectations:
Homepage video: The homepage features an engaging video showcasing the campus, complete with a pause button to improve accessibility.
Bold colors: Flagler’s bold and eye-catching branding is on full display with colors that shift as you scroll down.
Streamlined user pathways:Flagler worked with Kanopi’s web designers to simplify user pathways, helping visitors find what they need quickly. For example, the First Year Applicants page includes all the steps interested students need to follow to apply to the college in an easy-to-understand list.
Simple navigation: The homepage also includes a convenient menu, allowing users to jump to different sections on the page. As a result of the structure and navigation updates supported by the Kanopi team, the Flagler site won two w3 Awards last year.
Roosevelt University is a private institution with campuses in Chicago and Schaumburg, Illinois. Roosevelt’s website prioritizes a highly engaging, interactive experience that makes it easier for current and prospective students, alumni, and other university community members to find opportunities that align with their interests.
What makes Roosevelt one of the best college websites:
User-friendly sign-on: With the help of Kanopi’s development experts, Roosevelt migrated its website to a more user-friendly Drupal instance that offers a convenient single sign-on for all user accounts.
Welcoming homepage: Roosevelt’s inviting homepage CTAs offer simple pathways for common user intentions, such as requesting more information, scheduling a visit, or completing a virtual tour.
Inclusive pricing structure: Roosevelt emphasizes its relatively cheaper price tag when compared to other private universities, as well as its financial aid opportunities. This makes the website more inclusive for prospective students from all financial backgrounds.
Founded by Benjamin Franklin, the University of Pennsylvania (UPenn) is one of the nine colonial colleges established before the signing of the Declaration of Independence. The UPenn website offers a straightforward, clear view of the school’s priorities, including sustainability, diversity, and inclusion commitments.
What we like about the University of Pennsylvania’s web design:
Bold hero image: As soon as users arrive on UPenn’s homepage, they are greeted with an engaging hero image related to current events at the school.
Consistent design: Each page maintains a consistent visual style, color scheme, and typography to create a unified and professional appearance.
Dynamic content: The homepage is frequently updated with the latest news, events, and ways to keep in touch with the university on social media. This lends a dynamic, active feel to the university’s web presence, letting visitors know this college is serious about informing its audience about the latest happenings.
Oberlin College, located in Oberlin, Ohio, has a rich history of progressivism and student activism. The university’s website features diverse academic offerings, from a music conservatory to a strong liberal arts focus.
What we love about the Oberlin website:
Informational homepage video: The homepage automatically plays a reel highlighting the college’s campus, facilities, and student life.
Engaging visuals: The site uses high-quality images to give users a glimpse of what the college offers.
Hierarchical page structure: Content is arranged with visual hierarchy in mind, guiding the user’s eye to the most important elements on the page first.
The University of Texas (UT) at Austin is a public research university in Austin, Texas, with over 51,000 students enrolled. The university’s branding and visual identity are evident throughout the website.
Here are the most effective elements of the UT Austin website design:
Detailed navigation: A comprehensive drop-down navigation bar helps visitors find exactly what they’re looking for.
Engaging imagery: High-resolution images and engaging graphics enhance the overall look and feel of the website.
Aesthetically pleasing use of color: UT Austin’s burnt orange brand color contrasts stylishly with the effective use of white space and bold text.
Best College Websites for Accessibility
Under Section 504 and Title II, educational institutions must provide all individuals, including those with disabilities, equal access to important information and opportunities online. By making your website accessible, you avoid legal issues and demonstrate a commitment to promoting diversity, equity, and inclusion.
Based in Ithaca, New York, Cornell is a private Ivy League university offering seven undergraduate and seven graduate divisions. As a land-grant university, Cornell’s website keeps its research focus front and center while offering vital admissions and other academic information for current and prospective students.
What we like about Cornell’s accessible website design:
Strong color contrast: Vibrant, bold colors pass accessibility contrast requirements.
Useful alternative text: Images include concise and accurate alternative text for visually-impaired users.
Welcoming language: The content features first-person language, such as “we are a diverse community of scholars,” to promote inclusion.
Adelphi University is a private institution located in Garden City, New York. According to its website, the university offers undergraduate and graduate programs in various academic disciplines, including social work, nursing, education, business, psychology, and more.
What makes the accessibility approach excellent:
Captioning: Transcripts and closed captions are available for audiovisual content, enabling individuals with hearing impairments to access the information.
Descriptive alt text: Images are backed by descriptive alternative text, making the site accessible to people using screen readers.
Accessibility feedback: The site includes an accessibility form, where users can report questions or concerns related to individuals with disabilities and their experience accessing content. The responses help the university stay accountable and further improve its accessibility standards.
Powered by a Catholic mission, the University of Notre Dame is located in South Bend, Indiana. It serves 8,000 undergraduate students and is noted for its football team as much as its prestigious academics, with both elements reflected on its robust website.
Why the University of Notre Dame’s accessible web design impressed us:
User-friendly navigation: A clear and consistent navigation system makes it easy for all users to find and access various website sections.
Keyboard-navigation-friendly: All interactive elements, such as buttons and forms, can be accessed and activated using only the keyboard, which is vital for individuals who cannot use a mouse.
Logical page structures: Headers are organized logically and hierarchically, helping screen readers navigate the content easily and improving overall readability.
The University of Iowa (UI) is a public research university in Iowa City, Iowa. Its website boasts renowned academic programs, including those in medicine, engineering, business, and the arts.
How the University of Iowa’s accessibility commitment makes an impact:
Simple keyboard navigation: Although the website lacks an accessible name on the search button and has a miss-coded background video, its functionalities can be operated using a keyboard alone, without requiring a mouse. This is a crucial aspect of website accessibility.
Adjustable fonts: Users with low vision can adjust font size according to their needs without breaking the website’s layout.
High contrast: Sufficient color contrast between text and background enhances readability for people with visual impairments or color blindness.
Award-Winning College Websites
Some college websites are so effective, engaging, and visually appealing that they’re recognized on a larger stage. One such form of recognition is the Webby Awards, an annual award ceremony recognizing the top websites of the year.
In the list below, we’ve compiled a few top examples of higher education websites honored with Webby Awards or nominations in recent years. These websites use exemplary audience engagement and visual design strategies, so note which elements you could borrow to improve your university’s website.
The Moore College of Art & Design is a private Philadelphia art school for women, nonbinary, and gender-nonconforming students. The college’s online promotional viewbook provides a unique and visually engaging resource for prospective students to envision their place at the school. We can honestly say we don’t see many college websites as unique and colorful as this one.
Here’s what caught our attention in the Moore College Viewbook:
Unique comic-book-style design: The viewbook offers an engaging user experience reminiscent of reading a comic book. Bold colors, flashing elements, and unique microinteractions feel like walking through an animated world.
Helpful user pathways: Visitors can select their own pathways using CTAs designed to provide tailored information for each educational path.
Heavy visual emphasis: A variety of photos from different events and programs give prospective students a realistic look at what life in the program is like.
The School of the Art Institute of Chicago (SAIC) is a private art school considered one of the top art schools in the United States. The school’s website offers a veritable visual feast, with dynamic content and bold branding.
Standout features of this website include:
User-focused navigation: The “Resources for” menu item speaks directly to the needs of different user groups, with convenient links to relevant informational pages.
Microinteractions: The “Why SAIC?” section on the homepage features creative microinteractions — when users hover over each photo, they turn into dynamic videos that bring the content to life.
Captivating colors: The site uses bold, eye-catching colors to create a more playful experience.
The University of San Francisco (USF) is a private Jesuit university in San Francisco, California. The USF website highlights the university’s diverse student body, quality of education, and value. Prospective students can easily access information on every program available, from undergraduate and graduate degrees to research programs.
Why we like this higher ed website:
Compelling hero image: The primary image on the homepage is a striking solo shot of a student with a university building in the background. The photo is simple yet effective, allowing prospective students to envision themselves on campus.
Effective use of statistics: The homepage spotlights key statistics related to the university’s success, including information about campus diversity, social mobility, and lifetime earnings. These statistics are presented clearly so prospective students can easily understand how the university will support them.
Pop-out menu: The website uses a pop-out hamburger menu that keeps the header uncluttered.
Best Virtual College Tours
Virtual tours provide an immersive experience that can include panoramic photos, videos, and student-led tours that help prospective students better understand the campus. This insight is particularly important for students who cannot visit in person due to distance or other limitations.
Several of the following universities partner with YouVisit to add virtual tours to their websites. Consider whether working with an external partner is the best option for creating your own.
Rice University
Unique illustrations
Rice University is a private research university located in Houston, Texas. It is noted for its high level of research and strong academic reputation, with a 6:1 student-to-faculty ratio. The Rice website highlights upcoming events alongside statistics about the university’s rankings and student population.
Here are the standout features of the Rice virtual tour:
Engaging visuals: The site offers a fun twist on the typical virtual tour with an unexpected graphic layout that is still intuitive to use.
Interactivity: An interactive map allows users to explore different areas of the campus, including academic buildings, residence halls, sports facilities, and more.
User-friendly search functionality: A search bar encourages users to quickly look up landmarks and destinations, perfect for new and prospective students finding their way around campus.
The University of Pittsburgh at Bradford is a regional campus of the University of Pittsburgh. Nestled among the Allegheny mountains, this school offers 115 academic programs to its 1,500 students. Its website showcases the variety of outdoor activities available while giving prospective students a glimpse into what life at the university is like with a carousel of homepage images.
Why the University of Pittsburgh at Bradford’s virtual tour caught our eye:
Effective VR use: The website features a virtual campus tour that uses virtual reality (VR) to provide users with a 360-degree immersive experience.
Student insights: The tour features video testimonials from current students, providing insights into their experiences, campus life, and extracurricular activities.
Accessibility: The virtual tour is accessible to users with disabilities, providing keyboard navigation options, captions for videos, and alt text for images.
Morehouse College is a private, historically Black men’s college located in Atlanta, Georgia. The school is noted for playing an important role in the civil rights movement in the United States and for its robust alumni network, known as “Morehouse Men.”
Why the Morehouse College virtual tour stands out:
Interactive elements: The virtual tour for Morehouse College includes interactive elements that users can click on to read more about notable landmarks, alumni, and programs.
Immersion: 360-degree photos and videos provide an immersive view of key campus locations, giving prospective students a sense of being physically present.
Opportunities to connect: The tour includes links to the college’s social media accounts, allowing prospective students to explore campus life further and stay updated on current events.
Best Mobile College Websites
Members of Gen Z spend an average of over six hours on their phones daily, and you must meet these current and potential students where they are. Mobile optimization ensures your website is accessible on mobile devices and provides a positive user experience for all visitors.
To make your website mobile-friendly, adjust the layout and content to fit the screen size and resolution of the device on which it is being viewed. This can include reordering content, resizing images and videos, and adjusting font sizes. Other strategies for mobile optimization include simplifying the navigation menu, reducing page load times, and optimizing images and videos for mobile devices.
Another prestigious American university, Stanford enrolls over 17,000 students. Its campus, located in Stanford, California, occupies 8,180 acres, making it one of the largest university campuses in the country. The Stanford website covers multiple aspects of the school’s mission, including events, academics, research, healthcare, campus life, and admissions, with different headers throughout the homepage.
What we like about Stanford University’s mobile design:
Responsive layout: The website layout automatically adjusts to fit various screen sizes and resolutions, ensuring the content is easily viewable and accessible on mobile devices.
Convenient forms: Forms are simplified for mobile use, with responsive input fields and easy-to-select options to enhance user engagement.
Appropriate tap-target layout: Buttons and interactive elements are designed with sufficient spacing to accommodate tapping with the thumb.
The University of British Columbia (UBC) is a top Canadian university located in Vancouver. Its website is simple and clean, spotlighting campus news alongside a strong research focus.
What makes UBC’s mobile design great:
Performance optimization: Images and videos are compressed for faster loading times on mobile devices.
Readability: Text is legible on smaller screens without users needing to zoom in.
Lack of pop-ups: Pop-ups are limited to avoid disrupting the mobile browsing experience, as they can be challenging to close on smaller screens and lead to user frustration.
Brown University is a private Ivy League research university located in Providence, Rhode Island. It was founded in 1764 and is one of the oldest and most prestigious universities in the United States.
Why Brown University’s mobile approach stands out:
Mobile-optimized video: The video on the homepage automatically adjusts to a static image in the mobile version, which is much easier to view.
Simple contact options: Click-to-call options are prevalent throughout the site, allowing users to contact the college directly from their mobile devices.
Streamlined content: Content is easy to read on smaller screens, with concise paragraphs and legible font sizes.
Best College Website Admissions Pages
A comprehensive admissions page is a critical tool in a college’s recruitment strategy. It provides a clear path for potential students to navigate and ultimately submit their applications.
When crafting your admissions page, include information on how to apply, application requirements, deadlines, and important dates. It should also provide details on tuition and fees, scholarships, and other financial aid opportunities.
Convenient information for a wide range of user groups
The University of Arizona is a large public land-grant university located in sunny Tucson, Arizona. Its website covers all the academic information that prospective students are curious about and provides a thorough overview of the culture and experience of living in Tucson.
Why the University of Arizona’s admissions page is effective:
Tailored content for different user groups: The admissions overview page for the University of Arizona has dedicated sections for each type of applicant, including prospective first-year, graduate, international, transfer, and online students.
Convenient contact information: The page highlights clear contact details for the admissions office, allowing visitors to reach out for inquiries.
FAQs: There are also answers to frequently asked questions about the admissions process and college life.
Renowned for its journalism, management, and music schools, Northwestern University stands apart as one of the most prestigious schools in the United States and the world. The school’s website highlights its prominent research focus and its commitment to fostering a diverse, inclusive, global community.
Why Northwestern’s admissions page made our list:
Welcoming tone: The website features a warm and inviting admissions page that welcomes prospective applicants with second-person, inclusive language, saying, “Your Northwestern Direction starts here.”
Helpful information: The page provides a concise overview of the college, highlighting its mission, values, and unique selling points. It also provides clear and detailed information about the admissions process, including application deadlines, requirements, and steps.
Convenient touring options: The website offers multiple ways to explore the campus, including in-person tours and virtual info sessions.
Georgetown University is a private research university in Washington, D.C. This highly selective school is also the oldest Catholic university in the United States. The Georgetown website offers information for its broad audience, including students and parents, alumni, faculty, and staff.
Here’s what’s exciting about the Georgetown admissions page:
Diversity commitment: Georgetown’s admissions page features a diversity and inclusion statement, ensuring prospective applicants that this is a welcoming environment for all.
Testimonials: The page includes a personal testimonial from a current student to showcase the university’s impact.
Touring options: The page also links to the tour page, where users can either schedule an in-person visit or view the campus using virtual tour technology.
Washington State University (WSU), located in Pullman, Washington, is a renowned public research institution with a rich history spanning over a century. Its easy-to-use navigation guides visitors through academic programs, campus life, and research initiatives.
Why Washington State University’s admissions page stands out:
Financial accessibility: The WSU admissions page features two calculators that prospective students can use to estimate their total cost of attendance and need for financial aid.
Engaging video: A visually pleasing video walks students and their families through the process of paying for college and applying for scholarships.
Region-specific information: A clear section explains how to apply to each regional campus.
Most Unique College Websites
A unique website helps distinguish your college or university from the competition. It can also leave a lasting impression on potential students, making it easier for them to understand your mission and values.
As you build your website, think about what makes your institution special. To differentiate yourself from other institutions, showcase your college’s unique and compelling aspects, such as programs, student life, or notable alumni.
Western Washington University (WWU) is the northernmost university in the contiguous United States and is frequently ranked as one of the best public universities in the West. The university’s Department of Design offers graduate students the opportunity to expand their skills holistically. Its website takes an interactive approach that helps inform and engage visitors.
What we like about Western Washington University Department of Design’s website:
Unique interaction opportunities: This school’s imaginative homepage hero allows users to move and position design imagery around the page with their mouse, perfectly reflecting their values and mission and engaging prospective students.
Specific CTAs: They bring the impact of donations to life by including images and details of what users’ money goes towards under their “Give” CTA, from a new Riso printer for their production lab to scholarships and field trips.
Casual vibe: The conversational and friendly tone of voice hooks users in and makes them want to read every last word of their content.
Kenyon is a small private liberal arts college based in Gambier, Ohio. Although Kenyon’s student population is a mere 1,660, its website’s unique and streamlined design puts it head and shoulders above many larger schools’ sites.
Why the Kenyon College website made the list:
Eye-catching hero image: The homepage takes a bold, minimalist approach, with a standout quote and a unique, compelling image of everyday campus life.
Dynamic event calendar: The site features an engaging and up-to-date event calendar showcasing campus initiatives, lectures, and other activities.
Student success: The rest of the site highlights current student and alumni accomplishments and stories, showcasing their successes and experiences at the college.
The Rhode Island School of Design (RISD) is one of the most prestigious fine arts schools in the United States. The school’s alumni website reflects its design-driven mission, showcasing unique and interactive elements that offer visual intrigue and engage visitors.
Here’s what’s exciting about the RISD Alumni website:
Animated microinteractions: The clever use of animation, including the news and events scroll in the middle of the page and the hashtag scroll at the bottom, adds interest and serves a clear and useful purpose.
Success stories: The website highlights alumni stories, showcasing their successes and experiences at the college.
Simple but effective branding: The stark black-and-white design maintains a streamlined look without feeling boring.
Building the Best College Website with Agency Help
Website design agencies like Kanopi can help you optimize your college website by organizing content in an intuitive and visually pleasing way. Our team of specialists also offers a website growth plan once your website launches to help you stay on track toward your goals.
User research and persona development: We study your audience to understand their needs, preferences, and interests. Services include stakeholder workshops, competitor analysis, content and user experience audits, and technical planning.
UX blueprint creation: Using personas, we map out your website’s content to help your users navigate your site more efficiently and achieve their goals.
Content strategy: Effectively telling your university’s story is key to driving audience engagement. We help refine your unique voice and style to captivate your audience with a compelling, unified message.
Website design and development: Our design and development services are focused on ensuring your website’s front-end look and back-end structure are optimized to support your goals. Our services are built to boost conversions through accessible, interactive design and high performance.
Ongoing support: We provide ongoing assistance to adapt your site to shifting audience needs and maintain security and high performance over time.
Working with Kanopi could give your university website redesign project the structure and expertise needed to be successful. Contact us if you want to take a continuous improvement approach to your college or university website.
Additional Resources
For more information on how to create the best college website, check out these additional resources:
Higher Ed Website Design: Tips and Trends. Keeping higher ed web design trends in mind is an effective way to meet your audience’s needs. Explore this year’s most important trends in this comprehensive guide.
The ROI of Great Website Design. Are you after more donations? More enrollment? More memberships? This post makes the case for a well-designed website.
If you want to refresh your nonprofit or non-governmental organization (NGO) website, you’re in good company. According to the 2023 Nonprofit Tech for Good report, 68% of nonprofits have redesigned their websites in the past three years.
As nonprofits continue to prioritize mobile optimization, security, and engagement, we’re here to help you do the same. In this post, we’ve rounded up standout nonprofit websites to inspire your next refresh or rebrand, highlighting key design elements that create an impactful nonprofit online presence.
We’ve compiled the best nonprofit and NGO websites to inspire you as you tackle a refresh or rebrand, organized into these categories:
Stick around for tips on collaborating with a web development agency to build a site that empowers your nonprofit’s community. As you explore, consider how these website elements could enhance your own. After all, the best ideas are often inspired by what’s already working!
Best nonprofit website designs
The best nonprofit websitesoffer seamless UX and a stylish, professional, uniform design. Top sites have a content strategy that meets their users’ needs and considers how offline moments connect with online ones. They understand their users’ generational differences and provide a tailored UX that reflects this, with flexible giving options and coordinated online and print experiences.
With these qualities in mind, here are a few of the best nonprofit website designs and what makes them great. We’ve compiled a variety of designs, from more creative to more straightforward examples, to provide a full overview of the current state of nonprofit web design.
Girls Who Code seeks to close the gender gap in the technology industry by engaging and training girls in computer science and coding skills. They’ve served 450,000 girls through their variety of summer camps, clubs, and college prep programs.
What we like about Girls Who Code’s website design:
Girls Who Code’s inspiring mission statement takes center stage on their homepage hero, supported with imagery of the girls they represent.
Their site includes vibrant and bold colors that offer strong color contrast.
Their dedicated donation page provides a simple FAQ explaining how donations are spent and how to sponsor Girls Who Code if you’re a company.
Based in Toronto, the Equal Opportunity Community Initiative (EOCI) is committed to improving the lives of vulnerable children, providing them an equal opportunity to reach their full potential. They prioritize five pillars to reach these goals: education, training, community, social mobility, and essential life needs.
Why Equal Opportunity Community Initiative’s web design stands out:
The EOCI’s branded online donation page provides a seamless giving experience.
They have quick links to essential resources, providing different users with a clear starting point as they begin their journey through the site.
Engaging photos of the organization in action on the homepage helps visually tell the success story of the EOCI.
The California Wellness Foundation (Cal Wellness) is a community foundation dedicated to promoting good health and wellness for all Californians. This website presents its offerings to the community using powerful branding and a clear mission statement.
What we love about the Cal Wellness website:
The website’s design is highly accessible, conforming to the Level AA standards of the Web Content Accessibility Guidelines (WCAG). Accessible features include alternative text for images, sufficient color contrast between the foreground and background, and logical headings.
The site’s main menu is streamlined and easy to understand, using clear labels such as “Mission,” “Community,” and “Take Action.”
Engaging, people-first visuals build emotional connection throughout the site.
The David Suzuki Foundation is dedicated to fighting climate change, restoring nature, and creating more sustainable communities. The foundation’s initiatives range from protecting caribou habitats in Ontario to supporting youth-led climate-related lawsuits.
What we like about the David Suzuki Foundation’s web design
The DSF website is genuinely accessible, with concise and accurate alternative text for images on every page of their site.
Their straightforward user journeys for visitors who want to take action from the homepage, whether they wish to act online, locally, or in their own backyard.
The David Suzuki Foundation provides several flexible and innovative ways to give, including monthly and one-time donations, donating stocks, or virtual gifts.
The Golden Gate National Parks Conservancy is dedicated to preserving the Golden Gate National Parks to be enjoyed by current and future generations. To accomplish this aim, the Conservancy focuses on four main areas: trail and park improvements, education and youth programs, ecosystem and wildlife conservation, and community programs and social impact.
What’s great about the Golden Gate National Parks Conservancy’s web design
As part of Kanopi’s continuous website improvement program, ongoing improvements have resulted in a 31% decrease in bounce rate.
Their embedded searchable directory within the homepage makes it easy for users to look up the park they’re interested in quickly.
They have clear user pathways for park visitors, volunteers, and donors from the homepage.
CARE’s mission is to end poverty and achieve social justice. Their work extends to many areas, including fighting hunger and malnutrition, strengthening resilience in the face of climate change, and reducing the educational and economic gap to help women succeed.
What’s great about CARE’s web design:
From letter-writing and advocacy to donating and volunteering, CARE provides flexible and creative ways to support their cause online, including their reimagined CARE Package in response to COVID-19.
An eye-catching responsive infographic tells site visitors how much of their expenses go to program services in their static footer.
CARE’s up-to-date news and stories section keeps supporters informed and engaged.
The Children’s Organ Transplant Association (COTA) helps reduce financial burdens for families with children who require organ transplants. This healthcare nonprofit equips volunteers and families with the resources and tools they need to fundraise on their own. The organization has supported thousands of patients and helped raise over $160 million since 1986.
What we love about COTA’s nonprofit web design:
COTA turned to Kanopi for support in updating its website to transform it into a mobile-friendly, accessible, high-performance resource. The site’s flexible structure, bold branding, and readable content make it easy for anyone to navigate and engage with the site.
With the help of Kanopi’s expert guidance, families can now access a secure, user-friendly online portal to review expenses and access fundraising how-to guides and tutorials.
The site also has a strong storytelling component, with compelling video testimonials, blog posts, and direct quotes from those who have been supported by the organization.
Freedom Service Dogs partners veterans as well as children and adults with disabilities with trained assistance dogs. The dogs are completely free of charge for each individual.
Here’s why Freedom Service Dogs is one of the best nonprofit websites:
The monthly giving program is prominently displayed on the homepage, helping supporters easily become recurring donors.
The site has straightforward “about us” and impact information, reassuring donors and other stakeholders that their support will be used wisely.
The bold, eye-catching design captivates visitors with a red, white, and blue theme.
Best NGO websites for accessibility
Accessibility isn’t just nice to have for nonprofit websites. In many cases, legal regulations like the Americans with Disabilities Act (ADA) require websites to be accessibility to all visitors.
So, what are a few quick ways to improve your website’s accessibility? When using multimedia like video and images, include alternative text for visitors using screen-readers. Also, all of your content should be clear and easy to read by following color contrast standards.
Use Kanopi’s recommended accessibility tools to help test your site’s accessibility, and don’t forget to conduct plenty of manual testing as well to ensure compliance. Also, take a look at these nonprofit websites that are doing accessibility right.
The Boys & Girls Clubs of America provide after-school and mentorship programs for kids. Clubs can be found in all 50 states, helping young people prepare for their futures, break the cycle of inequity, and improve their overall stability and well-being.
What’s excellent about the Boys & Girls Clubs of America web design:
The Boys & Girls Clubs of America provides a clear user journey starting point right from their homepage hero, with a drop-down menu for parents, teens, supporters, and educators.
This nonprofit website features an accessibility menu that allows users to adjust the contrast, highlight links, increase text spacing, increase font size, and more.
The site offers a built-in screen reader, which reads text aloud from the website. This enhances the browsing experience without people needing to rely on external software.
Feeding America is a hunger-relief organization dedicated to providing greater food security across the U.S. Their programs include mobile pantries, disaster food assistance, SNAP application assistance, and more.
Why Feeding America’s accessible web design stands out:
Feeding America’s website offers straightforward user journeys for donors, volunteers, and advocates. For instance, when you click “Take Action” in the menu, there are separate options to volunteer, donate meals, and host a food drive.
Large font sizes and high contrast increase the site’s readability while drawing attention to the most important content.
The navigation bar offers a clear and intuitive layout, making it easier for users with cognitive or motor impairments to find relevant information. The minimalistic design reduces cognitive load, while large, labeled buttons provide clear paths for actions.
The Humane League seeks to end the abuse of animals raised for food production. The organization runs advocacy campaigns to encourage the world’s largest food companies to adopt more humane animal welfare policies.
What’s excellent about The Humane League’s accessible web design:
The website is accessible across different devices, improving usability for all users regardless of their screen size.
The Humane League offers one-off and monthly donations directly from their homepage hero through a CTA that weaves potential donors into their success story.
The website’s navigation menu is consolidated into categories to avoid visually or mentally overstimulating users.
The American Heart Association (AHA) prioritizes fighting heart disease and stroke through research and public education. The AHA website serves as an online donation hub as well as a valuable educational resource for learning more about various health topics.
What’s great about the American Heart Association’s accessible web design:
The AHA uses distinct colors that meet contrast standards, making the content on their site accessible to everyone.
Their powerful CTA ‘Help Stop the Silent Killer’ firmly plants prospective donors into the story they tell.
They provide flexible ways to donate, including information on their donation page about how the AHA uses donors’ money to address COVID-19.
The National Council for the Blind in Ireland (NCBI) provides support and services to the vision-impaired. Their Bookshare website offers the largest accessible digital library in Ireland.
Why The National Council for the Blind in Ireland’s accessible web design makes an impact:
Kanopi is proud to partner with NCBI, creating an accessible site that’s AAA compliant with high contrast, large text, and font zoom.
Fun graphics, bright colors, and relatable student pictures keep visitors engaged.
There are straightforward user journeys for students, leisure readers, and educators that begin from the homepage.
Best nonprofit websites for calls to action
The best nonprofit websites know who their users are and what motivates them. Successful nonprofit marketing teams ask questions and research how their donors, constituents, and volunteers behaviors to identify changing trends. Then, they use calls to action (CTAs) and other simple navigation elements that make it easier for visitors to browse and find what they’re looking for.
Here are a few nonprofit websites that leverage CTAs impactfully.
The International OCD Foundation (IOCDF) is an organization devoted to helping people with OCD and their loved ones access the information, resources, and support they need to thrive. Their website’s CTAs emphasize three primary actions: finding help, learning more about OCD, and getting involved in the community.
Here’s what’s effective about the IOCDF website:
The homepage effectively uses three different colors to highlight the CTAs for each primary user action.
Working with Kanopi’s expert web developers, the organization created a dynamic, scalable directory that helps people in need connect more easily with healthcare providers.
The website also offers an interactive map to improve the user experience by making it easier to identify nearby providers.
Mercy Corps is a global humanitarian organization that works to alleviate suffering, poverty, and oppression in some of the world’s most vulnerable communities. They provide emergency relief in the wake of disaster, manage the effects of climate change and conflict, and create sustainable solutions in more than 40 countries.
Why Mercy Corps’ website design stands out:
The website features strategically placed donation buttons, often highlighted in a contrasting color to make them stand out. A “Donate Now” button is always visible in the navigation menu, enabling visitors to take action at any point in their browsing experience.
The site uses emotional imagery, videos, and personal stories from people impacted by Mercy Corps’ work. These stories create a deep emotional connection with visitors, motivating them to act, whether by donating, volunteering, or spreading awareness.
The site features compelling landing pages, like a matching gift page encouraging visitors to double their impact through a simple process. It provides a convenient search tool for donors to check if their company participates, motivating them to take immediate action through workplace giving.
Founded in 1976 in Americus, Georgia, Habitat for Humanity is a nationwide nonprofit that helps individuals build, refurbish, or preserve homes. New homeowners contribute a certain amount of “sweat equity” to help build their new house in exchange for an affordable mortgage.
Why Habitat for Humanity‘s CTAs stands out:
Habitat for Humanity engages site visitors with an uplifting story of building strength, stability, and self-reliance through shelter.
Multiple “Donate Now” CTAs encourage donors to act right off the homepage.
A static menu with quick links to their Facebook, Twitter, YouTube, Pinterest, and Instagram accounts alongside descriptive search functionality and a prominent donate button make it easy to connect with them.
St. Jude Children’s Research Hospital seeks to research, treat, and ultimately defeat childhood cancer and other life-threatening pediatric diseases. They cover the costs of treatment, travel, housing, and food for families with children facing childhood cancer.
Why St. Jude Children’s Research Hospital’s CTAs make an impact:
Users can translate St. Jude Children’s Research Hospital’s website into Spanish, making their site accessible to more people with just one click.
Their drop-down search menu, listed by the diseases they treat, is built with their users in mind and helps site visitors get the information they need quickly.
They weave donors into their success stories and explain the impact of giving simply and concisely.
The Michael J. Fox Foundation is dedicated to finding a cure for Parkinson’s disease using research and the development of advanced therapies. They operate without an endowment and seek to act as quickly as possible to direct funding toward vital research and projects.
What we like about The Michael J. Fox Foundation for Parkinson’s Research’s web design:
The Michael J. Fox Foundation tells a hopeful story, inviting users to ‘Celebrate Science’ from their homepage hero CTA.
Their content focuses on their donors and the difference they make through their support throughout their whole site.
Moving and empowering quotes from people with Parkinson’s explain the importance of research and how each person’s action affects millions of people.
The Leukemia & Lymphoma Society (LLS) seeks to eliminate blood cancers through pioneering research, education, and advocacy. They work toward this mission by offering support for patients, caregivers, researchers, and healthcare professionals.
Here’s what caught our eye on the LLS website:
The LLS homepage provides helpful resources for patients and caregivers, contributing to a stress-free browsing environment.
There are multiple ways to stay in touch via social media and email, allowing supporters to connect via their preferred platform.
The homepage highlights prominent news articles and other updates to help keep visitors informed.
The Glacier National Park Conservancy is the official fundraising partner of Glacier National Park in Montana. It supports the park’s preservation, education, and research efforts through donations, grants, special projects, programs, and volunteer involvement. The Conservancy works to ensure that Glacier National Park remains a protected, vibrant natural resource for future generations.
What we love about Glacier Conservancy’s website design:
Glacier Conservancy’s website features a variety of ways to give, calling on supporters to donate, purchase items in an online store, submit matching gift requests, buy a special license plate from the DMV, and take other actions.
The organization uses Google Ads, making it incredibly easy to find the site. Through the Google Ad Grant program, they run ads that drive purchases from their online store, targeting keywords like “Glacier National Park Campgrounds” and “Glacier National Park Tours” to funnel visitors toward taking action. For reference, Getting Attention has an example of one of their ads, including performance results.
The site’s branding represents Glacier National Park well, with images that showcase the park’s scenery and animals. It also uses colors associated with the outdoors, including glacier blue, grassy green, and sunset burnt orange.
Founded by former U.S. Vice President Al Gore, the Climate Reality Project is another education and advocacy organization working to mitigate climate change. The organization’s signature program is a leadership training corps that equips leaders fighting for climate change solutions with greater resources and knowledge.
Here’s why The Climate Reality Project is one of the best nonprofit websites:
Bold calls to action on the homepage inspire visitors to get involved in fighting climate change, encouraging users to sign up for the organization’s email newsletter.
User-friendly, concise educational resources help communicate climate change issues in an easily digestible way.
A streamlined online donation page that allows donors to show their support in just a few clicks.
Girl Scouts invites girls across America to participate in building life skills such as leadership, entrepreneurship, and active citizenship. Typical Girl Scouts activities include camping, volunteering, earning badges, and, of course, selling cookies.
What stands out about the Girl Scouts’ web design:
Engaging, informative images show girls participating in rewarding activities, bringing the Girl Scouts’ mission to life.
The full site is available in Spanish, increasing accessibility.
Clear user pathways provide resources for all involved, including the Girl Scouts themselves, volunteers, and parents and families.
The American Society for the Prevention of Cruelty to Animals (ASPCA) is a well-known animal welfare organization founded to be a voice for vulnerable animals. The organization’s main activities include helping reduce overwhelming shelter intake rates, relocating animals to safe homes, and providing spay/neuter services.
Here’s what caught our attention on the ASPCA website:
The organization is known for its heart-tugging commercials, and its website is no different. Compelling photos of animals in need engage visitors right when they land on the homepage.
The large DONATE button in the top right corner catches potential donors’ attention and stays visible no matter where you navigate to on the site.
The “Team ASPCA” fundraising page provides detailed descriptions for different fundraising opportunities that supporters can participate in, from birthday campaigns to hosting a fundraising event.
Supporters want to be part of a winning team. Focusing on successes allows the user to envision how their time and donations will make a difference. Stories of building others up both resonate and empower donors to join your nonprofit’s ongoing journey.
Take inspiration from the following nonprofit websites that excel at compelling storytelling.
Doctors Without Borders is an international non-governmental organization dedicated to delivering medical aid where it’s most needed, typically in war zones or countries impacted by disease. The organization’s commitment to independence and impartiality allows its volunteers to take action in instances where politics or bureaucracy might slow other humanitarian response efforts.
What’s excellent about the Doctors Without Borders web storytelling:
Doctors Without Borders keeps visitors informed with up-to-date news and events, including a link to a live online discussion about mental health from their homepage hero.
An engaging static infographic on where donor money goes appears in the footer on every page of their site.
Donor-centric language puts supporters at the heart of the mission. One example is, “Your gift helps us provide medical humanitarian aid for hundreds of thousands of people each year.”
Ronald McDonald House Charities accommodate families with children undergoing medical procedures or treatments, allowing them to stay in RMHC lodgings for free. This helps save families money by letting them avoid hotel costs, while also providing a little peace of mind while their children are undergoing treatment.
Why the Ronald McDonald House digital storytelling makes an impact:
RMHC’s powerful hero image invites donors into the world of someone directly impacted by donor support, with a compelling CTA to read their story.
Their red donate button with a heart icon catches the attention of site visitors.
The RMHC shares an engaging video filled with real families on their “Get Involved” page to empower volunteers.
The Make-A-Wish Foundation serves children with critical illnesses to make their “wishes” come true, whether they dream of meeting a celebrity, attending an iconic event, etc. The kid-friendly website leverages bright primary colors and powerful statistics to highlight the organization’s success.
Here’s what stands out on the Make-A-Wish website:
The homepage features a compelling testimonial quote from a child positively impacted by the organization’s mission.
The homepage is straightforward, focusing on donation opportunities and impact statistics.
The “Impact of a Wish” information page uses engaging scrollytelling to create an interactive narrative.
The Salvation Army is a Christian organization with a mission to combat homelessness and poverty and contribute to disaster relief. Supporters can help out by donating money or goods, hosting a fundraiser, or volunteering.
How the Salvation Army USA online stories makes an impact:
Their homepage hero with a compelling CTA makes it clear why people should act now and how.
Their site includes powerful films, making it possible for site visitors to hear directly from people whose lives are changed for the better through the Salvation Army.
The main services are broken down clearly on the homepage as well as a straightforward explanation of how the Salvation Army works to meet local needs.
The Conservation Fund seeks to protect America’s critical land and water through conservation and mitigation solutions. The organization is backed by a strong network of regional experts working to implement community-level change.
What we like about The Conservation Fund’s web stories:
The Conservation Fund puts its partners and supporters at the heart of their impact story.
They use engaging video stories to help users visualize what their donations go toward.
An interactive map shows the locations across all 50 states where the Conservation Fund has launched effective projects.
The Nature Conservancy seeks to tackle climate change, protect water and land resources, and build healthier communities to protect the global environment. They have lofty goals to achieve by 2030, including reducing CO2 emissions, helping 100 million people who are at risk of being impacted by severe climate change, and conserving 10 billion acres of ocean.
Why The Nature Conservancy’s digital storytelling stands out:
The Nature Conservancy uses inspiring imagery of animals and beautiful landscapes to emotionally connect users with nature and wildlife.
Using geolocation, the site recognizes where a user currently is and presents specific projects they’ve completed in that person’s state.
The Nature Conservancy features individual narratives about how conservation efforts have improved communities and ecosystems.
Alex’s Lemonade Stand helps fund research, spread awareness, and support families with the goal of curing childhood cancer. Since 2005, the organization has funded over 1,000 grants at 150 institutions. Alex’s Lemonade Stand also empowers kids to host their own lemonade stand fundraisers within their communities. Kids can host their own lemonade stand in their community, with the proceeds going to research projects and family support.
These features make the Alex’s Lemonade Stand web design stand out:
Their homepage includes a “Featured Hero” which highlights a beneficiary, includes a welcoming photo, and links to their unique story. When someone clicks through to the full story, the landing page also includes links to other beneficiaries’ stories, so readers can keep exploring.
The bold, playful colors and branding catch the eye while also appealing to the organization’s kid-friendly mission.
Alex’s Lemonade Stand regularly updates its site and blog with heartfelt stories, offering a behind-the-scenes look at its impact on childhood cancer. Each post highlights the personal journeys of children and families, the organization’s fundraising efforts, and the research advancements it funds.
Most creative nonprofit websites
Top nonprofit websites balance creativity with a simple user experience and uniform branding. Creativity doesn’t just have to mean creative design — it can encompass creative donation opportunities, online experiences, and other elements that show visitors something unexpected.
Explore the following creative nonprofit sites and note how they take a unique approach to audience engagement.
The World Wildlife Fund (WWF) is an international conservation organization dedicated to reducing the negative impact of human activities on the environment. The WWF is the world’s largest wildlife and conservation organization, working in over 100 countries.
What we like about the World Wildlife Fund’s web design:
WWF offers a variety of resources for teachers to use in their classrooms to teach students about different animals and how to respect the environment. You can even sign up for a newsletter to receive regular resources.
This nonprofit website features interactive eCards that supporters can send to their friends and family to show they care about wildlife and the Earth.
The site includes interactive maps, quizzes, and free wildlife wallpapers to engage visitors.
Wounded Warriors Family Support (WWFS) is a veteran-run charity that provides support to the families of wounded, injured, or fallen members of the U.S. military. For two decades, their mission has been to enhance the quality of life for military families by offering assistance and resources to help them cope with the emotional, physical, and financial challenges they face.
The site prominently features awards, recognitions, and partnerships, showcasing the organization’s credibility and collaborations with other nonprofits and veteran groups.
WWFS offers a range of resources, such as information on respite care, family retreats, and mobility assistance programs. The website provides all the necessary details for families in need, including eligibility criteria, application processes, and timelines.
Covenant House provides support and housing for youths experiencing homelessness or trafficking. The organization offers a “continuum of care,” from street and van outreach to crisis care and long-term support.
Why the Covenant House website is so inspiring:
Kanopi won two awards for our work on the Covenant website, helping this digital hub shine with updated integrations and donation processes, as well as an improved storytelling approach.
The homepage offers multiple opportunities to get involved, from donating to participating in a Sleep Out event
Their “Meet Our Kids” page allows children impacted by homelessness to share their own stories.
Located in Memphis, Tennessee, the Memphis Zoo is home to over 3,500 animals, 500 species, and 19 exhibits. The zoo is supported by ticket sales, a membership program, direct donations, and corporate sponsorships.
Our favorite elements of the Memphis Zoo website include:
Live animal cams turn the website into an engaging, interactive digital hub, rather than a static online experience.
A detailed donation page offers donors greater flexibility with descriptions of different types of giving supporters can participate in.
High-quality images of animals and zoo visitors provide a professional, immersive browsing experience.
The Malala Fund helps girls pursue secondary education worldwide. The organization supports education advocates and activists, bolstering their work and connecting them to a global network that can provide support and professional development.
Here’s why the Malala Fund made our best nonprofit websites list:
The engaging, eye-catching homepage video brings the organization’s mission to life by showing the people it works with (which would be even better if the video were more accessible, with a pause or hide functionality).
Compelling statistics showcase the extent of education and gender inequality in each country the Malala Fund operates.
The website achieves a sleek look by making use of a mix of white space and pops of bright color.
The Refugee and Immigrant Center for Education and Legal Services (RAICES) works to support immigrants and refugees by providing free and low-cost legal services to families and children in detention. The organization also offers social services such as resettlement assistance, transit support, and more.
What we like about the RAICES website:
The striking branding incorporates visually-appealing colors and font choices.
There are many easily-accessible resources for refugees and immigrants, from removal defense services to DACA renewals.
A self-service portal allows donors to take control of their engagement by updating their personal information and contributions whenever they want.
The END Fund is a nonprofit devoted to mobilizing resources to address neglected tropic diseases. The organization uses donations to fund much-needed treatments. Their website places a major focus on their impact, with plenty of statistics related to their cause and programs.
Unique features of the END Fund website include:
The site places an impressive focus on transparency and accountability, with a large and prominent annual report CTA on the homepage.
The homepage clearly lays out the issue the organization addresses, giving visitors a solid understanding of the problem before diving into ways to help.
The website highlights three funds for supporters to donate to, providing more flexibility in allowing donors to choose campaigns that speak to their passions.
Empower Your Donors with an Optimized Nonprofit Website
As a nonprofit marketing professional, you might have plenty of creative and innovative web design ideas buzzing around in your head, but no clear picture of how to implement those ideas. That’s why working with a web design and development agency is often the best way for nonprofits to fully optimize their websites.
Web design agencies like Kanopi can help manage your website redesign process, using their years of experience, best practices, and visitor research to guide the way. Kanopi will support your nonprofit website development and design from start to finish, offering services such as:
User research
Content strategy
Website design and development
Ongoing support
Plus, working with Kanopi allows you to adopt a continuous improvement approach for your website, keeping it updated and effective as best practices evolve. We’ll ensure your website is positioned for long-term growth and designed to help achieve your goals, whether that’s growing your advocacy efforts or increasing your online donor audience.
Looking for a few additional resources to help strategize your web design approach?
Check out these guides and resources:
Creating a Digital Strategy for Nonprofits – Made Simple. A digital strategy is an action plan that helps you reach your fundraising goals using online platforms. Build a better nonprofit digital strategy with the help of this guide.
What Is A Nonprofit Technology Assessment? Not seeing a positive return on investment with your organization’s technology solutions? Find out how a technology assessment can help.
Webinar: Managing Content in WordPress. Many nonprofits choose WordPress to manage their content. This webinar offers tips and best practices for accessibility, SEO, landing pages, and more.
As a designer who’s worked with many clients in healthcare services, I’ve seen the unintended consequences the pandemic has wrought upon website design throughout the industry. Providers were forced to stretch whatever resources they had to adapt to sudden and completely unprecedented new circumstances. Often this meant adding new online tools and functionality to their websites as quickly as possible, with no time or budget to devote much thought to the user experience.
(Note: Short on time? Not much of a reader? No worries! Simply check out our TL;DR summary below.)
Even now, many patients still rely on virtual healthcare. Studies in both the US and Canada have shown online/virtual consultations with medical professionals and other healthcare services have remained much higher today than before the pandemic. For some patients, it’s simply their preference; however, in certain cases, it’s become the only option available. Whatever the reason, online services are now a permanent fixture in the healthcare delivery model. For providers, adapting to this new reality means embracing the concept of patient-first design.
Designing healthcare websites with a patient-first approach is essential to creating positive user experiences and promoting effective healthcare delivery overall. It not only enhances accessibility but also ensures that users can navigate the platform easily, find relevant information, and engage seamlessly with healthcare services.
At Kanopi, patient-first design begins at the user research phase. It involves discovering and defining the ‘pain points’ (no pun intended) with the current site’s user experience. Having worked with several healthcare clients, we’ve identified a few issues that keep popping up across a wide variety of websites for different healthcare services. I’ve listed some of these recurring pain points below, as well as the most effective solutions that we’ve devised for them.
Problem: The site is not designed for accessibility.
This is the most prevalent issue we come across. You’d be surprised at the number of healthcare websites that were designed and built with little or no consideration for their users’ accessibility needs. Just like physical buildings, websites also need to be accessible. And it’s especially important when your patients are visually and/or physically impaired in ways that limit their ability to use websites.
Accessibility concerns can range from minor sensory impairments to more complex neurological conditions. They even include temporary impairments — like a broken wrist, for example.
Being compliant with standards like Web Content Accessibility Guidelines (WCAG) not only allows more people to engage with your site, but also leads to better design and improved functionality for everyone.
Solutions:
Too extensive to list here, but here are some of the more common web accessibility solutions we implement for clients:
We check text contrast to prioritize readability, and meet a minimum 4.5:1 contrast ratio — and that text can be resized up to 200% without loss of content or functionality. We also use a minimum size of 12 points or 16 pixels for all body copy. This helps accommodate users with dyslexia and/or visual impairments.
It’s also to ensure our design adheres to laws such as Section 508 of the Rehabilitation Act, which organizations must comply with to qualify for federal funding.
Our designs also provide support for reduced-motion browser settings and allow users to play and stop animations as it suits them. This is to benefit the approximately 35% of adults aged 40 years or older in the United States (approximately 69 million Americans) who experience some form of vestibular dysfunction. It also assists users with certain types of cognitive disabilities.
This rule applies to jargon universally, but always avoid medical jargon when clearer language can be used. Not only is it easier for patients to understand, but your search capabilities should be able to provide the same results for both medical and laypersons’ terminology, e.g. “ophthalmologist” and “eye doctor”.
Problem: Patients need to find information quickly.
This is true for all sites and all users, but it’s especially relevant to healthcare, especially if there’s an emergency. If you’re looking for specific information about an illness or medical condition, it’s important that you can find it as quickly as possible. Unfortunately, too many healthcare sites are bogged down by convoluted sitemaps and subpar search functionality.
Problem: Patients need clear, actionable next steps.
This one goes hand-in-hand with the previous problem and is equally essential to keeping the patient journey free of obstacles.
Solutions:
Provide easily searchable clinic and physician listings with low-friction contact and scheduling.
Prioritize the content that’s most relevant to patients — i.e., keep it at the top. Any content intended for physicians or academic researchers should follow below. This is literally ‘patient-first design’. However, it always surprises me how many healthcare sites don’t follow this hierarchy.
Problem: Too many details up front (i.e. ‘getting lost in the weeds’).
This is a problem we commonly (but by no means exclusively) encounter with research hospitals. Bogging down your content with technical and operational details can be overwhelming and disruptive to the patient journey. Designing your website around your organizational chart is a primary example. It’s incredibly frustrating for patients who simply need to find relevant information as quickly as possible.
Solutions:
Create separate pathways for (1) the patient journey and (2) internally-facing administration and research information.
When writing medical staff bios, prioritize succinct, patient-focused info at the top — before listing professional details. For example:
Name and credentials
Practice locations
Contact and scheduling info
Professional recognition.
Types of insurance they accept
Problem: Patients seek concrete proof of credibility.
This is another common problem we see; the good news is that it’s also one of the easiest to fix. It usually doesn’t require any changes to your sitemap or page designs. It just takes a bit more diligent content curation.
Solutions:
Include patient testimonials and case studies wherever possible.
Include plenty of patient-focused, real-life imagery — and ditch the stock photos!
People want to be sure they’re looking at your actual doctors, staff, and facilities. In terms of design, few things erode your credibility faster than a stock photo on your site that patients have already seen elsewhere on the web.
This also includes ‘stock-ish’ photos; i.e., actual photos of your facilities and people, but they’re so generic/ obviously staged/ devoid of personality that they may as well be stock.
A talented photographer will be able to compose and capture images that convey your high-quality patient care, professionalism, passion, and teamwork. Yes, 99% of the time stock is cheaper. But it also shows none of the above.
Also, make sure each person appearing in your photos has signed model release forms! Your marketing agency or professional photographer will usually handle this part. But you definitely don’t want to overlook this requirement, as it could lead to patient privacy violations and serious legal repercussions.
Include your accolades — awards, rankings, partnership badges, etc. — and keep them current.
If this all seems like a daunting task, keep this simple fact in mind: referrals and search engines don’t provide much info. When patients need information about you, your website is typically the first place they’ll look. By prioritizing the user experience and considering your patients’ needs, your healthcare website can improve communication, promote health literacy, and ultimately contribute to better overall patient outcomes.
Want more interesting reads about web design for the healthcare industry? Check out these two blogs:
TL;DR: Ensuring Patient-First Design For Your Healthcare Website
Problem
Your website doesn’t meet patients’ accessibility needs.
Solutions
Large type, short blocks of text, and high color contrast. Must be at least WCAG Level AA to qualify for federal funding in the US.
Slow, subtle video and animation and support for reduced motion.
Avoid jargon; use clear, concise language.
Problem
Patients need to find information quickly, but your website doesn’t facilitate this.
Solutions
Lead with bold CTAs that prioritize important patient actions. Create specific pathways for different patient journeys (e.g.: pre- and post-procedure) to prevent patients from getting lost.
Patients need clear next steps and ways to take action.
Solutions
Prioritize patient-relevant info at the top; professional / physician / academic info should follow.
Provide easily searchable clinic and physician listings with low-friction contact and scheduling CTAs.
Problem
Technical and operational details are overwhelming and will disrupt the patient journey; e.g. designing your website around your org. chart.
Solutions
Keep separate pathways for the (1) patient journey and (2) internally-facing administration and research information.
Prioritize succinct, patient-focused info at the top of bios before getting into professional details. Example:
Name and credentials
practice locations
contact and scheduling info
professional recognition
Problem
Patients seek concrete proof of credibility.
Solutions
Include patient testimonials and case studies wherever possible.
Include photos, but no stock photos! Use actual, real-life patient-focused imagery instead. Make sure all photos posted on your site have signed model clearances as required.
Include awards, rankings, partnership badges, etc. — and keep them current.
Around this time of year, we’re always asked one question — over and over, without fail:
“So, got any plans for the holidays?”
So let’s address this one off the top. Yes, we do have plans. And while our plans vary each year, they almost always involve solemnly swearing not to overeat… and then definitely overeating.
The next-most-frequent question we’re asked around this time of year is, “which trends in your industry are going to be big in (upcoming year)?” Over the years, we’ve found that the best way to prepare for this question is to write a blog post about it. So, here are what we consider to be among the top trends in content strategy, copywriting, and UX design to keep an eye on in 2024.
Design
1. That 90s Design…
As everyone knows, design trends tend to be cyclical — and while That 90s Show may have suffered a quick exit from Netflix, look for this bygone decade to be next in line for a resurgence.
Overall, the 90s aesthetic was about authenticity and gritty expressions of realism. You can see this in popular 90s-era styles like collaging — a rough, cut-and-paste aesthetic that involves layering and combining different kinds of imagery, textures and type.
2. Claymorphism will officially go mainstream.
This simplistic 3D design style began floating onto the scene a few years ago in select app interfaces, and its popularity has been growing steadily across the web ever since. This article in Smashing Magazine does a great job of both defining claymorphism and comparing it to the numerous other ‘morphisms’ from which it evolved.
More importantly, could 2024 be the year that trends like Claymorphism finally banish the Memphis design aesthetic once and for all — thereby making our Creative Director Cliff Persaud’s year, no matter what else happens? Only time will tell.
Copywriting
3. AI hype will continue to run amok.
The seemingly unstoppable hype that’s been swirling around AI tools like Chat GPT over the past couple of years shows no signs of subsiding. If anything, it’s only getting louder — despite the fact that it continues to have few applications where its effectiveness is really worth all the hype.
While its capabilities in tools like Grammarly and platforms like Vimeo are expanding, AI still has a long way to go when it comes to writing like actual humans — let alone being able to write with a truly authentic voice. If you’d like to know specifically how AI falls short, this article explains it better than anything else we’ve seen. Sadly, however, realistic assessments won’t be enough to slow down the AI hype train in 2024. (We’ve also previously weighed in on how we think AI will affect creatives.)
4. Storytelling will keep gaining believers.
Let’s face it: over-reliance on keyword-based SEO doesn’t appear to be going anywhere. Neither does its shrill, annoying cousin — pay-per-click (PPC). However, we’re also seeing storytelling play a major role in content across the web, as more and more organizations are recognizing its value. It’s a trend that we believe will continue in 2024, and as longtime storytelling proponents we couldn’t be happier about this.
Content
5. Look for interactive video content in all kinds of new places.
Interactive video is a form of digital video that allows viewers to directly engage with its content. This is usually done by clicking the frame (or touching it on a mobile device), although in some cases viewers can interact with it via typed commands.
Interactive video first gained global attention in the mid-2000s with Burger King’s ‘Subservient Chicken’ (remember it?) Other mind-blowing creative marketing efforts soon followed. Since then, its popularity has steadily grown, especially as technological innovation makes it cheaper and easier than ever to produce.
As video content continues to become more of a best practice than a trend, look for more nonprofits, educational institutions, and healthcare providers to explore interactive video in 2024. Its potential to help these organizations share more personalized service delivery, education, and marketing content is definitely there.
6. More robust CMS editing tools. Less reliance on developers.
Designing, building, and supporting Drupal and WordPress websites as we do, we’ve noticed that a growing number of clients are looking for more control over their design layouts. For example, they may not always want to contact a developer for something as straightforward as creating a new landing page.
We’re not the only ones who’ve noticed this, judging by the number of robust content editing tools that are now available. These not only give the editor more tools to create unique landing pages by reorganizing components, but they’re also more visual and intuitive than your standard editors.
(And if you’re thinking this is technically a development trend and not a design trend, well, check out our post on 2024 development trends.)
Wide lapels will be all the rage.
The thing about these new-year-trend-predicting posts is that there’s always the potential for some new, exciting innovation to come out of left field and take everyone by surprise. In that spirit, we also predict that interest rates will drop to, say, 3%. Fennel will be crowned as the new supreme superfood. And the Orlando Magic will win the NBA finals in a four-game sweep.
And we will definitely overeat during the holidays. It’s one prediction that has a 100% chance of being right.
There’s something wonderful about putting on adult shoes as a kid. They’re enormous and floppy and shuffle around on your feet as you lift and walk. I remember doing this often with my dad’s shoes, regardless of the smell, giggling all the way.
Somewhere along the line between then and now, walking in someone else’s shoes loses that magical charm. It’s more comfortable to maintain the status quo. What works for us must work for everyone, right?
Except it doesn’t. Humans are not “one size fits all” and this is also true when it comes to the internet. Like a building needs accessibility access, a website needs accessible code so that it can be used by everyone.
Many people have vision problems, hearing loss, physical limitations and more. In fact, 27% of adults — a full 61 million people — in the United States alone are permanently disabled in some way. Once you include temporary disabilities (such as a broken wrist), or extend the range to teens and children, that number soars even higher.
Your site could be unusable for up to a quarter of your audience, and it’s worth it to check. Follow this guide to do some quick testing, or jump down to our tl:dr.
Why automated tools are useful but also insufficient
We’re often asked for metrics and automatic scans that can “score” a site for accessibility. As appealing as that may sound, it’s simply not an option in the current technical landscape. In reality, it is generally accepted that automated tools can only detect about 30% of WCAG’s 2.1 success criteria. Any tool or service that claims 100% automation is 100% lying.
The reason for that is there are many accessibility issues that Artificial Intelligence (AI) simply cannot understand, and while a scan could possibly identify a place where a human mind should take a look, it couldn’t say with any certainty whether or not there is an error there. In fact, the more aggressive the scanning tool, the more likely it is that there are false positives in the results.
A common example of this are images. Automated tools can detect whether or not an image has alternative text (a requirement for accessibility) but they can’t tell if the alternative text is appropriate for the image.
Because of this, testing requires both automated tools and manual tests. And since each tool is different in what it can detect, and how it presents its errors, it’s recommended that you use multiple tools when testing website accessibility. Each tool has its own pros and cons, things it does really well, and areas that need improvement.
By the way, the disparity between automated testing and manual testing is also why we highly recommend you avoid quick fix solutions like overlays. There are a number of other reasons, including legal reasons, but when it comes down to it automated tools are only part of the process.
Provides information on how a screen reader might interpret some elements
Great entry into understanding what kinds of errors can exist
Has built in contrast checker
Cons:
Does not link errors to guidelines
Limited suggestions for fixes
Add manual testing to find what the automated tools didn’t
Once you’ve run your site through some of the automated tools, it’s time to get some hands-on experience about what it’s like to use your site in someone else’s shoes.
How to do keyboard testing
Believe it or not, keyboard testing is actually “low key” and easy to do. There are only a few things that you need to know in order to do this testing on your own.
Tab, Shift + Tab
Pressing tab will move you down a webpage through interactive elements like links, buttons, and form fields. Pressing shift + tab will take you backwards through those same elements.
Spacebar / Enter
These keys “activate” interactive elements. When you are focused on a link, hitting one of these will open that link. Sometimes they can also move you into an “application” state where other keys become usable (see Arrow Keys).
Arrow Keys
These keys will scroll the page up and down, but not always. Tabs, accordions, sliders, and menus can be designed as applications. That means once you are focused on them (or enter them using the spacebar), using the arrow keys will navigate you through those interactive elements instead of scrolling the page.
Esc
If you have entered an application, or a popup window, the escape key should exit that area and allow you to continue down the page where you left off.
Knowing these interactions, you should be able to use your webpage without a mouse. Try it for yourself and see if you can reach and use all of the interactive elements.
Can you see where your focus is (what your next keypress will activate)?
Can you navigate through your menu?
Is tabbing logical, or does the focus move to unexpected areas?
Can you use sliders, accordions, galleries, videos, and tabs?
Can you enter form information and submit?
Do you get “trapped” anywhere and need to use your mouse to move on?
If you can’t use your page without a mouse, or if the keyboard experience is generally frustrating, then there’s some improvement to be made with accessibility. Keyboard functionality is vital to most assistive technologies, and if you had a hard time then chances are so is someone else.
A note about screen reader testing
You will likely need to hire someone to do this for you, as it takes a high level of skill and experience to operate. But using the ANDI tool on your site can show you some of the things a screen reader will present to a user, so if you’re interested give that tool a try.
To learn more about screen readers and assistive technology, check out our Screen Reader 101 blog post.
Where to find real users to test your site
Putting your site in front of real users with a variety of disabilities will most certainly uncover any issues missed by automated and keyboard testing.
If you think there’s a problem, it’s time for a deep dive audit
While the methods mentioned here can give you an overall picture of a single page’s level of accessibility, it doesn’t reflect the full breadth of your site. For that, you’ll want a deep dive accessibility audit.
This type of work typically takes someone with a good deal of experience in the accessibility space. It would entail automated and manual testing of multiple pages to try and get a sample of each template used, in addition to some randomly selected pages. The auditor needs to know how to use multiple tools, how to test via keyboards and screen readers, how to investigate Javascript injected content, and know what to look for in criteria that can’t be caught in an automated scan.
Kanopi specializes in accessibility for our clients and we do offer deep dive accessibility audits, including itemized results for remediation. If you’re interested, send us a message!
TL:DR for testing your website’s accessibility
Try to use your website without a mouse. If it’s frustrating for you, it’s frustrating for someone else.
Imagine someone was trying to navigate your homepage only by headings and links. If someone couldn’t see the page and only had these elements to navigate by, would they know where to go?
Run your most popular page through two or three of the tools mentioned in this article. A single issue can prevent someone from buying a product, viewing a service, or understanding your content. Take any errors seriously.
Re-test your site every so often. Updates to code and content can unexpectedly change your site’s accessibility. Regular testing helps keep you informed about potential barriers on your site.
