Project Description

Product Configuration Tool

Wireframes, Information Architecture, Mobile Web Application Design

Vorsteiner Product Page - Desktop, Laptop, and Mobile

Project Details

Client

Vörsteiner logo

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.

Right now there is significantly more work for a user to pick a wheel with their preferred finish and size since it is buried on the individual product page. My goal is to cleanly display both the size, finish, and cost of each product at a glance, maximizing the features as TireRack does, while keeping the clean aesthetic of Apple and Google.

Proposed Solution

Being that my client is new and unfamiliar with the traditional product design process, I am providing one high fidelity wireframe for context and supplemental low and mid-fidelity wireframes to provide a variety of layout choices based on specific features.

The proposed layouts will have continued navigation throughout the site and clearly provide context through known website conventions as well as repeated use patterns throughout the site. I will update this study as progress develops.

My goal was to help the user with filtering options for both wheel size and finish, while also cleanly communicating plenty of product information before asking the user to view the item.

Client Review

After reviewing my initial design, the client informed me that the current infrastructure and workload capacity will not allow for further product categorization, but that an existing database has been created to recommend similar products. After explaining that the proposed color filter would add significant ease of use for customers looking for a specific finish, the client agreed to make this a priority for a subsequent phase.

Our first phase of updates is limited to the programmers’ current work capacity, so the solution I create for my client will need to serve as a minimum viable product (MVP) until further revisions can be made. With this in mind, I plan on making a flexible layout and information architecture that should scale to accommodate all of the sites without negating any work completed in this phase.

Vörsteiner Wheel Homepage - Round 1 Review

To better align with the programmers’ availability, we will be pushing the color filter to a subsequent release. Dealer mentions will also be reduced as the client is moving more toward e-commerce in response to COVID-19 concerns. I will also be adding the vehicle configuration tool back to the design  to simplify the wheel selection/filtering process.

Revisions

After reviewing the design with my client, we determined it was very important to keep the functionality to filter products by vehicle. We reviewed other wheel sites to evaluate what worked well for them and agreed that an interface featuring filters by vehicle and wheel design was important to navigating through products.

I was also informed that the site was moving toward an online store vs. a dealership model in response to COVID-19 concerns, so a cart and login are now needed, and CTAs should be along the lines of “Add to Cart” instead of “Find Your Local Dealer”.

My goal was to help the user with filtering options for both wheel size and finish, while also cleanly communicating plenty of product information before asking the user to view the item.

Other Projects