A fundamental aspect for success in the online world is guaranteeing a good experience for the user: in using the store, attention pre- and post-sale, products, etc. Therefore, today we’re going to talk about an aspect that definitely contributes to guaranteeing that experience: usability. This is an aspect that’s still overlooked many times, either due to ignorance or the myth that, “It’s something expensive that I can’t afford.”

Can everyone afford to work with usability?

Let’s start from the beginning: for a quality e-commerce you should have a minimum budget; even with human resources, internal or external, who are able to work well in the different areas that will intervene in the project.

That said, and from personal experience, since we’ve worked on projects with different budgets, types of businesses, human resources or needs, I could say that any business can afford to work with usability, even modestly. If an orderly process is followed, there are basic tasks that even an e-commerce manager with minimal knowledge could address without too much difficulty.

Why do we have to work on usability?

Usability goes way beyond creating a prototype or a wireframe. Before getting to the final result, fairly extensive work is done previously that lets you get valuable information, so much that it will even help you improve or save in other areas like design, marketing, communication or technology.

A few advantages of working on usability are:

• Improving the perception of the brand or product
• Improving the service of the store
• Encouraging effectiveness (greater conversion, less bounce rate, etc.)
• Allowing for improvement in marketing efficiency (SEO, automation, recruitment, etc.)

At Ecommbits we employ a working logic that consists simply of a defined, orderly process that can be as ambitious as you want, depending on the goals and budget of each process. Let’s start!

1. Brainstorming / Briefing

This is the start of any project. It’s important to think about all of the processes that take part in your business and will have a direct reflection on the e-commerce. For this step, you need to involve different profiles responsible for managing each area because each of them will have specific internal needs or suggestions to improve contact with the customer.

The main areas to consider will depend on your business, and it’s likely that one person will have several roles:

• Business
• Products
• Brand
• Usability
• Design
• Technology
• Operations
• Finance
• Marketing

2. Analysis: Metrics and the user

In my opinion, this should be the basis of any usability project since it’s the only way to get objective data to help us make decisions. The result of this phase will give you a global vision of strengths and weaknesses, especially if the e-commerce already has a minimum basis and the goal is to improve it as a whole or in specific areas.

I’m sure you at least use Google Analytics or another similar analytical tool. The first step is to start by analyzing a representative period of time, like the last six months or the last year and then a more specific set of data. This can be extracted easily by almost anyone with minimal experience.

•  KPIs global traffic
• KPIs related to conversion
• Behavior by device
• Behavior by content type or destination landing
• Evaluation of transactional processes

You can go a lot more in-depth, but with these basics we can get an approximation of strengths, weaknesses and how they relate to business objectives like conversion, recurrence, cross-selling, etc, something that will be very useful when we start detecting possible ways to improve.

User behavior

The previous data give us clues, but to pinpoint usability improvements, it’s important to get to know the user better. The types of studies are incredibly varied in terms of methodology, objectives, results and the budget needed to carry them out (focus groups, eye tracking, surveys, heat maps, etc).

Since we’re talking about affordable usability projects, let me tell you about a couple of studies that we did with Hotjar. It’s an easy tool to implement, configure, and, above all, it’s very low cost: for less than 100€ you can use a lot of the features and it lets you collect a sufficiently representative sample to be able to do this type of analysis.

• Heat maps:

Help us understand how the user interacts with our store depending on the device they’re using to surf the web and we can also analyze them by behavior: movement, scrolls, and clicks, though normally the last two are the most used.

Thanks to heat maps we can quickly see things like the most used features, contents that interest us at the business level but go completely unnoticed by the user, pages where we lose the customer, etc. To summarize, these are new hints that allow us to redefine points like content architecture or interaction routes that will help the user when they’re browsing our store.

• Recordings:

Sometimes heat maps don’t give us all the information we need to further see possible usability problems (heat maps are static and the data is global). However, thanks to recordings, we can see step by step how users navigate through the whole session (where they click, where they move, which pages they visit, when they leave, etc.), which can hone our identification of usability problems and even let us determine reasons for abandonment.

This requires a lot of time to analyze since thousands of recordings can be taken each day, but it’s worth it because they let us see, almost live, how our users behave.

Competition / market analysis

Lastly, even though we already have enough information to draw conclusions from above, it’s never too much to keep an eye on the competition. If you start from scratch you won’t have a history to analyze, so analyzing what others have already done can be a good reference to get ideas, especially since many of them are pioneers or points of reference in e-commerce.

3. Useful Documentation

Now that we have all the information on the table: business needs and real analytical data, we need to organize it, increase or decrease what we share in the initial brainstorming sessions, and close the final useful documentation that will include aspects like:

•  Back features with Front impact
•  Front features
•  Product specifications (new items, messages, labels, etc.)
•  Marketing specifications (SEO, automation, promo spaces, etc.)

4. Information architecture and flowcharts

Before we start with the last stage of this process, we just need to connect everything that’ll be in the store.

• Information architecture. This deals with both the global content structure and the structure for each specific area (catalog, processes, information, etc.)
• Flow of interaction. Each part of the architecture will have one or more links to other areas, so it’s important to define how we want them to interact. This will be the only way to guide the user or, “make it easy” depending on their needs at any given time (purchase, consultation, order review, contact, etc.)

5. Screen prototyping (Wireframing)

A prototype or wireframe isn’t only a sketch that has to represent the final structure of each element or page and the features it contains. I could say that of all the tasks we’ve seen in this article, this is the one that requires more time and knowledge.

It’s also important to note that this is the point where the project can branch off into cost levels. Why? The amount of time you want to dedicate and the detail you want to put in. As is logical, more prototypes means more time and therefore, a bigger budget. If you’re unable to prototype all the pages in the first phase, no problem, but practice a little before.

• Screen Selection and Elements Priority 1: They should coincide with key pages or features where you’ve detected weaknesses that normally affect the purchasing process (search engine, filters, product page, checkout, etc.)
• Screen Selection and Elements Priority 2: These are secondary but we recommend taking them into account at some point, since they’re part of the service we offer and therefore affect the user’s experience (user area, CMS support, loyalty programs, etc.)
• Resolutions: Many times prototypes are only created for desktop and cellphones, which, in our opinion is a mistake. An e-commerce should always be usable and adapt to all devices (unless you only have APP), so you should at least consider the following resolutions:
  •  Desktop: 1920px resolution
  •  Smartphone: 320px resolution
  •  Tablet: 770px resolution. Our recommendation is to at least prototype the elements that may undergo major changes between desktop and mobile resolutions.

Until now, everything has had to do with what we could consider as usability for an e-commerce project but, now what? Well, this is the moment of truth: it’s time to give your prototypes life, impact your users with visuals that grab their attention and, above all, it’s time to make everything works the way you’ve defined it.

I am sure that if you’ve followed this process, you’ll realize that the work that remains to be done will be easier and you’ll save a lot of time and money in terms of changes, meetings or misunderstandings between departments.

Finally, now that you’ve reached the end of the article, what do you think about usability? Do you think you, too, could integrate it into your business?

Rubén González Carvajal @ecommbits

Strategy and Marketing Director / Co-founder of ECOMMBITS

After more than 15 years of experience in private companies like Procter & Gamble, Sanitas, Amena or QDQ, I decided to found ECOMMBITS with my business partner, Daniel Vázquez. We both wanted to help other businesses implement and optimize processes in areas such as Technology, Design and UX, Marketing, and even Operations. This time, we want to do it our way!