E-COMMERCE
Reimagining the UX/UI of a global ethical marketplace
While at Wolf & Badger, I worked on improving key e-commerce experiences, with a particular focus on PLP, PDP and checkout evolution. I led design from discovery through to delivery, combining customer research, competitor analysis and design exploration to inform practical, incremental improvements alongside future iterations.
Project brief analysis
Problem space analysis
Competitor analysis
Product feature ideation
Content ideation
Information architecture
User interface design
User experience design
PERSONAL CONTRIBUTIONS
THE PROBLEM
PDPs don’t do enough to reassure and convert users
Product Detail Pages carry a lot of responsibility (conversion, trust, differentiation), but key information isn’t always prioritised clearly. Social proof, delivery/returns reassurance, variant clarity and value messaging can be fragmented or easy to miss, increasing hesitation and drop-off. This limits PDP effectiveness as a primary lever for conversion and repeat behaviour.
Inconsistent information hierarchy across the journey
From PLPs through to checkout, users are often required to work harder than necessary to understand pricing, discounts, delivery costs and order totals. Critical actions and information aren’t always surfaced at the right time or place (especially on mobile), which can create friction and uncertainty during high-intent moments.
Wolf & Badger brand experience at scale
Wolf & Badger’s value proposition is premium, curated and design-led, but the digital experience doesn’t always feel consistently cohesive across surfaces. UI patterns, content presentation and visual polish can vary, making it harder to scale new features quickly without eroding perceived quality. This creates tension between speed of delivery and maintaining a premium brand experience.
As part of this work, the site header was redesigned with new iconography, simplifying and modernising the overall look and feel. An open search bar was introduced on mobile to encourage shoppers to actively search for products and brands.
The Product Listing Page was fully reimagined, introducing updated typography using DM Sans and Seasons Serif - digital-first typefaces chosen for their accessibility and readability. Image-based quick links were added to make product subcategories more prominent and easier to discover. The product card was completely revamped to include neutral grey image backgrounds, refined badge styling, clearer discount pricing highlighted in red, and an indication of the number of colour variants available. Product filtering remains consistently accessible via a sticky filter and sort button that stays visible at the bottom of the screen while scrolling.
Redesigned, streamlined promotional spots were introduced to guide users to relevant product edits, categories, and editorial features.
Overall, the new PLP feels fresh, modern, and more representative of Wolf & Badger’s premium brand positioning.
The Product Detail Page was fully redesigned from both a UI and UX perspective to elevate the premium feel, reduce shopper anxiety, and surface more relevant product recommendations. The refreshed top of the page introduces quick links that allow shoppers to easily explore related product subcategories.
On desktop, product imagery has been redesigned into a stacked vertical scroll layout, removing the need to navigate a carousel and allowing all images to be more immediately visible and prominent. Colour variants are now displayed as images rather than swatches, providing a clearer and more tangible view of available alternatives. The size selector has been redesigned as a grid of size tiles, removing the need to open a dropdown to check stock availability. Delivery times are now shown above the fold to encourage faster progression to checkout, while Buy Now, Pay Later options are clearly surfaced to help alleviate pricing concerns.
A new “Why we love it” section was introduced to clearly communicate key product USPs, such as the use of natural fibres, fit, and craftsmanship. The page also features quotes from fashion editors, giving shoppers insight into why each product was selected as an editor’s pick and adding an editorial perspective to the experience.
Shoppers are offered curated styling recommendations on the PDP from Wolf & Badger staff, adding a more personal, concierge-like touch to the experience.
The “Meet the brand” section on the PDP was fully redesigned to feature quotes and video content from founders and craftspeople, sharing the stories behind their businesses. Each brand’s ethical values are clearly highlighted, alongside messaging that showcases the values they share with Wolf & Badger. The section is further enriched with additional product recommendations, including quick links to new arrivals, bestsellers, top-rated products, and a curated product carousel.
A new “Why shop with us” section was introduced on the PDP to clearly communicate Wolf & Badger’s key brand USPs, including its approach to product curation, brand selection criteria, and ethical values.
The product reviews experience was redesigned to include fit and length scales, as well as filtering and sorting, alongside the introduction of AI-powered review summaries for faster scanning of key insights. “Verified buyer” badges were added to confirm the authenticity of reviews, and additional customer context, such as size purchased, height, and other relevant attributes, is now surfaced to help shoppers make more informed decisions.
Both the Mini Bag and Shopping Bag were redesigned to refresh the UI, surface the free shipping threshold, and introduce key messaging such as delivery urgency and “Why shop with us” USPs. A “You may also like” product recommendation module was also added to encourage upsell and cross-sell opportunities.
The checkout experience was updated to streamline the UI and improve core UX, including clearer visibility of saved addresses, the introduction of estimated delivery dates, and a reduction in the number of steps required to complete checkout.
The mobile checkout experience was redesigned to improve information hierarchy, ensure the “Continue to payment” button remains prominent, and make order details and total cost easier to review.