DaWanda

2015 – 2018 • Berlin

Optimizing the Product Details Page

OVERVIEW

DaWanda (acquired by Etsy) was Germany’s leading marketplace for handmade goods. From Q4 2016 to Q2 2017, I served as the lead designer on the Product Details Page (PDP) team. We noticed that the PDP hadn’t been updated for quite some time, and there were several inconsistencies that needed to be addressed. We anticipated that fixing these issues would positively impact clicks and conversion rates. Additionally, the numbers we were seeing in Google Analytics and Hotjar were less than stellar and had significant room for improvement. First, we needed to dive deep into qualitative and quantitative research to validate our assumptions and and uncover any additional user problems.

RESEARCH

The team and I recognized existing problems in the PDP, but we wanted to delve deeper to uncover any additional issues and prioritize which to address first. The first thing I did was to conduct a heuristic evaluation of the PDP. We conducted user interviews, tests, and reviewed data from Hotjar and Google Analytics.

Heuristic Evaluation

The first step was conducting a Heuristic Evaluation of DaWanda’s PDPs. The most problematic areas I identified were:

Match between system and the real world
  • We identified several issues with non-German language translations, as DaWanda is a global platform catering to multiple countries and languages, not just Germany.
  • The way sale items were displayed wasn’t as clearly marked as on other platforms or in physical stores, making it hard for users to recognize sale items.
  • Product characteristics and customizations were presented in a way that made them look clickable, like buttons or tags, which caused confusion.
Signals indicating when products were on sale were not as clear as they should have been. This is a change I proposed.
Consistency and standards

Consistency and standards were one of the most problematic areas of the evaluation. We identified several inconsistencies, particularly in:

  • Shipping Information: Some product pages provided thorough shipping details, while others lacked some essential information. While this could be improved with better seller education, it’s DaWanda's job to ensure the platform guides their sellers effectively in filling out shipping information consistently.
  • Customizable Products: We encountered several product pages that labeled items as customizable, but it wasn’t clear which aspects could be customized. While some PDPs provided detailed customization options, others had little to no information. This inconsistency also ties back to seller education. Another example of inconsistency is in the terminology: DaWanda labeled products as 'Customizable' on the PDP, but the 'More Characteristics' box in the Details tab referred to them as 'Personalisable'."
Shipping information was displayed inconsistently, and we needed to streamline it for consistency and clarity.
Error Prevention

We assumed that the current PDP design might cause users to mistakenly order products or items that couldn't be shipped to their location.

  • Inconsistent shipping information can confuse users, leading them to order products that cannot be shipped to their location.
  • Users might mistakenly order an electronic PDF knitting pattern, thinking it’s a physical product. The "shipping to" label on electronically delivered products adds to the confusion.
  • Users might ask for customizations that the seller cannot fulfill.
  • User comments are hidden inside a tab, potentially obscuring valuable information.
Payment details are only displayed inside the details tab making it hard for users to locate it.

Card Sorting

We recruited 16 testers to participate in user interviews, card sorting, and dot voting exercises to identify trends in their preferences for their ideal product details page.

For card sorting, I provided cutouts of all the individual components of our product pages and asked the participants to create their ideal PDP in a mobile view, allowing them to arrange the components however they wanted.

Identifying trends in the tests was crucial, and all participants consistently selected the following seven components:

Product Title
Product Photo
Product Price
Product Availability
Add to Basket
More from the shop
Add to Pinboard

Dot Voting

For the dot voting exercise, each participant was given 8 points to allocate across 13 sections of the PDP. If they felt a particular section was especially important, they had the option to assign more than one point to that section.

Here were the final results of the votes:

Competitive Analysis

I analyzed 20+ top e-commerce sites, focusing primarily on those offering handmade products. My goal was to identify current trends, patterns, and best practices in their PDPs. I also studied the placement and use of certain CTAs and components. As a strong advocate for minimizing the learning curve, I believe that placing key CTAs and components where users expect them enhances usability. Key aspects I evaluated included:

  • How product photos are handled
  • Placement of product descriptions and the add-to-cart button
  • Display of product variations and customizations
  • Seller communication and buyer commenting

Analytics

Using Hotjar and Google Analytics, we analyzed heat maps (scroll and move maps) across various PDPs. Additionally, I set up and examined different funnels to address key user scenarios on DaWanda, such as inspirational browsing, gift shopping, and purchase-intent browsing.

Takeaways from our research

After several sprints using the research methods outlined above, we identified the following key problems as the highest priorities to address.

Photos

Our research revealed that product photos were one of the most critical elements of the PDP, especially for buyers looking to purchase items where fine details and material quality are essential. DaWanda’s approach to handling product images was outdated. Buyers were unable to zoom in for a closer look at the products. Additionally, the photo component's real estate on the page could be expanded for better visibility.

Payments

Payments were a critical part of the PDP, but the payment information was not prominently displayed and hidden behind a tab. This frustrated buyers, as they often wanted to purchase items but found that their preferred payment methods were not accepted. Cross-border payments, in particular, posed challenges due to varying accepted payment systems in different countries.

Shipping

Shipping was another crucial element for our buyers. While the shipping component was more visible than the payment details, it wasn’t presented in a clear, consistent way. Shipping information was displayed in various formats with confusing wording. Buyers would sometimes mistakenly purchase items from sellers in other countries, only to find that the seller didn't ship to their location.

Shops & Sellers

What makes DaWanda so special is the diversity of sellers and buyers from all over Europe and beyond. However, we weren’t effectively showcasing shop and seller information. Buyers wanted clear details on where the shop was located, where it could ship to, and its seller rating for trustworthiness. Additionally, we needed to better highlight the seller's other products, as doing so could lead to higher conversion rates.

DECISIONS

After the research phase, the team and I explored various design options for each of the major areas of improvement. Below are some of the design explorations and final decisions.

Product Photos

Product photos were identified as one of the most critical elements of DaWanda's PDPs. The primary issue was inefficient use of page real estate and the lack of modern zoom functionality, which is common on most e-commerce platforms. For homemade products and fabrics, the ability to zoom in and view fine details is essential to the user experience.

We analyzed the five most popular aspect ratios to determine the optimal height and width for the new photo container.
Original photo container
New photo container

We repositioned the photo thumbnails to the bottom of the image, optimizing the available real estate on the right side. This adjustment allows for better visibility and minimizes cropping, regardless of the aspect ratio. On mobile, the photo now spans the full width of the screen, improving the user experience on smaller devices.

Shipping & Payment

Shipping and payment information ranked high in importance according to our research. Since DaWanda is driven by sellers from all over the world, shipping and payment details varied widely. It was crucial for buyers to quickly and easily identify where a product ships from, whether it can be shipped to their location, and if the shop supports their preferred payment methods. We needed to simplify the shipping information and make the payment details, previously hidden behind a tab, easily accessible alongside the shipping information.

The original product page with the payment information hidden behind a tab below the fold and the shipping information could be smaller and more refined
Updating the shipping component

The original shipping component was too bulky, occupying valuable space that could have been used for other key details, such as payment information. We streamlined the shipping information into just three lines of text while maintaining readability. Additionally, in the English translation, we improved clarity by changing the phrasing from 'Shipping to' to 'Shipping from,' helping to avoid confusion about the product's origin.

Increasing payment visibility

Previously, buyers had to navigate to the details tab and scroll down significantly to find the product payment information, as it was the only location where this information was displayed.

The payment information is hidden inside the details tab and at the bottom

To improve visibility, we moved all shipping and payment information out of the details tab and created a new, dedicated "Payment & Shipping" tab.

We added a dedicated tab for Payment & Shipping for greater visibility and improved accessibility.

We placed a payment overview directly beneath the shipping information on the page, allowing users to access this critical information without needing to open the Payments & Shipping tab.

Payment information is now prominently displayed directly beneath the shipping details.

Seller & Shop Information

The heart and soul of DaWanda lies in its sellers and their unique handmade products. Unlike traditional e-commerce sites where all products come from a single company, DaWanda allows buyers to purchase items from various sellers, each with its own location and story. We aimed to make seller information feel more personal and accessible by showcasing it more prominently on the page. Descriptions are now shown by default, and buyers can easily see whether products are customizable, along with clear details on the available customizations.

The original location of the seller and shop information.
Variations

We aimed to consolidate the seller and shop information in one easy-to-read, more personable section. Instead of simply stating the shop’s location, we added "Carefully created in ____" to give it a more human touch. We experimented with various placements. Initially, we considered placing this information at the very top of the page, above the price and other key elements, but after careful consideration, we chose to position it below the main product information. This ensured that the focus remained on the product itself, while still making the seller details more visible but not dominating the page.

Exploring different variations for the placement of seller information and the wording of the contact button.
Final Solution

The seller and shop information became more compact, concise, and personable. We placed it directly below the shipping and payment information, ensuring it stayed above the fold. Additionally, we added a prominent, easy-to-find button for buyers to quickly contact the seller.

More from...

Our research showed that users clicked on the shop name and 'More from this shop,' but the original design allocated too little space for this feature, displaying only two products. We redesigned the component to span the full width of the page's center, allowing up to five additional shop items to be showcased. By making these other products more visible, we aimed to increase clicks and improve conversion rates for DaWanda's shops.

Add to Pinboard

The Add to Pinboard feature is important for DaWanda, allowing users to save their favorite products as they browse. When a user wanted to save a product for later, they would add it to one of their pinboards to easily find it again. While we knew this feature was a big part of DaWanda and would remain, we needed to relocate the button. The space it originally occupied was designated for the new seller and shop information design.

Variations

We experimented with various placement options for the button. Keeping it within the right info container didn’t feel ideal, especially with the new seller and shop information nearby. We needed to find a way to further declutter and streamline the product page.

Different design variations I experimented with
Final Solution

When we analyzed dozens of e-commerce sites, we noticed a common trend: placing the favorites action directly on the product photo. Positioning the "Add to Pinboard" button on the photo became our clear choice for several reasons:

  • The frequency with which we saw this pattern suggested that users might already be familiar with, or even expect, this placement. However, we planned to test it to validate this assumption.
  • Removing the button from the info container decluttered that area, improving the overall layout.
  • With the heart icon turning red after a product was added to the pinboard, it became more obvious to users that the item had been saved.
The new add to pinboard button was now a circular icon button on the image itself.
Updated Design and Flow for Add to Pinboard

FINAL DESIGNS

Through a user-centered design approach, we successfully optimized DaWanda’s PDP, significantly improving the buyer experience. By addressing core issues such as photo sizing, seller transparency, payment visibility, and shipping information consistency, we boosted buyer confidence and engagement while increasing conversion rates by aligning these design solutions with the real user needs we uncovered.