eauty and brains, pleasure and usability - they should go hand in hand". These are the words of Don Norman, author of the cult book Design for Everyday People, which also fit the work on the design of an online store. In our company, we have been working with brands selling online for 14 years. Over the years we have developed our own approach to design, in which we try to combine what is most important in e-commerce websites - an attractive design and a unique shopping experience for customers. What is our approach?
Good UX in e-commerce
At Strix we have been designing interfaces for e-commerce clients almost since the beginning of e-commerce in Poland. Over these years we have heard about many design trends, some of them stayed in the industry for a long time, and some of them went away. However, the basics of good e-commerce design are constant. In our opinion, they focus on combining knowledge of effective assortment presentation, knowledge of customer journey, users' needs, and how they use digital products. The combination of these factors determines the creation of a unique online shopping experience. This is how we approach design in our UX Commerce Design team.
Specifics of working in e-commerce
E-commerce is a dynamic industry that is experiencing tremendous growth year after year, and its development has accelerated especially after the pandemic. This situation forces e-commerce business owners to invest in new and innovative solutions. It also affects our work in the UX department - every day we meet with great challenges and considerable variability of projects. We design for many clients from different industries (beauty, medical, sports, furniture, fashion, etc.) and we work for big brands, such as Castorama, Modivo, Semilac, Lancerto. Our designers are involved in constant contact with clients, during meetings we present projects to them, discuss functionality and strive to work together to find the best solution.
Design is a team effort
We believe that effective design for e-commerce is a team effort. That's why we focus on multidisciplinarity and our team consists of people who specialize in different areas such as UX, UI, interactions, branding, research, strategy, etc. Why is that? We believe that a diverse team can deliver the best business solutions through a holistic design approach.
Read what Commerce UX Design members say about working on this team.
Focused on growth
This approach is also combined with another element of our daily work, namely Design Review. Projects are evaluated by the whole team during special meetings or on our dedicated chat channel - all in order to find the best possible solution for the client. Only after a detailed analysis of the project and taking into account any comments, do we proceed to further stages of work. This allows us to create well-thought-out projects with attention to the smallest details. In addition, it is also a good way to exchange knowledge and educate each other.
In our department, we also strongly focus on development - each of our employees has the opportunity to use 3 hours a week for additional training in a selected area. We also have at our disposal a development budget of PLN 3,000 per year, which can be used for selected training or conference participation.
Our approach to design
Our clients usually turn to us with various needs, but most often it is the need to create a new design for a newly created store or redesign a website. How do we approach these tasks? First of all, we focus on strategy and before we start the design phase, we spend a lot of time on analysis and deep understanding of the business. We gather information about the target group, competitors and their communication in the segment, customers' purchase path, specifics of the products/services being sold, delivery policy, returns, and all processes related to our client's online sales.
Example of the design process
Step 1: Discover
Very often for our clients, we do not only design a store but also implement the e-commerce platform. Therefore, the first element of our cooperation is always collecting business needs and all the requirements necessary to launch online sales. It is important for us not only to know what functions a given store needs but first of all we try to understand the functioning of business in a broader perspective and only when we manage to do that, do we propose specific solutions.
We use our proprietary Commerce Blueprint method to gather requirements, which we use during client workshops. This tool is used to build a holistic strategy and effectively prepare for store implementation. The model covers 3 key areas: Clear Vision, Digital Product Journey, and Business Units Policies.
The Commerce Blueprint workshop results in a document that collects all the guidelines along with our recommendations. It is important that people from both our team and the client's team, often from different departments, are involved in preparing the document. In this way, we develop a common vision and a clear goal of the project.
Step 2 - Discover & Define
At this stage, we look at how our client is positioning itself in a given segment, what the trends and challenges are, and we analyze the brand from a semantic angle. We gather as much information as possible about the brand and its current or potential customers. This stage is divided into two parts: research and workshops.
Research
The methods we use to do detailed research (we choose them depending on our client's needs):
- desk research - on its basis personae are created, i.e. a reflection of people who will ultimately use the service implemented by us.
- Data analysis from available sources (e.g. Google Analytics, Hotjar),
- observation (yes, sometimes we go to a stationary store for this!),
- Benchmarking - we check design solutions in Poland and around the world, trends, and challenges currently faced by the e-commerce industry.
- Competitor analysis - we examine distinctive design and marketing practices and verify the ladder of benefits: attributes, functional and emotional benefits, the scope of offers, sales channels, and key audiences.
- Quantitative and qualitative research - we design and conduct quantitative and qualitative UX research: CAWI questionnaire studies, IDI individual in-depth interviews, usability studies of current solutions, etc. We recruit respondents, moderate surveys, and analyze their results.
Workshop
The second step is a workshop, during which, depending on the design challenges, we select exercises and tools from the area of UX, strategy, and brand positioning, among others:
- Fusion Matrix (a tool developed and adapted for e-commerce implementations, partly based on the popular Value-Effort Matrix tool).
- Product Information Canvas,
- Value Proposition Canvas,
- User Journey Map.
Step 3: Develop & Deliver
Based on all the data collected in the earlier stages, we move on to design.
- E-commerce information architecture - we pay great attention to proper information architecture when designing e-commerce websites. To build the architecture we use a tree diagram (flowchart) taking into account all the pages in the store (categories of all levels, static pages, blog post categories, user account panel, etc.), so we are sure that nothing will be missed during the design phase.
- Low-fidelity prototyping - building on all the data collected in the pre-design stages, we begin to create a low-fidelity prototype of the site. We focus on what information will be key for our users and what we want to convey to them with the building of the initial page skeletons and components.
- Determine visual direction using mood board tools - we create a brand style board and personas.
- High-fidelity design - moving on to create the target design
interface. We create it according to the Mobile First and Atomic Design approaches. At the same time we work on extensive graphic documentation - Style Guide, and in case of larger systems, we prepare comprehensive Design System documentation in close cooperation with developers, using Storybook and Zeroheight tools. We design using the Figma tool.
Project implementation
The next stage involves working with the development team to bring the project to life. We prepare detailed documentation, planning the implementation of given functionalities, which gives us the assurance that the whole team knows exactly what even the smallest elements of the interface should be. Developers are often involved in the work from the very first meetings (Commerce Blue Print). We consult with them on an ongoing basis about each solution before we submit it to the client for review and approval.
What's next? :)
Everything depends on the project and our client's plans. Everyone who works as a designer, especially in e-commerce, realizes that the work on the store does not end with the implementation itself. Most often, right after launching the system, we start developing the functionality of the website. We also conduct post-implementation evaluation studies to check how users perceive the solutions proposed by us and to introduce further improvements.
Best practices
It is worth mentioning that in the process of creating information architecture and designing stores we rely on, of course, on our experience, but above all, we rely on the heuristics of the Baymard Institute. Baymard Institute is an organization that has conducted more than 54,000 hours of moderated usability research and, based on that, has described more than 750 comprehensive guidelines with which our designers are familiar. Each member of our team has the opportunity to earn the Baymard E-Commerce UX Professional certification.
The tools we use
Selected tools that we use on a daily basis:
- Design: Figma, Principle, Adobe CC, Affinity, Avocode
- Research: Hotjar, TreeJack, OptimaISort, Typeform, Google Analytics
- Other: Lean Canvas, Design Thinking, Value Proposition Canvas, Customer Journey Map, Value/Effort Matrix, BPMN 2.0, SWOT Analysis.
This is just an overview of our approach to design at Strix. How does it work in practice? You can find out by taking a look at our materials:
Hop on board with us!
If you find the mentioned how we work interesting, it's a good fit. We are looking for a Senior Product Designer to join our UX team. We want a person who has the experience, but in addition to technical knowledge of UX/UI and knowledge of relevant tools, understands the business, can effectively use the workshop, plan and execute project processes. Check out the details here your CV.
