Our Challenge
World's largest jewellery brand had a challenge with one of their omni channel experiences – order online, pickup at store.
At Pandora, our entire team knows the importance of providing an exceptional online shopping experience for our customers. However, we faced a challenge with our Click & Collect experience (powered by SalesForce, SFCC). During peak holiday seasons, many items, or their sizes were sold out online, resulting in lost sales and missed opportunities for sales of local store inventories. We needed to find a solution to improve user acquisition and sales performance in all international markets.
Metrics and Goals
The main pain points were:
Users were not able to locate and use Click & Collect
The CTA was hard to notice, due to its size and position
C&C lived within a long, scrollable modal on the PDP
Sizes available for purchase on PDP only reflect eCom availability, which did not support our omnichannel vision (i.e. C&C was not utilized during peak seasons)
Users could not switch to C&C at checkout
Hence, some of the metrics were defined as:
Increase of AOV
Increase in CR
Increase of Usage
Improved NPS and Feedback
01
Role & Responsibilities
As the only UX/UI designer designated for this challenge at Pandora, my role was to uncover user needs and align them to business goals and outcomes relating to click & collect end-to-end journey. By following the double diamond methodology of divergent and convergent design thinking, I aimed to create a seamless user experience that effectively captured the brand's essence and elevated its digital presence.
02
Discovery
After collaborating closely with our dedicated UX researcher, conducting a comprehensive competitive analysis, and engaging with stakeholders and product specialists, I identified the primary hurdles impeding our user experience: inadequate visibility and a lack of clarity in usage. The critical issue lay in users' reluctance to explore sold-out items during peak seasons via the click & collect channel, notably during high-demand periods like Christmas and Mother’s Day. This challenge was particularly pertinent for items with multiple sizes, where certain variants were frequently sold out.
03
A/B Testing
Before diving into iterations, we hypothesized that the issue was due to a lack of visibility of C&C on our website. To test our theory, we conducted an A/B test to determine if an increase in visibility would drive more users to utilize the Click & Collect feature. This meant that we had to swap our secondary CTA ("Send as a Gift" option) with our tertiary CTA of C&C (which was a text link).
Through our testing, we learned that with the more prominent CTA, we have only achieved a slight increase of C&C usage (+4%), however the data from this research also shown a major decrease in "Send as a Gift" usage and sales (up to 87%), resulting in an overall negative conversion and revenue rates.
04
Iterations & Prototyping
One common approach adopted by competitors in optimizing their click & collect channels involved leveraging geo-location to help users in locating nearby stores carrying the desired product. However, implementing geo-location tracking in our case presented feasibility challenges from an engineering perspective. For instance, our diverse product range, often featuring items with multiple sizes, required users to select their size before exploring store availability or making a purchase. This intricate process made it challenging to efficiently fetch and manage data for all sizes upon entry to the Product Detail Page (PDP).
In response, I engaged in designing numerous variants to meet user needs. Some designs tackled scenarios involving multiple items, considering our average basket density of 2.1 items per user. Yet, during the development assessment, it became apparent that fetching store data for each item on entry to the PDP would significantly impact site performance. Additionally, accounting for store changes in the user experience proved to be a formidable challenge. As the sole UX designer, I navigated these complexities with a strategic blend of product design acumen and a deep understanding of user behavior, ultimately crafting a solution that balanced technical constraints and user satisfaction.
05
The Hypothesis
After conducting thorough tests and iterations, it became clear that none of the proposed solutions, based on competitor analysis and comparative studies, adequately addressed the core issue plaguing the click & collect experience.
Recognizing the need for a fundamental shift, I concluded that conveying the concept of two distinct stock availabilities to users early in the journey was crucial. Stakeholder discussions affirmed this notion, prompting me to revisit the ideation phase.
In response, I conceptualized the introduction of tab selection on the Product Detail Page (PDP) – "Purchase Online" and "Click & Collect Nearby." The UI and language were carefully crafted to alert users that the item they were about to add to their bag would default to shipping from a central warehouse. The subsequent option empowered users to explore nearby items seamlessly through the Click & Collect channel. This innovative approach not only addressed the core problem but also enhanced the overall user experience by providing clear and upfront choices.
06
Arriving at the Solution
The design process unfolded rapidly, requiring only a few iterations before we had a functional prototype ready for live user testing.
Displayed below are three iterations strategically chosen for testing and in-depth discussion. Despite constraints imposed by the existing design system and style guide, I introduced new elements to the library tailored specifically for this unique case.
Close collaboration with our copywriting teams ensured that Call-to-Action (CTA) labels remained concise, eliminating any potential translation issues. Notably, at the time of implementation, no competitor or other retailer had integrated a comparable feature onto their product pages. To validate our design decisions, we conducted an extensive review of 25 online retailers and scrutinized over 100 Product Detail Pages (PDPs) in a rapid sprint-style evaluation. This meticulous process solidified the innovation and distinctiveness of our approach within the competitive landscape.
07
Final Design
Displayed below are the final designs encapsulating the complete Product Detail Page (PDP) flow, meticulously crafted in a high-fidelity mock using Figma. The user journey initiates on the default first tab, labeled "Purchase Online," maintaining consistency with previous iterations while adhering to the established hierarchy. Directly beneath the Click & Collect tabs, we present the product sizes, followed by the primary Call-to-Action (CTA), "Add to Bag." Notably, certain sizes are intentionally greyed out, subtly encouraging users to switch to the Click & Collect tab for an updated selection.
Upon transitioning to the Click & Collect tab, users encounter a strategically placed store locator form field, an element absent from the default view. This deliberate design choice ensures a seamless transition in the user experience, prompting users to engage with the Click & Collect feature effortlessly, while staying engaged with the page without leaving or loading external elements (modals, store locator drawers, etc.).
08
User Testing
The user testing for the redesigned Click & Collect feature, featuring tabs on the Product Detail Page (PDP), yielded exceptional results on usertesting.com. All participants seamlessly navigated the enhanced interface, specifically designed to address stock availability challenges. When tasked with purchasing a product with a sold-out size, all participants demonstrated intuitive engagement with the feature, confirming the success of the redesign in providing a user-friendly and efficient solution.
This being the 3rd round of user tests with the same concept – all with successful results – reassured us that this concept would be proven successful in real-life application. Since we had already conducted a developer assessment around the concept, the confidence gained from these successful user tests propelled us to confidently proceed to production with this innovative Click & Collect feature.
09
Full User Journey
Displayed below is the comprehensive flow from Product Detail Page (PDP) to checkout, showcasing a seamless user journey. Users have the option to opt for Click & Collect directly from the cart. This is facilitated through a meticulously designed module, featuring tabs, sizes, and a store locator form field, elegantly presented in a pop-up modal within the cart interface. The integration of these elements ensures a cohesive and intuitive experience, prompting users to effortlessly engage with Click & Collect during their shopping journey. Notably, this functionality underwent rigorous testing as part of the user testing phase, confirming its effectiveness in enhancing the overall user experience.
.jpg)
11
Post-Launch Analysis
Following the launch of the redesigned Click & Collect feature in the US markets, our commitment to data-driven insights was evident through careful monitoring and analysis. The screenshots below offer a glimpse into usability studies conducted via Adobe Analytics, complemented by a comprehensive behavioral analysis using Content Square tools. The results surpassed expectations, with a standout performance during Mother's Day 2021. Notably, the new Click & Collect channel contributed to 24% of all purchases, a substantial increase compared to the previous 3% utilization with the old design. This surge in user engagement underscored the success of the revamped feature in delivering an enhanced user experience.
In the months post-launch, my collaboration with our analytics teams persisted, ensuring a continuous assessment of application health through quarterly and yearly analyses. This comprehensive approach, incorporating both Adobe Analytics and Content Square tools, provided a holistic understanding of user interactions, reaffirming the sustained success and positive impact of the redesigned Click & Collect feature within our digital ecosystem.
12
The Impact
Through the reimagined Click & Collect user journey, we have not only achieved remarkable enhancements in user satisfaction and overall shopping experience but also witnessed a substantial surge in revenue and Net Promoter Score (NPS) from this channel. The success of this innovative approach is a testament to our commitment to delivering excellence in user-centric design and fostering continuous improvement. The accomplishments of our dedicated team showcased below exemplify our unwavering dedication to providing the best possible service and elevating the standards of our digital retail experience.
8X
Increase in orders – from 3% to 24%
98%
Positive online customer feedback
2.4K
Stores globally that have adopted
20%
Lift in mobile conversions in 6mo
10
Live Design
Displayed below are screen recordings showcasing the live design in action, offering insights into both desktop and mobile views. These recordings provide a tangible demonstration of the seamless transition between the meticulously crafted design mocks discussed earlier and the successful implementation on the live site. The user journey unfolds effortlessly across various devices, highlighting the careful consideration given to responsive design and ensuring a consistent and intuitive experience for users. It's worth noting that this impactful design transformation has positively influenced millions of live users worldwide, solidifying its significance in enhancing the overall user experience on a global scale.
