Focus Website Content on your Customers' Knowledge Gap

The biggest hurdle when developing a website is producing the content. All of us who have experienced the process of launching a website will probably agree that it was the content development stage that dragged out forever, that delayed the launch. Even deciding what content should be on the site is difficult. Over the last two posts¹, I have highlighted the importance on focusing on your customer first, and outlined strategies to identify their needs.

Identify your customer’s knowledge gap

Another strategy is to identify your customers’ knowledge gap. The concept of the knowledge gap was presented by Jared Spool (of UIE fame) in his presentation “What Users Want”². The knowledge gap is the gap between two points on a spectrum, the current knowledge and the target knowledge.

The current knowledge is the information your customer already knows about your business domain: your company, service, product, industry and market. The target knowledge is what your customer needs to know to make a decision.

Spool suggests your website content targets the knowledge gap. It is a wasted effort to develop content before current knowledge and after target knowledge.

How to find the knowledge gap?

A quick start on identifying your customers’ knowledge gap is to create two lists side-by-side. List 20 items your customer knows about what you are trying to sell—their current knowledge. Then, list 20 items your customer needs to know to make a decision—their target knowledge. You can help refine this list by visiting forums where your customers engage, and observe the questions that are being asked.

What is your customers’ knowledge gap?

[1] Create a Sketch of your Customers’ Needs and Ask 20 Questions to Build Customer Empathy

[2] What Users Want

Create a Sketch of your Customers’ Needs

Flickr Photo Credit: ruimtevolk

Last week I wrote about Asking 20 Questions to Build Customer Empathy, a quick start guide to Customer-Centered Web Design. This week, I want to expand on that, and help you create a sketch of your customers’ needs.

A “sketch” is a perfect noun for what we want to achieve. From my Mac dictionary:

“a rough or unfinished drawing or painting, often made to assist in making a more finished picture”.

Exactly. We want to make a sketch of your customers’ needs before we start on the finished picture, in this case, your website. This sketch will assist you in developing the finished picture.

Ok, let’s get started. Here are five areas that you can brainstorm to start developing the sketch of your customers’ needs. Brainstorm 20 answers for each area (see Why twenty questions?).

1. Goals: What problem are your customers trying to solve? Alternatively, what opportunity are they trying to capitalize?
2. Motiviation: Why are they motivated to use a product or service like yours? Sure consider the typical carrots and sticks¹, but also consider other motivating factors such as autonomy, mastery, and purpose².
3. Outcomes: What is the successful outcome? Paint a detailed picture of what this looks like.
4. Pain: What is stopping your customer from solving their problem in their current situation? Think money, attitude, misconceptions, and values.
5. Emotion: What do they need to enjoy the service or product? Sure, a problem might get solved, but it needs to address the emotional needs of your customer as well. Why can’t it be fun?

Now you have this sketch, what content will you develop for the website that addresses their goals, motivations, outcomes, pain and emotions? How will you structure the website to present this content?

I’m all about finding quick ways to help you shift your focus from what you are trying to sell, to the needs of your visitors, the customers of your website. It doesn’t necessarily mean you need to have a huge external research project. The people in your company, such as sales and support representatives have a huge body of knowledge about your customers that needs to be tapped. Get them involved in this brainstorming process.

[1] http://en.wikipedia.org/wiki/Carrot_and_stick

[2] Dan Pink on the surprising science of motivation

Ask 20 Questions to Build Customer Empathy

Flickr Photo Credit: horiavarlan

This morning I wanted to write a post providing a quick start guide for Customer-Centered Web Design. The main principle of this technique is to build empathy for your customer before designing your website. When you empathize with your customer, you will understand their goals. When you design your website to meet their goals, you will achieve your business objectives. (The term customer is inclusive of all visitors to your website, including prospects and leads).

Creating provisional or ad-hoc personas (user profiles)[1] was one direction I started with. This would involve brainstorming your customers’ goals, motivations, outcomes, pains and emotions. But as soon as I started that blog post it just didn’t feel quick enough! I’ll keep that for a future posting.

So here’s the super quick start guide for Customer-Centered Web Design:

List 20 questions your customers are asking about the problem they are trying to solve.

Simple, yes? Let’s break this super quick start guide down.

Why questions? At the end of the day that’s why people are searching on the Web. There are even websites dedicated to answering questions such as Yahoo! Answers[2] and Stack Overflow[3]. They are trying to solve a problem. “How do I solve this?” “How do I do that?” “Why is this happening?” Your website should answer the questions your customers have. If it doesn’t, then your customers will go somewhere else.

Why twenty questions? Years ago, I attended a Brian Tracy program called the Phoenix Seminar. In the program, Brian recommended generating twenty ideas when brainstorming. Typically the first ten will be easy, while the last ten will be more difficult. But often the most valuable. Was the first twenty easy? Well try another twenty. No, I’m not being mean. It’s amazing what happens when you start thinking beyond the obvious.

Over the last few weeks I have been assisting with several graphic design and communications companies on proposals. The proposal process always starts with “what shall we do for this website?” For me that always feels like the wrong starting point. The website becomes ego-centric or design-centric (design for designs sake). Quickly brainstorming twenty questions from the customer’s perspective helps build empathy and achieves a website that will be successful for your business.

[1] About Face, Alan Cooper

[2] Yahoo! Answers

[3] Stack Overflow

Designing Dwayne Brown Studio: Focus your website on key customer tasks

Summary: Focusing your website on key customer tasks maximizes your budget and lead generation.

I position myself as a Ruby on Rails developer in Montreal for database web applications. However, I often have to put on other hats for a project, depending on the budget and the team members involved. In the case of Dwayne Brown Studio, I was responsible for not only the programming of web pages and custom content management system, but I was also responsible for the visual design, interaction, and architecture of the site.

When defining the architecture of a website, I use a customer-centered design approach. A customer persona, a fictional representation of the target audience for your website, is defined. In this case, it was Helen Brightman, a communications manager for a private school in Ottawa. The key task for Helen is to navigate the portfolio to identify photos related to education.

Online photography portfolios are often poorly designed. They suffer from overly “creative” navigation tools, small or abstract thumbnails, and no captions, making it difficult for people like Helen to identify relevant imagery. Even Dwayne’s previous website suffered from some of these issues.

Using an agile development technique know as Do The Simplest Thing That Could Possibly Work, I focused my efforts on creating a simple portfolio that was easy to navigate.

Three guiding objectives were used in designing the portfolio:

1. Help Helen identify relevant imagery
2. Allow Helen to scan photos quickly
3. Reduce pogosticking—jumping back from thumbnails to detail pages

This resulted in the following designs:

Dividing the portfolio into sections where related photos are grouped together, allows Helen to easily identify relevant imagery:

Large thumbnails on a scrolling page allows Helen to scan photos quickly:

A navigation control allows Helen to navigate through photos without having to return to the thumbnails page:

By identifying the key tasks of your customer, you can focus the web design process on what really matters and avoid “creative” solutions that just don’t work for your target audience.