Project Description

Product Configuration Tool

Wireframes, Information Architecture, Mobile Web Application Design

Vorsteiner Product Page - Desktop, Laptop, and Mobile

Project Details

Client

Role

Product Designer

Goal

Increase number of online purchases and contact requests

Problem

Vörsteiner is a wheel manufacturer serving casual, off-road, and luxury drivers. With such a wide market, they had asked a company to help organize their store landing page, but are now experiencing two big problems: conversions are plummeting and the navigation is creating a barrier for users as it completely changes when they select a collection.

The homepage has a left navigation with four menu items and a cart, while the subsequent category page has a top navigation with eight menu items and no cart. The client is suspecting that conversions are plummeting because the new homepage is focusing on the user providing information versus offering the vehicle selection as a supplemental feature.

Constraints

The Vörsteiner wheel store connects to a family of separate sites for the overall Vörsteiner company, and two of their wheel collections. All sites have different designs and navigation patterns; there is no established branding other than the logo and the color palette.

This site is created on WordPress with WooCommerce store functions, so any recommendations are limited to the functionality of the integrated platforms and the speed at which the recommended changes can be made.

The Vörsteiner wheel offering lives on four different websites with vastly differing identities.

Research

Only having personal experience in browsing for wheels, I reviewed popular tire and wheel sites that have the same challenges: the market is wide, there are hundreds if not thousands of products, and each product is very specific — you can’t substitute a wheel if it won’t fit your vehicle.

Many solutions across these sites included submenus, categorization, and sorting as solutions, along with a tool to filter products by your vehicle.

Many solutions across these sites included similar elements: submenus, categorization, sorting, along with a vehicle filter.

Exploration

The client requested I seek clean, modern solutions similar to Apple and Google, requiring a solution that cleanly displays a lot of information. Comparing the site to other product-heavy sites, I noticed that little information was presented at a glance when browsing collections, requiring users to select the individual product in order to see the color and size options.

With the breadth and depth of product offerings, product filters are crucial, especially since finishes and sizes vary greatly between products. Size is the highest priority since it’s a requirement for vehicle fit. Color also important as this is purely a cosmetic purchase — as the client said, “Your vehicle already comes with wheels.” To assist with color selection, I can use small color swatches to cleanly indicate the wheel finishes at a high-level view.