PRODUCT PAGE
UI OPTIMIZATION
After the re-launch of international Apple Premium Partner website onto a new platform, Shopify, each SKU was separated onto it’s own product page for MVP launch. For Store 1.0, the complete buy flow and product page require streamlining and optimization. The extension of the Shopify functionality was made to a staging environment, and will be delivered to 4-13 partner websites around the world. The solution also needs to be responsive on both desktop and mobile.
Dates: Dec 2022 - Sept 2023
My Role: Competitive Analysis - User Buy Flow - UI Design mockups - Responsive Web Design
Problem
Separating each SKU onto its own listing caused issues at the PLP and PDP pages. The customer has to figure out the differences between product listings by switching back and forth between the pages. We are unable to house all variants on one PDP because the configuration setup is limited to three options. It’s also unclear which combinations are available for purchase.
How might we optimize the discovery of all product variations?
How might we make it easier for the customer to learn about and select the right product?
Solution
Restructuring the SKU setup allowed for all product variants to be added onto one product page. This streamlines the flow from entry point onto the PDP. The customer no longer needs to go back and fourth between the PLP and PDP pages. Changes are added to both desktop and mobile as this is a responsive design.
Additional UI updates provided information so the customer can make better purchasing decisions.
Additional disabled states
Added informational icon
Implementation of modal designs
Tooltip messaging for out of stock items
Design Process
DEFINE
Define pain points & identify the problem
RESEARCH
Competitive analysis & best practices
IDEATE
Brainstorm ideal buy flow and functionality
DESIGN
Use existing style guide to create hi-fi mockups
Define
I started by identifying the pain points at the PLP and PDP level. Then, I conducted an informal competitive analysis on websites that sold similar products and collected best practices to address some of the most glaring issues on the PLP and PDP pages.
Current PLP Painpoints
Current PDP Painpoints
Competitive Analysis
I conducted an informal competitive analysis on websites that sold similar products and collected best practices to address some of the most glaring issues on the PLP and PDP pages.
User Buy Flow
With the current buy flow, customers get stuck in a loop between the PDP and PLP. I created the ideal buy flow from all entry points.
UI Design
Based on how many configuration options are needed at the PDP, we can separate all the variants into two groups based on the connectivity option. Shopify currently only has the ability to have 3 configuration options at the PDP level but we created a meta field with a label, value, and link that looks like a fourth option, but functions as a toggle between the two PDPs. Additional UI updates to the product page were also added to enhance the decision making process.
Additional disabled states
Added informational icon
Implementation of modal designs
Tooltip messaging for out of stock items
Merchandising updates
UI Element updates
Next Steps
Once launched there were some issues getting all product variants onto the PDP because disabled states were non-clickable and would lead to a dead end in some cases. To fix this the above strategy had to be expanded to all PDPs across the entire site using product stitching. With this new approach, it required a re-setup of every PDP on the site, and allowed for up to 7 configuration options and two color swatch options. The UI element updates remained the same.
The watch buy flow has been improved from MVP but there are still updates that need to be made to truly enhance the user experience. Due to limitations on the Shopify platform, progressive disclosure at the PDP level is the best option. Since code customizations and development work need to take place with the development team, that feature will launch with Store 2.0. This means iteration on the new buy flow and designs proposed here.
In addition, the company is setting up analytics that will provide insight into the new changes as well as future decisions.
Store 2.0: Progressive Disclosure
Analytics data on updated buy flow
A/B testing of new UI features