Through intelligent design, we increase the KPIs of the online store, in particular conversion rate, session time, and the bounce and exit rate. Bounce and Exit Rate. The greatest challenge is taking into account the high age of the target group.
Prior to a redesign, the current problems of the website should be evaluated. For this I create a UX benchmark and a comprehensive data analysis.
UX Benchmark Part 1
The UX analysis is structured in three parts. In the first step, it is based on the basic flow and structural design of the website. In order to improve the user experience, it is important to understand how the user interacts with the site, what difficulties they encounter and what interactions they prefer. Guiding questions include: How does the user navigate the site? How many clicks are required to purchase a product? Is the hierarchy of the website clearly recognizable?
UX Benchmark Part 2
The main part of the benchmark is based on an exclusive catalog built up over many years, based on UX studies, data, e-commerce experience and best practice approaches. With a total of over 750 items, I can use this catalog to clearly reflect which areas, elements and categories of the store are most affected by weak usability.
UX Benchmark Part 3
The final third part assesses the visual identity of the store in terms of usability. This includes, among other things, intelligent use of colors, consistent accessibility, an established typographic hierarchy, and stringent spacing rules.
The benchmarking was followed by a comprehensive analysis of all data that could potentially tell us something about user behavior. This includes an analysis of technical and social data in Google Analytics as well as a variety of records from Hotjar.
Hotjar allows live recording replays of users on the website. UX analysts see complete user experiences, including mouse movements, clicks, and navigation. This allows them to pinpoint issues in the usability of the website at a higher level.
Results product pages
Above Fold Content on Product Pages
The content on a product page that is visible directly when the page is accessed is currently very technical and focused purely on sales. A picture of the product and the price are visible, as well as information about payment. However, there is a complete lack of product description or information that creates trust.
The new design puts the product image and the alternative images in better focus. Directly below the product title, the ratings can be viewed. The product is described in bullet points according to the most important criteria for a selection so that the added value for the user is made immediately apparent.
In order for the user to be able to benefit from additional services, an easily adjustable product configuration is essential. Currently, the product configuration is implemented in a very technical way and can only be viewed via dropdown. If the user closes the menu again after making changes to the configuration, selected changes are not visible. The upselling functionality is intransparent and out of touch with everyday life.
Changes to the configurations are also displayed when the menu is closed. The configuration options are provided with tooltips that explain the settings in detail. The focus is not on the technical aspect, but on the emotional one. Instead of describing the performance of the larger battery on a technical level, the user experiences the difference in range and thus has a direct everyday reference.
Results product archive
Without the right tools, finding the right product can become an almost impossible task for the user. E-commerce product lists and their filtering and sorting tools determine how easy or difficult it is for the user to search the website's product catalog. In many situations, they determine whether the user will find a product that suits him or her and whether a purchase will be made.
The product archive is an example of a lack of user focus. The products displayed in the list have virtually no information. Customers cannot compare products and make a selection. It is assumed that the customer knows the advantages and disadvantages of the individual products. In addition, the setting options are mostly controlled by very user-unfriendly sliders. Furthermore, archive pages often have an introductory text that makes the page look like a blog article. There are also no clear design guidelines. Buttons and headlines are formatted in the same way.
There is a clear visual hierarchy. The customer sees an easy-to-use filter bar through which he can filter his results. Active filters are highlighted above the results, and the most important sorting functions are accessible with a click and without reloading the page. The products are uniformly designed and present significantly more information that allows products to be compared with each other and cause a purchase decision.
The new design has been online since the end of March. The focus is currently on numerous technical improvements. Subsequently, further design optimizations will be made and the development status will be compared with the UX prototype.
In the future, further analyses of user behavior must ensure ongoing optimization. A/B tests will provide information about which filter options and texts deliver the greatest added value for users. Integrating a function for selecting and comparing multiple products is also a possible piece of information. I will accompany Scooters 'N Chairs in the long term and look forward to the upcoming KPI measurements.
First design sketch of the new product page