Zola Product Detail Pages
Redesigning Zola’s PDPs for the Invitations vertical to support new customization variants and introduce a more modern UI.
My Role: Product Designer, Researcher (Late 2020)
Additional Team Members: Product Manager, Engineering Lead, 3 Engineers
Timing: 6 weeks design & research, 2 months engineering
Business opportunity
Seeing continued success in sales, the Invitations and Paper vertical was ready to add new products, paper types, and printing types. Zola as a brand was also undergoing a brand “refresh,” giving us an opportunity to incorporate those visual changes at the same time.
This project aimed to increase discoverability of new products, educate our users on our new product offerings, and increase up-sell opportunities.
User needs and problems
The user group we focused on were couples who were interested in purchasing paper products for their wedding, specifically Save the Dates.
Our product detail page (PDP) was not built with scale in mind. A round of usability testing showed the current experience had poor discoverability into the variants we offered, and overall issues with information hierarchy.
Our old product detail page
As a team, we identified the objectives we were hoping to tackle with this redesign. They were to:
We will educate users in a straightforward, simple way on paper and printing, and guide them on which variants are best for their particular wedding
We will visually reflect the user’s customization choices so previews accurately reflect their design
We will empower users to have a quick, seamless way to to rapidly experiment with choosing multiple variants to give them the full picture of what Zola has to offer
Research & Findings
I spoke to 29 brides-to-be over the course of 7 studies in 5 weeks.
Each week I set objectives for the study, read the findings out to our larger stakeholder group of about 10, updated designs based on feedback, and provided recommendations for next steps.
Where did I start?
The initial job to be done was to explore different ways to allow users to customize their cards, and determine where the knowledge gaps were among the variants that we would be offering.
What we learned: Always exposing variants empowers a seamless way to explore customization in context of which options are/are not available based on choices made.
With this core insight uncovered, the following rounds of testing gleaned 3 major insights.
Zola’s value props - free shipping, free guest addressing, free envelopes, and free matching wedding websites - often go unnoticed and are huge factors in deciding to purchase.
Our couples are concerned not only with the design of their invites, but also heavily weigh the total cost and “freebies” that they’re getting in order to decide to buy, as our couples are cost conscious.
Price transparency is non negotiable. Nothing was more frustrating for our couples than getting to the final review stage and being surprised to see that their total price was triple what they were expecting. We needed to be upfront with pricing to establish trust.
Using hover states to display additional contextual pieces of information are helpful in speeding up the decision making process. Particularly around paper, providing close up images and additional copy to describe what it “feels like” helped make these new paper types feel less ambiguous to those unfamiliar with them.
New Insight 💡
There was ample confusion around the paper types we would be offering, which gave Zola a opportunity to be a trusted advisor and differentiate ourselves from the competition.
We created descriptions like “feels like” and “ideal for” to help couples understand what the paper is like.
The result was an interactive paper comparison experience that laid out our paper offering in a simple, straightforward manner.
Don’t just take my word for it, hear it from some of the users I spoke to!
Solution
The redesign was launched on desktop, mobile web, and iOS
Desktop experience
Paper comparison desktop experience
Mobile web experience
iOS paper comparison experience
See the live experience here with many additional feature releases across all of our paper products on Zola right now.
Outcomes
Our first launch of exposing the paper types and removing them from the dropdown caused a 26% increase in sales in the 2 week period after the change.
The original size dropdown (left) and the new UI for showing size (right).
When we launched the new paper types in the old PDP UI, we saw a steady increase in AOV - about 15% on average - which gave us a baseline to compare the redesign to.
Launching the full redesign as an A/B test caused an increase in conversion into customization by 3%. AOV for these orders also increased about 9% higher.
Final Thoughts
This project was one of the first redesigns the Invitations team had launched in over a year and we saw so much value in rolling out the changes in smaller chunks, not only in our analytics but in how we approach product launches as a whole. Designing out a full vision for the product, armed with the why behind the design decisions, helped me make the case to our business stakeholders to make some potentially risky product decisions, like being so upfront with pricing.