No one cares how much you know, until they know how much you care.
― Theodore Roosevelt

It doesn’t matter how amazing your design skills. It doesn’t matter how phenomenal the products you’re selling. If you’re not designing for the actual people using the site, those same people aren’t going to care.

user-centered ecommerce design

Source: Andy Bright. “User Experience Design.” Creative Commons.

Web design has always been about the user. A site’s UX, whether eCommerce or not, is determined by how comfortably the interface fits into specific user preferences and how well the design anticipates what the user needs. However, both of these are highly variable — a site that’s absolutely perfect for one user may be annoying to another.

That’s why the heart of good UX, and eCommerce design in general, is knowing your customers. Your customers. These change from site to site, project to project, so designers can’t apply the same rules over and over. When it comes to understanding the people in your target market, each new design means starting over from scratch.

 

 

So we’ve compiled a simple but effective 5-step process to calibrating your entire eCommerce site around your customers.

  1. Identify Your Market
  2. Preliminary User Testing
  3. Create Personas
  4. Map Your User’s Journey
  5. Test Again

Use this guide as a refresher at the onset of any new project to keep your customers at the center of the design — and to keep them happy.

1. Identify Your Market

First things first, you need to know who your target customers are before you get inside their heads. While this has traditionally been a responsibility of the marketing department, in eCommerce the duties tend to blend together, and the more a designer understands the marketing side of the business, the better.

As conversion expert Peep Laja advises, if you don’t have any hard data to rely on, start with assumptions. Your product range should offer insights into the gender, age, and general lifestyle of your shoppers, and sometimes a standard income. You can flesh out your initial theories with questions like:

  • Who uses these products?
  • What problems do these products solve, and who suffers from these problems?
  • Whom are my competitors targeting?
  • Who would prefer my store over my competitors?

Robert Cordray of IT World Canada suggests a bit of cyber-stalking. Check out the profiles of your followers on social media, or, if you’re not yet established, the followers on your competition’s social media. Note any patterns in demographics, location, or personalities that emerge. Just be aware if there’s a discrepancy between fans and actual shoppers. For example, a toy store might have a lot of children following them, but it’s the parents who use the site.

However, at the end of the day, without hard evidence this is all just conjecture. While it’s a fine place to start, you’ll need to either confirm or reject these theories through rigorous user testing.

2. Preliminary User Testing

With a basic idea of your target customers in mind, you’ll need to begin collecting data to achieve several goals:

  • Verify the accuracy of your target market theories
  • Define the parameters of your target market more precisely
  • Understand the core characteristics of your target customers that will affect the design, including pain points, usability preferences, and even modes of thinking

If you’re updating an existing site, you could conduct extensive usability tests to pinpoint the exact areas of the site that need reworking. But regardless of whether you’re revamping a site or starting from scratch, you’ll want to conduct tests geared towards getting to know your customers.

User Interviews

The first tests are direct user interviews. User interviews are one of the oldest and most reliable methods, dating back to the focus groups first used during World War II. Essentially, if you want to know your user’s opinions on the products or the site’s UI, all you have to do is sit down and discuss it with them.

user-centered ecommerce design

Source: Nicholas Wang. Untitled. Creative Commons.

Unfortunately, it’s not as simple as asking them what they want and what they like. Charles Liu, the former Design Researcher at Kissmetrics, explains why you have to be a little more roundabout to get the user to expand on their true feelings. Rather than asking direct questions, he suggests these three alternatives:

  • What are you trying to get done and why? — For eCommerce, this could hone in on the shopping process, such as shopping for others or oneself, or the style of shopping, such as drawn out for fun or as quickly as possible to get it over with. Even different genders have predictable differences in shopping habits, so you can imagine how specific preferences can be when you really narrow in on certain shopper types.
  • Can you show me how you currently do this? — Observe firsthand your user’s default preferences for usability, such as whether they navigate via the menu or the search field, or how often they use the wishlist feature.
  • Can you show me what’s frustrating about your current process? — This question narrows in on the pain points your shoppers face.

If you’re conducting the interviews in person, there’s a wealth of advice on eliciting better responses, making your interviewees feel comfortable, and basic interview etiquette. Michael Margolis, UX Research Partner at Google Ventures, summarizes his 16 pieces of advice for maximizing the results of your user interviews.

Just remember to only schedule such interviews with your target customers, not just anyone off the street. The point is to hone in on the habits of your specific shoppers, not the generalized population.

Surveys

If in-person interviews are too time-consuming, you can also conduct surveys and questionnaires to collect data remotely. Tim Leighton-Boyce wrote an excellent two-part series on using surveys for eCommerce, an all-encompassing guide that covers both creation and application.

You can also use services like the popular SurveyMonkey which allows you to hand-tailor your questions, and analyzes the results for you. One serious advantage is that you can specify exactly whom you want to take the survey, narrowing in on the unique age, gender, and other demographic information of your customers for the most accurate results.

Another alternative, if you already have a live site, is on-site surveys, which are being more popular lately. Alex Birkett gives a complete explanation of on-site surveys, with all the information you need to create and implement them — including why they’re so effective.

For all surveys (and interviews, for that matter), the results are only as good as the question. The difference with on-site surveys, though, is they should be succinct, since the shopper isn’t exactly requesting them. Avinash Kaushik, acclaimed digital marketing evangelist and best-selling author, describes three questions that are essential on any on-site survey, and are quick enough to not be a burden:

  1. What is the purpose of your visit to our website today?
  2. Were you able to complete your task today?
  3. If you were not able to complete your task, why not?

Kaushik also recommends the survey tools Qualaroo or Google Surveys for faster implementation.

Diary Tests

Some researchers are of the school of thought that the mere presence of a moderator or interviewer affects the results of the questions. For them, a more natural approach to collecting information produces better results.

Diary tests put the power in the hands of the test subject — they are responsible for chronicling all their online shopping activity themselves, in their own words, whenever it’s convenient for them. As Carine Lallemand’s article on the topic points out, this gathers accurate data over a longer period of time, and with minimal investment on your part.

The downside, however, is that the results are dependant on the subject’s capabilities: how self-aware they are, how eloquently they can describe their feelings, and of course, how committed they are to the exercise.

Still, the insights they give in a seemingly private environment tend to show greater depth than a social in-person interview. Ruth Stalker-Firth calls it a “cultural probe,” able to peer into your user’s thoughts in a way no other user tests can.

For more information, read this article from UserTesting and this list of Dos and Don’ts.

Card Sorting

If you’ve already isolated your target user base, you can start conducting some preliminary usability tests before the actual design begins. One of the most important is the card sorting test, which does wonders for customizing your navigation system and information architecture.

user-centered ecommerce design

Source: Rosenfeld Media. “CS002: Figure 1.2.Creative Commons.

Card sorting allows users to place products (and site sections) into the category headings they find most appropriate. Where will your target customers look first for button-down shirts: “menswear” or “shirts”? Card sorting will answer this question for you, giving you a solid base to build your entire structure on.

There’s even a variation of card sorting that allows the users to create their own category headings. You may discover new options you never thought of on your own.

If you’d like to know more about card sorting, including best practices, read Donna Spencer’s Card Sorting: A Definitive Guide. Don’t mind that the article is over 10 years old — the principles are still just as applicable today.

3. Create Personas

Once you’ve collected enough user data, how do you apply it to the design process? Use it to build personas, your imaginary friends for a user-centered design.

Personas are fictional characters you create to represent your actual shoppers whenever you’re faced with a crucial design decision. How complicated of a UI can the user handle? Check the persona. What kind of tone should the product copy use? Check the persona. What type of products should we feature on the home page? Check the persona.

In fact, a University of Auckland in New Zealand study confirmed just how effective personas are in UI design:

“Identifying personas and performing their tasks helped introduce clarity and accountable reasoning into the UI evaluation process. Using personas in combination with Nielsen usability heuristics was not time consuming and required no additional software applications. This suggests that personas are an inexpensive yet effective option for UI design. Even after implementation, personas can be a valuable tool to assess usability and pinpoint areas for improvement.”

user-centered ecommerce design

Source: Application of Personas in User Interface Design for Educational Software

If your personas are based on the actual user data you gathered in the previous step, then your design decisions will be more informed and customized for your shoppers. In fact, you can even model your persona on an actual person that you interviewed (or a user, or a social media follower), as long as their information reflects the average of the group as a whole.

Related posts:  Our New Release Roundup!

A single persona should represent each customer group, so an average project might have 2-5 personas.

user-centered ecommerce design

Source: Think Geek

While designers can alter their personas to suit their own preferences, in general a persona should contain the following information:

  • Name — It’s common for personas to have fun and descriptive names that include their job title, such as “Franny the Flower Arranger,” or that describes their user behavior, such as “Salvador the Speed Demon.”
  • Photo — An image is important for helping to visualize your persona as a real user, even if it’s a generic stock photo.
  • Demographics — Keep the important statistics in a place that’s quick to double-check.
  • Personality Descriptions — Personality traits allow you to customize the UI to user preferences, so include relevant descriptions. Traits like “lazy,” “deal hunter,” “OCD,” or “impatient” can all have large ramifications on the style of the site design.
  • Motivation — What the user hopes to accomplish, both on your site and in life. The former will help you design an interface that helps them reach their goals, the latter helps you empathize with the kind of person they are.
  • Devices — Which platforms do your shopper use most? Perhaps one type of customer uses mobile more while another uses desktop, meaning both UIs might need their own special allowances.
  • Technological Prowess — This lets a designer know how much hand-holding the user needs for UI instructions and pattern recognition. In other words, do you have to write “search” in the search field, or is the magnifying glass icon enough?
  • Personal Quote — To summarize a persona’s personality quickly, include a personal quote or motto. This small addition truly helps bring the “character” to life.

If you’re just getting started with personas, check out this Xtensio user persona template, which also offers a handy how-to guide. For more advanced best practices, read this two-part article Shlomo Goltz wrote for Smashing Magazine.

4. Map Your User’s Journey

In addition to helping with design decisions along the way, personas are also used for specific exercises to help predict and chart your customer’s experience on your site. User Stories, User Scenarios, and Customer Journey Maps are thought exercises that allow you to anticipate user behaviors — based on the data from personas — in specific situations for more user-centered designs.

User Stories

Originating as a Scrum technique for managing product backlogs, user stories are perfect for organizing and prioritizing design items and features. These succinct, one or two sentence “stories” communicate what a user wants to accomplish, bridging the gap between personas and actual design decisions. Not only that, but because they’re written in a common language, they make communication between team members easier.

User stories typically follow this format:

As a ___________, I want _____________, so that ____________.

This answers the questions of who, what, and why. For example, “As a busy assistant to a CEO, I want a single-click checkout option so that I can finish online shopping sooner.”

User stories also protect against “feature creep,” when design teams keep adding more and unnecessary features to convolute the original intention. User stories keep track of what the customer needs — and only what the customer needs — so you don’t waste time on unnecessary design choices to placate the team. That’s crucial to user-centered design.

User Scenarios

While user stories are quick organizational devices, user scenarios take it a step further. User scenarios examine actual tasks a shopper wants to accomplish, and which choices and interactions they make to complete those tasks.

User scenarios allow you to determine a more realistic user flow, mapping out each step your shopper takes to achieve their goal so that you can design a site that facilitates each step.

Writing user scenarios seems straight-forward: take your persona, give them a specific task (i.e., find a pair of sunglasses under $50), and work out their logic process. Do they use the navigation menu or search field? If they use the search field, what keywords do they use? When they browse, do they pay attention to price or product pictures? Do they even bother looking for a discount section?

user-centered ecommerce design

Source: Shlomo Goltz. “A Close Look at Personas: What They Are and How They Work (Part 1).”

Moreover, user scenarios factor in more external characteristics than personas and user stories. For example, one user scenario might explore how a certain persona shops for a last-minute birthday gift. Because the purchase is last minute, the time constraint might affect the user’s standard shopping behavior — they may not be able to do as much comparative shopping as they’d like, for example. That’s why user scenarios tend to go even deeper into the user’s mind, allowing for a more precise user-centered design.

As you can guess, the more detailed your persona, the easier this activity is.

If you’re interested in conducting your own user scenarios, read A Step by Step Guide to Scenario Mapping on UX for the Masses. This article shows the actionable process for creating the best user scenarios for you and your team.

Customer Journey Maps

Compared to other documents and exercises, customer journey maps are the most elaborate and in-depth. They follow the same premise as user scenarios, but with one significant addition: they note the customer’s emotional state at each stage of the their experience.

For example, if the customer has difficulty with the navigation setup, but suffers through it because they enjoy the site’s low prices, a customer journey map will reveal both of these emotional points. They allow designers to fix the bad without getting rid of the good.

As Paul Boag points out for Smashing Magazine, customer journey maps often take the form of infographics. This aids in displaying a lot of information in an easily comprehensive manner, especially considering the temporal step-by-step format along a timeline.

To implement customer journey maps yourself, Megan Grocki outlines her 9-step process for creating them in this article for UX Mastery.

5. Test Again

The four steps above should be enough to get you through the early design phases, but once you have a workable prototype or early design model, you’ll need to verify that you’re on the right track. That calls for another round of testing to smooth over the rough edges.

Standard Usability Tests

You can learn a lot just by watching shoppers use your actual site. For starters, it validates a lot of the theories created in the earlier steps, showing you your customer’s journey without any guesswork. Moreover, you can even learn new behaviors you never would have guessed, such as someone using a Previously Viewed section as if it were a Wishlist.

user-centered ecommerce design

Source: Rosenfeld Media. “ST013: Figure 5.5.” Creative Commons.

As this UserTesting article suggests, it’s best to give your test-takers a clear task and observe how they solve it on their own, without intervention. Afterwards, reconvene with the test-taker and ask follow-up questions. Try to isolate their likes and dislikes about the design, and try to elicit ways you can improve it (without directly asking them).

Still, as we mentioned above discussing diary tests, sometimes a more natural approach produces better results. Unmoderated remote user tests (URUT) create an environment most similar to that of the user who’s not being tested, and can even be done in the user’s own home, with their computer, at the time of their choice.

Some sites provide this service, allowing you to choose your target participants, and often offer videos of the test so you can observe their habits with your own eyes. One such site, Inspectlet, even records clicks and scrolls. Results can also be delivered fast. The downside, though, is the cost, though scalable options exist. If you’re interested in outsourcing, this Nielsen Norman Group article explains everything you need to know about preparing, deciding, and gives a list of their best recommendations.

A/B Testing

More focused than the above user tests, A/B testing narrows in on a single visual issue at a time. Like the name suggests, A/B testing gives users one of two choices, and marks the favorite choice.

As Paras Chopra points out in The Ultimate Guide to A/B Testing, this style of test works best for certain elements:

  • Calls-to-action
  • Headings
  • Product descriptions
  • Form lengths
  • Form types
  • Layouts
  • Pricing and promotional Offers
  • Images (both on landing and product pages)
  • Text length

The article explains that A/B tests can identify the best possible choice for any number of variables in an element: size, color, placement, wording, imagery, etc. However, it can only test one variable at a time.

A/B testing is not so easy since you can only give a single test-taker either A or B — not both, because the test needs to see which is preferred organically, as in, not under test conditions. Luckily, there are services that specialize in this: Optimizely works for general A/B Testing, and Unbounce concentrates exclusively on landing pages.

For more information, Robin Johnson gives 71 tips for conducting A/B tests.

First Click Tests

If your analytics suggests that most of your problems are technical, a first click might help you isolate the root of the trouble. Dr. Bob Bailey’s studies on the first click concept revealed that a user’s success rate was 87% if their first click was correct. If their first click was not correct, however, the success rate dropped below 50%.

Source: Optimal Workshop via YouTube

First click testing is simple, if you have the right tools. Online services like Chalkmark by Optimal Workshop (video above) specialize in first click testing, while services like Crazy Egg go above and beyond to monitor successive clicks and scrolling, and even present data as a heat map.

Takeaway

These 5 steps will anchor your design around your users, producing an interface that feels familiar and intuitive to them, even if they’ve never used your site before. With eCommerce, you want the experience to run as smoothly as possible, so your shoppers can focus on purchasing questions instead of a usage questions.

Do you have any questions, concerns, or additional advice? Add your two cents in the comments now.