Aritzia
Product Detail Page Redesign
Company
Aritzia
Role
Digital Experience Designer
Team Composition
2 Digital Experience Designers, 3 Developers
Scope
User Research
Prototyping
Interaction Design
Visual Design
QA
Context
Why did this project have to happen? What were the goals or desired outcomes?
The Product Detail Page (a.k.a. the PDP) on Artizia.com had a solid foundation. It had the necessary information, inspirational photography, and a clear call-to-action. The core problem is that it looked and behaved dated. There was a desire to elevate the PDP experience to better align with expectations of our customers and to be better equipped to answer questions they may have at the moment they were deciding to buy while continuing to inspire.
Note: At the time, the conversion rate on Desktop was greater than on Mobile devices and the views between the two devices were similar, so the Desktop experience was prioritized.
Project Goals
Regardless of where they are on the PDP, ensure that the user has everything they need to complete the desired action (in this case, Add to Bag)
Leverage natural behaviours when possible.
Anticipate potential points of uncertainty and provide answers
How might we better align with contemporary eCommerce patterns while continuing to be a source of inspiration for both new and returning guests?
Research
Our Customer
After user interviews, Google Analytics data review, and a review of previously conducted internal research documents, we determined a few key characteristics and behaviours:
Viewing the PDP isn’t always an activity they could dedicate a lot of time to. Many viewed clothes during their lunch break or in the moments before a meeting began.
When viewing the Product Listing Page (PLP), our customers often opened a PDP that piqued their interest in another tab. Then, they would quickly view the tabs to determine whether they were worth further investigation. This decision point timeframe was rather short.
Our customer would start with a product they were interested in then jump to another that caught their eye, eventually returning to the product they started with. We internally coined the term of “circular shopping” which was a behaviour we observed in store.
Customer Goals
To effortlessly find the pieces they are looking for
To discover new pieces or be inspired by Aritzia’s styling
To ultimately wear well made clothes that represented the culture and values of a luxury brand, but without the luxury price tag
Points of Friction
They are unsure how a product will fit when buying online
They want to know what clothing the item is styled with in the model images
They want to quickly understand what the item is all about
Approach
Reorganization of Information
The previous PDP had relevant information scattered across the page without a logical flow to go from one to another. An example of this was that the Product Thumbnails were placed in a way that hinted at, but didn’t concretely define, a relationship with the Product Images. Also, as our customers are viewing the Product Images, they may begin to wonder what the model is also where. Unfortunately, the “Styled With” Carousel is at the bottom of the page.
The first change was to group similar components together into two meta-categories I had defined: Inspiration and Action. In the Inspiration grouping, the components that were visual or narrative-oriented were placed here like Product Images or the Flavour Copy. In the Action grouping, the key information and critical actions were grouped together like Product Name, Price, Help Resources, and Add to Bag CTA.
Alignment to Natural Behaviour
To expedite the understanding of the PDP, I streamlined the various axes of interaction.
Our customers were already scrolling up and down, but was also required to click the left and right arrows by the Product Image to view additional images.
To alleviate this, we stacked the images on top of one another and fixed the Actions panel. This allowed our customers to quickly scroll through the images and get an immediate sense of what the product had to offer without losing critical actions like choosing a size or adding to their bag.
Additionally, to view the products in the “Styled With” Carousel and review how it looks on the model, our customers had to scroll up and down. This was addressed by having that function available under every Product Image so that when the question arose (e.g. “what jacket is she wearing?”), the answer was available to them.
Process
Component Refinement
After wireframing out the key changes, I jumped to a high-fidelity prototype. This was done for a few reasons:
The core visual design and UI had minimal changes aside from some typographic updates
I found it more effective to communicate the intended design with real images, information, and assets. It allowed me to accommodate for edge cases like very long product description copy
Below are a few highlight images of additional functionalities.
Revealed “Styled With” Drawer
In anticipation of the question “What else is she wearing?”
Gives a new meaning to the “peekaboo blouse”
In-line User Generated Content
This was placed in the product image feed to further inspire our customers and to ground the clothing in a more relatable context. Often, our customers saw clothing on models and couldn’t imagine how it would fit on them. Presenting the clothes on “real people” helped with that point of friction.
who’s more inspirational than our own customers?
Updated Help Resource (Customer Care) Panel
The link used to bring our customers to the FAQ page. This presents those resources in a digestible way without navigating our customers away from the PDP.
Asking for help shouldn’t break your flow
Results
To allow for the data to settle, we waited until the updates were live for a month. After that time passed, reviewed Google Analytics and the built-in Demandware platform analytics. Three metrics increased that indicated that this design update was a success:
The add-to-cart conversion rate increased by 32% which indicated that the information was better presented and we had successfully alleviated some hesitation when purchasing the product
The page depth starting from a Product Detail Page increased by 25% which indicated that customers were inspired to continuing shopping
Time-on-page reduced by 23% which indicated that our customers were finding what they were looking for even quicker
Improving my process
The key addition to the process that I would include in the future would be to do more usability testing with low to mid fidelity prototypes. We launched the designs confident they would improve the experience, but if we had done usability testing, we could have been assured through data that things would have improved (or not and made further adjustments).