Search Kanopi

Category: User Experience

Erin writing on a computer creating accessible content

Accessible Websites: 8 Steps for Content Editors

Donna
Donna Bungard

A brief overview of the whys, whats and hows of accessible content

Once upon a time I used to be a designer and front end theme developer. Though I’d love writing and would frequently manage content, my focus was on the building with the goal of creating a consistent brand presence. When that was my focus, I thought, like so many do, that the way to keep a website formatted in the way it was originally designed was to restrict an editors ability to change things. I was wrong. I was ignoring accessible content.

Over the span of my career to date, I’ve seen more than an evolution in the technologies we use but also in the way people approach the day-to-day issues on their teams and when looking at their company’s website. We’ve gone from hard coded websites fully managed by webmasters to building dynamic CMS driven digital experiences that empower users to build a connection with the sites they visit. Think about that for a moment: we’ve changed our focus from what we can do, to empowering people to drive their online user journey and get the most from their online experiences. With this movement, inclusion and it’s subset, accessibility has been given increasing attention; the more users who have rewarding user experiences means a better web for us all. 

So now it’s time to continue this movement of empowerment by opening the floodgates of possibilities and educating content editors, including you, so that we can all build and maintain accessible content. In the following article we’ll touch on why accessibility is important, what to look for, and how to start incorporating it into your content publication workflow. 

Why is Accessible Content Really Important?

We’ve all seen the shift in the digital ecosphere to be more inclusive. Companies have been adding non-binary options for gender on their sign up forms and writers have used more neutral content when needed. It has not saturated the web (yet) but it’s there and often discussed. A huge factor in this as been the role that accessibility has played. With nearly 1 in 5 US adults self-identifying as having some sort of disability, there’s no question accessibility is critical.

By the numbers: 

  • ~20% of U.S. Adults self-identify as disabled
  • ~2.4m have Alzheimer’s disease, senility or dementia
  • ~7.6m Americans experienced difficulty hearing, including 1.1m whose difficulty was severe
  • ~8% of males from northern European descent are colorblind
  • ~2m Americans are blind or unable to see
  • According to Austin Learning Solutions, 40 million American adults are dyslexic 

And, once we take into account those who may not see themselves as disabled (I know a few colorblind men who do not identify as such) as well as those who are underage, than the people impacted by accessibility blocker grows. And then there are the temporary disabled: broken wrist, injured eye, and so on. And then (yes this keeps going!) there are those who are experiencing a poor user experience such as a poor internet connection, a glare or cracked screen, or a loud/crowded location: these users benefit from accessible best practices too!

So you’re thinking, “okay, the numbers support what she’s saying but I’ve heard this all before,” and you know, you probably have. So as much as we all WANT to focus on the feel-good, lets touch base on some of the other ways accessibility is important.

  • An SEO friendly site may not be more accessible but an accessible site is more SEO friendly. Google uses a lot of the same information as assistive technologies. 
  • Legal pressure is building. In the US, since the Winn-Dixie case in 2017 that set the precedent that a website can be a gateway to a brick and mortar location and therefore is subject to the ADA’s 508 compliance, hundreds of organizations have had legal action taken against them. An accessible site keeps you out of legal trouble as well as gains a lot of goodwill among your customer base.
  • Voice recognition is not just for assistive technology! How often do you ask Alexia or Siri for information? You’re likely using some of the same code that those who use assistive technologies are using every day. 

So . . . after all these words, why is it important to build accessibility best practices into your content creation and editing workflow? Because if you don’t you are missing out on millions of potential conversions while potentially placing your team at risk of being found non-compliant. 

“Okay Okay, I get it — accessibility is important but where do we even start?!”

I’ve heard something along those lines from marketing teams as well as those new to government website management. Somewhere along the lines we’ve mistakenly sent the message that everyone needs to be some sort of expert to put efforts into effect. That’s not true! 

One of the most inclusive and talented writers/speakers I know keeps telling me that she’s not the expert, and yet at this point she’s learned so much she’s assessing more sites and guiding more people than I am. Why? Because she started by looking at what the biggest blockers were for users from an accessibility point of view, and helped the content managers figure out what they can do to fix them. And then she learned more, and she kept going, helping others learn along the way. It’s now a part of her everyday life, not because she set out to be an expert on accessible content, but because she collected knowledge and started putting that into practice. 

That’s all any of us need to do: start with some common issues and keep learning. 

With that, let’s dive into eight of the most common issues that content editors will see and how to fix them for more accessible content.

1. Alternative Text 

What is it? Alternative (alt) text is a word or phrase that can be inserted as an attribute in an HTML image tag to describe the meaning of the image on the site. If the image is purely decorative, it can be indicated as such by having the HTML tag present but empty. 

How to implement: 

  • Don’t get wordy: keep it to around the same length as a Tweet: approximately 120 characters. 
  • Use descriptive text: describe the image itself without using phrases such as “image of” or “photo of” (that’s a given!).

2. Descriptive Text Links 

What are they? The text that we include in a link matters. When we link only the words “learn more” in a given sentence, this gives users (and search engines) little idea of the value of the linked text. If we link a full phrase or sentence such as, “To learn more about sloths, read this article.” we are setting more complete expectations as to what will be learned by clicking that link. 

How to implement:

  • Use text that explains the context and value of the link to the user. 

3. Linked Images

What are they? Linking images can be a powerful visual tool but this can present problems to non-sighted users (and offers less of an SEO benefit). 

How to implement:

  • Use alternative text.
  • If there is too much information to convey via alternative text, you can give that image an empty alt text and then provide an image caption. 
  • Do not use both alt text and a caption if the information is redundant in any way.

4. Video Captions & Transcripts 

What are they? Video captions and transcripts are the written text of the material audible in a video. Captions are presented inline as words are spoken and sounds are included. Transcripts are separate from the video and often provided below the media or via a link. 

How to implement:

  • Captions must be consistent, clear, and readable.
  • Make sure the meaning of what is said is preserved: identity who is speaking, and how (such as [yell] or [whisper]).
  • Accuracy is critical!
  • Sound effects can be included with brackets. 
  • User proper page structure (headings) and grammar in transcripts.

5. Avoid All Capital Letters

What are they? It’s a common practice to use all uppercase letters as a stylistic choice but this can cause readability issues for those who are dyslexic. 

How to implement:

  • Only use all capital letters for acronyms, and not for style.

6. Unique Page Titles

What are they? The page title sets the stage for all content on the page and your websites theme should already have programmed this to be the H1 of your page. This tells both users and search engines why the page is important to them. Duplicate page titles lead to confusion and can contribute to either a frustrating or abandoned user journey. 

How to implement:

  • With each title to be informative and unique. 
  • Be brief: each title should be between 55 and 60 characters.

7. Heading Structure

What is it? When we’re talking about heading structure we’re talking about the proper use of the header tags (H1, H2 and so on). Headers give users of assistive technologies cues as to where they are on a page and what they will find in it. Search engines use these tags to better determine what is valuable on the page. Poorly used or omitted heading tags can create a poor user experience while misleading search engine rankings. 

How to implement:

  • Use Header Tags in sequential order. 
    • An example of the correct order is H1, H2, H3, H4, H2, H3, H3 etc. 
    • An example of an incorrect order is H2, H6, H6, H2, H4 
  • Make the content of the Header Tags relevant to the content on the page.

8. Table Formatting

What is it? Tables can be the most accurate way to present data. However they can create barriers for those using assistive technologies. The best rule of thumb is this; if you can present the information in a way that does not utilize a table, then do not use a table.

How to implement:

  • Avoid tables unless absolutely necessary.
  • Provide table captions.
  • Utilize column and row headings.
  • Never nest tables.

There you have it. Educating yourself and your team on these eight steps sets you up for success and on the road to compliance. If you want to learn more in-depth tricks, watch Kanopi Community Ambassador AmyJune Hineline give a talk on Inclusive Content Strategy (50 mins). 

Accessible Content is About Everyone’s Empowerment

The days of content editors being restricted are long gone. The digital ecosphere is changing and with that comes opportunities and the ability to create positive user journeys for all of our users. Though professional growth and incremental education, teams are able to evolve their web presence to be more inclusive, accessible and search engine friendly, while building in safeguards for the organization as a whole. You have the tools and the ability to make a difference!

Want to learn more or have a team member take a more in-depth look at the things that make your challenges unique? Reach out to us: we want to empower you to make accessible content.

Categories
Website Rebuild

Executing a Website Rebuild: 5 Things to Consider

Donna
Donna Bungard

You’ve decided it’s time to rebuild your website.

Research has been done, conversion rates have been analyzed, the team has selected a rebuild over a focused fix, and you and your team are committed to making a website rebuild happen. One of the easiest ways of ensuring your success is to remain mindful of a few key things as you work your way through this larger process.

Regarding that term, “mindful:” one of the Kanopi team’s favorite authors is Brené Brown. She writes, “Mindfulness requires that we not “over-identify” with thoughts and feelings so that we are not caught up and swept away by negativity.” For the purposes of your website rebuild, I’d adapt this to be, “Mindfulness requires that we not “over-focus” on what we’ve done before, and rather remain aware of what’s important for our success so that we can focus on where we want to be.”

So, let’s get to it and break down what the top five things we need to be mindful of when executing a rebuild project.

1. YOU are the difference! Be engaged.

Stakeholder engagement can make or break a rebuild. But rebuilds are time-consuming, and you and your stakeholders will likely be pulled in several directions as you try to execute a rebuild while balancing other priorities and projects.

Your availability, open communication, and timely feedback is critical to enable your team to create the web presence your organization needs to reach its goals. Be realistic in what time your team can devote to the project so you can be as fully engaged as possible. Define roles and responsibilities early as well so it’s clear who is handling what.

If you need an assist from an outside agency to keep the project moving quicker, be direct with them about your business needs and wants. Help them to understand your users and audiences. An agency will make every effort to dive deeply into understanding your market, but at the end of the day, you and your team are the experts on what you do. So view any outside agency as a partner who can work with you towards success, and stay engaged with them throughout the process.

2. Define success & track it

We cannot know if we’re successful until we have identified what success will look like. For some sites, it’s simply exposure. For others, it’s a need to meet specific goals. Take the time to define what your organization needs to achieve, and which key metrics will allow us to quantify success.

Not sure where to start? Here are common metrics should you benchmark now as you prepare for the rebuild:

  • Users: note how many users are regularly coming to your site
  • Bounce Rate: record the overall bounce rate. Make note if this is at, above or below your industry’s standard.
  • Average Session Duration: how long are users staying on your page?
  • Sessions by Channel: where are your users coming from? How much organic traffic is coming in?
  • Top Keywords: identify what words are being used in the search engines when users are finding you. Are these surprising?
  • Competitor Keywords: are users who are looking at your competitors using the same keywords?
  • Top Referrers: who is sending traffic to your site? Maybe social media is key, or you’re more focused on industry referrals. Determine where you should be in the market.
  • Conversion Rates: what forms do you need users to fill out? What conversions are critical to your business goals? These can take the form of contact or forms from your CRM tools such as Marketo or Pardot, or even visits to a specific page or video views.   
  • Accessibility: does your site meet national or international compliance standards?

In short, benchmark where you are now, and use this data to help round out that definition of success. Then come back a few months after launch to reevaluate and compare so you can quantify the success to your stakeholders.

3. Get your content strategy in order

The old saying “Content is King” is truer today than ever. Users are more educated. Search engines have become smarter, looking for more than keywords — they look for meaning in phrases to help determine the focus of a given page.

As one of the most effective methods of growing audience engagement, developing your brand presence, and driving sales, content marketing is a mission-critical growth method for most businesses. — Hubspot

This is where most people turn to me and tell me they’ll get their team on it so they can move further along in the content process. But don’t underestimate the time and energy content development/aggregation can take, even if your larger project is hiring a copywriter to augment your team. All too often, when content becomes a late-stage endeavor a few things happen:

  • timelines get pushed out, waiting for content to be approved.
  • changes to the previous UX are often required to account for unrealized navigation or calls to action, causing potential budget overages.
  • content is rushed and not in alignment with the overall vision.

To help this process come together for your team, here are a few action items to start with:

  • Audit your content: take a full inventory of your site’s content to better identify:
    • what to keep
    • what to repurpose
      • for example: the video may look dated, but could your team could write a blog post from that material?
    • what should not be migrated to your new site
      • this can be archived to be referenced at a later date
  • Build a sitemap: determine the hierarchy of the content on the new site.
  • Identify missing content: comparing your audit to your sitemap, what needs to be produced?
  • Track content creation: track who is responsible for writing, editing and approving content — and give them deadlines
  • Start thinking ahead: you may need to start planning future content. Developing an editorial calendar will help keep the process moving. Content typically included in an editorial calendar:
    • blog posts
    • social media posts
    • videos
    • infographics

When preparing for a rebuild, your content strategy has to be one of the first things your team takes on. This approach will save you time, headaches, and likely budget moving forward. 

4. Consider your users’ digital experience

By this stage in the process you should know your target market, their buying habits and why your product or service is of value to them. You likely have personas and other data to help back this up. But in the omnichannel world in which we thrive, there is often more to architecting an effective user journey. Understanding the nuances of the devices, the influence of how a user comes to your site, and the overall adherence to best practices are complex. For example, consider the following:

  • What percentage of users are coming from mobile devices?
    • Are you CTAs and main conversion points easy to access on a small screen?
    • Is the user journey simplified?
  • Are you users coming from social media?
    • Is it your blog driving traffic or more word of mouth?
    • Is it positive or negative attention?
  • Have you produced a user journey map to identify the different pathways to conversion?
    • Is your site currently set up to promote these journeys?
    • Are you utilizing personalization to customize that user journey?

You can learn more about how to use user research to gain insight into audience behavior to help you frame your thoughts about your personas overall user journey to conversion.

5. Think about the future of your site

Websites need to evolve and adapt as the needs of your users change over time, but as you rebuild, are you setting yourself up for more incremental changes moving forward? Keep in mind that most rebuilds are focused on the MLP or “Minimum Lovable Product.” It’s the simplest iteration of your site that will meet your current needs with the intent to continually improve it over time. Regardless of whether you’re focused on an MLP launch due to either time or budget constraints, we need to keep these future goals in mind as we progress.

And then there’s the technology side of this: whether you’re looking ahead to Drupal 8 or 9 or the next major evolution with WordPress, consider those needs now to help ‘future proof’ your new site. The web changes too quickly to risk your site being stale when it’s still brand new. Talk this through from the start with your team.

These steps will set you up for success in your website rebuild.

Your site speaks to who you are as an organization to your target market. Whether you’re a non-profit, higher education or a corporate entity, being mindful now will set your team’s rebuild up for success. And if you need help with your rebuild, contact us. We’d love to partner with you and help you recognize that success.

Categories
Hands holding credit card and using laptop. Online shopping

Considered Purchases: How to Influence Buyers With Audience Support

Jessica Skewes, Director of Strategy
Jessica Skewes

If you’re an online shopper (and who isn’t these days!) then you likely understand that there are at least two types of purchase cycles that naturally occur.

If you’re an online shopper (and who isn’t these days!) then you likely understand that there are at least two types of purchase cycles that naturally occur: the impulse buy, and the considered purchase.

The first is your impulse buy. It’s much easier to be impulsive when you are considering low-cost items or decisions that won’t result in significant consequences.

Other types of purchases are much more complex, involving products or services are expensive or that represent emotional or financial risk. These complicated transactions are called considered purchases. Because they matter more, we tend to research them more carefully, spend more time thinking through options, and look for different types of content at each stage of our decision-making process. This complexity can present a challenge for brands that offer products or services in this category.

At Kanopi, we’ve developed some frameworks to help clients influence the complicated ecosystem of the considered purchase. By understanding customer mindsets at each stage of their journey, you can tailor an experience that provides the right message at the right time, tipping the scales in favor of your brand.

First, it’s helpful to become familiar with the standard customer journey, pictured below.

Image of standard 7-step customer journey stages: Research, Awareness, Consideration, Evaluation, Conversion, Affirmation, and Advocacy.

Consider the needs of your personas at each of their journey stages. Think about how their needs may be different, where they overlap, and what types of content could help support them, taking the following details into account:

  • Age
  • Technology use
  • Mindset
  • Barriers to conversion
  • Length of each journey stage
  • Other forms of research they might use
  • Emotion
  • Location
  • Personality traits
  • Actionable needs
  • Informational needs

Once you’ve mapped in your personas’ needs across their journey, you can more easily identify where existing content fits in, and where you may need to create fresh content to fill gaps in your experience.

It’s also important to think beyond the typical journey stages to identify the path that’s most likely for your product or service. This can vary quite a bit, especially for high-cost, high-stakes considered purchases. In those cases, users may follow a journey that looks a bit more like this:

Image of 9-step journey stages: Ideation, Research, Ideation, Awareness, Consideration, Evaluation, Conversion, Affirmation, and Advocacy.

While it’s possible to sell a luxury car or new home entirely online, that doesn’t mean that’s how your audience typically behaves. Let’s walk through an example:

Customers in the market for luxury cars understand that the purchase takes significant resources and commitment, and has the potential to provide great joy or become a big mistake.  As a result, they will likely be cautious and conduct a lot of research. They may have been planning this purchase for a long time. Ask yourself, how long would each of their journey stages take? What are the barriers they might face? To what degree will they need a personal touch? How will they know they can trust you? How can you create content that gets your customer as close as possible to the sensory experience of that new car smell and the feel of sliding into a leather seat?

The best way to understand the real journey for your customers is to ask them. Customer research can yield invaluable insights into buying habits, preferences and emotional states that you can address to help set your brand apart.

It’s also helpful to work with a team of seasoned strategists who can guide your research process, stay focused on customer needs, and spot useful insights from the data you already have available.

Kanopi Studios’ strategy team partners with you to make sure that your customers’ needs are supported throughout their entire journey, especially if your product or service falls into the considered purchase category. Think of us as guides for navigating the right balance of information, credibility, personality, and persuasion that will remove barriers and deliver conversions. If you’d like to learn more about how we can help with your considered purchase, we’d love to hear from you!

Categories

Ready to launch? Here’s a pre-launch checklist

Tim Tufts Director of Project Success

It’s been a lot of hard work and the time has finally come to launch your new website. Congratulations!

But before you push that launch button, take a minute to think; are you REALLY ready to launch your website?

  • Multiple rounds of quality assurance testing? CHECK!
  • Cross browser and responsive testing? CHECK!

But is there something else you might have missed?

The items above are some of the more obvious steps a team may go through when preparing a site to launch, but there are some lesser known or sometimes forgotten steps that are just as important to take when launching a new website. So what do we also include in our pre-launch checklist?

  • Set up redirects
  • Check links: Absolute vs Relative
  • Accessibility checks
  • Decide what to do with your old site
  • Decide who will maintain your new site

Set up redirects

Over the years you may have amassed a great deal of content on your old website, and  chances are that in the course of creating your new website you’ve changed how that content is organized. This can lead to content revisions during the process of migrating  that content to the new system. Any team that has gone through this process can tell you that it is a massive effort; even if you’re automating the migration of content in someway. During this flurry of activity in moving content from point A to point B, it’s easy to forget one simple matter: How will users find the same or similar content on the new website?

Creating Redirects ensures that users who arrive at the site via an outdated URL, say from a bookmark or external site, are automatically sent to the appropriate content. Setting up redirects is incredibly important to creating a solid User Experience and it’s good for SEO. Just about every URL on your old site should have a redirect if the URL has changed. This may seem like a herculean effort, but it actually pairs well with the process of moving content from the old to new website.

First off a brief explanation of Absolute versus Relative URLs. An Absolutely URL encompasses a URL in its entirety. ie: https://kanopi.com/about-us. A Relative URL is just the portion of the URL that occurs after the “.com” in the example above. ie. /about-us. In the course of preparing a new website by loading copy and uploading images, you most likely are working from a temporary Development URL. When the time comes to launch the new website, the Development URL will change. When the URL is changed, any links that are pointing to the Absolute Development URL will break. This is a common mistake, and one that can have disastrous results once your new website goes live.

As a general rule of thumb try to avoid Absolute URLs when loading content to any environment. This ensure that if the core URL ever changes, your links won’t break. Leading up to launch, try to work with your Developer to identify and rectify any Absolute URLs.   

Accessibility checks

Accessibility was not exactly a top priority of early website development; supporting users with impairments is becoming an ever increasing need for any modern website. Accessibility starts early on in a project’s planning, and should be discussed early and often. From initial designs through to development, there are many touch points where a project team can ensure that the site is compliant with standards.

But what if your site is about to go live and you haven’t considered this? Luckily there are tools like Site Improve that allow you to run automated tests to see where your site may need remediation before it can be compliant. Not only is it good for SEO, but making sure your site is accessible to the widest range of users ensures you reach a wider audience and that they have the best user experience possible.   

Bot Mitigation

With the ever-increasing presence of AI, bots are crawling the internet seeking answers to our questions and returning the most relevant results to users. The strain and stress this places on an unprepared site can affect performance, degrading the overall experience for human users or even bringing down a site entirely. Bot mitigation needs to be considered when launching a website nowadays.

Making sure your site has an llms.txt file that allows Large Language Models to more easily parse your site’s content. Creating a plan to ensure your site isn’t overwhelmed by the wrong bots; nefarious bots who can bring down your site through Denial of Service (DDoS) attacks are becoming increasingly common, trying to blend in and take advantage of the rise in bot traffic. These are just a few factors to consider in your bot mitigation plan. Contact us for more insights and to help develop a plan tailored to your website launch.

Decide what to do with your old site

In the activity leading up to the launch of your new website, it’s easy to overlook this question. Regardless of how confident you are in the new website, it’s important to have a plan in place for what to do with your old website. Here are some important questions to consider when considering the fate of your old website:

Will you need to reference your old site at any point in the future? Perhaps you weren’t able to move all the content to the new site before launch or maybe there is old content that won’t be migrated, but you still need to reference it in the future. Whatever the reason may be if the answer to this question is yes, you’ll want to keep your site up in some capacity.

Can you afford to host two websites at the same time? This one is a little less straightforward; depending on the size, state, and makeup of your old website, you have options. From a budgetary standpoint, paying for a website that no one will really visit is probably not going to look all that great to accounting. The good news is that with no traffic visiting the old website you probably don’t need all that expensive infrastructure; many enterprise level hosting providers have a free tier that is great for storing a legacy site on.    

Regardless of your situation, you can always find options. What’s most important is that you have a plan.

Decide who will maintain your new site

Building a website is a process; one that requires regular upkeep and ongoing maintenance. Understand that your website is a tool, and built right it should be designed to grow and adapt to the changing needs of your business. This is the philosophy we at Kanopi believe in, and try to instil in our projects. So with that in mind, it’s important to consider who will be responsible for ongoing improvements, maintenance, updates, and bug fixes when the times arise.

While not uncommon for teams to try to take this on internally, it’s important to consider if you have the right skill sets, let alone bandwidth for this to be a viable option. Another solution is to work with an agency like Kanopi to provide ongoing support for your site. An agency will have access to a wider range of expertise and ensures maximum flexibility for the future growth of your site.

Need a more in-depth checklist?

If you want more beyond this list, we do have a multi-page checklist you can download that goes into much more granular detail, covering everything from SEO to GDPR to accessibility, and so much more. You can download that checklist here.

Use our pre-launch checklist, and you’re good to launch!

These items may seem like big additions to your plate leading up to launch, but they pale in comparison to the what could occur if you leave them out. Plan for these pre-launch checklist items early on, and it will ensure your launch goes off with one less hitch. And contact us if you need help.

Categories
All Hands Meeting

Audience Behavior: Learn More with User Research

Jessica Skewes, Director of Strategy
Jessica Skewes

Marketing 101 tells us that all successful efforts begin with knowing your audience.

But simply knowing who you are talking to is only one piece of the puzzle. Consider how much more effective you could be if you were able to see below the surface and observe audience behavior in real time.

Imagine you own a family restaurant. It makes sense that you would start by targeting families. You read some market research that tells you mothers make most of the decisions about where the family eats out. So you decide to develop a persona based on mothers who are looking for restaurants that offer fun options for kids.

It’s a good start! You can now build more useful content and even make some website updates to better connect with this persona. But do you know if there are pain points in your navigation? When your users visit a page, do you know where they are clicking and where they get stuck? Are there additional features or content that could add value?

There are some simple user research methods and tools which can help you get the detail you need on audience behavior to gain deeper insight. By combining direct and indirect sources of data, you’ll be able to build a user experience that truly connects with your audience.

Here’s some ways you can do this.

Direct user feedback

When you want to know something, sometimes it is easiest to just ask! Asking your users a few simple questions about their needs shows that you care about their experience and can reveal tremendous insights. We recommend making it a quick and painless process by focusing on a short list of questions through a survey on your site, or asking directly to potential/current customers, including:

  • What do you visit our website to do?
  • Did you find what you were looking for?
  • Is there anything else we could include on our site that would be helpful?

An easy way to gather this information is by setting up a pop-up survey on your website through HotJar’s polling feature. You’d be surprised how much data you can collect in just a few weeks.

For longer surveys, SurveyMonkey can be a good option. SurveyMonkey allows you to send surveys to a curated segment of your audience and can even help you gather additional input from internal stakeholders. Typeform also has several options with an intuitive admin interface, a conversational tone and engaging interface for users.

Whenever possible, we also recommend 1-1 interviews with your customers. These conversations can be invaluable in helping you to understand people’s mindset, motivations and needs by going beyond what people are doing by asking them why.  

Indirect user feedback

HotJar also supports indirect feedback methods, including heatmaps, user session recordings, and conversion form tracking.

Heatmaps allow you to see where users click, allowing you to compare the amount of attention each page element receives. For example, many websites have important calls to action in more than one place on a page because they aren’t sure which placement is more effective. Installing a heatmap will tell you which link is performing better, which can help you streamline your page. Heatmaps are most helpful on pages that receive a fair amount of traffic so that they can collect enough data available to support solid decisions.

Example of a heat map on a web page for Rama Meditation Society

User session recordings do exactly what their name promises: recording user actions so that you can see what people are doing on your site, and exactly where they pause or struggle. Looking at user sessions in aggregate can help you restructure your pages to support common paths and eliminate common challenges.

Screen grab of a user session recording

Conversion form tracking can help you see which form fields users struggle with and where they drop out of the process. This information can guide decision making around where and how to streamline forms so that they can accomplish their number one goal … conversion!

Get started understanding audience behavior today!

We know that conducting user research as part of a website project can sound expensive or time consuming, or both. But the whole reason why you need a website is to connect with your users. Without a true understanding of their needs, even the best intentions can miss the mark.

The good news is that there are a number of options available through HotJar and other tools that make user research easier to tackle than ever. And Kanopi Studios is here to help, whether you’d like more information about using user research tools or need an experienced team to lead and interpret the research. Building your website around data and insights is the best way to elevate your relationship with your audience by providing them relevant content, optimized user pathways and ultimately a better relationship with your brand. So let’s get started!

Categories

Kanopi Studios is a Top Provider on Clutch

Allison Manley
Allison Manley Director of Marketing & Communications
Screen grab of the Clutch website home page

It’s not easy to find a development partner you can trust. Particularly if you’ve never been immersed in the world of web development, it may take you some time to learn the language. That can make it even more difficult to know whether your partner is really staying on track with what you want to accomplish.

Luckily, knowing what to look for in a business partner can save you from all of the potential troubles later on. Ratings and reviews sites like Clutch can help you get there. This platform focuses on collecting and verifying detailed client feedback and then using a proprietary research algorithm to rank thousands of firms across their platform. Ultimately, Clutch is a resource for business buyers to find the top-ranked service providers that match their business needs.

Luckily for us, users on Clutch will also find Kanopi Studios at the top of the list to do just that. Kanopi has been working with Clutch for a few months to collect and utilize client feedback to find out what we should focus on in the coming year. Through the process, we’ve coincidentally been named among the firm’s top digital design agencies in San Francisco.

Here are some of the leading client reviews that led us to this recognition:

“They were fantastic overall. We had great success communicating to their team via video conferencing, and they were able to answer every question we had. They also worked quickly and were very efficient with their time, so we got a great value overall.”

“Kanopi Studios’ staff members are their most impressive assets — extremely intelligent, experienced, and personable. Building a website is never easy, but working with people you both respect and like makes a huge difference.”

“Kanopi Studios successfully migrated our Drupal platform while preserving all the content that we’ve built up over the years. They worked hard to achieve a responsive design that works well on both mobile and large desktop displays.”

Not only have these kind words earned us recognition on Clutch, but we’ve also gained the attention of the how-to focused platform, The Manifest (where we are listed among top Drupal developers in San Francisco), and the portfolio-focused site, Visual Objects (where we are gaining ground among top web design agencies site-wide).

Thank you, as always, to our amazing clients for the reviews and the support.

Contact us if you’d like us to do amazing 5-star review work for you.

Categories

Accessibility at BADCamp = Education, Inspiration and Opportunity

Now that the excitement of BADCamp has worn off, I have a moment to reflect on my experience as a first-time attendee of this amazing, free event. Knowing full well how deeply involved Kanopi Studios is in both the organization and thought leadership at BADCamp, I crafted my schedule for an opportunity to hear my colleagues while also attending as many sessions on Accessibility and User Experience (UX) as possible.

Kanopi’s sessions included the following:

The rest of my schedule revolved around a series of sessions and trainings tailored toward contributing to the Drupal community, Accessibility and User Experience.

For the sake of this post, I want to cover a topic that everyone who builds websites can learn from. Without further ado, let’s dive a bit deeper into the accessibility portion of the camp.  

Who is affected by web accessibility?

According to the CDC, 53 million adults in the US live with some kind of disability; which adds up to 26% of adults in the US. Issues range from temporary difficulties (like a broken wrist) to permanent aspects of daily life that affect our vision, hearing, mental processing and mobility. Creating an accessible website allows you to communicate with 1 in 4 adults you might otherwise have excluded.

What is web accessibility?

Accessibility is a detailed set of requirements for content writers, web designers and web developers. By ensuring that a website is accessible, we are taking an inclusive attitude towards our products and businesses. The Web Content Accessibility Guidelines (WCAG) are a globally acknowledged set of standards that help us publish content that fits within the established success criteria. These guidelines are organized into the following four categories.

WCAG Categories:

  • Is your website perceivable? This applies to non-text content, time-based media (audio and video), color contrast, text size, etc.
  • Is your website operable? This ensures that content is easy to navigate using a keyboard, that animations and interactions meet real-user requirements, buttons are large enough to click, etc.
  • Is your website understandable? This means that text content is easy to read for someone at a ninth grade reading level, that interactions follow design patterns in a predictable manner, that form errors are easy to recover from, etc.
  • Is your website robust? This means that content should be easy to interpret for assistive technologies, such as screen readers.

The World Wide Web Consortium (W3C) is an international community whose mission is to lead the Web to its full potential. They have also published a checklist to aid our efforts in meeting WCAG success criteria.

Need help with making your site accessible? Contact us.

How can we be successful in making the web accessible?

Industries have varied requirements when it comes to web accessibility. WCAG has three levels of compliance, ranging from A to AA to AAA. A conformity has the lowest set of requirements and AAA has the strictest set of requirements; so strict, in fact, it may be impossible to achieve across an entire site.

Efforts to meet these standards fall on every individual involved in the process of creating a website. Although there are many tools that aid in our journey, we reach accessibility through a combination of programmatic and manual means.

The most important thing to keep in mind is the fact that achieving success in the world of accessibility is a journey. Any efforts along the way will get you one step closer towards a more inclusive website and a broader audience base.

Please Remember: Once Kanopi helps you launch an accessible site, it’s your job to maintain it. Any content you add moving forward must be properly tagged; images should have proper alt text and videos should have captions. Users come to your site because they love your content, after all! The more you can make your content accessible, the more you will delight your users.

Interested in making your site more accessible? Check out some of the resources I linked to above to join in learning from my peers about accessibility at BADCamp. If you need more help getting there, let’s chat!

Categories
Children engaging in an atomic design project - molecular forts!

The Creative Chemistry of Atomic Design

Kat White
Katherine White Chief Technology Officer

Building a strong visual foundation with atomic design

What is Atomic Design?

Designing for the web has evolved. And with good reason. Creating strong, consistent and flexible designs for responsive sites comes with unique challenges. How do we craft a responsive site with tons of different content needs and keep it unified? Enter atomic design.

Pattern-based design systems (or pattern libraries) aren’t a new idea. But atomic design gives this old concept a new framework. It helps us think about how to build from the bottom up to create a final web site.

Atomic Design is the brainchild of Brad Frost. His initial article on the subject is a great place to get an overview of this mental model. His analogy relates a smart design system to principles of chemistry.

See a video overview here.

Atoms

Atoms are the fundamental elements of your design. It doesn’t get smaller than this! They are the tiniest components of a site. These patterns establish the ground rules that everything else builds on. Atoms are a combination of the concrete and the abstract. Atoms are basic HTML elements like headers, paragraphs, and form fields. Alternatively, they are visual elements of your brand guidelines, like colors and fonts.

Molecules

Molecules are simple combinations of our design atoms. Just a few of them. Again, the emphasis is on incremental complexity. Some good examples are a photo and its caption, an article teaser block, or a search form.

Organisms

This is when things get interesting. With molecules in our toolbox, we can start to create organisms which represent larger sections of a site. Headers, footers, and grids of articles are examples of organisms.

For our clients, the site design starts to come to life with organisms. The larger layout components are a complete thought on their own, and we mix and match them to create templates.

Templates

The chemistry analogy falls away at this point, but not the benefits of the approach. Templates aggregate organisms into layouts that contain placeholder content. They establish whole layout patterns that we can apply to different types of content on the site.

Pages

Pages let us stress-test our templates by adding real content to the layouts. We create several pages that use the same template but different content. Pages help us see if our molecules don’t work in the real world and need adjusting. This feedback cycle helps create a tight, flexible site design that responds to the true needs of our clients.

Need help designing your site? Contact us. 

Benefits of Pattern-based Design

Kanopi specializes in Drupal and WordPress CMS development. In this context, pattern-based design methodologies really shine. Content management systems like Drupal and WordPress are inherently component driven. They use and re-use “building blocks” in different contexts throughout the system. An atomic approach enables us to reconfigure and repurpose molecules. It creates a consistent but flexible site architecture. This in turn is an efficient and scalable way to build a CMS-driven site experience. These patterns makes your site consistent. They give you the tools you need to evolve your site as the needs of your organization change.

Atomic Design at Kanopi

Kanopi takes two different approaches to pattern libraries based on the needs of our clients. Both follow the atomic design philosophy. One is an interactive design approach using clickable wireframes and modern design tools. The other is a living, breathing design that is purely code-based, using the Pattern Lab tool.

Interactive design

Strong designs start with strong strategic and UX thinking. Wireframing is a key step early in this process. Wireframes are the “bones” of your site. They give an idea of information hierarchy for your templates. They can also help understand what user interaction with the site will feel like. We create interactive, clickable wireframes. Using this tool, stakeholders and users interact with key features of the site interface early on. This way we catch usability issues before we ever get into visual design.

Kanopi’s experienced design team takes the wireframes and layers on the look and feel. They define patterns, or symbols, using web-centric design tools like Sketch. These symbols build upon one another in a way that maps beautifully to the atomic design process. These are static files, but they are built with a developer’s eye. How? Our web designers are front-end developers! As a result our designs start with the fundamental elements of HTML and grow and evolve from there.

In-browser design with Pattern Lab

In-browser design can feel strange and unfamiliar at first. But embracing it means faster design iterations. It gives a better real world picture of the site. And it serves as a foundation we can leverage in theme development to make the rest of the project go faster.

Pattern Lab is an open-source tool created to help designers architect efficient atomic design systems. It is our preferred tool for creating pattern libraries for our clients. Wireframing starts in this interface, in simple grey and white. This ensures we have identified all the patterns needed for the functionality and features of the site.

We take the established “bones” and flesh them out with established colors, typography, and visual elements. At the end, we can see templates that respond to your browser. Interacting with Pattern Lab feels like pages in a finished site. It eliminates the guesswork and misalignment that come from static, traditional mockups. The final experience gives you a link that you can share with stakeholders. They see what they need to see, on their device of preference.

To see a Pattern Lab design system in action, check out the demo on the Pattern Lab website.

Categories
Project managers looking at a whiteboard

Keeping things on track: Website project management tips for clients

Amber
Amber Young

So your company is redesigning its website and you are going to be the project manager. You will be the one responsible for making sure that everything goes according to plan. You are probably excited! And maybe a bit overwhelmed as well. Good project management will make all the difference.

The more you know going into this process the better. Since we have managed thousands of digital projects at Kanopi Studios, we wanted to share our expertise to help you hit the ground running with solid project management.

Set clear and measurable goals

This is a critical step before getting started. Since your organization is investing time and money into its website, you’ll want to be able to prove it’s effectiveness and value. Think of all of the ways that a new website can support your organization’s goals and give some thought to how you could measure its impact. Having clear goals determined in advance will help your website vendors understand where to focus to deliver the most targeted solutions. It will also help you prioritize scope and features and prove the value of the site after it launches.

Find the right vendor

First, you need to write a strong RFP. Then, it’s on to selecting the right vendor for your project. You want to find a partner who you can communicate easily with, who has the expertise to do the job right and also meets your budget needs. To make things even more complicated, when you review the set of RFP responses, it is rarely apples to apples. The pricing and information represented in them will likely differ wildly. Be sure to ask each vendor what is included in their price. Some agencies will bid low to win your business, expecting that they will be able to issue change orders for more funds throughout the process. In general, you do get what you pay for, in websites as in other areas of life, so beware of the lowest bidder. And since your digital projects are probably only one part of your busy job, finding a vendor who is flexible, experienced, and trusted will help make things easier on you, leading the way to a successful outcome.

Gather (and wrangle) your stakeholders

Before your project ever starts, there is expectation setting to be done with your internal teams. We encourage you to establish a core team of approvers who will stay engaged throughout the project and understand the progression as decisions are made. Then, you’ll need to decide on the cadence for how you will share progress with the rest of your organization. Make sure everyone knows and agrees to their role in order to avoid last minute changes or requests that can throw off the process you have put in place. Consider documenting roles in a RACI chart for additional clarity. It can be to your advantage to use the project budget and timeline as a defense mechanism against new and last minute requests, as these things will have an effect on deadlines and dollars.

Keep vendors accountable

Work with your vendors to establish a cadence of check-ins and regular reporting on budget, percent complete, next steps, and risks. Ensure that you know what to expect from deliverables and when to expect them so that you can schedule time with the right people for reviews and approvals. Find out if your vendor uses a shared project management software platform that will allow you the ability to track progress, add tasks and keep all messages and files in a single, organized location. At Kanopi, we use TeamWork and have had strong success using it to increase transparency on projects.

Understand the creative process

During the UX and design process, your vendor will be establishing guiding principles that will carry through the project. The further the process goes, the harder it will be to change course. So if you aren’t sure about something, ask! It is always easier to adjust a strategy document or tweak a design than it is to rebuild something once it is in code. This should be a collaborative process, so we recommend frequent discussions and reviews to stay in touch on progress and get buy-in from your team.

Think about content early. Check in about content often.

Pay attention during the design phase to how content will be presented on the new site. Always be thinking: Do we have existing content to fill those boxes in the designs? Or will we need to create it? If there is new content to be created (as there most often is), do you have dedicated in-house resources to make this happen? Are your subject matter experts prepared to share details to help your writers deliver? Don’t forget that content also means images! We recommend making an internal content timeline that includes milestones and due dates to ensure that content delays don’t throw a wrench in your plans. If you don’t have the resources you need and are planning to hire, do this early on in the project so that your writers can be in aware of the strategy and design for the site. This will help speed their process, reduce rewrites and ensure that the copy is on target.

Requirements

While it can be hard to understand requirements documentation, it is important, because it serves as the blueprint for how your site will be built. Requirements should be presented in the form of user stories for the technical build to help put things in simpler terms and define expectations. A user story puts requirements into simple language and follows a common structure: As a (type of user), I need to (do something) so that I can (experience a result). While these may seem theoretical, they will impact the day to day reality for your content authors and site users. This is another area where you shouldn’t be afraid to ask questions to ensure that you know what you are approving and that you understand what it will mean once the site is launched.

Search Engine Optimization

With all of the activity prior to launch, SEO can fall through the cracks. It’s also a responsibility that may be split between your vendor and your internal team. With a little planning and coordination, you can ensure that SEO is in place prior to launch. Check in with your vendor about SEO, establish who is doing what and double check it all before launch. Moz has a handy pre-launch SEO checklist that lists SEO actions in priority order.

Need help with project management? Contact us.

User acceptance testing (UAT)

During this stage, your team will be reviewing the website and entering feedback prior to launch. Ideally, your team will have plenty of time to check the site thoroughly on all devices and browsers, clicking every link and paying special attention to more complex functionality including forms, transactions and interactive features. It is also ideal for your vendor to have enough time to address the issues that your team finds prior to launch. However, in reality, this process can be constrained by launch deadlines, making clarity and communication essential. Be sure to prioritize issues, making it clear which are launch blockers and which are nice to have fixes. Include the URL the issue was discovered on, the browser, device and version being used, details describing the issue and the desired fix.

Preparing for launch day

Talk with your vendor to make sure that there is a plan in place for launch day. Line up your core group up to test the site as soon as it is live and make sure your vendor will be available in case anything unexpected needs to be addressed. It’s best to delay announcing that the site is live until these final checks can be completed. We’ve even made a pre-launch checklist you can reference! If you need to announce the site launch in advance, plan the timing with your vendor and make sure there is enough buffer time to allow for a site review and bug fixes.

Don’t forget about support

Your project management has gotten you to launch. And yet, launch day in many ways is just the beginning! Inevitably your site will need something … whether it’s small bug fixes you discover after launch or some of those new feature ideas that came up in discovery but got put in the phase two bucket. In addition, keeping your CMS up to date and ensuring site security updates are in place is an ongoing and critical process. Website support is the answer. Having a support contract in place before launch ensures that you will not miss a beat and that you can evolve your site as you learn from using it, receiving feedback on it and examining analytics.

If you’ve followed these steps, your project management has gotten you far. If you need a little help getting farther, contact us.

Categories