Design Archives

UX Personas for Website Design: 5 Steps for Designers

Posted on June 18, 2020February 8, 2024 by allison

When we think about creating a website that’s rooted in exceptional UX and carries users through a seamless and delightful pathway, the first place we start is by creating a buyer persona. Building personas allows you to step into the shoes of your customers and really understand them—a key success factor for any sales and marketing team. In fact, 71% of companies that exceed revenue and lead goals have documented buyer personas.

There are a few key steps you can take to build a persona, which we’ll outline in this article.

But, first…

What is a buyer persona?

Simply put, it’s a detailed description of your target customer, written as if the persona were a real person. It’s documented in a way that lists everything from demographic information to hobbies, to pain points, and motivators. A persona is a tool you can use to create sales and marketing materials that have a specific target user in mind, rather than a generic one. By having this clearly defined target customer in mind, you can tailor your marketing messages and website content to speak directly to your target audience.

How do you use buyer personas?

Buyer personas help inform everything you do, from the words your sales team uses on a call, and the content you post on your website, to the way you write a social media post.

Your buyer personas empower every department to be more intentional with their messaging and actions:

Writers can align content with your target customers’ needs and wants. Content that’s written specifically for your audience will resonate with them better and lead them to take the intended action
Imagery and design can be informed by what would inspire and attract your personas
Sales materials can be customized to address the specific needs and pain points of your target personas
Your Development team can better plan, build wireframes, determine the scope, and align UX behaviors

How to Build a Persona in 5 steps

1. Research your audience

Knowing your current audience’s demographics is a great first step in your persona exploration. Learn more about who is already buying from you! You can find a great deal of information by digging into your website analytics and social media analytics. Some of the key data points to collect include:

Age
Location
Income Level
Interests/activities
Buying behavior

If there are gaps in your data, you can consider gathering additional information through email surveys, online surveys, focus groups, and customer interviews.

2. Document and organize your information

Use your research to start documenting your buyer personas in a clearly laid out template, that captures a full view of who they are and what makes them unique. It should include what you’ve learned about their motivations and pain points through your research phase.

Key information you can consider including:

Name, age, sex, education level, job title
Role at the company (not necessarily job title. For example, “decision-maker”)
Technology they use
Worldview (one sentence that sums up this person)
Motivation (overall goals, what gets them out of bed in the morning?)
Pain points (what’s standing in the way of their success?)
Solutions they’re shopping for

3. Bring them to life

Now that you understand your personas’ background it’s time to give them some personality. When building your persona, it’s helpful to give them a name and a visual/face. Search stock photo sites to find a good match for your persona’s demographic data and behaviors (for example, their age, casual vs. formal attire).

By bringing them to life and really personifying each persona you can start thinking of them as real customers, and easily use the personas to support conversations internally.

For example, if your marketing team has a piece of content they want to produce, you can then ask: Is this content going to be helpful for “Techie Trey”? If so, let’s be sure to address their needs and mindset when creating it.

A detailed persona example. — A detailed example of a persona, and the type of information included.

4. Speak to them

Develop messaging around your new persona(s) that will help inform the way you speak to your prospective customers on your various channels; website, social media, sales materials, etc.

Create a 30-second “Elevator Pitch”: Create an easy way to present and describe your product to your persona. Be quick and concise.
Marketing Messaging: What is the best way to describe your product or service to your persona that will alleviate their pain points.

5. Invest in a Customer Decision Journey

Now that you’ve defined your personas, we highly recommend flowing those personas through a Customer Decision Journey (CDJ). This is a great way to understand how to engage with your audience in each step of their journey with you, and strategically create pathways that support their needs. This process also helps organize and identify what your most immediate approach should be to your content strategy and your website experience.

Kanopi can help with that! If you need help creating personas, mapping out a Customer Decision Journey, or anything related to awesome UX, we’re here, ready, and willing to support you.

How to Make a Website Last: Best Strategies and Tools

Posted on May 7, 2020May 28, 2024 by allison

One of my favorite things to talk about with clients is how to get the most of your budget. As Kanopi’s CEO, I spend every day doing exactly that. So much so that I created the above webinar around making your site last for the long-term. But I also wanted to touch on some of the principles and tools here in a post

In the older days of the web, it was standard to redo a site every few years. There were enough drastic changes in the early days of the internet that every few years it was imperative to overhaul a site to keep up. It cost a lot of money, and could take anywhere from 6 to 12 months depending on the scope.

But here at Kanopi, we’ve recognized that the internet has grown up, and we’ve gotten away from that approach. Can we do a full overhaul if it’s the best option for your project? Absolutely! But we prefer to adopt a more Kaizen approach. Why? Because websites are never done. We like to say the first day of your project is actually the day your site launches, because yes, it’s wonderful that you’ve built a site, but now it has to evolve and grow over time. And the best way to do that is via a continuous improvement approach that improves it in small, positive increments over time. It’s more sustainable for both your team and your budget.

How do I apply continuous improvement to my website?

Usually you know when it’s time to give your site some love. It’s typically when you can say yes to any number of the following questions:

Has your organization evolved?
Has your industry evolved?
Can your users find what they are looking for?
Have your users’ needs changed?
Is your content presented effectively for your users?
Is your conversion rate declining?
Have your search engine rankings changed?
Have your competitors changed their approach?
Is your site fast enough?
Does your site overuse design trends?
Does your site look great on mobile devices?
Is your site easy to use and edit?

So let me ask you: even if you can answer yes to just ONE of these questions, why not make that small improvement now? Why wait until you have lots of issues that require a larger lift? If you had a 100 year old house, you wouldn’t ignore all the small problems that accumulate over time. You’d fix them as they presented themselves, or else your house becomes an expensive money pit (or a total tear-down).

This is where you need to think about your site in terms of a circular flywheel. Don’t think about your site in terms of Strategy > Design > Development > Launch, and then let it sit untouched for a while.

Instead, think of a circular process of Strategy > Implement > Learn & Iterate, where after you Iterate, you revisit Strategy again! This will translate into a site that is always being refreshed and improved without breaking the bank.

Start with Strategy

No matter what we do, at Kanopi we always start with strategy. Here is where I recommend focusing on what matters most to your user and stakeholders, and don’t waste your time on things that don’t matter. This is where you can look at doing any of the following activities;

SWOT analysis: outline your strengths, weaknesses, opportunities and threats.
User journeys: look at how your users go through your site. What pathways do they take, and do those align with the pathways you want them to follow?
Personas: how well do you know your users? Are you targeting the right audience?
Competitive Analysis: what do your competitors do well? What do they do poorly?
Data & Analytics: what does your data tell you? Do you know how to interpret it?
Site Audit: is your content old and irrelevant? It may be time to either update or archive it.

Once you’ve taken a look at all those items, then it’s time to make a plan for moving forward. There are many areas of your site where you can make incremental — but positive — improvements to address the above strategic questions:

Information architecture: should you rework your links, or change how your site is structured?
Usability: how can you make it easier for visitors to use your site?
Design: small design enhancements
Accessibility: how accessible is your code and your content?
Performance: is your site as fast as you need it to be?
Content: are your calls to action clear? Does your content speak to your users?

Consider these quick wins

Decide which of these matter the most to you and can propel you forward in the best way. You can start with some low-hanging fruit, such as:

Navigation: remove links people click on the least.
Simple theme changes: refining the type and tweaking the color palette.
Focused design: make design alterations to the homepage or key landing pages.
Accessibility: make sure your content is accessible as possible, including your images.
Reimagine or archive content: freshen up content that needs it, and archive content that is no longer useful or relevant. Check out this presentation about auditing your site for additional help, as well as this one on content strategy improvements you can make today.

Now it’s time to Implement

Here’s where we operationalize the plan. Break the work into two- or three-week long sprints. Determine what you can get done in that concentrated timeframe that will get you the results you need. It sounds a bit like agile development, and it is in the sense of breaking it into smaller chunks. A sprint schedule helps deliver value quickly and consistently. As we like to say: small bites create big wins!

Learn and improve from there

Now that you’ve completed that one discrete piece, measure it. How did it go? What can be improved?

Doing these activities can also help keep the momentum going:

Share wins and successes: talk with your team about what worked and how it can be made even better.
Measure regularly (weekly/monthly/rolling): by doing regular data checks, you can keep on top of what is still working over time.
Schedule user testing: remember, your site is all about meeting your users needs. Test with users regularly to make sure you’re still meeting their needs.
Use sprints to integrate feedback: you can even set up feedback on a sprint schedule.

Will all that information, keep the momentum going and head back to Strategy!

Continuous improvement keeps you nimble: you’ll to get into a place where you’re doing less, launching more often, and making more impact. And if something doesn’t work as well as expected, luckily it’s over after a short time frame, so you can move on to the next piece.

And if you have a Drupal 7 site, we wrote a whole blog post specifically about how there’s still life in your D7 site. You can keep it going for a while past its expected end of life in Fall 2021. (On the other hand, if you’re determined to upgrade to Drupal 9, check out our guide on D9 planning: a guide to upgrading or extending the longevity of your site.)

Tools for making your website last

Here are some tools that can help you extend the life of your site. This is not a comprehensive list (each category has many more great options), but these are some of our regular go-tos:

SEO

Search engine optimization is an ever-evolving practice of increasing the quality and quantity of website traffic by increasing the visibility of your website (or a specific web page) to users. But you don’t have to be an expert in SEO to make demonstrable improvements to your site with some handy tools:

Google Search Console, Bing Webmaster Tools: if you are not communicating directly with the search engines, you are missing out on valuable tools and information.
SEM Rush: research both your and your competitor’s keywords, and identify pages that rank for the terms for which you want to rank.
Screaming Frog SEO Spider: crawl your site like a search engine does, and see exactly what they see. Helps identify issues and opportunities.
Moz Local: if you manage a local business, check out this suite of tools that helps you define data about your business, and distributes it to aggregators and sites where you want to be found.
Majestic: research and develop backlink strategies with Majestic’s incredibly vast link database.

Accessibility

These days it’s imperative to make your site accessible. In many industries — and the number is growing — it’s illegal to have an inaccessible site. These tools can help you get there:

Wave: a browser extension that checks for compliance issues found in Section 508 and WCAG 2.1 guidelines.
Lighthouse: an open-source automated accessibility testing tool. Available as a browser extension, from the command line, or as a Node module, this tool will scan the URLs for performance, accessibility, SEO, and more.
Axe: Axe is an accessibility testing engine for websites and other HTML-based user interfaces. It’s fast, secure, lightweight, and was built to seamlessly integrate with any existing test environment so you can automate accessibility testing alongside your regular functional testing.
SiteImprove: their content and accessibility audits use Web Content Accessibility Guidelines (WCAG 2.1) as its guide. The tool checks that there are no broken links or misspellings, and also identifies when page content is too dense or hard to comprehend.
TotA11y Plugin: this tool helps visualize how your site performs with assistive technologies.

Additionally, here’s another blog post we wrote about Kanopi’s Favorite Accessibility Tools. Also read our thoughts on how content editors hold the keys to an accessible website.

Usability

It’s critical to test with your users to make sure they are getting the information they want when they want it. These tools will help achieve that:

UserTesting.com: a usability customer experience testing platform that gets on-demand feedback about a product or service from real users.
HotJar: HotJar uses heatmaps so you can see how visitors are really using your website, collect user feedback and turn more visitors into customers.
Crazy Egg: you can use Crazy Egg to learn what your web visitors are doing. Heatmaps, recordings, A/B testing & more.
Optimizely: It’s best known for its A/B testing, and allows for terrific segmentation for more accurate results.

Measuring Data

We always recommend measuring what matters, and that will be different for every organization. What matters to you? Is it the number of page views? Is there a certain conversion goal you are trying to hit (like number of donations, or email newsletter sign-ups)? Is it page views? Or perhaps speed?

Google Analytics: this is Google’s free web analytics service that allows you to analyze in-depth detail about the visitors on your website
Google Tag Manager: a free tool that allows you to manage and deploy marketing tags (snippets of code or tracking pixels) on your website or mobile app without having to modify the code.
Lighthouse (again): because this open-source automated testing tool does so much more than just accessibility, we had to include it here as well. Available as a browser extension, from the command line, or as a Node module, this tool will scan the URLs for performance, accessibility, SEO, and more.
GTmetrix: a free tool that analyzes your page’s speed performance. GTmetrix generates scores for your pages and offers actionable recommendations on how to fix them.

However you measure your data, you will have to track your users. And it’s critical to find the balance between learning from your users without getting insidious with how the data is being collected. We all want to know more so we can make better websites that attract users, but we need to be responsible about it!

With small bites, you can make your website last!

At Kanopi, we love to say, “small bites create big wins!” And it’s just so doable: you really can make huge improvements in smaller chunks to avoid feeling overwhelmed and also keep your budget in check.

But if you do need the assist to make your website last for the long-term, that’s our specialty. Contact us. We’d love to help.

As-Needed Website Design Support with Kanopi

Posted on May 4, 2020November 21, 2024 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 February 24, 2020September 1, 2020 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 October 31, 2019September 1, 2020 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 October 2, 2019November 13, 2024 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 August 2, 2019August 26, 2024 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):

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:

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 March 22, 2019October 10, 2019 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 February 21, 2019September 1, 2020 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.

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!