How do we work in the Commerce Design team at Strix?
Visual communication, knowledge of effective product range presentation and research about customers’ journey — a combination of these factors determines the creation of unique shopping experience on the Internet. This is how we approach design in our Commerce Design team.
In the Strix design team, we focus on multidisciplinarity. It consists of people who specialize in various fields, such as UX, UI, motion, interaction, visual design, research, copywriting, etc. We believe that only such a complex team can deliver the best business solutions through a holistic design approach.
Design review
Each tiniest element designed in Strix is evaluated by the whole team during the Design Review. Only after a detailed analysis of the solution and taking into account any possible comments, the project is submitted for implementation. Thanks to this approach, we can generate thought-out projects, paying attention to even the smallest aspects of the project and educate each other.
Best practices checklist
In the process of creating information architecture and UI design, we rely on our list of good e-commerce practices — created based on research and the latest market reports. Therefore, our customers can be sure that the projects we prepare are created following the latest trends, based on proven solutions.
Tools we use
In our everyday work, we use such tools as a post-it, whiteboard+marker, paper+pencil, Sketch, Principle, Adobe Creative Cloud, InVision, Avocode, Typeform, Treejack, Google Analytics, Mouseflow, Hotjar, FullsStory, SPSS Statistics, R-Project, Jira, Confluence.
Analysis and strategy
Each project is associated with a thorough understanding of the company’s competitive environment, business requirements and the customer purchasing path. For this purpose, we use individual and group interviews, questionnaire surveys or quick tests with prototypes of sales models — all to meet the real needs of users.
UX Brief
Every new project starts with the creation of UX Brief, which is a document containing the assumptions and information necessary for the project implementation — the purpose and scope of the project or the definition of success with its measures. People from both Strix and the client-side are involved in the creation of the document, so everyone has a common vision and expectations of the project.
Brand research
The next step is to collect as much information as possible about the client’s brand (if it already exists) and its current or potential customers. The methods we use are desk research, observation, and interviews.
At this stage we look very carefully at the concept of the whole brand, we get to know the assortment of the store and the services offered — we get to know both the pros and cons of the offered products so that we can present them in the right light or recommend their modification.
We check who the brand’s customers are and verify its image among the community. We get to know the opinions of customers and service, so we can meet their expectations. We visit stationery stores, where we made some observations, talk to customers, staff, and at the same time, we can familiarize ourselves with the offered assortment.
Ultimately, based on the collected information, we can prepare not only a project responding to the needs of users, but also propose changes in the organization — having a direct impact on user satisfaction and improving the process within the client’s company, which often translates into real savings.
Website content inventory
At the stage of collecting information about the brand, we also conduct an inventory of the current website content. We thoroughly study it, prepare a list of information that should also be included in the architecture of the new implementation.
Generating product descriptions or valuable static page content can be very laborious. Thanks to our process, at the initial stage we can verify whether the content will be sufficient or whether it needs to be improved. The same applies to product descriptions — we can propose a modification of descriptions according to customer expectations and user-friendly rules of writing.
Personas and empathy maps
Persona is a kind of reflection of the segment of users — which means a person who will ultimately use the product or services implemented by us. Accurate knowledge of users, their goals and complaints is the basis for the implementation of a product responding to all their needs. Users are segmented based on all available information, i.e. sociodemographic characteristics, interests, behaviors, technologies they use, etc.
Basic personas are created based on desk research (data found e.g. from Google Analytics, social media or Internet forums) and designers’ expert knowledge. More data means a more accurate reflection of the product user, therefore we always recommend an extended version of personas (data-driven). Additionally, we conduct surveys and individual in-depth interviews (IDI) in stores directly with real users.
Planning a product vision, business model or functionalities included in the service can be a very difficult challenge. Without a proper approach, it may turn out that no one uses the implemented product or function, and we have lost a lot of time and money to find out. Therefore, based on the collected data, we create user empathy maps.
An empathy map is a way of profiling users, in which we try to go beyond raw data and look at them from a completely different perspective in order to try to better understand their emotions, behavior, and needs. There are six areas that describe the user and are connected to our product at the same time, i.e:
- What does he hear? (e.g. what his/her friends, influencers, and other clients are saying)
- What does he see? (e.g. other similar offers on the market, its natural environment, problems with activities)
- What does he think and feel? (e.g. what is important to him/her, his/her aspirations and challenges)
- What does he say and do? (e.g. what interests and habits does he/she have, what attitude does he/she have, what activities does he/she perform)
- What are his/her complaints, fears and frustrations? (e.g. what he/she does not want to experience, what obstacles he/she encounters while achieving his/her goals)
- What kind of benefits does he/she expect? (e.g. what he/she wants to achieve, what are his/her desires and needs, what gives him/her satisfaction, what is valuable for him/her)
Basing on personas and empathy maps, we can draw a lot of accurate conclusions about our product and make a preliminary range of functions expected by users from each segment, which will certainly be useful for them.
Benchmarking, analysis of good and bad practices
The analysis of competition in the market is crucial for any project. Thanks to the verification and comparison of other websites we can learn from their mistakes or be inspired by the solutions existing on the market. Benchmarking allows us to verify whether the services or functions we plan to implement will distinguish us on the market in relation to the competition, and it allows us to see a chance to fulfill market niches.
Fusion Matrix
Fusion Matrix is an original tool of the Strix design team, developed and adapted for e-commerce implementations, partly based on the popular Value-Effort Matrix tool (often also called Impact Effort Matrix or Action Priority Matrix).
Thanks to prior personas and empathy maps creation as well as competition analysis, we develop a list of functionalities that users expect. Unfortunately, very often it turns out that the short deadline for the implementation of the service does not allow us to implement them all.
Fusion Matrix is a tool that enables us to properly prioritize functions and define MVP (Minimum Viable Product) — first of all, we implement those functions that have the greatest impact on the user’s purchasing decision, and at the same time require a relatively small amount of work. Functions with a lower priority or requiring a large amount of work are considered as a future-oriented plan for the development of the service and are consistently implemented after the launch of the service.
Thanks to our approach, the product can go public much faster and start to bring real profits. The added value is also the fact that the product can be tested more quickly on real users.
Taxonomy and information architecture
Intuitive product categorization in e-commerce systems is the largest aspect affecting the bounce rate — a user who cannot find a product assumes that it does not exist in the store. As a result, he goes shopping to the competition, and there is a high probability that he will not return to our store.
Users usually, due to their convenience, prefer stores with a large assortment, where they can comprehensively receive everything they are looking for. A large number of offered products positively influence the revenues generated by the shop, but often is also associated with too extensive and non-intuitive information architecture.
Unfortunately, many sellers, even among the biggest players on the market, simply underestimate the optimization of the taxonomy of products, not even realizing how much they lose because of it. Appropriate assortment taxonomy guarantees that customers will be able to easily browse the product catalog and make purchases — the more intuitive it is, the more traffic it will bring, which will have a significant impact on store revenues.
This is why at Strix we pay a lot of attention to the right information architecture when designing websites. The architecture creation process is built on the basis of a tree chart (flowchart) taking into account all the pages in the store (categories of all levels, static pages, categories of blog entries, user account panel, etc.), so we are sure that we will not miss anything in the design phase.
While creating the information architecture in the first stage we rely on the expert knowledge of our design team, resulting in the initial version of the website structure, which is then subjected to research on users (tree testing).
In the next stage we summarize the conclusions of the research and take them into account in our architecture — then we are sure that the structure of the website meets the expectations of users and there will be no need to modify them at the stage of design or implementation.
In order to increase sales effectiveness, our team has also developed a template and methodology for Product-Data Analysis. With the help of this methodology, we always carry out assortment analysis and prototype the structure of the product information. This analysis is necessary to design the key element of e-commerce navigation systems, which are filters in product categories and the structure of information about attributes inside the product page. It gives us a guarantee that the consumer will find the information they are looking for and will make a purchase decision more easily while minimizing the risk of leaving the site.
Design
Low-fidelity mockups
Basing on all data collected in the stages preceding visual design (i.e. personas, list of service functions and website information architecture) we can start sketching. We create the first concepts of information architecture and page layout with the use of a pencil and a sheet of paper. We analyze them both in terms of business requirements, user and our own list of good practices.
We sketch on a sheet or board because we believe that only then can you focus on the processes running on the site and the needs of users. By sketching low-fidelity mockups, we don’t focus on the details of the visual design, as in the case of a high-fidelity mockup so we iterate in a very short time — we generate a lot of different solutions and ideas, test them and then make quick changes.
Once we are sure that the generated sketches meet all the requirements, we digitize them, still in the form of low-fidelity mockups — at this stage we precise all the small details in the architecture of the website. Such digitalized mockups can be subjected to further tests based on the interactive graphic prototype prepared by us (we use Sketch and InVision applications).
Based on the low-fidelity mockup we can quickly make further changes and improvements to the project with a low amount of work. Modifications and tests of this type only at the stage of implementation can be much more expensive, because they should involve the whole implementation team, so the key is to verify the project and its architecture already at this stage.
Mood (style) board
Before we start designing the high-fidelity mockup we create a style board of the brand and personas — it is a collection of images, texts, colors, materials or photos of places or objects that are characteristic of the brand, or that surround the customers of the brand. We create it for the purposes of inspiration pattern, stylistics and interface consistency, to reflect the brand spirit and emotions that accompany it in an appropriate way through the design.
Not everything can be expressed in words, images can convey much more, in a much simpler way — that’s why we often create mood boards with our customers, even before working on a high-fidelity mockup we can determine the common vision, style, and appearance of the target product.
User interface and prototype
We have already done a lot of work — now we can start to design a visual appearance layer of the interface. Thanks to all the processes that precede the high-fidelity design, at this stage we no longer have to worry about the architecture of information or functionalities to be implemented — we can concentrate only on the design and usability of the interface.
We always start our work on the interface from creating the foundations of the e-commerce system, i.e. the construction of global navigation elements such as the navigation bar or the website footer — they are crucial because they appear on every page of our website, so they are the element that users see most often. Navigation and footer are designed for each breakpoint (simplified for each resolution), anticipating all its possible states (cart preview, search engine prompts, shop selection, types of mega-menu and their appearance, mobile menu, logging, newsletter subscription, etc.).
At the same time we are starting to work on style guide — it is a document describing all the small elements of the service, allowing to maintain consistency throughout the interface, which significantly affects the basic elements of usability, such as learnability, efficiency, memorability, and, consequently, also the satisfaction of the user. It includes such elements as:
- grid system (description of breakpoints and behavior of the website’s layout),
- the colors used and the context in which they are used,
- typography (typeface and its varieties, headers, paragraph texts, lists, the appearance of links, etc.),
- buttons (all types and states of buttons used in the service),
- text fields (input, text area, with a description of all their states),
- selection controls (radio button, checkbox, switch),
- selection lists and dropdowns,
- pagination (appearance and behavior),
- validation styles of all elements,
- system messages,
- tables,
- and much more…
Basing on elements from the style guide, we build bigger modules (Atomic Design methodology) to develop a coherent Design System with reusable components of the system’s interface.
The next step is conceptual work on the product website design. The consumer initiates a purchase decision on the product card, so we believe that it is a priority element of the entire purchase path. We try to design outstanding product cards, which will be consistent with the brand identity and present the product in every possible form.
Product pages differ according to the type of product range sold — it is up to the designer to decide how the product should be displayed. In some cases, it is necessary to focus on technical data rather than visual aspects, and in others, it is necessary to display product photos, details and present it in the context of use.
The next stage is a project of a product catalog. The appearance of this page also depends mainly on the offered assortment — it’s key elements are navigation by filtering attributes, and the appearance of the product block with the information contained.
The layout of products is also very crucial, it depends on many factors — for example, in a B2B shop the best solution often turns out to be a simple list of products with the possibility of bulk management (e.g. bulk addition of many products to the cart directly from the category view). On the other hand, in shops with assortment directed to individual users, with a small average number of products in the cart, the implementation of such a function misses the point.
As you can see, the appearance of these websites is influenced by many factors, everything depends on the assortment, who are the users and what actions they take. In the Strix team, we design uncompromising systems with their target context in mind, which is a huge advantage over ready-made solutions with a lot of limitations.
In the next stage, we design all steps of the customer’s purchase path, i.e. the shopping cart, the ordering process, and the user panel. Thanks to our experience and specialization in e-commerce implementations, we can rely on proven solutions, based additionally on the already mentioned list of good practices — thanks to which we are sure that we offer the best possible solutions to increase the conversion rate.
We are closing the visual design stage with prepared recommendations for the main page, all static pages with important marketing content.
When creating subsequent visions of the high-fidelity mockups, we are constantly updating our interactive graphic prototype, so that at each stage of design we are able to confront design proposals with users, whether in the form of rapid guerilla tests or by performing in-depth individual interviews.
Implementation, development, and maintenance
Preparing a graphic design in accordance with all usability principles and guidelines is only half of the success. The real challenge begins with the implementation and its optimization in terms of performance. Fortunately, thanks to our specialization in e-commerce systems, this is not a problem — at the stage of graphic design we acknowledge potential problems, so we are sure that when it comes to the site’s implementation, no changes will be needed. Thanks to this, the whole process can run very smoothly, and we can focus on the verification of the quality of the implemented product.
Project design documentation
We have our own solution of design documentation, based on basic components describing micro-interactions (trigger, rules, feedback, loops, modes). They are used to describe every small element of the interface (e.g. a button, a link or a navigation element).
Such precise documentation of the design, when planning the implementation of given functionalities, keeps us confident that the entire team knows exactly how even the smallest interface elements should behave. As a result, we deliver a very high-quality product in the shortest possible time. Graphic design documentation lives as long as the entire system, and all subsequent extensions with additional functions are also included in it. Even if the previously implemented elements change, the project documentation is updated each time.
What’s next?
Immediately after starting the system, we start working on the development of next, new functionalities, determined using the mentioned Fusion Matrix tool.
Each time, we also conduct post-implementation evaluation studies, which are aimed at users’ opinions on the new service, in order to implement additional improvements on its basis. We also verify data coming from analytical tools. Using previously prepared KPIs, we verify if the new implementation meets the objectives set out in UX Brief.
The implementation of each system is just the beginning, there is still a lot to be done.
If you are an ambitious designer who can think about products holistically and would like to join our team — please check our job openings at strix.net
Also, you can check out our’s Behance profile!
