logoPortfolioBenchmarksArtikel
snc/snc-hero.webp

Scooters 'N Chairs

This case study describes the relaunch of the e-commerce Scooters 'N Chairs to optimize conversion rates sustainably. Scooters 'N Chairs offers mobility solutions. The online store has a wide selection of electric scooters, electric wheelchairs, and lift chairs. People with limited mobility can be advised by customer service, thus obtaining the optimal product for a higher quality of life.

Scooters 'N Chairs launched in August 2018 and has received numerous revisions. Despite the latest updates, the store sees a shallow conversion rate of 0.14%. The founder contacted me to increase KPIs, decrease usage error rates, and maximize revenue opportunities. The Scooter 'N Chairs online store redesign was based on a comprehensive analysis of over 750 data-driven design principles. The user experience on the website is insufficient and primarily characterized by usability issues related to non-interactive product lists and non-transparent product pages.

Results

v1

online, higher fidelity versions planned

+1200%

Conversion Rate

+260%

Session Time

-210%

Bounce Rate

Metadaten

Industry
eCommerce
Size
10-20 Employees
Value
30.000€+
Tasks
    User Research
    User Experience
    Design System
    User Interface
Tools
    Adobe XD
Date
2021 - 2022
Website Link

Target

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.

Procedure

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.

Data Analysis

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.

Excursus: 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

Status before

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.

Status new

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.

afterbefore

ALT

NEU

The new product page allows a higher information density

Upselling

Status before

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.

Status new

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.

afterbefore

ALT

NEU

The new configuration is much more transparent and visually easier designed

Results product archive

The importance

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.

Status before

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.

Status after

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.

afterbefore

ALT

NEU

The new product archive allows quick scanning, filtering and comparison

Prospects

Development

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.

afterbefore

ALT

NEU

The new homepage reflects the quality of the redesign
afterbefore

ALT

NEU

The new footer catches users at the last moment, because it is textually optimized, logically structured and more informative

User behavior

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.

More UIs

Product Comparison

Product Comparison

Popular Products

Popular Products

Grid View

Grid View

afterbefore

ALT

NEU

Ratings are transparent and filterable
afterbefore

ALT

NEU

Banners are optimized in the display
First design sketch of the new product page

First design sketch of the new product page