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.

Gutenberg blocks are becoming ever more popular — and have become more refined since its WordPress 5.0 release back in 2018. On the Drupal front, tools like Drupal’s Layout Paragraphs, Frontend Editing, and Layout Builder are bringing robust drag-and-drop editing to content creators.

(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.

7 Key Tactics to Drive Website Homepage Conversions

Posted on April 10, 2023May 9, 2023 by allison

How does your website conversion rate affect your business?

Your website conversion rate is the percentage of visitors who take specific actions on your site (e.g., sign up, download, purchase). Your website conversion rate affects revenue, customer acquisition cost, return on investment (ROI), and customer engagement and loyalty — some of the most critical factors determining your business’s long-term success.

So how do you create a great homepage? Let’s walk through 7 key strategies you can apply immediately to your homepage to improve conversion rates.

1. Understand your audience

Create meaningful connections with your customers by understanding who they are and what they want. You must understand their needs, goals, behaviors, and values. The best way to do that is by using quantitative and qualitative research methods and building personas.

Google Analytics: What are people coming to your site for? What pages are they landing on? How much time are they spending on the site? These questions can reveal valuable insights about how customers interact with your homepage — and where you might fall short.

User research: You can also learn a lot by analyzing user interaction with heat mapping. Better still, interview your audience directly about the problems they’re trying to solve, what pain points or frustrations they are experiencing while trying to complete their tasks, and what improvements they would like to see implemented.

Personas: After quantitative analysis and user research, you can create personas, which are fictional characters that represent your target audience. Ultimately, personas help prioritize content, design solutions, and user experience to meet better user needs. They also establish messaging that can be used across different channels — from social media to email marketing — to better communicate with customers.

Related read: How personas help with website design

2. Clear Value Proposition

Create a one-sentence description of why your company exists. It goes beyond the obvious — “we make great software” — to explain what makes your product special and unique.

The best value propositions have three characteristics:

They are specific: They use quantifiable metrics or measures (number of customers, dollars saved, etc.) to show how your product works for the customer.
They are unique: You should describe how your product differs from and is better than competitors’ offerings.
They tell a story about how customers will benefit from using your product or service.

Many websites with strong value propositions effectively communicate the benefits of their products or services to potential customers. Here are a few examples:

Grammarly – Great Writing, Simplified: The value proposition is specific and unique in helping users improve their writing skills by eliminating grammar errors. It also tells how using Grammarly can help users make a better personal and professional impression.

Grammarly's home page — Grammarly’s home page

Slack – Credibility and Productivity: Slack’s value proposition focuses heavily on the remote teams’ pain points by offering workplace communication and collaboration solutions. They also tell a story about how using Slack can help users stay connected and productive no matter where they are.

Uber – Offering Convenience: Uber’s value proposition centers on providing a convenient, reliable, affordable transportation service through a user-friendly mobile application. They target two distinct audiences with different value propositions: passengers and drivers.

3. Goal-Based Information Architecture

Information architecture (IA) is the structure that supports the organization of content and functionality on a website. It is how visitors navigate a site and find the information they’re looking for. It is not supposed to be a reflection of how your organization is structured; instead, information architecture aims to provide users with access to information in a way that makes sense to them.

High findability and discoverability results from a goal-based information architecture and well-designed navigation system. It reduces the number of unnecessary clicks by offering straightforward user journeys, which can increase customer satisfaction and loyalty.

As you think about building your site information architecture, keep these components in mind:

Organization: How we categorize and structure information.
Labeling: How we represent information.
Navigation: How users browse or move through information.
Search: How users look for information.

4. Offer a More Engaging User Experience

Make sure your website is easy to use, engaging, and relevant. Here are some tips to help you do that:

Include search functionality: Searching is one of the most popular and efficient ways to navigate online. So help your visitors find the information that interests them without having to click through multiple pages or scroll through lengthy content.
Create easy-to-scan web pages: Nowadays, people rarely read web pages word-for-word. Instead, they scan them to get the gist of what’s being said. It is especially true for users with low reading skills or who are in a hurry. To help with this, break up your content into digestible chunks that make sense and get your message across, and be strategic about how you use images to aid in understanding.
Offer live chat support: Live chat support allows visitors to contact someone from your organization immediately if they have questions about products or services before buying.

5. Improve Page Load Time

Speed is a significant factor in the success of a website. The faster your website loads, the more likely it is to convert your visitors into customers. If your site takes too long to load, people will leave and go somewhere else.

Images are often one of the biggest causes of slow-loading pages. Ensure you’re using the correct image format (JPEG or PNG) and compressing them as much as possible without losing quality. Also, don’t forget to check image dimensions — if they’re too large, they’ll slow down your site even more.
The content of your page is another major factor in its speed — especially if you’re using some plugin or lots of external resources, such as fonts. You should also make sure that both your CSS and JavaScript files are cached by browsers. You can add expired headers or move them to a CDN (Content Delivery Network).
Use loading progress indicators or skeleton screens for any action that takes longer than one second. Skeleton screens provide a blank version of the page into which information is gradually loaded. It creates the immediate sense that data is incrementally displayed on the screen and lets people have a great experience while waiting.

PageSpeed Insights by Google is an excellent tool for checking your site performance and getting recommendations for optimizations.

6. Design for Mobile Devices

Designing a mobile-friendly website is one of the critical things you can do to improve your conversion rate. While desktop computers are still the most common devices used to browse the Web, over 50% of all online searches happen on mobile devices. Mobile users also make more purchases on their phones and tablets than desktops (which means that your forms should be easy to use as well).

Here are some helpful tips for designing for the small screen:

Make your site mobile-friendly and responsive: A mobile-friendly website displays correctly on any device — including smartphones, tablets, and desktop computers — without requiring users to scroll horizontally or zoom to view content on their screens. Responsive design adjusts the layout of a page depending on whether someone is viewing it on a mobile device or desktop computer.
Reduce Clutter: Mobile screens are smaller than desktops — so it’s important to reduce clutter and focus on the most critical information. You can remove unnecessary graphics and text and minimize content that isn’t crucial to the user’s primary task.
Minimize user input: Reduce the amount of information required from users. Limit forms to only those essential fields, allowing users to submit data without entering it manually and taking advantage of touch controls.
Keep Mobile Navigation Simple: Refine navigation to be discoverable, accessible on mobile, and easy for users to explore and complete all primary tasks without explanation. Navigation should always be available, not just when we anticipate that the user needs it. Ensure the labels are clear and concise, and all links are visually distinct to make them clear when users have activated them.

7. Craft strong call-to-action (CTA)

A strong CTA is the most crucial part of your homepage. It should be clear and compelling but not pushy or salesy. It should also take visitors to a page that matches their intent — one that’s relevant to their interests and needs.

It’s tempting to think of your homepage as an opportunity to get people excited about what you do but remember why they’re there first: because they want something from you. The best CTAs are specific and measurable (for example, “sign up for our newsletter”) rather than vague (“learn more”). If visitors need to know what they’ll get from signing up for something, there’s no reason for them to do it!

A good CTA has three key elements:

Clear: It’s clear what visitors should do when they click the button (e.g., sign up for your newsletter).
Compelling: The button should inspire visitors to take action, not just give them an option. An effective CTA will lead people through the funnel and get them closer to conversion than a weak one.
Concise: Your CTA needs to be short enough that it doesn’t distract from the rest of your content but long enough that it still feels like an actionable step for visitors.

Start converting!

This suggestions list, while extensive, is not exhaustive. But by following these essential strategies and keeping them in mind when developing a website, you will be able to create a powerful and effective homepage that is useful for users and drive conversions that result in loyal customers and fantastic ROI.

Want to learn more about how you can leverage your website to generate demand and drive conversions? Contact us, and we’ll guide you through these strategic processes.

Goodbye Universal Analytics. Hello, Google Analytics 4 (GA4)!

Posted on March 8, 2023November 13, 2024 by allison

At Kanopi, we are supporters of making data-driven decisions. For many, Google Analytics has long been the gold standard for tracking activity on websites — and while GA is here to stay, you will want to prepare now for the upcoming end of its Universal Analytics (UA) by moving to its latest platform, GA4.

To be clear, this is not just an upgrade of analytics, but rather a new platform and way of modeling data.

GA4 is built to focus on measuring website and mobile app interactions, known as events. This is important as it provides deeper insights into the actions people take on a website, not just the visit and what pages they viewed.

As you continue to dig into your business or organizational goals for 2023, being ready to rely solely on GA4 data in the latter half of the year will be critical for ensuring you can report on and measure your website’s successes (and note where it has room for improvement, too) in relation to your goals for the year.

If you haven’t already, we recommend that at the very least you set up a GA4 property for your site with standard settings to collect basic data like pageviews, file downloads, and video views. For the better half of 2023, you can have GA4 run alongside UA, before UA stops collecting data after July 1, 2023.

Out-of-the-box GA4 reports won’t have everything you are used to in UA (especially if you have a robust tracking implementation in UA) but if you set up a GA4 property now, this will give you the space to familiarize yourself with the new analytics setup while you have the safety-net of UA still running and that data available for your current reporting needs.

As with UA, tracking and configuration in GA4 cannot be applied retroactively.

So, we recommend getting started on this now even if you’re in the process of refreshing your website design or rebuilding on a new CMS. That way you have the data from Day 1 of the launch of your new site.

What kind of reports are available with GA4?

Before we get too far ahead of ourselves, it is helpful to know that some terminology has changed. For example, in UA you set up Goals to track actions people take, like making a purchase or filling out a lead form. But in GA4, you will want to set up Conversions to track these valuable actions.

GA4 breaks the reports down into two broad categories: Lifecycle and User. The User Report has a lot of the same information that can be found in Universal Analytics, such as new and returning user metrics and trends. A major change is that GA4 includes user acquisition dimensions to show you more details about how people originally found your website as well as new retention metrics. Overall, Google Analytics 4 reports allow you to get into more granular detail.

The Funnel or Path Exploration reports in GA4 show pages and paths to conversion that take events and page interactions into account: not just visits to a web page, but what people do on those pages.

Overall, GA4 offers fewer predefined reports, but a greater ability to create your own reports based on your specific needs. Expect to spend some time getting familiar with the new interface to find the equivalent reports you’re used to in Universal Analytics. For example, if you are interested in reports on landing and exit pages, you will need to first define those as events in GA4 to then track them effectively in a report.

So what’s the big deal with this new platform? Can I just ignore it and stay on UA?

The Universal Analytics (GA3) data model is based on sessions and pageviews. The GA4 data model is based on events and parameters. Both can collect, process, and report the same data, but they portray it differently.

When you move to the new platform, you will see several benefits in the areas of:

Data Streams
- GA4 can work across platforms, tracking data in websites and applications you own. It will recognize the same user that visits an e-commerce app to research some products and add to their cart, but then later completes the purchase via an Internet browser on desktop or mobile device.
Tracking
- GA4 gives brands more control over how they collect, process, and store the data of their users. GA4 doesn’t log or store IP addresses. This allows your website to better respect the privacy of visitors without losing the ability to track them all together.
- While GA4 does use cookies, it also has the capability to work without cookies. To counter the missing cookies and data, GA4 uses machine learning and Artificial Intelligence to fill the gaps.
Event/Conversion Based
- GA4 doesn’t require cookies and can measure insights, due to using an event-based data model.
Exploration and Reporting
- GA4 uses data-driven attribution to assign credit to more than just the last click, allowing marketers and website owners to see how various initiatives influence conversions.

Accordingly, learning the event-based model will require a mindset shift. Doing so now will give you a headstart in thinking differently about how you review and benchmark your analytics insights.

And no, you can not just ignore GA4 if you want to keep using Google Analytics. UA will stop collecting data in July 2023. There is no automated conversion from UA to GA4; because GA4 is a new platform, you need to set it up manually for any website currently using UA.

If you choose to wait until after July 2023 to set up GA4, once December 2023 rolls around you’ll only have a few months’ worth of historical data to work with, as you will no longer be able to access UA.

Some quick tips to get started with Google Analytics 4.

To help you get started with GA4, we have created a 4-step checklist:

Set up GA4 with standard settings
1. For example, pageviews, file downloads, and video views.
Evaluate the current Google Analytics UA to analyze events and trackers needed for UA to GA4
1. This is a great opportunity to rethink data collection and remove any legacy tracking that didn’t ever get used for anything.
Implement the work identified in Step 2, above.
Continue with training and ongoing maintenance.
1. For example, building custom events can take some practice and a bit of technical know-how. And as more resources about GA4 are made available, you may wish to finetune what reports you have set up.

Setting up GA4 now is critical to measuring the value and success of your website throughout 2023 and will better help you in identifying future opportunities for the growth of your business or organization.

Using Gutenberg to Elevate the WordPress Editing Experience

Posted on January 5, 2023November 13, 2024 by faye

“Gutenberg” is the name given to the movable block editor adopted by WordPress back in 2018, harkening back to Johannes Gutenberg who invented one of the early European movable-type printing presses. Reusable individual letters that could be moved, and reused, eventually lead to typography and fonts as we know them.

Of course, nowadays we have printing technology that Johannes could not have even imagined, let alone believe that an entire online editing experience would be named after him.

But what exactly is Gutenberg?

Most of us are familiar with editing experiences, such as typing in an email, Microsoft Word, or Google Docs. These experiences are mostly similar; you have a blank space to type and buttons for alignment, styles, fonts, sizes, etc. This has been a common website editing interface for decades, but it is both creatively and logistically restricting.

If you wanted to move a section from one location to another, you’d have to copy and paste it, then delete the original. Trying to completely rearrange your content would be frustrating and time consuming. Or if you wanted some snappy responsive columns, you would have to switch to view the document code and write HTML and CSS.

Gutenberg is WordPress’s native “drag and drop” site builder. It solves those problems by allowing you to create your content in blocks designed for the specific content you’re using. There are over 90 blocks to choose from. You can play around with all of these options on the Gutenberg demo.

This flexibility allows content editors to populate their website with more complex content, and then shuffle it around within the layout. In fact, there are many themes that lean so heavily on Gutenberg that you wouldn’t need a developer at all. With the introduction of Full Site Editing, nearly anyone could put together a working website that’s beautiful too.

Why use a web developer at all?

While there are many themes that do leverage everything Gutenberg has to offer (those 90+ blocks), that’s not the case for most of them. And for existing sites with legacy themes, there is little chance that they are able to take advantage of this newer technology. Out-of-the-box websites are useful and serve a purpose but when you need custom design, structure, and functionality, you need to call in professionals.

Another struggle with drag-and-drop sites is the global element. If you have 30 headings on your website and decide you want to change them all from green to blue, you’d need to go through and edit the color settings on all 30 headings one by one. While there are some global elements, the vast majority of your page content will require manual editing. This can be incredibly time-consuming.

Native Gutenberg blocks can be unexpectedly limiting. For example, if you desire rounded borders on all media but the block you’re using doesn’t have support for a border-radius, you’d need a developer to create and apply custom classes. Keep going down that path and suddenly you can have a site full of custom classes and blocks that never look the same from one to another. This can be an editing nightmare and require excess documentation to keep it all straight. Suddenly that easy drag-and-drop editing experience requires a higher level of skill.

There’s a better way to customize.

Kanopi approaches Gutenberg blocks from the perspective of creating consistent and branded content. One of the big advantages of Gutenberg is that we can create new blocks and apply our own styles and structure. This allows us to create blocks that can hold and display any type of content within a defined set of rules. Instead of pouring budget into styling 90+ blocks (and their hundreds of combinations) that may never be needed, our team focuses on creating custom content solutions for our clients.

This “best of both worlds” approach lets site editors continue to use the ease of Gutenberg’s drag-and-drop experience, while also creating consistent, branded content. As a website moves from its initial build into support, these blocks can be expanded upon and updated globally (and thoughtfully). Even older sites without any Gutenberg usage can be configured to allow for this type of block expansion without disrupting the existing content.

Gutenberg is here to stay.

It’s clear that WordPress is leaning in on the use of Gutenberg and the Full Site Editing implemented in the past year. Meanwhile, Advanced Custom Fields Pro (the preferred and recommended plugin for enhancing WordPress’s content management) is keeping pace to ensure custom block creation works seamlessly with every stride made. Whether using an out of the box theme, or having an agency custom building according to your organization’s needs, Gutenberg is a phenomenal solution with room to grow in many directions.

The Top 5 Content Strategy Trends for 2023

Posted on December 15, 2022March 2, 2023 by kanopi_admin

What does 2023 have in store when it comes to content strategy?

While trying to predict the future produces both pros and cons, we at Kanopi Studios have identified five successful strategic approaches that will help develop engaging, optimized website content.

Whether revisiting or refining your organization’s content, ensure your plan reflects rapidly evolving shifts in online behaviour and expectations.

From increased personalization and default accessibility to visual storytelling, interactive content, and strategic search engine optimization (SEO), let us walk you through how to stay ahead of the content strategy curve by developing a data-driven plan for your site’s content.

1. It’s personal.

With the rise of artificial intelligence (AI), it’s becoming easier for organizations to deliver personalized content. In 2023, we predict that more companies will use AI-powered tools to provide customized content experiences based on their users’ unique preferences and interests.

Embracing personalization can be as simple as using personal pronouns as you craft more conversational, readable content. On the more sophisticated and data-driven side of the scale, folks are personalizing chatbots based on user needs and providing personalized thanks yous to donors after they’ve supported the cause in some way.

People want and expect to be engaged directly, and this approach will become more common across all industry websites — from education and healthcare to nonprofits and tech.

Chatbot example of how Stetson University students can chat with site visitors. — Source: Stetson University

screenshot of video of a personalized story from the Children's Health website — Source: Thankview Personalized Video

2. Accessible by default.

Yes, the web by default is accessible in many ways. Still, organizations are taking the lead by ensuring the content found on their site is accessible to everyone, using the latest research and insight to redefine what a genuinely accessible website looks like.

Beyond optimal colour contrast and providing meaningful alt text, organizations have compelling data at their fingertips to help them build a content strategy with accessibility at its core.

Recent research from the UK government addresses how to design websites that require a lot of interaction with numerical content in a way that makes it easier for folks who struggle with numbers. This blog post explains it in great detail.

Website accessibility is baked into every phase of our projects here at Kanopi — from discovery, strategy and design to development and ongoing support. If you’re chomping at the bit to make your site more accessible, check out our five simple ways to improve your website’s content accessibility.

In addition to a largely undiagnosed population of people with dyscalculia, research shows that at least 20% of the population exhibits one or more types of neurodiversity. If you want your website to be available to the many, not the few, you don’t want to overlook this large group of folks.

Neurodiversity includes ADHD, dyslexia, and similar neurological capabilities. Ensuring all webpages on your site provide a clear and consistent content hierarchy and testing your content’s readability helps the greatest amount of people consume your site’s content, particularly people who are neurodivergent.

The use of subtitles, captions, and alt text is critical for helping neurodivergent folks engage with your content too. Focus on the following:

width between letters and numbers,
length of text across the page,
word count of paragraphs,
the font you’re using, and
font size.

While autoplay video can engage some people, make the controls to pause or stop moving or flashing content on your site easy to find and use as they can distract and interrupt task completion for many folks.

If your organization’s brand guidelines promote inaccessible font or colors, it may be time for refinement.

3. Visual Storytelling

With the continued rise of TikTok user numbers and other visually-led social platforms, people are getting used to consuming content that’s easy on the eyes.

Character Study: Trailer from Kenyon College on Vimeo.

It’s a primary driver for organizations that embrace visual storytelling as a way to capture their audience’s attention. In 2023, we predict many more organizations will use dynamic content formats, including infographics, slideshows, and videos, to tell their unique stories.

Not only do these types of content require less effort to consume, but they’re also more likely to be shared by users. A picture is worth a thousand words, as they say.

4. Interactive content

Interactive content is any type of content that requires folks to take action in order to consume it. In 2023, we expect to see more interactive content, such as quizzes, polls, and surveys. We’ll also see more and more micro-interactions across many optimized websites, which engage users with light interaction that enhances user experience (UX).

The purpose of offering micro-interactions with content is simple — you’re creating a moment that’s welcoming and engaging and, dare we say — human. For example, the WWF website takes many opportunities to offer users ways to interact with its content, from media to quizzes and moving elements.

This type of content is engaging and fun for users, making it more likely that they will stick around until the end. Plus, it provides valuable insights that can be used to improve future content strategy decisions. On the flip side, some of these interactions may not be accessible, so you need to weigh the balance of interaction vs accessibility.

5. Strategic SEO

Content marketing is a critical part of many organizations’ content strategies. And an essential aspect of content marketing is SEO. Ensure all of your site’s content is optimized so that search engines can find your web pages and show them to folks as they type their questions into Google’s search bar. Tools like Semrush make keyword research straightforward, helping you identify weak or missing keywords and keyphrases on your site.

Thinking strategically about SEO is key. As outlined by Adobe’s Communications Team in their content marketing trends of 2023, write for people first, followed by search engines. Search engines will be smarter and more sophisticated than ever next year. Focus on crafting high-quality content that’s valuable and relevant to your users, and your content will naturally move toward the coveted top of Google’s search engine results pages.

2023: Blending content with design

The widely respected content strategy director Rachel Lovinger explains just how vital an up-to-date content strategy is for the success of an organization’s web presence:

“Content strategy is to copywriting as information architecture is to design.”
Rachel Lovinger

Before you write a single sentence or film even ten seconds of video, get everyone on the same page with why you’re creating content in the first place and the unique story you have to tell. Get crystal clear with your organization’s voice and tone and what key messages should come across in your content.

Your content strategy acts as a blueprint for how to plan to create, modify, and evaluate the success of your site’s content. It also spells out how you’ll deliver content over time, known as content governance — essentially the who, what, where, and why of every piece of content you intend to publish.

Different pages from the First Tee website demonstrating a seamless content strategy across a website's pages. — Source: First Tee

With an agreed strategy in place, designers can hit the ground running, crafting a visual experience that blends words, imagery, illustrations, film, and more. If you’re keen to learn about 2023 design trends, take a look at our recent blog post on the topic. We also have a post about the 2023 development trends.

From refining user personas and performing content audits to creating content maps, and robust content strategies, Kanopi can help you figure out how to optimize your site’s content so that it delights users and keeps them coming back for more.

5 Simple Ways to Improve Website Content Accessibility

Posted on August 5, 2022August 5, 2022 by faye

Accessibility is a growing demand on the internet as our world shifts from in person to online in a variety of aspects. The pandemic has escalated that shift, and it’s becoming increasingly clear that all websites need to be accessible regardless of legal requirements.

While WCAG 2.1 compliant websites are coded following accessibility guidelines, it’s easy for a site to slip away from compliance through regular content entry. Or perhaps accessibility isn’t something that you’ve prioritized before and you’re just getting started on making improvements. Either way, here are five simple actions you can take right now to improve your website accessibility from a content perspective.

Review / Revise Acronyms & Abbreviations
Remove All Caps
Use Sequential Heading Structure
Alt Text
Descriptive Links

Review / Revise Acronyms & Abbreviations

Acronyms and abbreviations are common in a number of organizations and industries. What’s often overlooked is how those are interpreted by screen readers.

I once came across some website content where they were comparing Generation X to Generation Z, but they used the abbreviations “Gen. X” and “Gen. Y”. Screen readers will often try to expand an abbreviation for clarity. When I tested the content, I discovered it was being read as “General X” and “General Y”. So while the original intent was to save on space, the meaning was confusing to anyone using a screen reader.

Likewise, some acronyms can be troublesome. P.O.W. would be read as “Prisoner of War” while POW would be read as “pow!” like the comic book action. It’s a good idea to read aloud to yourself the content on your website, and consider the potential for misinterpretation by someone hearing rather than seeing it.

Remove All Caps

Whenever I think of all caps, I think of AmyJune Hineline, former Kanopian and winner of the 2021 Aaron Winborn Award (she really loves that being mentioned). She used to regularly remind us all of how all caps can be a common source of frustration and miscommunication with the hashtag #NOWTHATCHERISDEAD. AmyJune would then ask, “Who’s dead? Cher or Thatcher?”

Switching to all lowercase in this circumstance won’t help either. If you are looking for a way to make hashtags more readable, capitalize the first letter of each word (NowThatcherIsDead). It’s called Camel Case (or Pascal Case, depending on who you ask) and it improves readability considerably. For the record, I promised AmyJune that if I ever had a child I would name them Cher Thatcher so the original hashtag would still be true when they passed. Problem solved.

Of course we typically use spacing and punctuation in website content, which helps alleviate some confusion, and all caps are typically used as an easy way to identify something as a heading or to indicate additional importance. But due to the uniform shape that capital letters give words, they become more difficult to identify at a glance and therefore reduce readability. Using Title Case (Now Thatcher Is Dead) is considered easier to parse, both visually and cognitively.

Use Sequential Heading Structure

HTML headings are structured similarly to an essay outline. Your page starts with an “H1” and should only have one of these. This is the heading that tells search engines and users what the focus of the page is. This is typically the title of your page or blog post. The remaining heading values (H2 – H6) are used to identify the content hierarchy of the page.

Screen readers depend on headings to navigate a page, as users will typically bounce through the headings to find a section to read. If your page skips heading levels, or uses heading levels incorrectly, these users will not be able to correctly navigate your content.

H1 – Page Title
- H2 – Section Title
  - H3 – Subtitle
  - H3 – Subtitle
    - H4 – Subtitle
    - H4 – Subtitle
  - H3 – Subtitle
- H2 – Section Title
- H2 – Section Title
  - H3 – Subtitle
  - H3 – Subtitle
  - H3 – Subtitle

Alt Text

Alternative text, commonly known as the alt text, displays when an image link is broken and can’t be displayed. And it’s far more useful than you may realize. Search engines use alt text to further understand the context of your web page and so it’s also useful for SEO purposes. But even more important, alt text is what’s read aloud by a screen reader. For someone with low or no vision, this description helps them identify the content of an image without needing to see it.

Decorative images, such as swoops or waves or other abstract design elements don’t require alt text, but your average image does. But not all alt text is created equal. When describing a picture, consider the purpose of the image and the feeling it’s meant to convey. Identify what is important to understand from the context of the image and the content around it, then articulate that in the alt text. Remember, if it’s valuable enough to show to a sighted user, it’s worth describing to users of assistive technology.

Take a look at this image taken by the James Webb Telescope, uploaded by NASA. The alt text reads, “A large pink, speckled galaxy resembling a wheel with a small, inner oval, with dusty blue in between on the right. Two smaller spiral galaxies about the same size are to the left, all against a black background.” This accurately conveys the image content without being too wordy.

A large pink, speckled galaxy resembling a wheel with with a small, inner oval, with dusty blue in between on the right, with two smaller spiral galaxies about the same size to the left against a black background. — *Credits: NASA, ESA, CSA, STScI*, Source

Most CMS platforms offer the ability to easily add alt text to your images and it’s highly recommended that you take advantage of the option to do so. Visit your website’s media library and review uploaded images, updating as needed. Then remember to add alt text when new images are added and you should be good to go.

Descriptive Links

Links are plentiful on almost any webpage. From the navigation bar, to the footer, there’s bound to be several links leading to other areas of your website or even to external sites. One of the most common types of links seen in content is the “read more” link. Generic phrases such as “Learn More,” “Read More,” “View,” and “Click Here” offer little content to assistive technologies which often scan the links of a page and simply provide them to a user without the surrounding context.

For example, if your page has three cards for news articles and the links for each are “Read More”, assistive technologies may present them as “Read more, link, read more, link, read more, link.” That is useless to the user if they cannot visually see the title of the article that goes with the link.

In fact, this type of link is so discouraged, Google penalizes it when calculating a website’s SEO score. And yet this is an incredibly common practice. Even Kanopi’s website utilizes read more links in a number of situations. So how can you get around this ambiguity?

Ideally it’s done by having hidden screen reader text added in addition to the “read more.” You’ll find an accessible website often has additional content that’s hidden visually but presented specifically to assistive technology. Instead of reading “Read more, link,” the screen reader is presented with, “Read more [about our blog post on accessible design], link.” This is how we do it with Kanopi’s site, making it possible to use “read more” as link text.

But because this method requires some behind-the-scenes code, it’s more commonly used in templated areas that automatically present content with read more links. When you’re adding textual content to your site, you may just want to add a button or link to send the reader onto more information. When that happens, it’s important to remember the link may be reviewed independently of the content around it. Being descriptive will help your SEO and your accessibility.

I could tell you to “read more,” but it would be better for me to point you to an article about inclusive and accessible webforms.

Beyond Content Entry

Accessibility is an absolute necessity as assistive technology opens up the internet to more and more people. If you’re interested in achieving a WCAG 2.1 compliant website, get in touch with Kanopi. We’d love to help you create a site that is accessible to all.

4 reasons for choosing an all-in-one design and development agency

Posted on January 25, 2022November 25, 2024 by allison

Whether for your higher education institution, nonprofit, or your software as a service (SaaS) firm, a website build is often thought of as a two-phase process during its construction.

Firstly, you need a platform design and strategy. You’ll want to study your typical website visitors, organize and audit your pages and content, and create an information architecture while thoughtfully choosing fonts and colors for your user interface. The UX design process is a crucial part of every platform build, ensuring your site will be a pleasure to navigate while meeting website visitors’ needs.

Website development naturally follows once you have your design. Engineers code, test, debug, and retest every component of your site to ensure it’s functional, accessible, and secure before it’s ready to go live.

It’s not uncommon for companies to think of each of these vital phases — design and development — as two distinct and separate entities. Because of this, folks often consider partnering with one agency to design their platform and another to develop it.

We don’t deny this strategy can produce fantastic websites. In some instances, choosing a specialized agency to focus on a single phase of your site build makes sense. However, we’d like to highlight how design and development are not as independent as some think, and there are advantages to having the two phases connected.

Working with one agency that’s mastered both design and development can save you time and money while ensuring your site is a joy to use and will be for many years to come. We’ve pulled together our top four reasons firms should consider choosing one agency for designing and developing their website.

Four reasons for choosing an all-in-one design and development agency:

1) You’ll launch faster.

When gaining both design and development from the same agency, your project life cycle is more efficient, meaning your website is able to go live faster. This valuable time-saving is the result of consistent alignment between designers and engineers.

Whenever Kanopi inherits a platform designed elsewhere, we ensure the strategic thinking isn’t lost in the transition as this is one of the most common blockages when your platform moves from the design agency to a development agency. Accessibility issues, missed content requirements, and an unworkable CMS can also crop up when working with separate design and development firms.

One agency can ensure your site is accessible.

Design agencies that don’t offer website development in-house can sometimes create design specs that don’t meet accessibility and usability guidelines. When it comes time to build your site, engineers may need to do extra work or modify your agreed-upon design to meet the needs of everyone who uses your website.

With design and development working together, accessibility isn’t an afterthought and can be included in the strategy and design of your website from the very beginning.

Understanding your content requirements is more seamless.

Another challenge that can extend project timelines are missed content requirements, as design agencies can occasionally overlook your company’s content requirements due to focusing on aesthetics. Unfortunately, we’ve seen designs break when it comes time to migrate a company’s actual content over to the platform design. Without a technical review of the actual content that needs migrating, designers might miss any number of needs, including not taking image size requirements into consideration, ensuring that content isn’t being broken up into multiple components, or creating space for headlines that are too short to accommodate actual headline length.

Conversely, what if the designers create visuals around content that doesn’t yet exist? It can look great having all the bells and whistles in the design, but if the content doesn’t exist, someone has to make it, or the design may look flat. Make sure things like images, videos, and content fields exist or can be created before signing off on that design.

With development and design working hand-in-hand, engineers are able to provide expertise on content needs while designers are beginning to craft a beautiful website that’s functional.

You’ll get a CMS that’s easier to use.

Lastly, disjointed design and development can sometimes leave behind the unique needs of content managers. Busy content teams need a content management system (CMS) that’s a breeze to use. With a focus on front-end design, design-only firms sometimes provide designs that do not lend well to editing specific assets in the CMS (for example, image sizes that require Photoshop or another outside tool to crop to proper sizes). Development can lean into the design process to help integrate a CMS that’s user-friendly, no matter the skill level of your content team members.

Additionally, having a pattern library within your CMS is crucial to keep your site’s design consistent over time. Design firms tend to design each of your web pages, but rarely design full pattern libraries that work across an entire site that help maintain a smooth workflow between design and code when it’s time for development. Creating every web page in isolation leads to multiple ways to display content, slowing down your project.

When Kanopi develops websites, we look for patterns we can apply site-wide to eliminate gaps that commonly appear through separate page design. Without pattern libraries, numerous patterns may be created for similar content, which can lead to increased complexity, longer development time, and the need for additional project management support with a heftier price tag.

2) Feature development is easier.

When you decide to partner with an agency providing both design and development, designers and engineers work in tandem and are able to understand the nuances of the features necessary to make your website the best it can be.

When the Golden Gate National Parks Conservancy and Institute of Golden Gate partnered with Kanopi, we were able to take a strategic approach to their visual design, factoring in their complex infrastructure and functionality requirements.

Mapping, in particular, is a complex feature for the park and one that needs to look great while providing an intuitive user experience and a CMS behind the scenes that’s fit for purpose. Kanopi created a content administration experience, allowing for polygon drawing and mapping files to direct intricate paths for hiking in the park:

An example of one of the many available maps of the trails managed by Parks Conservancy. This one overlooks the Golden Gate Bridge.

3) Project management is more cohesive.

When you partner with an all-in-one agency, you ensure the smoothest transition possible as your platform passes from the designers to the engineers.

Designers within an all-in-one agency understand the skillsets, workflow, and limitations of the engineers with whom they work. They’re familiar with what design practices are going to make the job of the developers as smooth as possible, and which ones might come up against issues in the build phase. Those built-in efficiencies make a huge impact on time and budget.

Working with separate design and development agencies can lead to numerous layers of project management with a costly transfer (in terms of both time and money) between them all.

Working with an all-in-one agency can also help your internal project management go more smoothly. You can avoid misaligned team expectations with the help of the agency, which will work to meet with senior-level stakeholders regularly and keep them up to date on your web strategy. Learn more about this process in our guide to avoiding the “Swoop and Poop.”

4) Your designs will have more longevity.

The final reason for choosing the same agency for both design and development comes down to the sustainability of your site. Websites designed and developed by the same team prove the test of time because designers, engineers, and project managers can collectively gain a deep understanding of your company’s mission and long-term goals. They are able to strategize a plan for your website post-launch, so it continues to support your business goals and remain a great site to interact with next year and the year after next.

With design files at the ready, simple navigation enhancements and tweaks to key elements can be made quickly and easily, keeping your website looking sharp and delightful to navigate.

Weeks can stretch into months for design updates that need to go back to an original contractor that crafted your initial platform design. An all-in-one agency becomes an expert in your business, armed with a thorough understanding of your history and unique growth plans.

Build a better, more sustainable platform with Kanopi.

Kanopi is a close-knit team of designers, engineers, and project managers, who are all working towards the same mission of pairing creative solutions with solid and sustainable architecture while keeping our client’s entire ecosystem in mind.

We’re incredibly proud of the award-winning websites we’ve designed and built for our clients. In addition to design and development, we provide robust support after your website goes live, going above and beyond basic bug fixes and security updates.

‘When I describe Kanopi to others, I talk about customer service, great services, a sustainable site, and a relationship that gets better over time. Every project we have done with Kanopi has improved our site and made it work harder and better for us.’
Laura H, Digital Marketing Manager, Stratford Schools

Are you interested in partnering with us? Rea ch out if you want a better, more sustainable site.

50% Of All Big Projects Fail, including Websites. Why?

Posted on February 3, 2021November 12, 2021 by allison

Marketing leaders have the best intentions going into an expensive and large six-figure website overhaul. However, according to the Harvard Business Review, as many as half of big projects like these are considered failures when all is said and done. And you’re left wondering…

Why did this take longer than I was told?
Why was more funding needed than was estimated?
Why were there so many surprises and scope changes?
Why do I feel so burned by the agency my team selected?

Now you find yourself facing down another big website overhaul and all the risk associated with it. How will you feel confident it will be successful this time? How will you be sure you won’t be left with heartburn and the same frustrating questions as last time?

In my 15+ years working in this industry, I’ve learned there are three key elements to ensuring a big website design and development project is successful.

Think of it like a three-legged stool…

1) Stakeholder Alignment

Performing candid and skillfully focused stakeholder exercises which tease out the goals and intentions of important leaders in your organization. These exercises force invaluable conversations, and ultimately lead to buy-in.

2) User Experience

Target audience data mitigates risk by replacing assumptions with defined needs and specific pain points. These eventually inform the site experience that’s most helpful to each audience.

3) Design & Development Planning

With stakeholders aligned and users defined, design and development planning can begin using models such as sitemaps and wireframes. Technical and functional requirements can start to be dialed in as well.

Unfortunately, most agencies focus only on one or maybe two of the legs described above, resulting in a shaky foundation to your project. But not Kanopi. We focus on and thrive at all three, and we make it fun along the way.

We call this endeavor the Website Growth Plan (WGP). Through this proven process, we’re able to answer questions such as:

I know my site is not working for me, but how do I improve it?
I will need to migrate from Drupal 7 to D8 or D9, but what will that budget look like?
How can I improve my SEO? How is my site performance now?
I need a new content strategy, but how can I do this properly when I am already so busy?

After taking factors (like the ones illustrated below) into account, the WGP delivers an all encompassing action plan for your website. By setting expectations early and often, this helps avoid the heartburn-inducing questions you were left with after your last website project.

Which website growth plan is right for me?

More information can be found here, but below is an overview of our various plans:

Website Reimagine

This plan is a concentration of UX research, content strategy, and a bite-sized amount of design. It helps formulate a game plan that drives clarity for the team and gets some early design thinking on the table. Plus, it is actually a wonderful use of time as it is the first step in an overall design and development project, as the deliverables include a roadmap to launch.

Usability and Design

This is a data-informed optimization plan incorporating user experience, visual design and content recommendations delivered in an actionable plan for next steps.

Content Strategy

Amplify your message through a powerful analysis of important information, including user needs, competitor analysis, personas and Customer Decision Journey mapping — from Awareness to Advocacy. This plan focuses on storytelling content, user experience, visual design recommendations, and more.

Drupal 7 Transition Plan

You should feel secure planning and budgeting for the transition from D7 to D8/9 or to WordPress. This plan removes the “unknown” and illuminates the details for your organization to make an informed decision and take action on next steps.

Technical SEO

This is a deep-dive to analyze your website’s SEO technical health and set you up for search engine optimization success.

GDPR & Compliance

The General Data Protection Regulation (GDPR) is a legal framework that sets guidelines for the collection and processing of personal information from individuals who live in the European Union (EU). This plan gets you compliant.

Accessibility

Reach your audience and meet compliance with Website Compliance Accessibility Guidelines (WCAG 2.1 AA or higher) through a skillful analysis and recommendations action plan.

Technical Review

A comprehensive technical deep-dive into your site’s code and technical health to provide foundational recommendations for optimization and stability.

And if one of those doesn’t quite fit? Don’t worry. Our nimble nature finds us creating custom packages for our clients to best meet their needs. Contact us to chat about which plan is the best fit.

Storytelling is key to a successful brand

Posted on December 11, 2020November 12, 2021 by allison

Great movies and books have an interesting plot with characters who evolve through the length of the story. Those stories capture the reader or viewer, engaging them on an emotional level as they get invested in the journey of the character.

But good stories aren’t relegated only to books or to movie creators. Your organization likely has some pretty interesting stories to tell; why it exists, who it serves, and how they are served. By writing your organization’s story and gaining an emotional connection with your audience, you can keep them engaged, and create excitement to tell others about you. The way you frame yourselves in the eyes of your audience can be a powerful thing!

At Kanopi, we think the most engaging websites use storytelling as much as possible. This is why with each project we map out our client’s audience segments in Customer Decision Journeys (CDJ), with the goal of determining the right, custom approach to push those audiences through each step of the story, eventually leading to whatever conversion is appropriate for your website. And beyond that, the ultimate goal is advocacy, where they become brand ambassadors for you and spread the word to their peers..

Start with the story.

We are big fans of the book and methodology written by Donald Miller called “Building a StoryBrand” which outlines a simple storytelling framework that works if you apply it to most of the great stories in movies and literature:

A character who wants something encounters a problem before they can get it. At the peak of their despair, a guide steps into their lives, gives them a plan, and calls them to action. That action helps them avoid failure and ends in a success. [1]

But why limit it to entertainment? This framework can also help you to write your organization’s story! Kanopi workshops with our clients through this framework to support them as they write a compelling narrative to their audience.

The below principles will define the areas above in bold.

StoryBrand Principles [2]

The customer is the hero, not your brand.
What barriers/hurdles does your customer face to resolve? Define your hero’s three types of problems: Internal, External, and Philosophical.
Companies tend to sell solutions to external problems, but customers buy solutions to internal problems. Identify the internal, external, and philosophical problem that needs solving. Define your offer.
Customers aren’t looking for another hero; they’re looking for a guide. Establish yourself as the trusted guide. Identify and fill story gaps with your solves.
Customers trust a guide who has a plan. Construct a visualized representation of your plan.
Customers do not take action unless they are challenged to take action — what would happen if they do not work with you? Give them appropriate and easy ways to take the ‘next step.’
Every human being is trying to avoid a tragic ending. Understand your “villains” and what would happen to the hero without you.
Never assume people understand how your brand can change their lives. Tell them. Be clear with the actions to progress the hero.

Some of these principles have been historically known by marketers, but remembering #1 in particular helps to start the foundation of your messaging. Understanding how each of these principles applies to your business will help your organization become the perfect guide for your customers.

But personally, what I find extra insightful is identifying #3:

“Companies tend to sell solutions to external problems, but customers buy solutions to internal problems. Identify the internal, external and philosophical problem that needs solving.”

Breaking down the internal, external and philosophical problem is key.

Let’s break this one down a bit further:

External problem:

Description: “In literature, a villain’s job is to wreak havoc on the hero, to place barriers between them and their desperate desire for stability. But ill intentions are not enough. Something, that is, some thing (or things) must represent this barrier.” [3]

This problem is really why your organization exists. What barriers do your customers experience? If you’re a cleaning service that only uses organic cleaning products, the external problem you fix is a dirty home.

Internal problem:

Description: “In almost every story, the hero struggles with the same question “Do I have what it takes? This question can make them feel frustrated, incompetent, and confused. What stories teach us is that people’s internal desire to resolve a frustration is a greater motivator than their desire to solve the external problem.” [4]

Remember: customers buy solutions to internal problems. If you’re the organic house cleaning business, your customer’s internal problem could be embarrassment over a dirty home. They might not feel that they can have company over, lest they be judged for their housekeeping skills.

Philosophical problem:

This is my favorite part: taking a stand against a larger issue within your industry!

Description: “The philosophical problem in a story is about something even larger than the story itself. It’s about the question why.” [5]

Is there a larger purpose to which your brand contributes? A cleaner house make customers feel a certain way, and certainly they can feel good about using an organic cleaning service means they’ve cut down on chemicals and helped the environment.

To me, the internal / external / philosophical problem step is the most critical and exciting piece of the StoryBrand framework: if you can clearly identify — and clearly state for your customers — the internal, external and philosophical problem that needs solving, you are way ahead of most of your competition.

Be the best guide you can be.

Think of all the greatest brands out there, and most of them are completely dialed in to their story. They know how they help their customers avoid obstacles, and ultimately succeed . . . with their brand helping guide them of course.

At Kanopi, we love a strategic approach. Resources like StoryBrand expand our ability to help our clients’ and their websites reach their full potential. Connect with us to learn more about how we can help you be the best guide you can be.

[1], [3], [4], [5] Building a StoryBrand — Donald Miller

[2] Building a StoryBrand — Donald Miller, slightly adapted by Kanopi Studios