The 5-Step Process I Use to Plan & Conduct Usability Studies

Over the past 15 years, I have conducted more than 400 usability tests on types of sites and apps. Here is my process.

My process for planning and conducting a usability study from start to finish includes 5 steps:

  1. Discovery
  2. Recruiting & Scheduling
  3. Script Development
  4. Facilitation
  5. Analysis & Findings

Below is a brief overview of each step.

1. Discovery: Laying the Groundwork

In this phase, I will learn about the objectives of your usability study: what you want to specifically learn and who you want to test your site or software. I use this information to write a usability test plan.

The test plan includes every detail that will be used for recruiting participants and developing the script, plus the testing methodology I will use and the overall schedule. It’s the foundation for everything that lies ahead.

There are several types of testing methodologies and hybrid approaches I use when conducting a usability study. One of the most common is called the “think-aloud methodology.”

Think-Aloud Method –
Simply, I ask the participant to “think aloud” as they complete each task. This inner dialog gives us insight into what is frustrating, interesting, confusing, and so on, so that I can understand where to explore more deeply. This information also gives me important clues as to how a usability issue might be best resolved.

But… I’m careful to not rely too much on what the participant says. What comes out of their mouth sometimes is not a true reflection of their experience.

This is why usability study facilitators are more interested in user behaviors rather than opinions (better suited for a focus group study) or preferences (better suited for A/B testing or an online quantitative study).

Once the test plan is approved, I move into recruiting and script development.

To learn more about the number and types of issues that I see in a typical usability study, please read my post Confusing, Incomplete Content Creates the Most Usability Issues.

2. Recruiting & Scheduling: Finding the Right People

The recruiting process makes or breaks the quality of any usability study. I use a rigorous approach to ensure I find participants who truly represent your customers or users.

The output from this phase includes 2 documents: the screener and the participant schedule. Working from the test plan, I develop a “screener” (a phone script or online survey) to help me find the right participants — and weed out those who are not a good match.

The aptly named “participant schedule” includes a list of the participants, the date and time of each session, and background information about each person (e.g., age, household income, profession).

Once the screener is approved, I move onto recruiting.

I find high-quality participants using one or more of the following methods:

  • Your email database
  • Your website via an intercept tool
  • Your social media accounts
  • An outside research panel

Depending on your target audience, I may look at alternative recruiting methods such as posting flyers at college campuses to recruit students, or recruiting your newest employees to test your company’s intranet or job board.

The amount of gratuity (the amount paid to the participant for their time) depends on the length of the session and the target audience. For example, the gratuity for a surgeon would be dramatically higher than for a college student. Cash always works, but I’ve found gratuity in the form of gift cards or high-value coupons also work well.

3. Script Development: Setting up Good Data Collection

In parallel to the recruiting and scheduling phase, I begin work on the script — also called a “discussion guide” or “facilitator’s guide.”

A comprehensive discussion guide ensures that each session is conducted in a consistent manner. That is, every participant completes the same tasks and answers the same baseline questions. I might rotate the tasks between sessions, or give different tasks to different types of users, but I always ensure there is a solid script to follow.

In a 60-minute usability session, there are typically 2 to 7 tasks that the participant will complete. Alternatively, I might create the tasks with the participant in the beginning of the session rather than have pre-defined tasks.

Each section of the discussion guide will include a timeframe to ensure the discussion stays on track.

In most cases, my discussion guides include 5 sections:

  1. Provide overview of session so participant knows what to expect.
  2. Ask ice-breaker questions to put participant at ease.
  3. Explain the methodology (i.e., ask participant to think aloud).
  4. Conduct the study (i.e., ask participant to complete tasks).
  5. Ask follow-up questions.

Once the discussion guide is finalized and participants are scheduled, we are ready for show time.

4. Facilitation: Uncovering Successes & Usability Issues

On testing day, the participant will be brought into the usability lab at a research facility or conference room at your location; or they will simply dial-in to a toll-free number (if it’s a remote study). As an observer, you will be able to watch the session from a computer. If the session is in-person, you will see both the participant’s face and the screen (but just their screen in a remote study).

The script is used to facilitate and guide the session, but the conversation can go in any number of directions based on what the participant encounters.

Some participants will only make it through one of the pre-determined tasks in the time allotted. Others will rush through all of the tasks at breakneck speed (I try to have additional tasks for these cases). And everything in-between.

Once a task is given to the participant, I try to interrupt them as little as possible. If the participant forgets to think aloud, I will nudge them with “What are you thinking about here?” But otherwise, I will mostly remain mute until the task is complete. I find this gives us better, truer insights into the user flow and experience.

Toward the end of each session, you and the other observers will have a chance to submit additional questions that I will pose to the participant.

In between every 2 to 3 test sessions, I will lead recap sessions with all of the observers. During this regroup, I will capture everything each observer saw and heard into a single spreadsheet. Recap sessions are critical to the success of a usability study. As a subject matter expert in your area, you will pick up cues from a participant that no one else will detect.

By the fifth session, the biggest usability issues will be absolutely clear. I recommend conducting a minimum of 8-10 sessions to uncover the majority of issues, but only 5 sessions are needed to find the biggest obstacles. Pretty cool, huh?

5. Analysis & Findings: Presenting the Themes

In the days following the usability study, I will conduct analysis of the findings, identify the usability themes, and then develop my recommended next steps and put them into a high-level presentation.

A typical report includes 6 sections:

  1. Overview of study (e.g., project background, test objectives)
  2. Usability study methodology used
  3. Profiles of participants and recruiting methodology used
  4. Executive summary of high-level wins and opportunities
  5. Detailed findings and recommendations
  6. Appendix of all documentation (e.g., test plan, session recordings)

I like to deliver the presentation in person as well as allow enough time for a meaningful discussion at the end.

I know presentation decks are often shared with teams who were not involved in the usability study, so I ensure the report provides the background and context needed to be immediately actionable.

If you need additional help solving critical usability issues, June UX also provides digital strategy, user research, user experience design, and content strategy services. Need more information? I’d love to chat with you.

Related Articles

How I Remote Mobility Usability Test
How I Plan User Research

Nonprofit Workshop: “Overcoming Analysis Paralysis”

Next Friday morning, I will be speaking at the Nonprofit Communicators Workshop: “Overcoming Analysis Paralysis.”

Note: This workshop took place Dec. 13, 2013.

In this workshop, my co-presenter Kate Borman and I will be helping nonprofits develop an analytics framework, then provide practical advice on how to set up, manage and analyze a campaign using Google Analytics and other tracking tools. Kate is the communications coordinator at Nonprofits Assistance Fund, an organization that helps other nonprofits become more financially healthy.

Slide Deck: Overcoming Analysis Paralysis

 If you didn’t attend the workshop, here are some quick tips that can help get you started.

First, Set Yourself Up for Success

One of the topics we’ll be covering is how to set yourself up for success. Whenever I work with a new client or take on a new project, I always begin with the end in mind. What is it that you want to accomplish? What does success look like?

Over the years, I’ve developed a simple worksheet that I use to help companies think strategically about their goals. I call it a “ladder.” (I know it doesn’t look like one, but stay with me.)

Ladder Diagram Worksheet

Ladder Diagram Worksheet

If you haven’t already done so, first define your SMART business objectives:





Time-Bound Goals

Add a new row for each business objective.

Next, define and “ladder up” your KPIs and tactics to these high-level goals. Also a good idea: confirm that the math works (i.e., your KPIs “add up” to equal your business objectives).

Finally, make sure there is someone held accountable for each and every KPI.

In the ladder diagram below, I show example KPIs and tactics that ladder up to a SMART business objective. This example is obviously web-specific, but the ideal ladder diagram should include both online and offline strategic goals. If you work within a large organization, add a fourth column to segment by business unit or function.

Ladder Diagram Example

Ladder diagram: roll-up tactics and KPIs to business objective

By mapping your business objectives, KPIs and tactics in this way, several things happen all at once:

  • Easier to focus on what’s most important & clear away distractions
  • Easier to prioritize
  • Easier to set budgets & defend them
  • Easier to ward off non-strategic projects (“shiny objects”)
  • Easier to structure your performance dashboard(s)

If you haven’t defined goals this way before and aren’t sure how to set relevant goals, you have a couple options.

1) Take your best guess, then re-evaluate after a few weeks or months. Were you way under or way over? Adjust accordingly. To avoid frustrating the rest of your organization in the interim, be sure to wait to communicate the new KPIs until they are firmed up and signed off by all parties.

2) Use industry benchmarks to establish your goals. Depending on your need, there are numerous tools available — free and paid — that can help you see how your conversion rate, rich media click-through rate, or SEM spend compares within your industry. One benchmarking tool I frequently use is

What Else Will Be in the Workshop?

In addition to explaining the ladder concept, Kate and I will:

  • Go into more depth about what makes a good KPI vs. a “bad” KPI
  • Show how to dig deeper in your analysis, and go beyond superficial metrics such as page views or bounce rates
  • Teach you how to design an actionable dashboard that efficiently communicates results and drives change
  • Share the key tasks to complete before, during and after every campaign
  • Provide a list of recommended tracking tools
  • Share campaign monitoring best practices

Related Articles

Redesign Your Web Analytics Dashboard for Better Insights
How to Identify Actionable Business Insights

How to Engage Your Users: Captioned Videos

While researching the latest in online form best practices and user research, I stumbled across a blog post about making forms accessible for deaf and hard of hearing users.

I’m very familiar with how to make forms accessible for screen readers, but how in the world could a form not be audio accessible? Intrigued, I dug deeper and discovered a fantastic resource called

Audio Accessibility is run by Svetlana Kouznetsova, a Web designer and advocate for the deaf and hard of hearing community.

Audio Accessibility

In addition to the wealth of information, resources, and stats Svetlana provides on her site, one of the most eye-opening insights was the research she found about video viewership. More people watch videos longer when the video is captioned. Captioning has universal benefits for all types of audiences.

  • When users are at work and don’t want to disturb others (or be overheard).
  • When the speaker in the video is difficult to understand or is speaking in another language.
  • When users are in noisy environments (e.g., coffeeshops).
  • Captioning also boosts literacy and promotes learning among children.
  • It even helps SEO because the captions are stored in a text file.

Increase video viewership with captioning

I strongly encourage you to watch (and read) Why Caption Your Video. Jay Wayant makes a very compelling case for captioning.

Be wary of automated captioning services and YouTube’s auto-caption feature… as hilariously demonstrated by a video series called Caption Fail.

Caption Fail

Related Articles

5 Examples of Photos in Megamenus

Done right, megamenus are an elegant way to display a ton of navigation. I have noticed lately that more and more companies are integrating photos into their megamenus as well.

For users on tablets — or those who are just more visually-oriented — including images of your products, your product categories, your people, or your most popular links is a great way to make your site more easily understood.

Besides… they say a picture is worth a 1000 words, right?


Starbucks megamenu

Use caution implementing an exact replica of Starbucks’ megamenu. There are 2 usability flaws to note. First, if the megamenu drops below the fold on smaller screens, there is no way to scroll down to see links on the bottom of the menu. Second, if you move your mouse to the left or right too far, the entire menu disappears. It would be better if the black bars on either side weren’t there. (Visit the site to see what I mean.)


Porsche megamenu

The photography is gorgeous , but be weary of flyout menus. I have yet to see a menu that flies out horizontally like this perform well in a usability study. Too often, users struggle to align their mouse perfectly in order to reach that third tier of information.


Gateway megamenu

Simple always wins.

Moment Skis

Moment Skis Megamenu

I adore the concept of using a windowshade to navigate. Make sure it’s not the only way users can navigate though… they may not notice (or have the energy) to keep clicking for more. There is more work to do on the analytics side in order to track user behavior, but this application might be worth it for your situation.

Head Case

Head Case Megamenu
“Head Case” was a TV show on Starz back in 2007-2009. I have no idea how I originally tracked down this website because I have never heard of this show. None the less, I bookmarked it for its cool megamenu. (The actors animate on mouse-over.)

Share this post:

How to Engage Your Users: Professional Services Bios

Most of us have experienced health clinic websites that allow you to view the photos and bios of physicians – allowing you to select a doctor based on whichever criteria is most important to you (e.g., specialty, years of experience).

What puzzles is me is why all companies who offer professional services don’t do the same thing.

There is tremendous value in allowing customers to evaluate and select the professional that best fits their needs – whether it’s budget, availability, specialty, years of experience, customer reviews or another attribute. The experience feels personalized and helps the user feel empowered.

For many companies, the idea of allowing customers to select who they want to work with at your organization is – understandably – a major operational challenge. At minimum, it’s worth seriously looking into it. If you can, run a small test pilot or offer this feature to just your VIP customers to vet out the viability and ROI.

Two companies that I think do this very well are H&R Block and Ameriprise Financial. On H&R’s website, there is a big “Make an Appointment” button next to each tax professional.

H&R Block

I especially love the Ameriprise example because it capitalizes on the most powerful criteria: my personal network. After you connect your Linkedin to Ameriprise, the website recommends financial advisers based on your shared professional connections. Detailed bio information, including published articles, professional credentials, customer satisfaction scores and the adviser’s photo, quickly build trust.

Ameriprise Financial & LinkedIn

Share this post:

What to Learn from Disney’s Relationship Marketing Mistakes

I am a huge fan of product finder tools — interactive experiences that ask prospects to assess their current situation or prioritize the features or benefits that are most important to them.

Product finders are a smart way to simplify complex products and services, provide superior customer experience on your website and allow your company to begin relationship marketing using a transparent, user-centric approach.

As you can imagine, planning a Disney vacation is the perfect application for such a tool. Trying to consume everything a family might do at a Disney theme park would be overwhelming and frustrating for most people.

So how did Disney solve this dilemma? I’ll get back to that in just a second.

Relationship Marketing Begins with Helping Customers

Think about the last time you researched a digital camera online. There were hundreds of options, right?

Even after you narrowed your options by price and brand, you were likely presented with way too many choices, with too few discrete differences.

A good digital camera finder tool would ask you how you plan to use your camera, where, how often, and your level of photography expertise, and then recommend 2 or 3 cameras based on those criteria.

Much like a good sales person in a brick-and-mortar store.

Relationship Marketing Tool: Product Finders

Still need a visual? Here are a few examples of product finders from CarMax, Find Wine and Sears:


Find Wine


Disney Vacation Planning Tool: Before

Now I’m going to pick on Disney for a moment, the much-lauded leader in customer experience design.

When I visited their website last fall to begin preliminary research about Disney World, I was disappointed by what I found. Immediate information overload.

Disney Hotels

29 hotels. No way to compare. No way to filter.

I had to read each and every hotel description and park activity to determine which ones were best for my family. Then I had to try to remember everything I read.

I didn’t visit their website again for 5 months.

Disney Vacation Planning Tool: After

Upon returning the other day, I noticed right away Disney World had relaunched their website.

They still have 29 hotels displayed in a list format, but they wisely introduced the concepts of filtering and comparing. (Though, I think the new format still needs some work. The filter options don’t seem to be aligned with customers’ needs. For example, users can filter by “Moderate Resort Hotels.” What does that mean? How is that different from “Price Range?”)
Disney Hotels

Since last fall, I’ve been thinking Disney badly needs to launch a comprehensive interactive vacation planning tool and relationship marketing program. Even the best filtering options will only get customers so far.

Last year, I spent hours and hours on their website, but Disney never knew I was there.

It would have been great to design my dream Disney vacation; save it to my Disney account; receive emails about insider tips, recommended itineraries, and packing checklists; connect with a Disney World rep; and then later, receive promotional offers. All perfectly timed based on my trip date and recent site activity.

It’s Disney! I want the — ahem — top-notch treatment!

With the recent site redesign, Disney launched something called “My Disney Experience.” Unfortunately, it’s hidden behind a login and buried in the footer, so only the most determined customers will find and access it.

Disney Account Registration
As a highly motivated customer (and to show it to you here), I spent several minutes completing the account registration process in order to view and create “My Disney Experience.” Again, all but the strongest would have walked away at this point. You see, it took me 7 tries – SEVEN! – before I was able to successfully create an account.

Disney World

At first glance, the user interface has all the visual indicators of being exactly what I dreamed an interactive Disney vacation planner would be. But it turns out the planning “tool” is really just more information to read — the personalized recommendation engine I imagined doesn’t exist.

In addition, it looks like information is organized by the way Disney thinks about their company (e.g., which park do I want to attend), rather than the way visitors think (e.g., by specific activity such as meet Mickey Mouse).

At minimum, I wish there was a way to save or remove activities from the itinerary.

Building a Product Finder Tool: Where to Begin

My advice to Disney and companies that are thinking about building a product finder tool is to begin with careful user research to ensure the end result meets your customers’ real needs.

If you haven’t already done so, develop a data-based user persona and customer journey map. These resources will make the rest of the process go much more smoothly.

During the user research phase, ask questions such as:

  • What process did you use to make your decision?
  • Who was involved in your decision process?
  • How did you conduct your research? Walk me through it.
  • What questions did you have?

During the design and development phase, ensure the product finder is built in a scalable and flexible way. Nothing is worse than building a tool that immediately becomes outdated because the technology or algorithm is too complex to ever be touched again. If the technology is getting in the way and causing the project to stall, it’s time to think outside the box. Can you build a much simpler version to start, or even design a pretty matrix that allows customers to compare features or benefits side by side?

As I mention earlier, I think a product finder tool is a great way to begin relationship marketing. Don’t put up roadblocks by asking prospects to register before they can use the tool. (Users won’t do it.) Collect personal data later when you ask customers to save their work, share the results, sign up for e-training, or compare the results with industry benchmarks.

Finally, match up your customer journey map and product finder insights with your offline sales operations. Knowing what information is most critical to prospects — and when — can help drive more relevant, more effective interactions.

For more food for thought, check out this interesting blog post about Starbucks’ approach to relationship marketing. The article includes specific tactics Starbucks uses to gather meaningful information about customers — by talking with them, not at them.

Related Articles

How to Engage Your Users: Location-Aware Experiences

Whenever I talked about location-aware technology to clients, Olive Garden was always my go-to website to demo how this feature works. Today, I was disappointed to find that this feature no longer has a prominent call-out on its home page, and is now buried on the “Find a Restaurant” page.


Before I go too much further, let’s get a definition on the table. In a word, location-aware technology is not IP address tracking. It’s much more sophisticated and accurate than that. According to TechTarget, location-aware technology is “… determined by one of three methods: by GPS satellite tracking, by cellular tower triangulation, or by the device’s media access control address on a Wi-Fi network.”

It’s immediately obvious why location-aware technology is fundamental to most mobile browsing experiences, but I also like to encourage clients to think about it for their desktop sites, too.

As you can see below, Foodspotting automatically figured out which Minneapolis suburb I live in, and showed me photos of food from nearby restaurants. This is a smart application of the technology. I often conduct my restaurant research on my laptop before I leave the house – not while I’m already driving.

foodspotting website

If you’re a multi-location retailer, restaurant or an international company, I think location-aware technology is a must-have for your website. Instead of asking users to select a country or ZIP code first, connect them to the right location off the bat and deliver targeted content and promotions.

Other creative uses:

  • Showcasing where your product or service is in use (e.g., customers snap photos of their purchase and upload them to your website, Redbox locations).
  • Connecting members of your community (e.g., cancer survivors, tax accountants)
  • Promoting your city or special interest (e.g., local events, coffeeshops)

What’s your favorite location-aware website?

Share this post:

How to Create More Engaging Forms

In the world of lead generation, forms are a necessary evil. But there is no need for them to be dreary.

It’s time to put some fun into your forms. Yes, fun!

Volkswagen could have easily listed every one of their vehicle models in a drop-down menu. But they didn’t. Instead they displayed every model as a thumbnail image. That’s a little more fun, right?


The British Heart Foundation took it a step further than Volkswagen, and created a cute little animation for each activity.

British Heart FoundationOther ways to de-drab your forms:

  • Sliders
  • Calendar pickers
  • Maps
  • Fun facts / educational tips
  • A competition (post a time clock and the average form completion time)

Share this post:

5 Ways to Improve Car Manufacturer Website Usability

For all their advancement in car safety, technology, design, and ability to make humorous commercials, car manufacturers have completely stalled when it comes to creating user-centered websites.

Buying a Car Online: Not Fun

Buying a brand new car was not as much fun as I thought it would be. In fact, it was decidedly un-fun.

A few years ago, I set out to buy a Toyota Prius: the perfect car for my family’s lifestyle. Roomy interior for our long legs, hatchback for transporting our black Labrador to the park, and best of all, a hybrid for our environment-friendly way of life.

But then those terrible stories started coming out about Toyota’s accelerator problems, and I found myself at square one. Where to begin my search for a new car? I had no idea.

Where’s the GPS on this Website?

I pay little attention to car commercials (unless they’re playing during the Super Bowl and also are funny). Like many other Americans, I also pay little attention to cars in general. I get in, I drive, I put in gas and occasionally go to the service station when the little red light tells me to.

No such assistance exists on car manufacturer websites. I looked at more than a dozen sites, and they are all organized in the same way: by model.

I immediately went to Google in search of car review sites to help me, but alas, they were structured in the same way: everything I have ever wanted to know about one particular car — no matrices, no side-by-side comparisons.

This was going to take me forever.

BMW: 1, 3, 5, X6… what do these number mean?

Ford: Why do the prices go up, but gas mileage and seating capacity does not?

Lexus: All those letters make me feel stupid. AWD, RWD, LS, GS?

Toyota: I have no idea where to begin, so I guess I need to look at them all. And don’t be fooled by that “Build Your Toyota” button. First question I am asked: pick your model.

Cars Are Like Jeans

My chief concern in choosing our next family car was fit.

  • Will my long legs fit?
  • Will my husband’s even longer legs fit?
  • Will my poor children be squished to death in the backseat as a result of all this glorious legroom?
  • Will my puppy fit?
  • How many suitcases will fit?
  • How many grocery bags will fit? (Not that I do any grocery shopping myself, but hey, nice to know.)

I looked, but I didn’t find a single dressing room on any car website.

Trunk capacity is given in cubic feet.

Information about legroom is non-existent.

Guess what? Free time on weekends also is non-existent to be test driving and “trying on” cars in person. Moreover, carting 2 kids and their car seats to multiple dealerships… you see where this sentence is headed.

Start with Customers, not Cars

In the user experience (UX) industry, we follow a simple mantra: user-centered design. We watch how people use things, and then design experiences that match their habits, preferences, and goals.

It should come as no surprise — aligning business goals with user needs does wonderful things for a company’s bottom line.

5 UX Prescriptions for Car Manufacturer Websites

1) Online Test Drive

One-third of American adults are obese today. Save them — and tall consumers like myself and my husband — disappointment by helping them find vehicles they will fit into, in the privacy of their own homes. And really, a virtual test drive that can accommodate people of all sizes and shapes would be ideal and much appreciated.

2) Family First

Put children’s needs and comfort at the forefront. Help parents plan for their growing family by organizing vehicles by family-friendly features, such as backseat safety, LATCH systems, built-in car seats, accommodations for smaller frame drivers, and ever-growing arms and legs in the backseat.

3) It’s a Lifestyle Choice

Organize vehicles by how they will be used: towing boats, daily commuting, hauling 8 to 10 bags of groceries, carpooling to school, or a combination of all of the above.

Find out what size vehicle, engine power, interior capacity, etc. is needed by asking in relevant terms. Price, gas mileage, and looks all come secondary if a vehicle cannot meet a customer’s basic needs.

4) A Few Good Features

Find out which features are most important, and then call special attention to them with simple highlighting, videos, illustrations, and interactive tools.

Car manufacturers list so many interior and exterior features, customers’ eyes likely glaze over. Realistically, most people will only care about a handful of features. Help them prioritize.

5) Connect the Dots

Show everyday objects that users can put into a virtual trunk to see how they fit (e.g., suitcases, grocery bags) with an interactive tool such as drag ‘n’ drop. Showing trunk capacity in terms of the number of cubic feet is meaningless to most people. Instead, give customers context. Trunk size is very important. It’s puzzling why so little attention is given to this part of a car.

Unlock the Possibilities

Asking a few qualifying questions upfront about a customer’s needs can go a long way toward creating a delightful online experience.

This approach also allows customers to feel listened to, valued, in control, and engaged. Further, car companies build trust and create unforced opportunities for in-depth education (AKA upselling and brand building).

Been in the market for a new car recently? How would you like to see car websites reorganized and redesigned?

P.S. In the end, we did end up buying a Prius and happily have had zero issues. For the first time in my life, I have to pull the seat forward in order to reach the gas pedal! And the little ones in the back have ample room as well. I brought a tape measure to my test drive to ensure we would all fit comfortably. Puppy, too.

Zip, zip.

Share this post:

10 Ways to Amp Up Your Content

When you think of “web content” do you immediately think of paragraphs of text? I’m guilty of this, too.

Content in the form of text is a great way to provide information, but it’s not always the most user-friendly or approachable. It has one major drawback — you actually have to read it to understand it.

Web content can come in many formats: text, photos, illustrations, charts, videos, podcasts, webinars and so on. But don’t limit yourself to just 1 or 2. Having a variety of content styles on your website ensures that you connect with a variety of learning styles. Not everyone has time to read. Not everyone watches video online.

Luckily, there are content formats almost everyone loves:

  • BIG fonts
  • short phrases
  • pretty pictures
If your website has only text and photos today, take a second look to see if any of your content could be converted into a diagram, illustration, video demonstration or another, more visual format. Here are 10 ideas to get you started.

1. Put bullet points center stage

If you are one of my clients… I apologize for showing this to you again. For the rest of you, I love this ultra-simple approach that American Eagle takes in its Jeans Guide: just a product name, price, big photos and bullet points shown in context to the product.

This page is chock full of information, but you don’t even notice that you’re reading.

visual content - photos and bullet points

2. Show important information sooner

Rather than waiting until the deepest pages of your website to share pricing, product specifications and shipping costs – give this detail greater prominence by showing it on the home page and directory pages.

In this example from Rickshaw Bags, rather than waiting to show critical information on the product page, they list common product information on the product directory page complemented by a “behind-the-scenes” photo. Telling the product story sooner engages customers sooner. (They actually show the product information on both the directory and product detail pages, which is the safest bet.)

shared content

3. Show a side-by-side comparison

Comparison charts are a great way to talk about your product / service quickly and show (not tell) why yours is superior. You don’t necessarily need to show your product / service against a direct competitor – compare yourself to the entire category. If your product or service is innovative, cutting-edge or eco, then go up against the gorilla in your industry.

Dsolv quickly demonstrates how their bags are superior to traditional paper lawn bags.

visual content, comparison chart

4. Teach your customers how to use your product

While learning how to use your product or service, customers will also learn about its benefits, build confidence and gain a deeper understanding than if they had just read about its features and benefits.

REI developed a series of informative videos to complement their step-by-step guides. Below, REI helps parents teach their children how to ride a bike.

visual content, educational video

5. Show how it’s made

Add a layer of storytelling to your site by showing an inside look into your company. You don’t have to give away any trade secrets or formulas, but can you show your raw materials? Your employees carefully packing products? Employees testing them for quality assurance?

Room & Board gives a behind-the-scenes look at their products.
visual content - how it's made

6. Show your product in use

Show your product in context. If you are a car manufacturer, show the vehicle with different sizes of people – small, medium and large – sitting behind the wheel. If you sell toys, create a video showing children playing with your product.

Sharpie could have easily shown just photos of their markers on this page and listed the thickness in the description. But they didn’t. They went one step further and SHOWED the thickness.

7. Show how customers use your product

You can either list some ways to use your product, or customers can show how they use your product. Their way will likely be more interesting than yours.

Sharpie has an amazing site filled with all sorts of great content. Here, their blog is filled with customer photos showing off their Sharpie creations.

8. Show your product in context

Show how your product coordinates with items your customers already have. Show how your product will fit into their lives.

Tiny Prints picked one of their cute baby shower invitations, then built an entire party around it.
visual content, mood board

9. Have customers explain why your product is awesome

Reviews are a great way to build trust and create rich content. On the downside, they can be difficult to obtain. In reality, most people don’t write reviews. (Amazon gives false hope that reviews are easy to get.)

Testimonials are another (and easier) way to show customer feedback. To build trust and authenticity, reveal as much about the customer’s identity as they are comfortable with: their first and last name, organization / title, photo, audio and/or video. Some prospects may be leery of fake or paid testimonials, so do what you can to combat this jaded point of view.

Testimonials can be captured via e-mail, letters, recorded / transcribed phone calls, Skype or a professional video shoot.

These Aflac videos are some of the most powerful I have ever watched.

visual content, video testomonials

10. Make your content fun

Be creative. Information doesn’t always need to be presented in a serious manner.

This example from MOA Beer doesn’t provide any real information about its product, but its fun, interactive approach contrasts their product with competitors and shows off their brand personality. (As the web user scrolls down the page, an underwater diver sinks to the bottom of the ocean — revealing content about their and competitors’ “bottle strength” along the way.)

visual content

6 Tips for Creating Useful, Usable Content

  1. Branding – When creating visual content, brand it with your logo and colors. Tiny Prints is missing a big branding opportunity when its baby shower party image gets tagged on Pinterest.
  2. Accessibility-Friendly – If you’re using dynamic content or Flash to create a visual, ensure that the content doesn’t “break” when it’s resized or images are turned off. When I resized AE’s Jean Guide, the information about the jeans was lost.
  3. Social-Friendly – Ensure your video content (and all your public-facing content) can be easily bookmarked, e-mailed, pinned and tweeted. In the case of Aflac, all of its beautiful videos are embedded into the site and cannot be shared. Providing alternate links to YouTube or Vimeo would help solve this.
  4. Readable – When using color in your graphics, ensure they are high contrast. Dsolv’s comparison chart coincides with its neon green branding, but it is difficult to read. Similarly, Rickshaw uses white text on top of a black & white photograph, compromising readability.
  5. Meaningful – Keep the big picture in mind when demonstrating context. In the case of Sharpie, it’s not exactly clear which marker is the thinnest marker – extra fine or ultra fine? Adding the width in the product name would help clarify this (e.g., 0.3 MM).
  6. Mobile-Friendly – All of the examples here passed my iPad test (with either the same or altered experience), and it’s something for you to keep in mind, too. Use your website analytics to determine which browsers and browser sizes you need to be testing your site on.

Stumble across any content lately that you thought was presented in an innovative way? Please share!

Related Articles

UX Word of the Day: Content Chunking

Steal These Mobile-First Content Patterns