How to design the perfect online store?

To answer the question of how to design the perfect online store, it is worth starting by defining what an “ideal store” actually is. For designers, an ideal store is one where all processes, functionality, and appearance meet the needs of two groups: the client/contractor and the end user, who is the final recipient.

The expectations of these two groups largely overlap. Every store owner wants customers to be satisfied and willing to use their services. It is also important that the website is well-built technically and efficiently handles all processes and integrations. For the end user, such a store must not only interest and attract their attention but, above all, provide them with a certain level of comfort and create a positive subjective impression.

We already know quite a lot about how to influence user experience, as researchers have been studying this topic for many years. To generalize, one can use the famous saying “Don’t Make Me Think!” borrowed from the title of Steve Krug’s book, which was released 20 years ago. 

Our solutions should be for the user:

• Very intuitive and easy to use – it is good if they are based on elements that the user already knows from other websites, but it is not mandatory. A new, interesting solution can attract the user’s attention and make the website more attractive. The positive reception of modern, innovative websites will be good as long as they are as intuitive and understandable as possible.
• Attractive – the store should attract the user’s attention and make a good first impression. A user who has a positive first impression of the website will be more tolerant of any problems related to using it. However, remember to interest rather than overwhelm and distract the user. High-quality photos and carefully selected and divided content are important here.
• Accessible – remember that the store’s customers may also be elderly and disabled people. A well-designed e-commerce website is one that enables and facilitates its use for these customer groups as well.

Designing the perfect e-commerce: challenges and questions

The current times are very dynamic, not only are trends and technologies changing, but users themselves are evolving. For this reason, the User Experience field is also evolving every day and requires continuous research on how customers perceive websites. Behaviour, understanding and satisfaction with the use of the website can be measured in many ways and using different tools. We can seek the help of a research company (mainly when we want to check the reception of an existing store or test the operation of a prototype) or use different tools ourselves (often free) to study user traffic and behavior on the site (for example, using Hotjar). A very good source of such data is the Baymard Institute, a service that conducts large-scale research on e-commerce sites worldwide. Based on their work, they create guidelines that are very helpful in creating user-friendly and understandable stores for their users.

The user’s perception is very important in the reception of a website, which is influenced by the elements used by designers such as color, shape, rhythm, location on the page, positioning relative to other elements, composition, and typography. It is precisely the skillful handling of these elements that affect the user’s understanding of the process and its intuitiveness. Therefore, it is useful for a designer to have knowledge of psychology in the area of cognitive processes and an understanding of the principles that influence these processes (how to read shapes that are related to each other, what will be noticed, and what will be ignored, how to interpret them). This is explained, for example, by the well-known principles of Gestalt psychology (the principle of proximity, similarity, symmetry, closure, etc.).

Equipped with knowledge and data on what requirements an ideal store should meet to be well-received by users and to enable them, we are left with the main question – how to design it? How to make it functional, and intuitive, to reach the appropriate target audience, what solutions and possibilities to choose for it? This is where the principles of Design Thinking come in handy. Initially, we can divide the entire process into four stages. These phases may differ slightly depending on whether the design process concerns a redesign or a new store.

Empathy and problem definition

Empathizing is the phase in which we gain crucial knowledge about the user. We answer questions such as who we are designing for, and what are the most important needs and problems for the user. We listen, observe, and try to put ourselves in their shoes to understand the motivations which influence their behavior and decision-making. Then, to systematize the knowledge we have gained, we move on to defining the problem, in which we identify real needs and expected benefits. At this stage, it is valid to distinguish between what seems to be the user’s, the client’s, or our perception from what is the true problem and need. It is a hard stage, as it requires everyone to abandon their standard thinking and get to the point of the problem. We can carry out this stage using techniques and research such as:

• Interviews,
• Observations,
• Surveys,
• Creating personas and empathy maps,
• Competitor analysis,
• Usability audit (during redesign),
• Discovery workshop,
• 5 Whys technique,
• Value proposition matrix,
• Prioritization.

During the research, there will probably be a lot of new information that will need to be sorted out, linked together, selected the most important (and sometimes the most urgent to be implemented in the first stage) to achieve the main goals. There will also be evidence indicating that some solutions should be abandoned or replaced with others (they may be too costly, unfeasible, or too difficult to implement). Those famous colored square notes come in handy in such situations, as they gather all the data and allow for rearrangement and organization of information.

Idea generation

This stage involves creating multiple solutions and stand out by a quantitative rather than qualitative approach. Therefore, the task of designers is to generate as many ideas as possible to meet the needs of users, including those that seem crazy and unreal but can become an inspiration for an unconventional approach. It is not yet time to create a perfect solution, but to check as many possibilities as possible, stimulate the potential of the project team, and use the various experiences and views of the interdisciplinary team.

We are using very various techniques to generate ideas such as Brainstorming, which allows you to boldly and freely present all ideas, even the most surprising ones. It is important to follow the rules: do not judge or criticize, write down all ideas, and be inspired by the ideas of others.

Later in this stage, ideas are categorized to select those with the greatest potential. To make a selection, first group all ideas into:

• ideas that we will not use,
• too difficult or for some reason impossible to implement, but inspiring and interesting,
• too average but useful and easy to implement,
• proposals with the greatest potential.

It remains only to decide which ideas we will deal with in the next stages. A decision matrix can help here, which on the axis “relevance” and “ease” will indicate which options are the most beneficial. At this stage, workshops can be used: Event Storming, Interface Review, Prioritization, and Design Studio.

Prototyping

At this stage, the first tangible projects are created (the technique is free, from felt-tip pens and crayons to “working” prototypes in Figma or Adobe XD). The most important thing is to be able to present selected ideas to the client, and check and test them with users before costly implementation works are undertaken. When designing a store, it is good to prepare low-fidelity mock-ups first, based on which you can focus on the layout and the most important functionalities. Only then can we move on to high-fidelity projects, which will also be “clickable” prototypes? However, before we deal with the UI of the project (its appearance), it is worth spending time on preparing an inspiration board (Moodboard) – one or several that will collect the selected colors, fonts, texture, and other inspirations that we will use in the store design.

Testing

The last stage is to check whether the designers’ vision will meet the expectations of real users. Unfortunately, although awaited, this is a difficult moment for the entire team. Members must be ready not only to receive negative feedback but even to return to the starting point  (empathizing and defining the problem). Iteration is important in the whole process, because the website design should not be treated as a finished work, but should be constantly improved. After going through all the phases, our perception of a given topic changes, so re-studying it and introducing changes can significantly increase the quality of the designed store.

For testing, we can use usability tests or A/B tests. Product testing and iterations are a chance to avoid mistakes and the need to make corrections already on the implemented store, which is very profitable.

What else to remember?

• An interdisciplinary team –  should be formed for an e-commerce project, consisting of specialists from various fields, including designers, developers, marketers, and managers, both on the contractor and client side. It is important to involve many qualified and experienced individuals in the project creation process, who will consider different issues, solutions, needs, and technologies.
• Accessibility – people with varying levels of experience and different types of disabilities (such as visual impairments) will be using the store, so it should be accessible to all of these groups and tailored to their needs. Ideally, it should meet the Web Content Accessibility Guidelines (WCAG) for accessibility, including proper contrast, and offer the ability to customize the view (such as changing font sizes).
• Responsiveness – a shop should be available on mobile devices but also adapt to changes in the device’s size, including font size and layout so that shopping on mobile is easy and convenient.

“Every dollar invested in UX returns 10 to $100” – (“The Six Steps For Justifying Better UX” – Forrester report from 2016.

A well-designed store will be appreciated by every user. After all, it will not only be pleasant but will also increase the comfort of shopping there. And taking the time to study the prototype will significantly reduce the costs of implementing changes and corrections.