Product Details Page
The Problem
Cimpress’s internal catalog, Marketplace, needed a refresh to its product pages. Marketplace showcased customizable products, such as t-shirts, pens and business cards. Each listing contained a large amount of data for businesses and suppliers to search through to accomplish two primary goals:
1. Check that their products’ data was properly displayed.
2. Choose which products to purchase.
The updates had to address how to organize the information for different user needs, make sure that information was findable, and address how the previous version pushed certain information below the fold.
Reorganizing Brainstorming
Early concepts focused on reorganizing the information. The original version of the product page consisted of two pages with the first providing basic information about the product, and the second giving supplementary information, as well as the product selector. The product selector allowed a user to choose a specific variant of a product, much like a traditional online clothing store, in which, a person could choose a different color or size of the same shirt to order. Some of the problems I noticed with the original design was that the option selector often pushed information below the fold. Even if the user was aware of the extra information, moving the tabs below the fold made it difficult for the user to navigate. In addition, the two page format meant that it was difficult to determine what information would be on which page. Ordering meant that a user would have to click into the second page, which was only accessible from a small button.
The concepts below focus on adding all the information to the same page and moving the product selector so it wouldn't push the tabs below the fold. I considered using multi-row tabs and vertical tabs to combine the information. I also tried moving the corresponding selections to the relevant tabs, so that users could focus on specific information. Some information was only accessible after a user made certain selections and this was meant to highlight what the user needed to fill in.
Multi-layer tabs proved to be too disorganized. Vertical tabs potentially hid certain categories of information. Breaking up the option selector made it easier for certain users to focus on information gathering, but made it much harder to order a product.
Early Concept
The part of this iteration that made it to the final design was moving the option selector to a different section of the page than the tabs, so the user could view both at the same time and make selections when necessary without losing context.
Brainstorming allowed me to quickly test many ways to organize a lot of information. The product managers and I also discovered that there was more horizontal space to work with than we had originally thought, as most users used multiple large monitors, which led to a breakthrough in the design.
First Iteration - Tabs
This version was focused on using vertical tabs within the product details’ tab to reorganize the information according to different user needs. It was one of the first live changes made to the page and allowed us to combine two pages into one, which made information easier to find.
Second Concept - Calculating Pricing
This wireframe applied my early ideas of reorganizing the position of the option selector. It also solved problems with the current pricing experience, where a user would need to select a large amount of information in order to view a price. Pricing could become over complicated due to different variations on products, as well as quantity and shipping destinations.
In addition, it was difficult to know which fields were required in order to calculate the pricing. This early concept proposed highlighting the necessary fields when a user navigated to the pricing tab.
Second Iteration - Calculating Pricing
This final version allowed for an auto selection of the lowest price configuration, so users could view an initial price. This gave buyers an instant idea of what they could be paying when they loaded a product. It also allowed them to compare different products faster, and made it clear which information was needed to calculate shipping.
Surfaces
A surface is the section of the product that can be customized. This is where customers will add their own text and images. Understanding the size of the surface is important information for a potential buyer. The original version of this tab had a basic shape and a few lines of information. It did not clearly show the user where on the product their customization would be.
Third Concept - Surface Configuration
This updated version kept some information in text format, so that the user could reference it, but also gave the user more visual information. There were two different ways to view this information. The tab shown here gave the user context for where the surface was on the product. The other tab offered a more detailed look at the surface itself, showing not only an outline, but the surface bleed and the length of the sides.
Final Concept
The final wireframes removed the concept of showing where a surface was. Instead they focused on the surface itself, expanding on the view of the surface and providing a large amount of complicated information in a visual format, which made it easier to digest. The final design showed the surface bleed, trim, and safety margin, as well as folds, cuts, and ornaments (for example, grommet holes). The wireframes also contained a key.