How are we at the end of 2024 already? It feels like only yesterday that we were sitting right in this very spot asking, “how are we at the end of 2023 already?”
In any case, here we are — which means it’s time for that one special holiday tradition specifically mandated by our Marketing department: our blog about which visual web design trends are going to be hottest throughout the coming year. Only this time around, we’re giving you, dear reader, the opportunity to weigh in as well. Do you agree with our predictions? Let us know below (and maybe next year blogs that incorporate surveys will be on everyone’s list of trends for 2026.)
As we move into 2025, design trends are blending innovative technology with a deeper emphasis on human connection. From dark mode and playful accents to an increased focus on inclusivity, the themes emerging this year underscore a balance between creativity and accessibility. This post explores the top design trends to watch, providing insights on how they can be applied thoughtfully to create engaging and authentic experiences for users.
Dark Mode Slowly Creeps Along
Dark mode has become a standard on operating systems, but website adoption has been slower. While popular, dark mode design requires extensive adjustments to branding and color palettes, and often presents technical challenges. Until automation catches up, adding dark mode will remain time-intensive.
The key for brands is to align with their unique identity rather than chasing trends. As seen in high-profile rebrands like Burger King and Pizza Hut, success comes when brands stick with the visuals that truly resonate with audiences.
Even More Inclusive People Images
Inclusivity in visual media is evolving, with companies expanding representations to include disabilities, nonbinary identities, and various racial backgrounds. This trend moves beyond general categories to focus on individuality, showing a more nuanced human experience. Here’s our go-to list for finding inclusive images for your next blog or social post.
Playful Accents
Playful typography, ornamental elements, stickers and scribbles are seeing a resurgence, adding warmth and character to designs. Expect to see more ‘inflatable’ or ‘melty’ type treatments in packaging and branding. These organic elements bridge the physical and digital, reminiscent of creative touches like 2023’s Spotify Wrapped.
Return to the 90s and 00s
The nostalgia for 90s and 00s styles has influenced fashion, packaging, and digital design. However, rather than simply imitating, brands should aim to capture the underlying spirit of those decades — focusing on authenticity and individuality.
Proof of Humanity
In an era of rising digital distrust (hello artificial intelligence), brands need to show authenticity. This can mean avoiding generic stock photos in favor of real employee photos (which, trends aside, is something we’ve always urged our clients to do) and providing verifiable information to establish trust.
Customizable UI
User customization options are expanding, especially on platforms like iOSandAndroid, where users can personalize themes and icons. Young audiences are definitely embracing this trend, favoring platforms that allow for a tailored experience; however, it’s still too early to tell whether the OS trend will cross over to web design.
Incidentally, our current policy at Kanopi is not to use AI in the generation of deliverables. However, we’re also keeping a close eye on developments in this area.
Final Thoughts (for the next 11 months, at least)
Design in 2025 will center on striking a harmony between the digital and the human, the bold and the soothing. By embracing these trends, brands can forge stronger connections with their audiences, combining aesthetic appeal with functionality and inclusivity.
Finally, let’s be honest — by 2025, there will probably be more blog posts about ‘emerging design trends’ than there are actual trends. Just remember: for every new color palette, there’s a designer somewhere writing a thousand-word piece on why this is the year of ‘soothing yet bold’.
Page builders are a great tool, but they’re not always the right solution. If you’re a small organization with minimal updates to your website — like changing your schedule or hours — page builders can be a fantastic option. They are simple, cost-effective, and user-friendly, which makes them a good choice for organizations with straightforward needs.
Common WordPress page builders:
These are the ones we come across most frequently here at Kanopi:
Elementor
Divi
WP Bakery
Beaver Builder
Why people like page builders:
One of the main reasons page builders are popular is because they save time and reduce costs. You don’t need a full development setup or specialized tools to get started.
Everything can be done right in the site’s interface, meaning there’s no need for code repositories (GitHub)or additional software licenses.
Heck, you can even use a public computer at your local library to make changes. This simplicity means you don’t need developers to build and manage a site with a page builder.
The trouble with page builders:
However, it’s hard to have it both ways; if your organization needs frequent custom updates, a page builder may not be the best fit. Page builders are often performance-heavy, which can slow down your site due to their reliance on plugins. And while they can be useful, they sometimes cause accessibility issues (see below) or limit flexibility. If you’re after a high level of customization or specific functionality, you might hit a wall with a page builder.
What about accessibility and performance with page builders?
Glad you asked: when it comes to accessibility and performance, page builders aren’t as “easy” and “worry free” as they may look.
Accessibility issues:
Semantic HTML: Page builders tend not to produce semantic markup. This can prevent screen readers from properly interpreting the content.
Keyboard Navigation: Page builders create very complex HTML for page and component layouts which can create barriers for keyboard navigation or even keyboard traps. Menus can be extremely complex, making it difficult to even navigate the menu with a keyboard, let alone a mouse.
ARIA Attributes: Page builders do their best to utilize these but it is very easy to have them incorrect, or missing.
Color Contract: Color is managed by the content editor which gives them great power and control. However this also very quickly can lead to an inaccessible site as the color contrast can easily and quickly fall out of the range of accessible.
Focus state: Focus states are used by keyboard navigation. These interactive states can easily become mismanaged or used in page builders creating a disorienting experience for users.
Performance issues:
Bloated code base: As mentioned earlier, page builders typically have very bloated code, using a lot of markup to create simple layouts, and creating loading a large amount of JS and CSS on pages. This slows down page load time.
Large DOM size: to piggyback on the above, complex layouts and long pages can have a large DOM size due to the number of elements that it creates. This slows down the page load as you have to wait for all those elements to render
Render blocking: Because they can load a lot of resources, internal and external CSS and JS files, those external resources may not be managed properly blocking page load until those payloads are downloaded first.
Database bloat: Page Builders can store a ton of data in the database. Depending on your site size and host, this can drastically slow down your overall performance
In short: if you’re truly trying to build accessible, performant, websites there are still many things to work around and manage with the use of page builder tools.
We’ve worked with several clients to help them move from page builders to more sustainable, flexible solutions. Here are a few examples:
California Prevention Training Center (CAPTC) – Divi
Issue: This website was over-engineered with Divi. We redesigned and overhauled the site, removing the unnecessary complexity of the page builder and improving the overall user experience and site performance.
The California Prevention Training Center (CAPTC) website before (left) and after (right) moving off of Divi.
Carmanah – Divi
Current Status: The site was outdated and had an overly complex backend. The client came to us seeking a redesign, with a focus on improving performance and security. We’re migrating away from Divi, which will streamline the website’s backend, improve load times, and enhance the admin user experience.
Adaptive Biotech – Elementor
Issue: Over time, the page builder became a hindrance, especially with accessibility and content entry limitations. We rebuilt key components of the site using Gutenberg blocks and Advanced Custom Fields (ACF). This approach removes the need for the page builder and its plugins, improving site performance and reducing load times.
DonorSearch – Visual Composer
Issue: The client couldn’t make content edits without breaking the layout. We rolled out a more manageable solution, using blocks within the editor and ACF to create custom blocks. This enabled a flexible redesign and content migration, with a focus on creating a dynamic, easily editable website. The new DonorSearch design also allowed for different content variations, so the site remains fresh and adaptable over time.
The DonorSearch website before (left) and after (right) moving off of Visual Composer.
Final Thoughts
While page builders offer an easy, cost-effective solution for simple websites, they have limitations regarding scalability, customization, and performance.
For organizations that need a more flexible, sustainable solution, moving away from page builders to custom-built sites using WordPress’s core features can make a significant difference. Whether you want to improve performance, accessibility, or content management, working with a development team to find the right solution is key.If you have any questions or issues with page builders on your WordPress site, we’re here to help. We’ve worked with numerous clients to solve page builder issues, and our team is ready to help you get the most out of your website — whether that means refining your current setup or transitioning to a custom-built solution.
University websites are more engaging, user-friendly, and innovative than ever before — and they aren’t going unnoticed.
According to the most recent E-Expectations Trends Report, college and university websites are the resource current high school students turn to most often for information about your institution. That means your college website matters — a lot.
A college website needs to meet the needs of many different users. It must provide vital information to current students, staff, parents, and alumni. At the same time, it must empower new students and donors and help recruit staff.
We’ve compiled our picks for the best college websites to explain what they are doing right and how you can replicate the best practices used in your own website strategy. We’ve grouped each website based on the strategies they execute particularly well, including:
Ready to feel inspired? In no particular order, let’s look at the best college and university websites!
Best College Website Designs
Design plays a crucial role in creating an effective college website. A well-designed website not only attracts potential students, but can also provide a positive user experience that encourages prospects to explore the site and engage with the content.
When designing your own website, remember that less really is more. Instead of cluttering the website with information, focus on clean, organized pages that are easy to navigate. Leave ample white space around important elements like calls to action (CTAs) to make them stand out. Doing so will help potential students find the information they need quickly and easily.
McGill University is a public research university located in Montreal, Canada. It is one of Canada’s top universities and is known for its prestigious academic programs and research. The McGill website provides a wealth of information about the university, including its history, faculty, student life, and research initiatives.
What’s excellent about McGill University’s web design:
Minimalist look: McGill’s homepage is clean and minimalist while still providing essential content to its users.
Inclusive language: The homepage call to action (CTA) uses second-person, inclusive language to help prospective students visualize their place on campus.
Simple but engaging typography: The McGill website maintains simplicity throughout its typography, but did you notice the switch between serif and sans serif fonts? This creative choice offers more visual intrigue without being distracting.
Based in Baltimore, Loyola University Maryland is one of the oldest Jesuit institutions in the United States. The Loyola Maryland website promotes the school’s Catholic values while providing plenty of information and opportunities for prospective students, donors, and faculty alike.
Standout features of Loyola University Maryland’s web design:
Straightforward navigation: The main navigation menu is streamlined with three CTA buttons — “Visit,” “Apply,” and “Give” — that link to high-demand pages.
Helpful white space: White space is used effectively to improve readability, enhance visual clarity, and draw attention to important information.
Dynamic homepage video: A professional, compelling video at the top of the homepage makes the website more dynamic and memorable.
Flagler College is a small private institution located in St. Augustine, Florida. The university’s website promotes its historic roots while providing easily accessible resources for students, faculty, and other stakeholders.
Why Flagler’s web design exceeds expectations:
Homepage video: The homepage features an engaging video showcasing the campus, complete with a pause button to improve accessibility.
Bold colors: Flagler’s bold and eye-catching branding is on full display with colors that shift as you scroll down.
Streamlined user pathways:Flagler worked with Kanopi’s web designers to simplify user pathways, helping visitors find what they need quickly. For example, the First Year Applicants page includes all the steps interested students need to follow to apply to the college in an easy-to-understand list.
Simple navigation: The homepage also includes a convenient menu, allowing users to jump to different sections on the page.
Roosevelt University is a private institution with campuses in Chicago and Schaumburg, Illinois. Roosevelt’s website prioritizes a highly engaging, interactive experience that makes it easier for current and prospective students, alumni, and other university community members to find opportunities that align with their interests.
What makes Roosevelt one of the best college websites:
User-friendly sign-on: With the help of Kanopi’s development experts, Roosevelt migrated its website to a more user-friendly Drupal instance that offers a convenient single sign-on for all user accounts.
Welcoming homepage: Roosevelt’s inviting homepage CTAs offer simple pathways for common user intentions, such as requesting more information, scheduling a visit, or completing a virtual tour.
Inclusive pricing structure: Roosevelt emphasizes its relatively cheaper price tag when compared to other private universities, as well as its financial aid opportunities. This makes the website more inclusive for prospective students from all financial backgrounds.
Founded by Benjamin Franklin, the University of Pennsylvania (UPenn) is one of the nine colonial colleges established before the signing of the Declaration of Independence. The UPenn website offers a straightforward, clear view of the school’s priorities, including sustainability, diversity, and inclusion commitments.
What we like about the University of Pennsylvania’s web design:
Bold hero image: As soon as users arrive on UPenn’s homepage, they are greeted with an engaging hero image related to current events at the school.
Consistent design: Each page maintains a consistent visual style, color scheme, and typography to create a unified and professional appearance.
Dynamic content: The homepage is frequently updated with the latest news, events, and ways to keep in touch with the university on social media. This lends a dynamic, active feel to the university’s web presence, letting visitors know this college is serious about informing its audience about the latest happenings.
Oberlin College, located in Oberlin, Ohio, has a rich history of progressivism and student activism. The university’s website features diverse academic offerings, from a music conservatory to a strong liberal arts focus.
What we love about the Oberlin website:
Informational homepage video: The homepage automatically plays a reel highlighting the college’s campus, facilities, and student life.
Engaging visuals: The site uses high-quality images to give users a glimpse of what the college offers.
Hierarchical page structure: Content is arranged with visual hierarchy in mind, guiding the user’s eye to the most important elements on the page first.
The University of Texas (UT) at Austin is a public research university in Austin, Texas, with over 51,000 students enrolled. The university’s branding and visual identity are evident throughout the website.
Here are the most effective elements of the UT Austin website design:
Detailed navigation: A comprehensive drop-down navigation bar helps visitors find exactly what they’re looking for.
Engaging imagery: High-resolution images and engaging graphics enhance the overall look and feel of the website.
Aesthetically pleasing use of color: UT Austin’s burnt orange brand color contrasts stylishly with the effective use of white space and bold text.
Best College Websites for Accessibility
Under Section 504 and Title II, educational institutions must provide all individuals, including those with disabilities, equal access to important information and opportunities online. By making your website accessible, you avoid legal issues and demonstrate a commitment to promoting diversity, equity, and inclusion.
Based in Ithaca, New York, Cornell is a private Ivy League university offering seven undergraduate and seven graduate divisions. As a land-grant university, Cornell’s website keeps its research focus front and center while offering vital admissions and other academic information for current and prospective students.
What we like about Cornell’s accessible website design:
Strong color contrast: Vibrant, bold colors pass accessibility contrast requirements.
Useful alternative text: Images include concise and accurate alternative text for visually-impaired users.
Welcoming language: The content features first-person language, such as “we are a diverse community of scholars,” to promote inclusion.
Adelphi University is a private institution located in Garden City, New York. According to its website, the university offers undergraduate and graduate programs in various academic disciplines, including social work, nursing, education, business, psychology, and more.
What makes the accessibility approach excellent:
Captioning: Transcripts and closed captions are available for audiovisual content, enabling individuals with hearing impairments to access the information.
Descriptive alt text: Images are backed by descriptive alternative text, making the site accessible to people using screen readers.
Accessibility feedback: The site includes an accessibility form, where users can report questions or concerns related to individuals with disabilities and their experience accessing content. The responses help the university stay accountable and further improve its accessibility standards.
Powered by a Catholic mission, the University of Notre Dame is located in South Bend, Indiana. It serves 8,000 undergraduate students and is noted for its football team as much as its prestigious academics, with both elements reflected on its robust website.
Why the University of Notre Dame’s accessible web design impressed us:
User-friendly navigation: A clear and consistent navigation system makes it easy for all users to find and access various website sections.
Keyboard-navigation-friendly: All interactive elements, such as buttons and forms, can be accessed and activated using only the keyboard, which is vital for individuals who cannot use a mouse.
Logical page structures: Headers are organized logically and hierarchically, helping screen readers navigate the content easily and improving overall readability.
The University of Iowa (UI) is a public research university in Iowa City, Iowa. Its website boasts renowned academic programs, including those in medicine, engineering, business, and the arts.
How the University of Iowa’s accessibility commitment makes an impact:
Simple keyboard navigation: Although the website lacks an accessible name on the search button and has a miss-coded background video, its functionalities can be operated using a keyboard alone, without requiring a mouse. This is a crucial aspect of website accessibility.
Adjustable fonts: Users with low vision can adjust font size according to their needs without breaking the website’s layout.
High contrast: Sufficient color contrast between text and background enhances readability for people with visual impairments or color blindness.
Award-Winning College Websites
Some college websites are so effective, engaging, and visually appealing that they’re recognized on a larger stage. One such form of recognition is the Webby Awards, an annual award ceremony recognizing the top websites of the year.
In the list below, we’ve compiled a few top examples of higher education websites honored with Webby Awards or nominations in recent years. These websites use exemplary audience engagement and visual design strategies, so note which elements you could borrow to improve your university’s website.
The Moore College of Art & Design is a private Philadelphia art school for women, nonbinary, and gender-nonconforming students. The college’s online promotional viewbook provides a unique and visually engaging resource for prospective students to envision their place at the school. We can honestly say we don’t see many college websites as unique and colorful as this one.
Here’s what caught our attention in the Moore College Viewbook:
Unique comic-book-style design: The viewbook offers an engaging user experience reminiscent of reading a comic book. Bold colors, flashing elements, and unique microinteractions feel like walking through an animated world.
Helpful user pathways: Visitors can select their own pathways using CTAs designed to provide tailored information for each educational path.
Heavy visual emphasis: A variety of photos from different events and programs give prospective students a realistic look at what life in the program is like.
The School of the Art Institute of Chicago (SAIC) is a private art school considered one of the top art schools in the United States. The school’s website offers a veritable visual feast, with dynamic content and bold branding.
Standout features of this website include:
User-focused navigation: The “Resources for” menu item speaks directly to the needs of different user groups, with convenient links to relevant informational pages.
Microinteractions: The “Why SAIC?” section on the homepage features creative microinteractions — when users hover over each photo, they turn into dynamic videos that bring the content to life.
Captivating colors: The site uses bold, eye-catching colors to create a more playful experience.
The University of San Francisco (USF) is a private Jesuit university in San Francisco, California. The USF website highlights the university’s diverse student body, quality of education, and value. Prospective students can easily access information on every program available, from undergraduate and graduate degrees to research programs.
Why we like this higher ed website:
Compelling hero image: The primary image on the homepage is a striking solo shot of a student with a university building in the background. The photo is simple yet effective, allowing prospective students to envision themselves on campus.
Effective use of statistics: The homepage spotlights key statistics related to the university’s success, including information about campus diversity, social mobility, and lifetime earnings. These statistics are presented clearly so prospective students can easily understand how the university will support them.
Pop-out menu: The website uses a pop-out hamburger menu that keeps the header uncluttered.
Best Virtual College Tours
Virtual tours provide an immersive experience that can include panoramic photos, videos, and student-led tours that help prospective students better understand the campus. This insight is particularly important for students who cannot visit in person due to distance or other limitations.
Several of the following universities partner with YouVisit to add virtual tours to their websites. Consider whether working with an external partner is the best option for creating your own.
Rice University
Unique illustrations
Rice University is a private research university located in Houston, Texas. It is noted for its high level of research and strong academic reputation, with a 6:1 student-to-faculty ratio. The Rice website highlights upcoming events alongside statistics about the university’s rankings and student population.
Here are the standout features of the Rice virtual tour:
Engaging visuals: The site offers a fun twist on the typical virtual tour with an unexpected graphic layout that is still intuitive to use.
Interactivity: An interactive map allows users to explore different areas of the campus, including academic buildings, residence halls, sports facilities, and more.
User-friendly search functionality: A search bar encourages users to quickly look up landmarks and destinations, perfect for new and prospective students finding their way around campus.
The University of Pittsburgh at Bradford is a regional campus of the University of Pittsburgh. Nestled among the Allegheny mountains, this school offers 115 academic programs to its 1,500 students. Its website showcases the variety of outdoor activities available while giving prospective students a glimpse into what life at the university is like with a carousel of homepage images.
Why the University of Pittsburgh at Bradford’s virtual tour caught our eye:
Effective VR use: The website features a virtual campus tour that uses virtual reality (VR) to provide users with a 360-degree immersive experience.
Student insights: The tour features video testimonials from current students, providing insights into their experiences, campus life, and extracurricular activities.
Accessibility: The virtual tour is accessible to users with disabilities, providing keyboard navigation options, captions for videos, and alt text for images.
Morehouse College is a private, historically Black men’s college located in Atlanta, Georgia. The school is noted for playing an important role in the civil rights movement in the United States and for its robust alumni network, known as “Morehouse Men.”
Why the Morehouse College virtual tour stands out:
Interactive elements: The virtual tour for Morehouse College includes interactive elements that users can click on to read more about notable landmarks, alumni, and programs.
Immersion: 360-degree photos and videos provide an immersive view of key campus locations, giving prospective students a sense of being physically present.
Opportunities to connect: The tour includes links to the college’s social media accounts, allowing prospective students to explore campus life further and stay updated on current events.
Best Mobile College Websites
Members of Gen Z spend an average of over six hours on their phones daily, and you must meet these current and potential students where they are. Mobile optimization ensures your website is accessible on mobile devices and provides a positive user experience for all visitors.
To make your website mobile-friendly, adjust the layout and content to fit the screen size and resolution of the device on which it is being viewed. This can include reordering content, resizing images and videos, and adjusting font sizes. Other strategies for mobile optimization include simplifying the navigation menu, reducing page load times, and optimizing images and videos for mobile devices.
Another prestigious American university, Stanford enrolls over 17,000 students. Its campus, located in Stanford, California, occupies 8,180 acres, making it one of the largest university campuses in the country. The Stanford website covers multiple aspects of the school’s mission, including events, academics, research, healthcare, campus life, and admissions, with different headers throughout the homepage.
What we like about Stanford University’s mobile design:
Responsive layout: The website layout automatically adjusts to fit various screen sizes and resolutions, ensuring the content is easily viewable and accessible on mobile devices.
Convenient forms: Forms are simplified for mobile use, with responsive input fields and easy-to-select options to enhance user engagement.
Appropriate tap-target layout: Buttons and interactive elements are designed with sufficient spacing to accommodate tapping with the thumb.
The University of British Columbia (UBC) is a top Canadian university located in Vancouver. Its website is simple and clean, spotlighting campus news alongside a strong research focus.
What makes UBC’s mobile design great:
Performance optimization: Images and videos are compressed for faster loading times on mobile devices.
Readability: Text is legible on smaller screens without users needing to zoom in.
Lack of pop-ups: Pop-ups are limited to avoid disrupting the mobile browsing experience, as they can be challenging to close on smaller screens and lead to user frustration.
Brown University is a private Ivy League research university located in Providence, Rhode Island. It was founded in 1764 and is one of the oldest and most prestigious universities in the United States.
Why Brown University’s mobile approach stands out:
Mobile-optimized video: The video on the homepage automatically adjusts to a static image in the mobile version, which is much easier to view.
Simple contact options: Click-to-call options are prevalent throughout the site, allowing users to contact the college directly from their mobile devices.
Streamlined content: Content is easy to read on smaller screens, with concise paragraphs and legible font sizes.
Best College Website Admissions Pages
A comprehensive admissions page is a critical tool in a college’s recruitment strategy. It provides a clear path for potential students to navigate and ultimately submit their applications.
When crafting your admissions page, include information on how to apply, application requirements, deadlines, and important dates. It should also provide details on tuition and fees, scholarships, and other financial aid opportunities.
Convenient information for a wide range of user groups
The University of Arizona is a large public land-grant university located in sunny Tucson, Arizona. Its website covers all the academic information that prospective students are curious about and provides a thorough overview of the culture and experience of living in Tucson.
Why the University of Arizona’s admissions page is effective:
Tailored content for different user groups: The admissions overview page for the University of Arizona has dedicated sections for each type of applicant, including prospective first-year, graduate, international, transfer, and online students.
Convenient contact information: The page highlights clear contact details for the admissions office, allowing visitors to reach out for inquiries.
FAQs: There are also answers to frequently asked questions about the admissions process and college life.
Renowned for its journalism, management, and music schools, Northwestern University stands apart as one of the most prestigious schools in the United States and the world. The school’s website highlights its prominent research focus and its commitment to fostering a diverse, inclusive, global community.
Why Northwestern’s admissions page made our list:
Welcoming tone: The website features a warm and inviting admissions page that welcomes prospective applicants with second-person, inclusive language, saying, “Your Northwestern Direction starts here.”
Helpful information: The page provides a concise overview of the college, highlighting its mission, values, and unique selling points. It also provides clear and detailed information about the admissions process, including application deadlines, requirements, and steps.
Convenient touring options: The website offers multiple ways to explore the campus, including in-person tours and virtual info sessions.
Georgetown University is a private research university in Washington, D.C. This highly selective school is also the oldest Catholic university in the United States. The Georgetown website offers information for its broad audience, including students and parents, alumni, faculty, and staff.
Here’s what’s exciting about the Georgetown admissions page:
Diversity commitment: Georgetown’s admissions page features a diversity and inclusion statement, ensuring prospective applicants that this is a welcoming environment for all.
Testimonials: The page includes a personal testimonial from a current student to showcase the university’s impact.
Touring options: The page also links to the tour page, where users can either schedule an in-person visit or view the campus using virtual tour technology.
Washington State University (WSU), located in Pullman, Washington, is a renowned public research institution with a rich history spanning over a century. Its easy-to-use navigation guides visitors through academic programs, campus life, and research initiatives.
Why Washington State University’s admissions page stands out:
Financial accessibility: The WSU admissions page features two calculators that prospective students can use to estimate their total cost of attendance and need for financial aid.
Engaging video: A visually pleasing video walks students and their families through the process of paying for college and applying for scholarships.
Region-specific information: A clear section explains how to apply to each regional campus.
Most Unique College Websites
A unique website helps distinguish your college or university from the competition. It can also leave a lasting impression on potential students, making it easier for them to understand your mission and values.
As you build your website, think about what makes your institution special. To differentiate yourself from other institutions, showcase your college’s unique and compelling aspects, such as programs, student life, or notable alumni.
Western Washington University (WWU) is the northernmost university in the contiguous United States and is frequently ranked as one of the best public universities in the West. The university’s Department of Design offers graduate students the opportunity to expand their skills holistically. Its website takes an interactive approach that helps inform and engage visitors.
What we like about Western Washington University Department of Design’s website:
Unique interaction opportunities: This school’s imaginative homepage hero allows users to move and position design imagery around the page with their mouse, perfectly reflecting their values and mission and engaging prospective students.
Specific CTAs: They bring the impact of donations to life by including images and details of what users’ money goes towards under their “Give” CTA, from a new Riso printer for their production lab to scholarships and field trips.
Casual vibe: The conversational and friendly tone of voice hooks users in and makes them want to read every last word of their content.
Kenyon is a small private liberal arts college based in Gambier, Ohio. Although Kenyon’s student population is a mere 1,660, its website’s unique and streamlined design puts it head and shoulders above many larger schools’ sites.
Why the Kenyon College website made the list:
Eye-catching hero image: The homepage takes a bold, minimalist approach, with a standout quote and a unique, compelling image of everyday campus life.
Dynamic event calendar: The site features an engaging and up-to-date event calendar showcasing campus initiatives, lectures, and other activities.
Student success: The rest of the site highlights current student and alumni accomplishments and stories, showcasing their successes and experiences at the college.
The Rhode Island School of Design (RISD) is one of the most prestigious fine arts schools in the United States. The school’s alumni website reflects its design-driven mission, showcasing unique and interactive elements that offer visual intrigue and engage visitors.
Here’s what’s exciting about the RISD Alumni website:
Animated microinteractions: The clever use of animation, including the news and events scroll in the middle of the page and the hashtag scroll at the bottom, adds interest and serves a clear and useful purpose.
Success stories: The website highlights alumni stories, showcasing their successes and experiences at the college.
Simple but effective branding: The stark black-and-white design maintains a streamlined look without feeling boring.
Building the Best College Website with Agency Help
Website design agencies like Kanopi can help you optimize your college website by organizing content in an intuitive and visually pleasing way. Our team of specialists also offers a website growth plan once your website launches to help you stay on track toward your goals.
User research and persona development: We study your audience to understand their needs, preferences, and interests. Services include stakeholder workshops, competitor analysis, content and user experience audits, and technical planning.
UX blueprint creation: Using personas, we map out your website’s content to help your users navigate your site more efficiently and achieve their goals.
Content strategy: Effectively telling your university’s story is key to driving audience engagement. We help refine your unique voice and style to captivate your audience with a compelling, unified message.
Website design and development: Our design and development services are focused on ensuring your website’s front-end look and back-end structure are optimized to support your goals. Our services are built to boost conversions through accessible, interactive design and high performance.
Ongoing support: We provide ongoing assistance to adapt your site to shifting audience needs and maintain security and high performance over time.
Working with Kanopi could give your university website redesign project the structure and expertise needed to be successful. Contact us if you want to take a continuous improvement approach to your college or university website.
Additional Resources
For more information on how to create the best college website, check out these additional resources:
Higher Ed Website Design: Tips and Trends. Keeping higher ed web design trends in mind is an effective way to meet your audience’s needs. Explore this year’s most important trends in this comprehensive guide.
The ROI of Great Website Design. Are you after more donations? More enrollment? More memberships? This post makes the case for a well-designed website.
If you want to refresh your nonprofit website, you’re in good company. According to the 2023 Nonprofit Tech for Good report, 68% of nonprofits have redesigned their websites in the past three years.
As nonprofits continue to prioritize mobile optimization, security, and engagement, we’re here to help you do the same. In this post, we’ve rounded up standout nonprofit websites to inspire your next refresh or rebrand, highlighting key design elements that create an impactful nonprofit online presence.
We’ve compiled the best nonprofit websites to inspire you as you tackle a refresh or rebrand, organized into these categories:
Stick around for tips on collaborating with a web development agency to build a site that empowers your nonprofit’s community. As you explore, consider how these website elements could enhance your own. After all, the best ideas are often inspired by what’s already working!
Best nonprofit website designs
The best nonprofit websitesoffer seamless UX and a stylish, professional, uniform design. Top sites have a content strategy that meets their users’ needs and considers how offline moments connect with online ones. They understand their users’ generational differences and provide a tailored UX that reflects this, with flexible giving options and coordinated online and print experiences.
With these qualities in mind, here are a few of the best nonprofit website designs and what makes them great. We’ve compiled a variety of designs, from more creative to more straightforward examples, to provide a full overview of the current state of nonprofit web design.
Girls Who Code seeks to close the gender gap in the technology industry by engaging and training girls in computer science and coding skills. They’ve served 450,000 girls through their variety of summer camps, clubs, and college prep programs.
What we like about Girls Who Code’s website design:
Girls Who Code’s inspiring mission statement takes center stage on their homepage hero, supported with imagery of the girls they represent.
Their site includes vibrant and bold colors that offer strong color contrast.
Their dedicated donation page provides a simple FAQ explaining how donations are spent and how to sponsor Girls Who Code if you’re a company.
Based in Toronto, the Equal Opportunity Community Initiative (EOCI) is committed to improving the lives of vulnerable children, providing them an equal opportunity to reach their full potential. They prioritize five pillars to reach these goals: education, training, community, social mobility, and essential life needs.
Why Equal Opportunity Community Initiative’s web design stands out:
The EOCI’s branded online donation page provides a seamless giving experience.
They have quick links to essential resources, providing different users with a clear starting point as they begin their journey through the site.
Engaging photos of the organization in action on the homepage helps visually tell the success story of the EOCI.
The 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.
This nonprofit website features an accessibility menu that allows users to adjust the contrast, highlight links, increase text spacing, increase font size, and more.
The site offers a built-in screen reader, which reads text aloud from the website. This enhances the browsing experience without people needing to rely on external software.
Feeding America is a hunger-relief organization dedicated to providing greater food security across the U.S. Their programs include mobile pantries, disaster food assistance, SNAP application assistance, and more.
Why Feeding America’s accessible web design stands out:
Feeding America’s website offers straightforward user journeys for donors, volunteers, and advocates. For instance, when you click “Take Action” in the menu, there are separate options to volunteer, donate meals, and host a food drive.
Large font sizes and high contrast increase the site’s readability while drawing attention to the most important content.
The navigation bar offers a clear and intuitive layout, making it easier for users with cognitive or motor impairments to find relevant information. The minimalistic design reduces cognitive load, while large, labeled buttons provide clear paths for actions.
The Humane League seeks to end the abuse of animals raised for food production. The organization runs advocacy campaigns to encourage the world’s largest food companies to adopt more humane animal welfare policies.
What’s excellent about The Humane League’s accessible web design:
The website is accessible across different devices, improving usability for all users regardless of their screen size.
The Humane League offers one-off and monthly donations directly from their homepage hero through a CTA that weaves potential donors into their success story.
The website’s navigation menu is consolidated into categories to avoid visually or mentally overstimulating users.
The American Heart Association (AHA) prioritizes fighting heart disease and stroke through research and public education. The AHA website serves as an online donation hub as well as a valuable educational resource for learning more about various health topics.
What’s great about the American Heart Association’s accessible web design:
The AHA uses distinct colors that meet contrast standards, making the content on their site accessible to everyone.
Their powerful CTA ‘Help Stop the Silent Killer’ firmly plants prospective donors into the story they tell.
They provide flexible ways to donate, including information on their donation page about how the AHA uses donors’ money to address COVID-19.
The National Council for the Blind in Ireland (NCBI) provides support and services to the vision-impaired. Their Bookshare website offers the largest accessible digital library in Ireland.
Why The National Council for the Blind in Ireland’s accessible web design makes an impact:
Kanopi is proud to partner with NCBI, creating an accessible site that’s AAA compliant with high contrast, large text, and font zoom.
Fun graphics, bright colors, and relatable student pictures keep visitors engaged.
There are straightforward user journeys for students, leisure readers, and educators that begin from the homepage.
Best nonprofit websites for calls to action
The best nonprofit websites know who their users are and what motivates them. Successful nonprofit marketing teams ask questions and research how their donors, constituents, and volunteers behaviors to identify changing trends. Then, they use calls to action (CTAs) and other simple navigation elements that make it easier for visitors to browse and find what they’re looking for.
Here are a few nonprofit websites that leverage CTAs impactfully.
Mercy Corps is a global humanitarian organization that works to alleviate suffering, poverty, and oppression in some of the world’s most vulnerable communities. They provide emergency relief in the wake of disaster, manage the effects of climate change and conflict, and create sustainable solutions in more than 40 countries.
Why Mercy Corps’ website design stands out:
The website features strategically placed donation buttons, often highlighted in a contrasting color to make them stand out. A “Donate Now” button is always visible in the navigation menu, enabling visitors to take action at any point in their browsing experience.
The site uses emotional imagery, videos, and personal stories from people impacted by Mercy Corps’ work. These stories create a deep emotional connection with visitors, motivating them to act, whether by donating, volunteering, or spreading awareness.
The site features compelling landing pages, like a matching gift page encouraging visitors to double their impact through a simple process. It provides a convenient search tool for donors to check if their company participates, motivating them to take immediate action through workplace giving.
Founded in 1976 in Americus, Georgia, Habitat for Humanity is a nationwide nonprofit that helps individuals build, refurbish, or preserve homes. New homeowners contribute a certain amount of “sweat equity” to help build their new house in exchange for an affordable mortgage.
Why Habitat for Humanity‘s CTAs stands out:
Habitat for Humanity engages site visitors with an uplifting story of building strength, stability, and self-reliance through shelter.
Multiple “Donate Now” CTAs encourage donors to act right off the homepage.
A static menu with quick links to their Facebook, Twitter, YouTube, Pinterest, and Instagram accounts alongside descriptive search functionality and a prominent donate button make it easy to connect with them.
St. Jude Children’s Research Hospital seeks to research, treat, and ultimately defeat childhood cancer and other life-threatening pediatric diseases. They cover the costs of treatment, travel, housing, and food for families with children facing childhood cancer.
Why St. Jude Children’s Research Hospital’s CTAs make an impact:
Users can translate St. Jude Children’s Research Hospital’s website into Spanish, making their site accessible to more people with just one click.
Their drop-down search menu, listed by the diseases they treat, is built with their users in mind and helps site visitors get the information they need quickly.
They weave donors into their success stories and explain the impact of giving simply and concisely.
The Michael J. Fox Foundation is dedicated to finding a cure for Parkinson’s disease using research and the development of advanced therapies. They operate without an endowment and seek to act as quickly as possible to direct funding toward vital research and projects.
What we like about The Michael J. Fox Foundation for Parkinson’s Research’s web design:
The Michael J. Fox Foundation tells a hopeful story, inviting users to ‘Celebrate Science’ from their homepage hero CTA.
Their content focuses on their donors and the difference they make through their support throughout their whole site.
Moving and empowering quotes from people with Parkinson’s explain the importance of research and how each person’s action affects millions of people.
The Leukemia & Lymphoma Society (LLS) seeks to eliminate blood cancers through pioneering research, education, and advocacy. They work toward this mission by offering support for patients, caregivers, researchers, and healthcare professionals.
Here’s what caught our eye on the LLS website:
The LLS homepage provides helpful resources for patients and caregivers, contributing to a stress-free browsing environment.
There are multiple ways to stay in touch via social media and email, allowing supporters to connect via their preferred platform.
The homepage highlights prominent news articles and other updates to help keep visitors informed.
The Glacier National Park Conservancy is the official fundraising partner of Glacier National Park in Montana. It supports the park’s preservation, education, and research efforts through donations, grants, special projects, programs, and volunteer involvement. The Conservancy works to ensure that Glacier National Park remains a protected, vibrant natural resource for future generations.
What we love about Glacier Conservancy’s website design:
Glacier Conservancy’s website features a variety of ways to give, calling on supporters to donate, purchase items in an online store, submit matching gift requests, buy a special license plate from the DMV, and take other actions.
The organization uses Google Ads, making it incredibly easy to find the site. Through the Google Ad Grant program, they run ads that drive purchases from their online store, targeting keywords like “Glacier National Park Campgrounds” and “Glacier National Park Tours” to funnel visitors toward taking action. For reference, Getting Attention has an example of one of their ads, including performance results.
The site’s branding represents Glacier National Park well, with images that showcase the park’s scenery and animals. It also uses colors associated with the outdoors, including glacier blue, grassy green, and sunset burnt orange.
Founded by former U.S. Vice President Al Gore, the Climate Reality Project is another education and advocacy organization working to mitigate climate change. The organization’s signature program is a leadership training corps that equips leaders fighting for climate change solutions with greater resources and knowledge.
Here’s why The Climate Reality Project is one of the best nonprofit websites:
Bold calls to action on the homepage inspire visitors to get involved in fighting climate change, encouraging users to sign up for the organization’s email newsletter.
User-friendly, concise educational resources help communicate climate change issues in an easily digestible way.
A streamlined online donation page that allows donors to show their support in just a few clicks.
Girl Scouts invites girls across America to participate in building life skills such as leadership, entrepreneurship, and active citizenship. Typical Girl Scouts activities include camping, volunteering, earning badges, and, of course, selling cookies.
What stands out about the Girl Scouts’ web design:
Engaging, informative images show girls participating in rewarding activities, bringing the Girl Scouts’ mission to life.
The full site is available in Spanish, increasing accessibility.
Clear user pathways provide resources for all involved, including the Girl Scouts themselves, volunteers, and parents and families.
The American Society for the Prevention of Cruelty to Animals (ASPCA) is a well-known animal welfare organization founded to be a voice for vulnerable animals. The organization’s main activities include helping reduce overwhelming shelter intake rates, relocating animals to safe homes, and providing spay/neuter services.
Here’s what caught our attention on the ASPCA website:
The organization is known for its heart-tugging commercials, and its website is no different. Compelling photos of animals in need engage visitors right when they land on the homepage.
The large DONATE button in the top right corner catches potential donors’ attention and stays visible no matter where you navigate to on the site.
The “Team ASPCA” fundraising page provides detailed descriptions for different fundraising opportunities that supporters can participate in, from birthday campaigns to hosting a fundraising event.
Supporters want to be part of a winning team. Focusing on successes allows the user to envision how their time and donations will make a difference. Stories of building others up both resonate and empower donors to join your nonprofit’s ongoing journey.
Take inspiration from the following nonprofit websites that excel at compelling storytelling.
Doctors Without Borders is an international non-governmental organization dedicated to delivering medical aid where it’s most needed, typically in war zones or countries impacted by disease. The organization’s commitment to independence and impartiality allows its volunteers to take action in instances where politics or bureaucracy might slow other humanitarian response efforts.
What’s excellent about the Doctors Without Borders web storytelling:
Doctors Without Borders keeps visitors informed with up-to-date news and events, including a link to a live online discussion about mental health from their homepage hero.
An engaging static infographic on where donor money goes appears in the footer on every page of their site.
Donor-centric language puts supporters at the heart of the mission. One example is, “Your gift helps us provide medical humanitarian aid for hundreds of thousands of people each year.”
Ronald McDonald House Charities accommodate families with children undergoing medical procedures or treatments, allowing them to stay in RMHC lodgings for free. This helps save families money by letting them avoid hotel costs, while also providing a little peace of mind while their children are undergoing treatment.
Why the Ronald McDonald House digital storytelling makes an impact:
RMHC’s powerful hero image invites donors into the world of someone directly impacted by donor support, with a compelling CTA to read their story.
Their red donate button with a heart icon catches the attention of site visitors.
The RMHC shares an engaging video filled with real families on their “Get Involved” page to empower volunteers.
The Salvation Army is a Christian organization with a mission to combat homelessness and poverty and contribute to disaster relief. Supporters can help out by donating money or goods, hosting a fundraiser, or volunteering.
How the Salvation Army USA online stories makes an impact:
Their homepage hero with a compelling CTA makes it clear why people should act now and how.
Their site includes powerful films, making it possible for site visitors to hear directly from people whose lives are changed for the better through the Salvation Army.
The main services are broken down clearly on the homepage as well as a straightforward explanation of how the Salvation Army works to meet local needs.
The Conservation Fund seeks to protect America’s critical land and water through conservation and mitigation solutions. The organization is backed by a strong network of regional experts working to implement community-level change.
What we like about The Conservation Fund’s web stories:
The Conservation Fund puts its partners and supporters at the heart of their impact story.
They use engaging video stories to help users visualize what their donations go toward.
An interactive map shows the locations across all 50 states where the Conservation Fund has launched effective projects.
The Nature Conservancy seeks to tackle climate change, protect water and land resources, and build healthier communities to protect the global environment. They have lofty goals to achieve by 2030, including reducing CO2 emissions, helping 100 million people who are at risk of being impacted by severe climate change, and conserving 10 billion acres of ocean.
Why The Nature Conservancy’s digital storytelling stands out:
The Nature Conservancy uses inspiring imagery of animals and beautiful landscapes to emotionally connect users with nature and wildlife.
Using geolocation, the site recognizes where a user currently is and presents specific projects they’ve completed in that person’s state.
The Nature Conservancy features individual narratives about how conservation efforts have improved communities and ecosystems.
Alex’s Lemonade Stand helps fund research, spread awareness, and support families with the goal of curing childhood cancer. Since 2005, the organization has funded over 1,000 grants at 150 institutions. Alex’s Lemonade Stand also empowers kids to host their own lemonade stand fundraisers within their communities. Kids can host their own lemonade stand in their community, with the proceeds going to research projects and family support.
These features make the Alex’s Lemonade Stand web design stand out:
Their homepage includes a “Featured Hero” which highlights a beneficiary, includes a welcoming photo, and links to their unique story. When someone clicks through to the full story, the landing page also includes links to other beneficiaries’ stories, so readers can keep exploring.
The bold, playful colors and branding catch the eye while also appealing to the organization’s kid-friendly mission.
Alex’s Lemonade Stand regularly updates its site and blog with heartfelt stories, offering a behind-the-scenes look at its impact on childhood cancer. Each post highlights the personal journeys of children and families, the organization’s fundraising efforts, and the research advancements it funds.
Most creative nonprofit websites
Top nonprofit websites balance creativity with a simple user experience and uniform branding. Creativity doesn’t just have to mean creative design — it can encompass creative donation opportunities, online experiences, and other elements that show visitors something unexpected.
Explore the following creative nonprofit sites and note how they take a unique approach to audience engagement.
The World Wildlife Fund (WWF) is an international conservation organization dedicated to reducing the negative impact of human activities on the environment. The WWF is the world’s largest wildlife and conservation organization, working in over 100 countries.
What we like about the World Wildlife Fund’s web design:
WWF offers a variety of resources for teachers to use in their classrooms to teach students about different animals and how to respect the environment. You can even sign up for a newsletter to receive regular resources.
This nonprofit website features interactive eCards that supporters can send to their friends and family to show they care about wildlife and the Earth.
The site includes interactive maps, quizzes, and free wildlife wallpapers to engage visitors.
Wounded Warriors Family Support (WWFS) is a veteran-run charity that provides support to the families of wounded, injured, or fallen members of the U.S. military. For two decades, their mission has been to enhance the quality of life for military families by offering assistance and resources to help them cope with the emotional, physical, and financial challenges they face.
The site prominently features awards, recognitions, and partnerships, showcasing the organization’s credibility and collaborations with other nonprofits and veteran groups.
WWFS offers a range of resources, such as information on respite care, family retreats, and mobility assistance programs. The website provides all the necessary details for families in need, including eligibility criteria, application processes, and timelines.
Covenant House provides support and housing for youths experiencing homelessness or trafficking. The organization offers a “continuum of care,” from street and van outreach to crisis care and long-term support.
Why the Covenant House website is so inspiring:
Kanopi won two awards for our work on the Covenant website, helping this digital hub shine with updated integrations and donation processes, as well as an improved storytelling approach.
The homepage offers multiple opportunities to get involved, from donating to participating in a Sleep Out event
Their “Meet Our Kids” page allows children impacted by homelessness to share their own stories.
Located in Memphis, Tennessee, the Memphis Zoo is home to over 3,500 animals, 500 species, and 19 exhibits. The zoo is supported by ticket sales, a membership program, direct donations, and corporate sponsorships.
Our favorite elements of the Memphis Zoo website include:
Live animal cams turn the website into an engaging, interactive digital hub, rather than a static online experience.
A detailed donation page offers donors greater flexibility with descriptions of different types of giving supporters can participate in.
High-quality images of animals and zoo visitors provide a professional, immersive browsing experience.
The Malala Fund helps girls pursue secondary education worldwide. The organization supports education advocates and activists, bolstering their work and connecting them to a global network that can provide support and professional development.
Here’s why the Malala Fund made our best nonprofit websites list:
The engaging, eye-catching homepage video brings the organization’s mission to life by showing the people it works with (which would be even better if the video were more accessible, with a pause or hide functionality).
Compelling statistics showcase the extent of education and gender inequality in each country the Malala Fund operates.
The website achieves a sleek look by making use of a mix of white space and pops of bright color.
The Refugee and Immigrant Center for Education and Legal Services (RAICES) works to support immigrants and refugees by providing free and low-cost legal services to families and children in detention. The organization also offers social services such as resettlement assistance, transit support, and more.
What we like about the RAICES website:
The striking branding incorporates visually-appealing colors and font choices.
There are many easily-accessible resources for refugees and immigrants, from removal defense services to DACA renewals.
A self-service portal allows donors to take control of their engagement by updating their personal information and contributions whenever they want.
The END Fund is a nonprofit devoted to mobilizing resources to address neglected tropic diseases. The organization uses donations to fund much-needed treatments. Their website places a major focus on their impact, with plenty of statistics related to their cause and programs.
Unique features of the END Fund website include:
The site places an impressive focus on transparency and accountability, with a large and prominent annual report CTA on the homepage.
The homepage clearly lays out the issue the organization addresses, giving visitors a solid understanding of the problem before diving into ways to help.
The website highlights three funds for supporters to donate to, providing more flexibility in allowing donors to choose campaigns that speak to their passions.
Empower Your Donors with an Optimized Nonprofit Website
As a nonprofit marketing professional, you might have plenty of creative and innovative web design ideas buzzing around in your head, but no clear picture of how to implement those ideas. That’s why working with a web design and development agency is often the best way for nonprofits to fully optimize their websites.
Web design agencies like Kanopi can help manage your website redesign process, using their years of experience, best practices, and visitor research to guide the way. Kanopi will support your nonprofit website development and design from start to finish, offering services such as:
User research
Content strategy
Website design and development
Ongoing support
Plus, working with Kanopi allows you to adopt a continuous improvement approach for your website, keeping it updated and effective as best practices evolve. We’ll ensure your website is positioned for long-term growth and designed to help achieve your goals, whether that’s growing your advocacy efforts or increasing your online donor audience.
Looking for a few additional resources to help strategize your web design approach? Check out these guides and resources:
Creating a Digital Strategy for Nonprofits – Made Simple. A digital strategy is an action plan that helps you reach your fundraising goals using online platforms. Build a better nonprofit digital strategy with the help of this guide.
What Is A Nonprofit Technology Assessment? Not seeing a positive return on investment with your organization’s technology solutions? Find out how a technology assessment can help.
Webinar: Managing Content in WordPress. Many nonprofits choose WordPress to manage their content. This webinar offers tips and best practices for accessibility, SEO, landing pages, and more.
For people facing medical issues, quickly finding the right healthcare provider is essential. Increasingly, patients are browsing hospital websites to find the information they need. With 82% of patients using search engines to find a healthcare provider, hospital websites have become essential to the patient journey.
As a result, your hospital needs to offer a robust, user-friendly hospital website design that exceeds patient expectations. This guide will explore how to optimize your website design through the following sections:
Here, you can gather inspiration and key insights for your hospital website build or refresh project.
What is the hospital website user journey?
The first step of designing an effective, engaging hospital website is to understand how your website fits into the overall patient experience. With the right strategies, your website can turn casual internet visitors into long-term, loyal patients of your healthcare facility. This is best illustrated through the steps of the hospital website user journey:
Awareness: Users discover your website through a Google search, social media post, recommendation from a family member or friend, referral from another website, etc.
Research: Visitors browse your website to understand your offerings, including your specialties, healthcare professionals on staff, appointment booking process, and other services and resources.
Decision: Users determine whether to become patients and schedule an appointment. This will depend on whether your website answers their questions and offers a convenient, simple booking process.
Empowerment: Your hospital empowers patients to take control of their health through updated patient records, clear next actions, and ongoing two-way communications between patients and healthcare professionals.
Retention: Patients decide whether to remain at your healthcare organization or leave for another institution. The online experience you offer them, such as the patient portal and online payment process, plays into their decision.
As you can see, your hospital website plays a significant role in a patient’s perception of your institution and their satisfaction with their care. Your job is to facilitate each patient’s journey to make it as easy as possible for them to find the services and resources they need.
Put yourself in your patients’ shoes: When using a hospital website, what features, resources, and design elements would you expect to see?
94% of website first impressions are based on design, and 61% of website users will go to another website if they don’t find what they’re looking for within about five seconds. That means you have limited time to capture your audience’s attention and help them complete their intended actions.
To provide a positive experience for your community and encourage retention, we recommend taking a patient-first approach to healthcare web design. To do so, keep in mind the following things visitors want to be able to accomplish through your website.
Users want to:
Therefore, you should:
Find information quickly.
Avoid popup ads.
Use card design or content grids to make all homepage information immediately visible. Avoid carousels, which can lead to visitors missing some crucial information.
Limit multi-level menus to a single tier for each main category. This avoids overwhelming users with too many menu options.
Use your website without facing accessibility barriers.
Don’t use animations or auto-playing videos—they can be distracting, slow down performance, and are inaccessible for some audiences.
Use sufficient color contrast. The WCAG recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Check your website’s contrast with WebAim’s free Contrast Checker.
Access simple, actionable next steps relevant to their needs.
Create distinct pathways for each primary user group, such as current patients, new patients, donors, healthcare professionals, etc. Use calls to action (CTAs) that speak to different user needs to help visitors navigate your site.
Design your website around your users’ needs by keeping patient-centered content at the forefront of your site and content intended for healthcare professionals in a lesser position.
Include just a handful of homepage buttons/calls to action (CTAs) to keep the next actions straightforward.
See proof of your hospital’s credibility.
Use authentic, unposed images—not stock photos.
Include credentials in your healthcare professional directory, including educational background, certifications, awards, etc.
Now that you better understand what your audience wants to see from your hospital website, let’s explore the specific features your site should have to fulfill their needs. Successful hospital websites have the following elements:
Information about location, parking, and other logistics
Security features for sensitive information (strong password requirements, two-factor authentication, etc.)
Insurance information
What do these features look like in action? Read on to discover top hospital website design examples to see how leading hospitals use these elements to engage and serve their communities effectively.
Top examples of effective hospital web design
We’ve rounded up top hospital website design examples, along with information about what makes each example so successful. Take your time exploring each website to gather inspiration for your hospital’s website design.
Kanopi worked with UCSF to organize and reinvigorate their website, identifying user personas and reformatting the site for a more intuitive user experience.
Micro-interactions, transition animations, and soft shapes add visual intrigue without distracting or overwhelming users.
Imagery is focused on showing real people, adding authenticity and relatability to the site.
The homepage buttons saying “Find a doctor,” “Appointments and referrals,” and “View our treatments” make it easy for patients to find what they’re looking for.
A simple internal search function offers a convenient way to research conditions and treatments.
The site is available in multiple languages, making it accessible to a wider audience.
Privacy incidents are highlighted directly on the homepage, empowering patients to understand potential threats to their personal data.
Treatment options are arranged by age, making it easier for visitors to find relevant information.
The hospital offers convenient online mental health webinars and courses for community members to feel more empowered and take control of their mental health.
The hospital’s credentials are highlighted right on the homepage: “#1 in California and Los Angeles, ‘Best Hospitals’ National Honor Roll, 35 consecutive years”
Users can translate the website into 10 different languages.
Visitors can search by location, provider, medical services, and clinical trials to find the practice that’s right for them.
The homepage CTA speaks directly to patients who may feel a sense of urgency, saying “When your illness or injury can’t wait, the choice is clear.”
The online Patient & Visitor Guide answers common patient FAQs to help visitors feel more comfortable with their stay.
The site highlights the hospital’s commitment to health equity, including information about its roadmap and initiatives to achieve health equity.
Work with Kanopi to optimize your hospital web design
A hospital web design and development project is a major undertaking, and you need an experienced developer on your side to create a finished product that exceeds your audience’s expectations. Kanopi Studios is a reliable healthcare web design partner that will help you create the effective hospital website your community deserves.
Our services include:
User and stakeholder research
User persona development and testing
Content audit and strategy
Healthcare website design focused on user-friendliness and accessibility
Website development and maintenance
Explore our recent healthcare projects to see how we take WordPress and Drupal websites from ideas to reality.
Wrapping Up
Remember: Investing in effective web design support upfront will help your organization achieve a high return on investment (ROI) for your project. It’s worth it to work with an expert who can guide the process from start to finish and implement best practices.
Looking for additional healthcare web design support? Start with these additional resources:
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.
