Search Kanopi

Category: Design

As-Needed Website Design Support with Kanopi

Posted on by allison

Have you ever wished you could access an entire website agency’s genius on an as-needed basis? Have you worked with website support agencies that were good at keeping your site running and your software up to date, but less able to ensure its continued success? 

Web support is one of our strengths, mainly because we do it differently than other agencies. Support at Kanopi Studios is so much more than quick bug fixes and software updates; you’ll get access to an entire team of senior-level experts as needed, from user experience to design to development — all within a set monthly budget. 

Here are some examples of design services you can get in support:

  • Rethinking your navigation.
  • Incorporating new branding (logos, colors, typography, theming, etc). 
  • Reimagining your homepage, increasing conversions, while keeping your software up to date.

The Kanopi team’s ability to offer a full range of flexible services is just one of the ways we go above and beyond to support our client’s needs.

Turning concepts into masterpieces

“Many of our clients start with great ideas of their own, and may even have sketches of what they are looking for,” says Denise Beyer, Director of Support. “Bringing a designer in to hear their ideas, learn about their goals, and ask the right questions always adds an extra level of creativity and polish to the final design.”

Even a small investment in design can help you save budget in the long run. A few quick design mockups can help teams evaluate options and think through solutions before they are built, ensuring that the work gets done right the first time.

Design-thinking supports user needs

Kanopi’s designers and user experience strategists collaborate with clients to analyze the challenges your users face and find the best solution to help solve them.

“If your users repeatedly call you for help with the same issue, or have a hard time finding information on your site, our user experience team members can help,” Denise says. “We’ve worked with nonprofits to help increase their donations, helped website users find answers to common questions, increased conversions for businesses, and much more.”

Making smart look and feel updates

The Kanopi design team also offers branding support, whether you need an updated logo, a fresh look on specific pages, or a re-skin for your entire website.

“Some of our clients work with outside branding agencies and just need their websites to fit a new look, and others look to our team to help them update their brand design,” Denise shared. “We meet our clients where they are and are available to help with whatever is needed.”

See our work in action

Below, we’ve included a few examples of design projects that our support team has completed for our amazing clients. 

A redesigned homepage and new navigation for the Colorado Health Foundation

New, translatable page templates were designed to enhance the visibility of Colorado Health’s focus areas and priorities. This new design optimizes website real estate and standardizes design elements and components to ensure a cohesive and impactful presence. We also removed their complicated mega menu and introduced simple navigation with clear user journeys.

Colorado Health Foundation homepage before Kanopi's upgrades
BEFORE: Colorado Health Foundation’s Homepage
Colorado Health Foundation's Homepage after Knaopi's upgrades
AFTER: Colorado Health Foundation’s Homepage

A reworked mega menu elevated TopBloc’s content and bolstered their identity

TopBloc recognized that users were getting stuck searching for content, so they came to Kanopi for a focused fix with their mega-menu. Based on user research, we crafted a revised UX strategy and meticulously reworked and renamed items in their information architecture, ultimately elevating their site’s content and bolstering their identity. Both Desktop and Mobile menus were redesigned and developed for a seamless flow and pages are accessible and clear.

TopBloc's previous menu before Kanopi's upgrades
BEFORE: TopBloc home page without the mega menu
TopBloc's menu and navigation after Kanopi's upgrades
AFTER: TopBloc’s new mega menu

An improved user experience for The Louis Riel Institute

Our redesign for the Louis Riel Institute website’s archives gives the site a fresh, modern look, complete with an updated color scheme and an intuitive layout that enhances the user experience.

Louis Riel Institute Archives Homepage before Kanopi's upgrades
BEFORE: Louis Riel Institute Archives Homepage
Louis Riel Institute Archives Homepage after Kanopi's upgrades
AFTER: Louis Riel Institute Archives Homepage

A visual refresh for First Tee’s Partner Pages

A CRO audit led to the redesign of First Tee’s partner page. The project utilized existing block patterns and introduced a couple of new ones to enhance user engagement and conversion rates.

First Tee Partner Page before Kanopi's improvements
BEFORE: First Tee Partner Page
First Tee Partner Page after Kanopi's improvements
AFTER: First Tee Partner Page

Impactful improvements to UCSF HIVE

UCSF Health Innovation via Engineering (HIVE) needed a new refresh of the homepage, navigation and people pages in order to better display and surface their content. An accessible video on the homepage adds interest while keeping the site WCAG compliant.

UCSF HIVE Homepage before Kanopi's upgrades
BEFORE: UCSF HIVE Homepage
UCSF HIVE Homepage after Kanopi's improvements
AFTER: UCSF HIVE Homepage

New functionality for The University of Michigan School of Information (UMSI)

Often our Support team is tasked with creating new pages using existing brand signals, and we did just that for University of Michigan. UMSI conducts research, builds solutions and prepares students to bridge people, information and technology. They needed a new section on the site that would be a centralized media center and newsroom to connect journalists and government officials with UMSI thought leaders and faculty experts. This included a section on “trending topics” which allows users to filter by topic to easily find faculty experts.

University of Michigan School of Information (UMSI)'s Media Center page
UMSI’s new Media Center page
University of Michigan School of Information (UMSI) page for professor Cliff Lampe
“Trending Topics” were added to individual bio pages as well to make it easier for users to find faculty experts.

To further extend their media offerings, UMSI launched a new Podcast called, “Information Changes Everything.” For this new podcast, there needed to be website functionality to promote and share the information on each episode, as well as the written transcript following each episode.

University of Michigan School of Information (UMSI) podcast landing page
The landing page for the podcast
University of Michigan School of Information (UMSI) individual podcast page, this one for Jeff Furman of Ben & Jerrys Ice Cream.
The individual episode page

Working with Kanopi’s support team

The Kanopi team looks at your site holistically, rather than as a series of tasks. When you work with us, you’re hiring a team of senior-level experts who are available on-demand to help with all types of website updates. And no job is too big or too small.

Ready to learn more? Contact us to discuss ongoing improvements for your website. 

What is a style tile (or mood board), and why is it helpful?

Posted on by allison

As a designer, it’s always exciting when a client says “Let’s start from scratch.” You are the unicorn, the holy grail, in other words, a designer’s dream client.

But this is where your project can get into trouble. Without a framework, there’s a high chance your team is presented with a design that neither represents your voice nor (and more importantly) speaks to your target audience. 

Mood boards are an essential step towards creating any visual language in this type of scenario. At their core, a mood board is a curated collection of images that visually represents the creative direction of a project. They will typically include existing elements of your brand such as color palettes, typography, illustrations/iconography, and image style direction – all wrapped up to meet a particular mood, voice and tone. Style tiles take this a step further and include user experience elements like form fields, component layout direction, etc. 

These all will feed into your Pattern Library. Learn more about pattern libraries here.

These directional deliverables are typically conceived during or after the strategy phase, once a solid approach is derived from various activities like stakeholder and user research, content evaluation and competitive analyses, and can be done simultaneously with information architecture (IA) work and wireframing. 

But to be clear, style tiles are NOT Layouts. They are meant to be used as a means to evoke a specific emotion or style within the design parameters of your brand, giving the design team a visual path forward when creating your website. The mood set will be applied to the layouts once the user experience approach is approved. And those layouts will be carried forward into development. 

Below are four reasons why mood boards/style tiles are an essential step in design development.

They aid designers to hone your concept in a low stakes environment. 

This practice allows a designer to explore various style concepts quickly without burning through your budget. By focusing energy on one aspect at a time, a designer is able to create more efficiently because they don’t have to consider all design elements at once. 

Style tile for BADCamp, showing use of images, buttons, colors, and statistics.
The style tile for BADCamp

They communicate design vision in a valuable, shareable format.

It can be very complicated to express your visual ideas using words alone. Style tiles give you an idea of what their finished product might look like and avoid any misinterpretations. It creates a shared vocabulary to use when discussing design concepts that can be used by both client and designer.

These three style tiles were created using the following adjectives: trusting, modern, corporate, impactful, and energetic.

They allow us to collaborate on designs early.

Using this iterative approach, designers create opportunities to jumpstart invaluable aesthetics conversations. Getting your feedback and buy-in early and often provides space for the designer to ask followup questions and allows you to brainstorm ideas as the design progresses. In this approach, we’ve opened communication lines that give you more ownership over your designs.

Style tile for Moscone Center, showing colors, photography, buttons, and typography.
Style tile for Moscone Center

Demonstrating and maintaining trust with you is critical. 

The beginning of a client/designer relationship is the most tenuous when both parties are building their relationship. A style tile educates a designer on your aesthetic preferences while you gain trust in your designer’s vision.

Style tile / mood board for General Data
Style tile for General Data

Without style tiles, a lot of time could be sunk into designed web pages that do not work for your needs. At this point it’s difficult to backtrack because a lot of decisions — layout, colors, graphics, imagery — have been decided and will need to be re-considered. This can have a cascading effect on other designed elements which will negatively impact your budget and timeline. 

For example, let’s say you wanted to change a button’s color from blue to orange. Seems like a simple color shift! But a designer would have to consider how that affects secondary buttons, tags, text links, etc. to ensure the user experience is still intuitive: if orange is the new link color, then anything else that needs to be a link should also be changed to orange to manage user expectations.

The only time we feel comfortable skipping this useful step is when branding guidelines have been established and you are not looking for any design refresh. Otherwise, style tiles are an integral part of our design process. It helps to build a strong  collaborative relationship with you through a holistic, visual definition for your organization. The design process will feel less nebulous as you are consulted during multiple touchpoints throughout the process. 

And if you need help creating the mood for your site, contact us. We’d be happy to help.

Custom Post Types: Using WP for Content Management

Posted on by faye

I just grab a handful of forks and spoons and knives and shove them into the tray, ignoring the divisions made to help organize your utensils, and then just hope nobody ever looks in there to realize how ridiculously lazy I am.

Of course, separating my cutlery would make it easier to find what I’m looking for, especially considering I seem to have 6 million spoons and only 5 forks. It’s completely silly that I don’t.

WordPress has the same problem as my cutlery drawer

Out of the box, WordPress websites come with Posts and Pages. Pages are what we use to build a site’s homepage, contact page, about page, landing pages, etc. Pages almost always appear in the navigation menus of your site, otherwise users would have a hard time finding them.

Posts, on the other hand, are meant to show off content in an Archive. For example, a news feed, or a blog. They also auto publish; add a new post and it magically appears at the top of your blog page (which is actually not a Page). Posts also use Categories and Tags, which can be clicked on to view Archives of posts in those Categories or Tags.

Where this gets messy is when people use their Posts as sort of a catch all for content that doesn’t fit on a page. Press releases, resources, news, blogs, announcements, videos, links, etc. I’ve clicked on the “Posts” in the WordPress dashboard and cringed to see all that content jammed into one place, knowing it must be an absolute nightmare for the site owner to navigate and sort through.

Post Formats to the rescue?

Not exactly. WordPress has something called Post Formats which allows you to choose a format for your Post. You can choose if something is a video, or a link, or a gallery, a quote, etc.. But unless your theme has templates for each one of those types, they’re useless. And considering there are 9 post formats, that’s a pretty big budget consumer for something that still won’t solve the larger issue; there’s just too much cutlery in one place.

Custom Post Types to the rescue! For realz this time.

The truth is, WordPress is made up of posts. Users are posts, Categories and Tags are posts, files and images are considered posts, even Pages are posts! The entire infrastructure of WordPress revolves around this one method of data storage. As a result, it’s really easy to make more.

While there are Custom Post Types Plugins, a developer can literally add a custom post type through their own plugin, or to a theme’s functions, with just a few short lines of code. They can add Categories and Tags to it, tell it to behave like a Page or a Post, or give it it’s own custom taxonomies. This essentially means you can separate your content by purpose, and then present it back to the user accordingly.

Cleaning up the Cutlery Drawer: A Study in Books

Let’s get practical. I like cool used bookstores, so let’s imagine you have a used bookstore and need a website that works for the type of content you want to show.

The default Posts that come with WordPress, those will be your news / blog posts. Thanks to Gutenberg, you can really design your posts as you need them, without post formats and templates. 

You’ll want an Events section, so you can brag about the upcoming J.K. Rowing book signing, or the long awaited release of Book 3 from Patrick Rothfuss. With Advanced Custom Fields (ACF), Kanopi could make a robust Custom Post Type that has event dates and times, associated authors with their social media, promotional images. We could even display this in a calendar format with integrations for Google Calendar reminders.

Next, you’ll want a rare book section. Obviously your bookstore is amazing and has some serious stock that you’re not about to upkeep online, but there’s always those special books that could bring in the collectors. Our next Custom Post Type might be Rare Books, and with the magic of ACF, we could make bibliographies and a gallery of images of the book and some of its pages. Maybe a little history blurb about the book or what makes it such a hot ticket item for collectors.

Now, you’ll also want to draw in average readers and book lovers who maybe don’t have the budget for rare books, so let’s make a Custom Post Type for Recommended Reading where you can put together a list of some highlighted books that are likely to appeal to a wider audience. It can be categorized and sortable too, so users can browse and filter. It’s going to be amazing.

Lastly, a Team Custom Post Type, because your book store has a staff of six, plus the store cat (because you’re really cool like that). Each post becomes a Team Member page, with a bio, job title, and — this is where it gets really neat — you can associate them with their favorite books from the Recommended Reading posts. In fact, let’s go one further, we can attach your staff to the blog / news posts they’ve written and show that alongside their bios. Kanopi actually does this for our own staff.

Where previously you might just jam all this content onto a single page, or into a mash up of Posts, we can take all this content and give it custom data entry and custom templating that allows for some neat cross connection and interactivity for users to better travel your site and find what’s relevant to them. Have a cat that lives at the store? You never know . . . the store cat’s blog posts might be a huge hit.

Structured Content is Mappable Content

What if simply by telling your cutlery drawer what you’re having for breakfast, it was able to select the necessary eating implements for you? Having cereal? Here’s a spoon. Pie and ice cream? No judgement, here’s a serving knife, ice cream scoop, and a fork.

The additional advantage of an intentional content structure using custom post types is that you can then apply what’s called schema data to essentially map your content. Our fictional bookstore could actually pass specific information to Google about those rare books and events to get them in front of the people most likely to be genuinely interested. Consistent data is also extremely useful for filters and searches, announcement bars, feeds, and more. It allows for a deeper level of content strategy and design to better achieve your online goals.

Are you convinced to use Custom Post Types in WordPress? Ready to start stacking your silverware? 

Get organized with Kanopi

How to Prevent Scope Creep

Posted on by allison

Your project is off to a good start; progress is being made, the timeline is being honored, and the budget is on track. Then one day you check your email and learn that a key stakeholder has left the project. You hear the suspenseful theme from Jaws in the back of your mind; this is the perfect scenario for that dreaded fiend scope creep to show up. 

I say fear not!  

Like a robocall in the middle of the night, scope creep is something nobody wants to encounter, especially during a project. That being said, it is also a natural part of any project and is bound to happen. The good news is that you can be proactive about heading it off at the pass, or preventing it from happening in the first place.     

Common Contributors to Scope Creep

Scope creep is the introduction of anything that can cause the focus or goals of a project to expand, and go beyond the original scope of the project. It’s not necessarily a bad thing when handled properly, but it can put the success of a project in jeopardy when handled poorly. 

Many factors can contribute to scope creep but most commonly it’s the humans that do the creeping. Any individual could knowingly or unknowingly contribute to creep; personal needs, internal politics, or the inability to make decisions are just some reasons that an individual or group can cause a project’s scope to expand. Other contributors to creep are:

  • A change in stakeholders
  • Revisions to the project goals
  • Introduction of new features or functionality
  • Additional rounds of revision to deliverables

With so many areas for creep to originate, how do you prevent it?

Preventing Scope Creep

The sad news is that you can’t prevent it from growing; humans are curious, and it’s natural that there will be questions and requests that will prod scope. So while you can make sure the team is educated in what the scope of the project is, there will always be some level of curiosity as to what additional is possible. 

You can, however, prevent it from affecting your project. I’ll go into greater detail as to specific approaches you can use for preventing creep, but it’s important to note that prevention starts with being engaged, and being a defender of the scope. 

It’s easy to be so caught up in the day to day running of a project that requests may be made or requirements added  that will push the boundaries. Consider yourself standing guard preventing those requests from making their way into the project. If you fall asleep at your post, you may find yourself clambering to remove the creep.     

Know What’s in Scope

Kind of a duh, I know, but this is so often overlooked. It’s not uncommon for project participants to come and go throughout the course of a project’s life cycle. Therefore every consideration should be given to making sure every person has reviewed the project scope; which should be provided in clear documentation that outlines the roadmap for the project. This may be in the form of a contract, proposal, or a project outline. If you don’t have one, define the scope before the project even begins.

The most effective documentation not only goes into detail as to what is IN scope, but also what is OUT of scope. This helps to clearly define where the focus will be for the project. Having participants review this documentation stops scope creep in the minds of those who might introduce it, and makes everyone a guardian of the scope.  

The project manager is the core individual monitoring the pulse of the project, and it is a big responsibility to act as the sole protector of scope. By imbuing this mission in others you build a team that can move together toward a single destination, rather than spending time keeping everyone on the same path. 

Establish an MLP

MLP stands for minimum loveable product; essentially the simplest version of your completed project that you can live with. An MLP can make a huge difference in ensuring that everyone on your project is rowing in the same direction. By clearly defining what makes up the MLP, you’ll have a goal in mind where the team can place their focus before working on lower priority, or scope creep items. This isn’t to say you can’t iterate and improve on the MLP once complete; by working on what’s most important you’ll at least have something that you’re happy with. Everything else is just icing on the cake.

Document the Changes

There will always be changes during the course of a project, it’s unavoidable and that’s fine. What’s important is how those changes are adapted to the existing scope. “Change Requests” turn new requirements or requests into official scope. They’re crucial especially when additional work is going to push the boundaries of a budget, and additional funding is needed. And if additional funding isn’t possible? A change request can clearly outline how existing scope items may change or be removed to make room. Without a change request, scope is not only going to creep but expectations are going to be misaligned.

Document the Risks  

We’ve talked about making everyone a guardian of scope, but because the team can’t be on alert 24/7, how do you focus everyone’s efforts so you know what to guard against?  Documenting risks is another way to reinforce the team’s focus. Risks are those items that you know could potentially impact the success of the project or cause the scope to balloon. You may already know what they are, or they could arise organically throughout the course of the project. Regardless, what is important is to document the risks and make sure the team has transparency into those items. Include a detailed description of the item, if known, a plan to address it, and better yet; assign someone to keep an eye on it.  

Scope creep also provides opportunities!

Hopefully I haven’t made scope creep out to be the villain; as much as it is something to be on the lookout for, it’s also an important opportunity to start planning for the future. Document, and track them; those items that may be scope creep now could also be the next positive expansion for your project. 

What is a Pattern Library?

Posted on by kanopi_admin

One of the keys to a great user experience is consistency. Your users should be able to understand what an element on your website is for and how to interact with it, no matter where it appears on your site. 

Identifying those reused elements (also referred to as “modules” or “components”) is a hugely important piece of the wireframing and designing process.

So the question becomes, once these elements are created, why would you design them more than once? That would be a waste of time! How can we best make use of elements that already exist?

So what is a Pattern Library?

Pattern libraries are the set of components upon which your site is built. Your site is essentially made up of pieces that act as a vocabulary upon which you can build your pages. These include forms, buttons, blocks of text, calls to action (CTAs), photo captions, etc. Good designers will ensure that within those components are consistent and reflect the brand properly in regards to typography, color usage, and other design treatments.

The designer will start from the smallest pieces of a component, and build from there. Using Brad Frost’s atomic design principles, which mimics the building blocks used in chemistry, the progression is atoms, molecules, organisms, templates, then pages. These look like this (definitions from Brad Frost):

  • Atoms: include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.
  • Molecules: relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.
  • Organisms: relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.
  • Templates: page-level objects that place components into a layout and articulate the design’s underlying content structure.
  • Pages: specific instances of templates that show what a UI looks like with real representative content in place. 

These building blocks allow site builders and designers to create a site in a modular way, building pages with reusable elements. 

Why is a Pattern Library valuable?

With a focused approach, designing in a pattern library can save everyone a lot of time and ensure your users have a consistent interaction with your brand online. Here are a few reasons why:

Easier Change Management 

Once the pattern library is created, and the full pages are assembled, adjustments may need to be made to improve the flow. But with the implementation of a pattern library, it’s a much simpler process since each element can be adjusted slightly on its own, updating the page easily and quickly.

Scalability

Now, let’s say you need to rebrand and tweak colors, or add a new piece of functionality. These types of updates are not only much more effortless to implement in a library, but will be cohesive with the already defined patterns. And if you need to add pages to a site, you can simply reuse existing elements from the library to create those pages, and scale from there.

Consistency

Because the components in a pattern library are created with the brand in mind, and consistently used across pages of a site, it results in a better user experience for end users. Users will be able to navigate faster and understand what the design and layouts for each interaction mean.

How do I create a Pattern Library?

While several tools can be utilized to create pattern libraries, our favorite right now for design is Sketch. Here is an example of a pattern library Kanopi created for Results 4 Development using Sketch (LNCT.global):

Pattern Library

What can be really powerful and magical is a coded design system, which is when the library is built with code as opposed to as design files (like Sketch) The benefits of a coded design system is the visual design elements can then be connected to your website. That then allows even faster changes to be made by designers and to your site. Kanopi coded a pattern library for https://www.hjf.org/ to make it even easier to change elements in the future. Here’s an example using a tool called Pattern Lab:

Pattern Library Sample

Here are some other trusted examples of good pattern libraries:

Is a Style Guide the same thing as a Pattern Library?

“Style guides” and “Design systems” are often used as interchangeable with the term Pattern Library. In reality, they all work together.

Your style guide will contain elements of brand voice and tone, typography, colors, logo usage, etc, to create standards which guide the consistency of your brand mandatories. Those design signals are used to create brand consistency in your pattern library. Your pattern library and style guide are a subset of your entire Design System.

Let’s scale together!

Pattern libraries are just another tool that allows Kanopi’s designers to create superior user experiences and visual design patterns for our clients. We always build with the future in mind, because we not only create new or redesigned sites, but we also we have an amazing support department that helps sites evolve. With scalability and ease of change in mind, we can help our clients and our support team to maintain and improve the site for you over the long term. Contact us if you’re interested in working with us on your next project. 

Kanopi Studios Named an Industry Leader on Clutch

Posted on by sean

And Kanopi is proud to be one such partner to our clients, from development to comprehensive web design, our team creates solutions that empower our incredible clients.

As we mentioned before, we have enjoyed a positive presence on Clutch, a ratings and reviews platform for B2B service providers. Although we have always been a top firm on Clutch, we just received a new accolade. We are excited to share that we have been awarded the title of industry leader, topping the list of the best web design companies in San Francisco. After being put through the wringer with nearly 400 of San Francisco’s top web designers, we were listed as eighth overall.

Clutch analysts use a number of metrics to evaluate service providers, but the top consideration for quality is what a firm’s clients have to say about them, and our clients have delivered in spades. With eight verified client reviews, we maintain a perfect rating of five stars, and we have received feedback such as:

“I think there’s a professionalism at Kanopi Studios that is not always present in the web development world. They’re adept at bridging the gap between plain language and tech-speak. They also make sure they’re thinking about any possible side effects caused by executing a task and they’ve mastered the almost lost art of effective, friendly customer service.”

We always appreciate hearing from our clients, and what they have shared is better than anything we could have hoped for. Their feedback is valuable as we look forward to improving our offerings.

In addition to being named an industry leader, we have also been featured on Clutch’s sister-site, The Manifest. The Manifest is a resource that provides help to firms of all shapes and sizes, offering industry insights and how-to guides regarding a number of projects and challenges. We were featured on their list of the top web development companies in San Francisco, with notice being taken of the quality of our work and the reputation of our clients. Our feature on both Clutch and the Manifest highlights our ability to design and deliver web projects of the highest caliber. And to demonstrate that, we have put up a portfolio on Visual Objects, a place for prospective clients to compare the work of various web designers in San Francisco.

We are hopeful that the expansion of our digital presence will help us build new partnerships, but we must take the time to acknowledge the partnerships we have made along the way. A huge thank you to all of our clients! Your support means the world to us, and we cannot wait to see what you have for us going forward.

Audience Behavior: Learn More with User Research

Posted on by jess

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!

Kanopi Studios is a Top Provider on Clutch

Posted on by sean
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.

Accessibility at BADCamp = Education, Inspiration and Opportunity

Posted on by sean

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!