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.
Throughout the past year, trust in higher education institutes has declined sharply. Only 36% of American adults have “a great deal” or “quite a lot” of confidence in higher education. Rising tuition costs, disruptions caused by the COVID-19 pandemic, and concerns over the value of a college education have all contributed to the current atmosphere of disillusionment.
As a higher ed marketing professional, you might have noticed the effects of this distrust within your audience. The good news is that you have a useful tool at your disposal to enhance trust and credibility—your higher ed website.
75% of consumers say they judge a company’s credibility based on the quality of its website design. With a higher ed website design that’s positive, forward-thinking, and focused on healing, you can build trust with your audience and strengthen your online presence.
At Kanopi, our designers keep their eyes and ears open to understand the unique pressures and requirements of the higher ed web design landscape. We work with higher ed clients to build websites that better tell their universities’ stories. Leaning on our experience, we’ll explore higher ed website design trends and tips to help keep your website in top shape amid shifting audience preferences.
Optimized user experience and journey
The user experience is the way visitors interact with your higher education website. Browsing your undergraduate majors, signing up for your newsletter, submitting a donation using your online giving form—all of these activities fall under the umbrella of user experience.
Higher ed website design is focused on simplifying the user experience to facilitate streamlined user journeys for every visitor. This means that whether they’re a prospective or current student, faculty member, parent, donor, or community or business partner, every visitor can find the information they need quickly and easily.
For example, the University of Arizona’s website offers an “I am” drop-down search option. Visitors choose the descriptor that best matches them and are sent to a webpage with tailored resources.
These customized experiences that speak to specific user groups are becoming more and more common as universities learn more about their target audiences.
To help visitors move through your content more easily, your college or university website should:
Use concise, powerful calls to action (CTAs) to help move visitors through your site. Your CTAs should address common user questions and concerns to help connect individuals with the information they need.
Clean up your navigation. Keep your website menu short and straightforward, with a limited number of items. This keeps your navigation uncluttered and easy to use.
Make your site mobile-friendly. Ensure your site has an effective mobile-responsive design to offer an equally positive user experience across all devices.
Offer clear next actions for each visitor segment. Give visitors a variety of prompts to help them move through your website content. For instance, take a look at how the Georgetown University website offers quick links for different website visitors:
Identify five to seven user groups or personas within your higher education audience to determine which user journeys to prioritize on your website.
Use of AI as an organizational practice
Students and faculty have greater access to user-friendly artificial intelligence (AI) than ever before. Website visitors want to know how your university is approaching AI in the classroom and helping students prepare for an AI-centered workforce. According to an Inside Higher Ed survey, almost three in four students say that their universities should prepare them for AI in the workplace, either “a lot” (27 percent) or “somewhat” (45 percent).
To meet this demand, your higher education website should highlight:
Student use of AI. Spotlight opportunities for students to learn more about AI in their field through research and hands-on application.
Institutional AI policies. Include a webpage outlining your university’s approach to student and instructor use of AI in academics. If you need an example, take a look at Stanford University’s Generative AI Policy Guidelines, or UCLA’s guidance for instructors.
Research and development. Feature any news or research updates from university professors in the field of AI.
Potential and current students want to know that your university is on the cutting edge of these technologies that will profoundly impact their daily lives, so your AI information should be easy to find on your website.
More resources for underrepresented members of the student community
Higher education institutions have placed an increased emphasis on diversity, equity, and inclusion (DEI) initiatives to ensure that all students feel welcome. Students themselves are noticing a difference—over half of students surveyed in the fall of 2021 said they perceived a noticeable difference in diversity on campus.
However, there’s still more progress to be made. That’s why colleges and universities have emphasized creating streamlined user pathways that connect students of color, members of the LGBTQ+ community, disabled students, first-generation college students, and other underrepresented groups with the resources and information they need.
The Kenyon College Diversity & Inclusion page provides an example of how you can bring your school’s commitment to diversity to the forefront. The page states the school’s commitment to fostering a diverse and inclusive learning environment and offers a variety of resources for underrepresented students. This provides current and prospective students with an easy way to access the support they need to reach their full potential.
In addition, the Brock University website provides an online resource for any university community members to access information and assistance on issues related to human rights, harassment, and discrimination. This includes a newsletter, relevant events, and different ways to disclose harassment and discrimination issues.
Inclusive content
Inclusive content refers to blog posts, images, student testimonials, videos, and other forms of content that are accessible and welcoming to all audience members. It also refers to making your content accessible to those using assistive technology by including alternative text, captions on videos, and the proper use of heading structure.
Inclusivity tells all stakeholders—potential and current students, faculty, staff, etc.— that they belong at your university and that you’re ready to welcome them with open arms.
This year, universities are making an effort to create more inclusive spaces, including virtual ones. Here are some examples of inclusive content we’re seeing:
Inclusive language
Inclusive language is a communication style that avoids the use of words and phrases that promote sexist, racist, ableist, colonialist, or otherwise prejudiced ideas.
Inclusive language is increasingly important to prospective students—for example, members of Gen Z are by far the most likely of any generation to say that online forms should include options other than “man” and “woman” when asking about a person’s gender.
If you need guidance to help make your site more inclusive, Kanopi provides a comprehensive list of examples of non-inclusive language and effective alternatives to use instead.
Strong, inclusive visuals
Similarly, college and university websites have started leaning heavily towards the use of strong visuals that represent a wide variety of students. These images should be authentic and representative of your campus community, showing moments of student interactions or campus life.
Especially common are large banner images that sometimes take up the entire top half of the homepage. For instance, take a look at Kenyon College’s homepage. The page is dominated by a bird’s-eye view of a quiet studying scene. This striking visual helps students visualize themselves participating in campus life. Plus, the minimized menu helps keep the initial homepage view uncluttered and streamlined.
The most effective website visuals are genuine, candid, and rarely posed. Also, ensure your university’s website photos accurately represent the diverse makeup of your student body.
When prospective students see themselves represented on your website, they will feel more comfortable applying to your college.
In addition to helping students access the resources they need to thrive, universities are clarifying their stance on diversity, equity, and inclusion (DEI) policies amid changes to higher ed acceptance policies.
To help your university community understand your university’s policies, it’s helpful to create a dedicated webpage outlining your approach and goals. For example, the McMaster University website features an Equity, Diversity, and Inclusion (EDI) strategy roadmap with a clear framework, action plan, and definitions.
Likewise, the University of Waterloo offers a clear EDI strategy page with details about the organization’s strategic goals. Waterloo takes its commitment a step further by magnifying diverse student voices in the content creation process through its Amplify podcast. The podcast focuses on giving students a voice to discuss their experiences as members of the university community who hold marginalized identities. There are also plenty of quick links to resources for students in need, such as counseling services and links to student associations.
Rich interactive experiences
Interactive experiences put website visitors in control of their online experience. They can choose to engage with information and resources that interest them most or appeal to their unique needs.
Higher education websites are embracing the possibilities of interactive online content through elements like:
Immersive virtual tours. From Rice University’s Webby Award-winning virtual tour to immersive experiences powered by experts like YouVisit, online tours are more useful and engaging than ever before.
Interactive design. For example, check out Western Washington University’s Department of Design website. The interactive homepage design actually allows visitors to rearrange elements on the page to create their own design. This is a unique way to show visitors what the school is all about while providing them with an engaging and memorable user experience.
Interactive timelines. Interactive timelines are an effective tool for showcasing continuity and allowing users to explore areas that interest them. Take a look at the University of Wisconsin-Madison’s interactive timeline to see how this school approached this digital element. Users can scroll down the page to read about the school’s history and select images to learn more about certain events or notable people.
Interactive design helps your university website stand out from the crowd, blending the functional and the aesthetic to create a more well-rounded user experience. Reach out to an experienced design partner for support if you have an idea for a creative interactive element but aren’t sure how to bring it to life.
Improved usability and accessibility
The best university websites know that an inclusive website is a fully accessible one. Accessibility means a website is usable and understandable by everyone, regardless of age or ability.
Accessible higher ed websites consider the wide range of human experiences when designing and structuring their pages and content. From long-term accessibility issues, such as color blindness, to users with short-term impairments like a broken arm, accessible websites offer an enjoyable and user-friendly experience for all visitors.
For example, the University of Pennsylvania’s website hits several key accessibility requirements, including adequate color contrast as well as concise, descriptive image alternative text. Similarly, Cornell University uses bright, contrasting colors and illustrative alternative text.
To improve your site’s accessibility, you can:
Follow the Web Content Accessibility Guidelines (WCAG) as you develop or redesign your website. These guidelines were created to establish a universal standard for website accessibility.
Test your website’s accessibility manually. This is a crucial step that helps you note any instances of poor accessibility that automatic testing resources might have missed. To conduct thorough manual testing, try navigating your website with just your keyboard or zooming in to 200% to assess usability in that format.
Take your accessibility efforts a step further by allowing website visitors to provide feedback on your efforts. For example, Adelphi University offers a form for users to report accessibility issues.
Focus on mental health and wellness
In the past few years, college students’ mental health struggles have hit crisis levels. Financial worries and school stress have always been major contributors to poor student mental health, but the pandemic added a new dimension to the crisis. Many students switched to hybrid or fully virtual class schedules, leading to increased feelings of loneliness and isolation.
The mental health declines prompted by the pandemic are still in effect today. 44% of students reported feeling depressed in the past year, and 95% of college counselors said that mental health is a growing concern at their school.
Reflecting on lessons learned during the pandemic, universities have begun emphasizing mental health resources and wellness across their websites. For instance, Georgetown University has a webpage with mental well-being resources and counseling options for student, faculty, and staff mental health resources. The page even offers a few guiding questions to help visitors find the right resources for their needs.
Ensure your own higher education website showcases your mental health resources. By adopting an empathetic, understanding tone, prospective and current students will feel more comfortable taking advantage of available resources.
Creating opportunities for personalization of the online experience
Personalization is increasingly essential for all forms of marketing, including higher education outreach. According to Modern Campus, 89% of prospective students appreciate when their name is used in marketing materials, and they like it when websites allow them to access personalized content according to their needs.
College websites are heeding the call for more personalization by taking steps to personalize both the public-facing and gated versions of their website.
Public-facing personalization
The public-facing side of your website is all of the content that’s available to any visitor without needing a login to access it.
Higher ed websites are leveraging data analytics to track user behaviors and serve more relevant content on the front end. For example, let’s say you have a visitor who previously visited your university website to start an application but didn’t finish the form. On their next visit, your site can serve them CTAs reminding them to apply now before your deadline.
Gated content personalization
Gated content is any content on your website that requires a login to access.
When current students log into their profile on your college website, they should be able to access a customized dashboard with information relevant to their needs. For example, a student in the journalism school should be able to see the deadline for advising registration and upcoming student organization meetings.
Removing dark usability patterns
Dark usability patterns are tricks or deceptive design elements that are used to make a website visitor take an action that they didn’t intend to, like signing up or paying for something they didn’t mean to buy. Examples of dark usability patterns include hidden costs in a checkout or donation process or disguised ads that appear to be regular content or menu items.
These tactics haven’t been overly used in higher education sites on the front end. However, higher education website developers are prioritizing removing dark usability patterns, even subtle ones.
Eliminating your site’s dark usability patterns helps build trust among audience members and offers them a browsing experience free from sneaky or annoying interface interactions.
Microinteractions
Microinteractions are the small moments and design elements that users experience on your website that engage them more deeply. This encompasses everything from hovering over a button and watching it get larger or change colors to interacting with an in-depth infographic.
Think about the satisfaction and joy you experience when using Facebook’s reaction buttons or sending an iPhone message with an animation. These small interactions engage and delight users, making digital browsing a more enjoyable experience.
Rice University’s virtual tour is full of these microinteractions, starting with the rocket ship animation that appears when you hover over the “Launch Map” button.
In addition, the buttons on the McMaster University homepage play a similar role. When users hover over the buttons, they transform from static images to dynamic GIFs.
Even though these microinteractions represent small moments, they can have a major impact on your visitors’ experience using your website. By optimizing even these brief connections, you ensure every interaction users have with your website is a positive one.
Real-time updates
College and university websites are embracing their role as not just digital resources for learning more about their schools but also one that provides ongoing updates on everything from recent news to research developments.
Elements such as social media feeds, blog post updates, and news articles help keep higher ed websites fresh and relevant, showing visitors that the university is keeping up with current events and contributing to important conversations.
One example of this includes the news feed on the Rhode Island School of Design’s alumni website homepage. The feed is a scrolling carousel of recent news updates and blog posts that alumni community members may be interested in.
The University of British Columbia’s website also offers an effective example of updated content. The homepage spotlights upcoming events, faculty members, community issues, research developments, and more.
By using your higher education website to feature news and current events, you can make it a helpful resource for not just your university’s community, but a wider audience of alumni, sponsors, researchers, and prospective students who are interested in staying up to date with your institution.
How Kanopi Can Help With Your Higher Ed Website Design
Working with a website design agency allows your college or university to stay up to date with effective, usable design trends. At Kanopi, we offer web design services for all types of colleges, universities, and other higher education institutions.
We understand that a strong university website design starts with knowing your target audience, balancing their varying goals, and serving each segment equally. Here’s a glance at the elements we assess and optimize through our process:
Research and Discovery: We conduct both qualitative and quantitative user and stakeholder research and testing. Then, we use our findings to create a vision board for your website to ensure we accurately capture your goals and strategy.
Content Strategy: We audit your existing content, assess your tone and style, and help create a more inclusive strategy that prioritizes accessibility.
User Experience: We craft user personas for each of your audience groups and create journeys and pathways that speak to each persona.
Website Design: We ensure your higher ed website has a top-of-the-line design that optimizes every user interaction.
For higher education institutions, the pandemic era was about coping with chaos. Now, organizations are learning how to heal and move forward. Students, faculty, alumni, and other university community members are re-learning the social aspects of college life or alumni engagement.
Your website can play an effective role in connecting stakeholders to opportunities that interest them and help them feel welcome in your university community. For more information on college and general web design trends and services, check out these additional resources:
Higher Ed Website Design | Kanopi Studios. Learn about Kanopi’s higher ed website design process that we leverage to help clients create effective and sustainable websites.
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.
The emergence of AI-driven platforms like ChatGPT and MidJourney has transformed how creative agencies approach strategy and content development. Rapid AI adoption brings both opportunities and challenges, often not fully grasped by creative and strategy teams. In this article, we explore the pros and cons of integrating AI into your creative workflow.
Will AI replace your design and strategy teams?
The bottom line is that AI tools like Microsoft Designer, Adobe Firefly, Google Bard, and the plethora of AI tools emerging each day, present a double-edged sword for creative agencies. On the one hand, they can help streamline workflows and save time and money by automating repetitive tasks. On the other hand, they also present a potential threat to agencies’ revenue streams by allowing clients to take on more of the creative work themselves. This in and of itself will create challenges for clients as they try to navigate the focused approach a professional can bring to a creative project by balancing UX, functionality, design, and business goals.
To stay competitive, agencies need to find ways to add value beyond what AI tools can offer. This might mean focusing on high-level strategy and ideation, or finding ways to integrate AI tools into their own processes to enhance their work. At the end of the day, it’s not about whether AI will replace human creatives, but rather how agencies can leverage the technology to create better work and deliver more value to their clients.
At Kanopi we believe that top-tier creative and human-centric experiences will always demand the expertise of skilled professionals. The analogy we draw is: while cell phone cameras have made photography accessible to the masses, we still rely on experienced professionals to capture our most significant life moments. In the same vein, we think clients who recognize the importance of how good design will impact their ROIwill continue to depend on the knowledge and skills of professionals to deliver their projects successfully.
All Hail our Robot Overlords: The case for using AI
We find that most of the advantages of utilizing AI tools come down to the following three categories.
Cost: AI tools are becoming more affordable and may be invaluable for smaller organizations with limited teams to be competitive with larger companies. AI tools can help to reduce the need for expensive design software and personnel, making it more cost-effective for businesses to produce high-quality designs and content.
Speed and Efficiency: AI tools can help designers and content creators to work more efficiently by automating repetitive tasks, such as resizing images or optimizing content for SEO. This can save a significant amount of time and allow designers to focus on more creative aspects of their work.
Creative Ideation: AI tools can contribute to the ideation phase of a creative project by analyzing data from social media trends, consumer behavior, and industry insights to help creatives better understand their target audience. By fine-tuning their ideas with this information, creatives can then create impactful and innovative work that delivers more to their clients.
The Ghost In the Machine: The risks of using AI tools
Legality: The use of AI tools in creative work raises concerns about copyright, sourcing, and how AI consumes work as part of its algorithm. Currently, legislators and legal scholars are grappling with the question of who owns the rights to AI-generated works. We suggest a balanced approach. It is recommended that agencies and individuals use AI as a tactical tool within their creative process rather than relying on it as the sole centerpiece of their ideation and research.
Less creative and unique solutions: AI tools are limited by their algorithms and data sets, resulting in less varied and unique outputs. Even with impressive individual pieces, looking at collections like those in MidJourney’s sample galleries reveals an overreliance on certain design elements, such as teal and blue color schemes. These limitations emphasize the importance of the human touch in creative ideation, intuition, and truly customized designs that AI tools cannot replicate.
Potential for misuse and AI Bias: While AI tools have the potential to revolutionize industries, they are not immune to biases. Human input and limited data can result in skewed outputs that discriminate against certain groups of people. As demonstrated by Amazon’s AI recruiting tool, an over-reliance on data without human oversight can lead to biased outcomes. Agencies need to train their staff to identify and counteract bias in AI tools to prevent potential misuse.
As AI tools continue to evolve, we anticipate the emergence of ethical AI practices and increased transparency regarding how AI processes and interprets data. These factors will become increasingly important for the widespread adoption and acceptance of AI as a viable business tool in the future.
AI tools can be a valuable asset to creative professionals, providing increased efficiency, accuracy, and cost-effectiveness. However, it is important to balance the use of AI with a human touch to ensure that creative outputs are engaging, usable, and can meet project KPIs. Additionally, it is important to be aware of the potential for misuse and to use AI tools ethically and responsibly. As AI technology continues to evolve, it will be interesting to see how it is integrated into the field of graphic design and content strategy.
With 89% of patients in the US Googling their health symptoms before going to the doctor, your hospital website is essential to serving your community’s needs and providing accurate and 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 design instills credibility and enhances the patient experience by allowing easy access to important details, such as appointment scheduling, contact information, and directions.
To ensure your hospital’s website is doing all it can for your community, we’ve created this guide, which covers:
As you review this information, keep in mind that Kanopi is prepared to step in at any stage to take your hospital web development to the next level. Let’s get started!
Why Healthcare Website Development Matters
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’s serving your community to the best of its ability, your website needs these specific site features:
A list of services
Appointment booking
Contact details
Interactive advanced search functionality
Doctor/team information
Online chatbots
Online payment portal
Blog/news/press releases
Description of departments
Medical advice
Feedback forms
Hospital directions and parking information
Use these features as a checklist to ensure your website is a comprehensive resource for your patients, staff, and community members.
7 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 site examples. Review these seven examples of hospital websites to inspire your own 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. 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.
4. 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.
5. 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.
6. 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.
7. 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.
Tips for Maintaining Hospital Website Compliance
Your hospital website will likely have multiple services that collect and store patient data, whether it’s a health portal, appointment tool, or bill payment.
HIPAA is an act created by the American government that aims to protect patient data like names, phone numbers, email addresses, social security numbers, and medical records.
HITECH is an extension of the HIPAA requirements that brings additional benefits and protection to patients. This 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, there are also various penalties and fees.
To ensure your website and software solutions comply with HIPAA and the HITECH Act, 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 material records or electronic devices with the aforementioned data with access granted only after the 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 that explains your commitment to complying with HIPAA and HITECH regulations. This will help you build trust with patients.
How Kanopi’s Hospital Web Development Services Can Help
To ensure that you’re doing everything you can to take your own hospital website to the next level, partner with a website support and development agency.
Kanopi is a top partner for hospitals and has helped develop over 150 active sites thanks to our continuous improvement team. No matter what stage your hospital website is at, our team is prepared to either conduct a full website redesign project or even build it from scratch.
Content management system support tailored to user needs—whether you use Drupal or WordPress as a CMS, we have experts that can take each platform and customize it to align with your organization’s needs and branding.
Custom module/plugin development so even if you can’t find the right tool to perform a specific action, our coding team can step in to make it for you.
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 and from 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 results page.
Even after your optimized site is officially launched, we will continue working alongside your hospital to create a full website growth plan. This ensures that your site is sustainable for as long as possible and is there to 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.
If you’re looking to refresh your nonprofit 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.
Nonprofits are making significant progress when it comes to creating mobile-optimized, secure, engaging websites that support their missions.
We want to help you advance your organization’s mission by highlighting the website elements that create an impactful nonprofit online presence. In this post, we’ve rounded up the best nonprofit websites to provide some inspiration as you tackle a refresh or rebrand.
We’ve grouped each website based on a best practice that’s reflected in the site’s design or structure. We’ll explore the following categories:
Stick around at the end of the post for tips on working with a professional web development agency to create a website that empowers your nonprofit’s community.
As you browse this list, take note of the website elements that you may want to incorporate into your organization’s site. There’s no shame in borrowing from other sources that inspire you!
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 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 nonprofit 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.
They include donors in the success story they tell online, explaining how every donation helps get more kids on the road to a greater future.
Their up-to-date stories section lets donors hear directly from the people whose lives have been impacted by the Boys & Girls Clubs of America.
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 tells people why and how they should donate through a clear CTA on their homepage hero.
They have straightforward user journeys for donors, volunteers, and advocates.
They use current imagery and film throughout their site to tell their success story through the people they help.
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 Humane League offers one-off and monthly donations directly from their homepage hero through a CTA that weaves potential donors into their success story.
Their design is uncluttered and straightforward and uses bold imagery to tell their story visually.
They use quotes and images of donors to empower prospective donors to take action.
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.
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.
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 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.
Linked images and form labels include alternative text, making their site accessible for as many people as possible.
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 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 utilizes inspiring imagery to help users visualize their mission.
All of the images on their site have descriptive alternative text, making their site accessible to people who use screen readers.
Their intuitive donate page provides a payment process suitable to your location and makes it easy to share with others with quick share buttons for Facebook, Twitter, Instagram, or email.
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:
The bold, playful colors and branding catch the eye while also appealing to the organization’s kid-friendly mission.
The homepage’s real-time donation tracker showcases donor appreciation as a central priority.
The robust virtual fundraising toolkit gives supporters opportunities to get involved immediately.
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:
Eye-catching “Donate” and “Adopt” CTA buttons invite users to act directly from the homepage.
The WWF makes donors the lead character of their success stories throughout their site.
Their monthly giving page includes compelling film and imagery together with the option of a gift to help users decide to give regularly.
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.
A college website needs to meet the needs of many different users. Every site has to provide vital information to current students, staff, parents, and alumni. At the same time, a college’s website needs to empower new students and donors and help recruit staff.
We’ve compiled what we think are 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 things they do particularly well, including:
Ready to feel inspired? In no particular order, let’s take a 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, keep in mind 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. Their 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:
McGill’s homepage is clean and minimalist while still providing essential content to its users.
Did you spot the empowering “Choose your program” call to action? It’s simple, straightforward, and weaves prospective students into the university’s success story.
They use real images and videos throughout their site, with the powerful “Made by McGill Anthem” video taking center stage on their homepage. Films are a great way for prospective students to get a feel for your institution.
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:
The main navigation menu is streamlined with three CTA buttons—“Visit,” “Apply,” and “Give”—that link to high-demand pages.
White space is used effectively to improve readability, enhance visual clarity, and draw attention to important information.
An interactive graphic 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:
The homepage features an engaging video showcasing the campus, complete with a pause button to improve accessibility.
Flagler’s bold and eye-catching branding is on full display with colors that shift as you scroll down.
The homepage also includes a convenient menu allowing users to jump to different sections on the page.
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:
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.
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.
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 commitments to sustainability, diversity, and inclusion.
What we like about the University of Pennsylvania’s web design:
As soon as users arrive on UPenn’s homepage, they are greeted with an engaging hero image with details about school news and current events. Scrolling further down the homepage, users are provided with quick links to connect with the school through various online channels, including Flickr, Twitter, Facebook, LinkedIn, Instagram, and YouTube.
Each page maintains a consistent visual style, color scheme, and typography to create a unified and professional appearance.
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:
The homepage automatically plays a video reel that highlights the college’s campus, facilities, and student life.
High-quality images are used throughout the site to give users a glimpse of what the college has to offer.
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 located 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:
A comprehensive drop-down navigation bar helps visitors find exactly what they’re looking for.
High-resolution images and engaging graphics enhance the overall look and feel of the website.
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 are required to 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 that offers seven undergraduate colleges 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:
Vibrant and bold colors pass accessibility contrast requirements.
Images include concise and accurate alternative text for visually-impaired users.
Content features first-person language like “we are a diverse community of scholars” to promote inclusion.
Adelphi University is a private institution located in Garden City, New York. As cited on their website, the university offers undergraduate and graduate programs in a variety of academic disciplines, including social work, nursing, education, business, psychology, and more.
What makes the accessibility approach excellent:
Transcripts and closed captions are available for audiovisual content, enabling individuals with hearing impairments to access the information.
Images are backed by descriptive alternative text, making their site accessible to people using screen readers.
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 serves 8,000 undergraduate students and is located in South Bend, Indiana. The university 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:
A clear and consistent navigation system makes it easy for all users to find and access various sections of the website.
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.
Headers are organized logically and hierarchically, helping screen readers navigate through the content easily and improving overall readability.
The University of Iowa (UI) is a public research university located in Iowa City, Iowa. Their website boasts renowned academic programs, including those in the fields of medicine, engineering, business, and the arts.
How the University of Iowa’s accessibility commitment makes an impact:
Although the website is missing 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.
Users with low vision can adjust font size according to their needs without breaking the website’s layout.
Sufficient color contrast between text and background enhances readability for people with visual impairments or color blindness.
Best Virtual College Tours
Virtual tours provide an immersive experience that can include panoramic photos, videos, and student-led tours that help prospective students get a better sense of the campus. This insight is particularly important for students who may not be able to 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 if working with an external partner is the best option to create your own.
Rice University
Rice University is a private research university located in Houston, Texas. Rice is noted for its high level of research as well as its 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:
The site offers a fun twist on the typical virtual tour at Rice University with an unexpected graphic layout that is still intuitive to use.
An interactive map allows users to explore different areas of the campus, including academic buildings, residence halls, sports facilities, and more.
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. Their 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:
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 as well as for its robust alumni network, known as “Morehouse Men.”
Why the Morehouse College virtual tour stands out:
The virtual tour for Morehouse College featured on their site includes interactive elements that users can click on to read more about notable landmarks, alumni, and programs.
360-degree photos and videos provide an immersive view of key locations on campus, giving prospective students a sense of being physically present.
The tour includes links to the college’s social media accounts, allowing prospective students to further explore campus life and stay updated on current events.
Best Mobile College Websites
The average member of Gen Z unlocks their phone 79 times a day (more than any other generation). Mobile optimization ensures that your website is accessible on mobile devices and provides a positive user experience for prospective students.
To make your website mobile-friendly, adjust the layout and content of the website to fit the screen size and resolution of the device it is being viewed on. 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. Their campus, located in Stanford, California, occupies 8,180 acres, 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:
The website layout automatically adjusts to fit various screen sizes and resolutions, ensuring that the content is easily viewable and accessible on mobile devices.
Forms are simplified for mobile use, with responsive input fields and easy-to-select options to enhance user engagement.
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. The university’s website is simple and clean, spotlighting campus news alongside a strong research focus.
What makes UBC’s mobile design great:
Images and videos are compressed for faster loading times on mobile devices.
Text is legible on smaller screens without the need for users to zoom in.
Pop-ups are limited to not disrupt 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:
The video on the homepage automatically adjusts to a static image in the mobile version, which is much easier to view.
Click-to-call options are prevalent throughout the site, allowing users to contact the college directly from their mobile devices.
Content is easy to read on smaller screens, with concise paragraphs and legible font sizes.
Best College Website Admissions Pages
A comprehensive admissions page can be a critical tool in the college’s recruitment strategy, as it provides a clear path for potential students to navigate and ultimately submit their applications.
When crafting your own admissions page, be sure to 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.
Located in sunny Tucson, Arizona, the University of Arizona is a large public land-grant university. The University of Arizona’s website not only covers all the academic information that prospective students are curious about but also provides a thorough overview of the culture and experience of living in Tucson.
Why the University of Arizona’s admissions page is effective:
Renowned for its journalism, management, and music schools, Northwestern University stands apart as one of the most prestigious schools in not just the United States, but the world. Their website highlights not only the school’s prominent research focus but also its commitment to fostering a diverse, inclusive, global community.
Why Northwestern’s admissions page made our list:
The website features a warm and inviting admissions pagethat welcomes prospective applicants.
The page includes 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 to apply.
Georgetown University is a private research university located 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, from students and parents to alumni, faculty, and staff.
Here’s what’s exciting about the Georgetown admissions page:
Georgetown’s admissions page features a diversity and inclusion statement, ensuring prospective applicants that this is a welcoming environment for all.
The page includes a personal testimonial from a current student to showcase the university’s impact.
It also links to the tour page where users can either schedule an in-person visit or use their virtual tour technology to view the campus.
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:
The WSU admissions page features two calculators that prospective students can use to estimate their total cost of attendance and need for financial aid.
A visually-pleasing video walks students and their families through the process of paying for college and applying for scholarships.
There is a section entitled “Apply To The Campus Of Your Choice” that provides guidance on how to apply to each regional campus.
Most Unique College Websites
Having a unique website helps to distinguish your college or university from the competition. Plus, it can 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 it is that makes your institution special. Showcase the unique and compelling aspects of your college, such as programs, student life, or notable alumni, to differentiate yourself from other institutions.
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 skillset with a holistic approach. Its website takes an interactive approach that helps inform and engage visitors.
What we like about Western Washington University Department of Design’s website:
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.
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.
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. Their website was even celebrated as a Webby Award honoree.
Why the Kenyon College website made the list:
The homepage takes a bold, minimalist approach with a standout quote and a unique birds’-eye image perspective.
The rest of the site highlights the accomplishments and stories of current students and alumni, showcasing their successes and experiences at the college.
The Rhode Island School of Design 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:
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 but also serves a clear and useful purpose.
The website highlights the stories of alumni, showcasing their successes and experiences at the college.
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 a way that’s both intuitive and visually pleasing. Our team of specialists also offers a website growth plan once your website launches to help you stay on track toward your goals.
Working with Kanopi could give your university website redesign project the structure and expertise needed to be successful. Contact us if you’re interested in taking 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.
From the streaming services we binge to the smartphone we buy, there’s no denying excellent website design matters. Great web design can mean the difference between people landing on your site and coming back daily or landing on your site and immediately leaving, never to return again.
As University of Washington designer and teacher Joe Sparano puts it:
“good design is obvious and great design is invisible.”
Although also invisible is harmful website design that’s inaccessible for some people.
Boosting revenue, increasing donations, enhancing engagement, and saving staff time are just a handful of the many measurable benefits of great website design.
Let’s dig into the details!
Boost your revenue
It’s hard to ignore the power of discovery paired with quantifiable data to drive content & user experience (UX) improvements.
Do you know who uses your site and what their needs are?
You may think you know, but the truth is user behavior shifts and changes at a rapid pace. It’s vital to regularly test assumptions about who is currently using your site and how they use it, gathering insight to inform design solutions that better meet user needs today.
The American Cancer Society (ACS) boosted its revenue by 4.5% by redesigning its website using research and data.
How did they do it? The ACS team created a new donation form on their site that sends funds only to breast cancer research. The nonprofit made it easier for their top personas to do what they came to the site to do, looking at how people interact with their site and how their needs and goals change over time.
Analytics data showed that ACS was missing out on valuable traffic between its main website and its “Making Strides” sub-site. The team got to work creating clear user pathways between the two websites, providing donors with the action they wanted to take most, as illustrated by the data — supporting breast cancer research specifically.
Well-designed nonprofit websites focus on the user experience of its donors, making it easier for them to find the information they need, including all of the ways they can support the organization while allowing them to complete donations seamlessly.
Great design backed by a donor content strategy leads with impact that’s personal, clearly showing existing and future donors how their generosity makes a difference.
Jack.org is Canada’s only charity training and empowering young leaders to revolutionize mental health. The Canadian nonprofit needed a website to help them better connect with young people nationwide.
By reviewing its donor experience, the charity boosted online donations by 80%, with a 108% increase in online donation revenue.
How did they do it? They implemented an enhanced strategy focussing on UX, followed by a redesign that included powerful, seamless fundraising and sales integrations, making their site AODA & WCAG compliant.
The University of North Carolina School of the Arts decided to redesign its website when it realized it wasn’t meeting the needs of two of its most important groups of people — students and donors.
By upgrading its information architecture, creating engaging microcontent and improving functionality, admission inquiries climbed 518%, and the university saw online donations increase by 48%:
“The storytelling as a narrative was really the way to sell and to communicate what the institution is,”
said Vice Provost and Dean of Student Affairs Ward Caldwell,
“I think one of the unique aspects of the site design is that it encourages exploration. It provides all the links to move people through the site, but it also encourages people to linger, to get an understanding of how we take students through a journey of artistic exploration.”
Twenty-five percent of what you sell on your website is your product or service. The remaining 75% is an intangible feeling from a package deal with said product or service.
What do you want people to feel from interacting with your site’s content?
A clear and consistent content style within your website design can help you engage Gen Zers (people born between 1997 to 2012.) Speak to younger folks on a personal level using language and words they recognize and use themselves daily, factoring in aggregated data that helps you better understand your user’s emotions.
Develop a tone and voice that fits your organization and resonates with your users, keeping it conversational and action-based.
Make your site more human using contextual AI to design a website that makes people feel something and achieve ROI growth as you connect with the next generation. Your ultimate goal should be to deliver a focused experience instead of just a website.
Colleges and universities are deploying user-controlled, AI-powered chatbots to connect with people faster, helping them convert more prospective applicants into enrolled students.
Ahead of a new academic year, students have many questions about programs, fees, housing, and more. Admissions departments work flat out, and responding to every question takes time.
Chatbots eliminate this problem. They’re convenient, easy to use and designed to provide automated responses to common questions from students, avoiding ambiguity and slow replies.
Students can chat with them any time, day or night, which is particularly useful for international folks living in a different time zone than their desired college or university.
Make it accessible to all
Design that addresses the unique needs, barriers, and challenges that people with disabilities face when using your site will benefit all users, ensuring your site is inclusive and accessible.
Don’t make the mistake of allowing accessibility to become an afterthought you attempt to shoehorn into a near-finished design. It’ll cost you time and money in the long run.
Fifteen percent of the world’s population, or 1.3 billion people, self-identify as having a disability, so design a website accessible to all and watch your ROI grow.
What does accessible website design look like? Do you have to forfeit captivating visuals to gain a truly accessible site? Not quite.
Are you keen to introduce motion on your site to increase engagement? Great! Though first, understand how movement on websites impacts people with vestibular disorders such as epilepsy. Avoid using excessive animation to ensure everyone can use your site, opting for thoughtfully executed motion design users can control instead, for example, prominent pause, stop, and play options on embedded videos.
Partnering with the National Council for the Blind in Ireland, Kanopi was able to design a website that’s AAA compliant (the highest level of web accessibility) without sacrificing good design.
The nonprofit’s site includes fun, engaging graphics with bright colors and relatable student imagery while nailing text-to-background color contrast, large text, and text zoom functionality. Site visitors know exactly where to go from the homepage, with straightforward user journeys for students, readers, and educators:
A site that’s well-designed and optimized for search engines can drive more organic traffic and improve search engine rankings. It’s that simple.
VITAS Healthcare, a pioneering hospice movement since 1978, improved its organic click-through rate (CTR) by 52% through improved design. A CTR is the percentage of searchers who click on a search engine result.
How did they do it? Improving their meta descriptions made them more descriptive and meaningful, adding direct telephone numbers for folks to reach them immediately.
Meta descriptions are HTML tags summarizing your webpage’s content. It’s a snippet of text, roughly 160 characters long, that appears under your page title on a search engine result page like Google.
The meta descriptions of every landing page you design may fly under the radar at times, though this behind-the-scenes component is key to great website design that ensures your site is discoverable.
Save staff time
A well-designed website can make it easier for a nonprofit or higher education institution to complete two vital tasks:
communicate with your key stakeholders and
disseminate important information.
It took staff 25% less time to respond to inquiries following the redesign of the American Cancer Society’s website. They refined their “Contact Us” page with a clear content hierarchy, providing pathways for questions by phone, live chat, or video chat and by topics such as donations and volunteering opportunities:
How does this translate to ROI? Let’s do some quick math.
Suppose your staff spends 10 hours or 25% of their 40-hour work week navigating and replying to inquiries from your website. With time savings similar to the American Cancer Society at 25%, your staff can now respond to inquiries in 7.5 hours instead of 10.
For a team of 5, that saves 650 hours per year that could be redirected to other essential tasks within your organization.
Great design starts with research and strategy
Here at Kanopi, accessibility is baked into our process at the start of every website design project. Our strategists, designers, and developers collaborate to skillfully balance website design that produces the wow factor while not compromising on building a site accessible to all.
Good website design isn’t just “sparkle and boom.”
The real boom happens when you use research to develop a strategy that enhances your user experience and improves your conversion rates.
Are you after more donations? More enrollment? More memberships?
It is invaluable to gain an accurate, up-to-date picture of how people use your site and what they expect to find. Find that sweet spot where content meets both the needs of your users and your organizational goals by developing a content strategy based on user research.
The tried and tested way to turn one-page website viewers into repeat visitors and continuous supporters is by designing a website with user experience at its core.
We’ve provided only a handful of examples of how great website design can impact a nonprofit or higher education institution’s ability to achieve its goals and boost its ROI in the process. From increasing revenue, giving and organic traffic to engaging the next generation, improving accessibility, and saving staff time, we think the proven results of excellent site design speak for themselves.
