CASE STUDY
De Beers Jewellers
London, 2022-Current

Visit Website ↗

The Challenge

Guide and support De Beers in their digital transformation and the optimisation of key business decisions within their global e-commerce experience, across multiple languages and markets. At the same time, preserving the elegance and prestige of their iconic position in the luxury jewellery industry.

My Role

As Senior/Lead Product Designer, I partnered closely with stakeholders to uncover key insights and transform them into design solutions across every stage of the e-commerce experience. Over the past two years, I have led the optimisation of the design system and core pages, including the homepage, top navigation, checkout flow, and product pages, as well as the design of the High Jewellery collection pages. I collaborated with and mentored two team members (a junior and a midweight product designer) at different stages, guiding their growth while driving design excellence.

Context

De Beers Jewellers are a world leader in fine and high jewellery, seamlessly blending e-commerce and UX excellence with luxurious creative that elevates every aspect of the brand and its products. As long-term global UX/UI design, creative and implementation partners, we at Poppins, ensure the De Beers online experience upholds the highest standards.

The user journey combines digital and retail, with many customers visiting the website and store while considering a purchase. As a challenger brand in the fine jewellery industry, brand storytelling and content is far more important than a technical e-commerce experience.

Top Navigation

We redesigned the header and top navigation to better reflect the complexity of the business and to guide users seamlessly across collections, product lines, marketing pages, and key functional areas of the website. Moving away from a traditional static top navigation, we introduced a side menu that functions almost like a sitemap, offering a more intuitive browsing experience.

Because imagery plays a fundamental role in helping users understand the key parts of the business, we integrated hover interactions that preview each section. This not only improves recall but also makes future navigation easier and more intuitive.

The new structure also brought essential functionality to the forefront, such as language and currency selectors (previously hidden), FAQs, and a store locator. Ensuring both online and in-store operations are better supported.

Design system & Style guide

The in-house design system had been poorly managed for years, so we made the decision to create a new, fully organised Figma file to consolidate and clean up all brand decisions made over time. The result is a robust component library with multiple instances and variants adaptable to different scenarios, as well as an automated style guide covering colours, typography, and icons (re-designed by Poppins).

This new structure has significantly improved collaboration across the organisation. Any employee can now access a centralised Figma file containing brand guidelines, the latest web design pages, and insights from recent creative workshops, making workflows more efficient and transparent.

Product detailed page (PDP)

We defined three distinct product categories (High Jewellery, Fine Jewellery, and Bridal), each with its own design direction while ensuring a cohesive customer experience and CRM journey. These category pages acted as primary entry points into the product catalogue, with the main objective of building awareness and retention to support the purchasing process.

To achieve this, we collaborated closely with De Beers’ in-house research team, conducted multiple user interviews, and held weekly stakeholder meetings to capture the true essence of the brand and shape how these pages should perform.

Product listing pages (PLP)

The product listing pages represented one of the most significant updates we guided the company through. Balancing multiple functionalities and the need for flexible components that could accommodate multilingual data required several iterations and close collaboration with the in-house development team. Together, we arrived at a solution that preserved the necessary flexibility while delivering a clean, elegant, and stylish design. This not only elevated the overall look and feel but also enhanced the user experience, with the ultimate goal of increasing conversion to the product detail pages—where purchase decisions are made.
Some of the functionalities included:

› Filters
› Product categories
› Slideshow product cards
› Sort by
› Flexible layout and grid system

Product detailed page (PDP)

The product page represents a balance of functionality and elegance. For De Beers, delivering a high-end, fashion-forward experience was essential, and maintaining this level of quality has been key to sustaining our long-term collaboration.

This page exemplifies the journey we undertook to elevate the site to De Beers’ standards, those of a global luxury brand and one of the world’s most renowned diamond companies. Designed with scrolling interactions and carefully crafted sections, the product page provides users with all the necessary product information, enhancing the visual experience while guiding them seamlessly through the purchase journey.

In the past six months, page retention has improved by 5%, with the scrollable gallery emerging as one of the most frequently used and valued components.

Functional E-commerce flows (Checkout / My account / Book an appointment)

A key challenge for this e-commerce platform was supporting multiple countries, languages, and currencies during account creation and checkout. To address this, we designed several variations within the design system, ensuring components remained flexible, intuitive, and elegant across different scenarios.

As part of the site-wide design overhaul, we crafted all input fields and buttons from scratch. The new design system now includes components with every variant and state, along with responsive examples for each, establishing a strong foundation at the atomic level.

Form design was further enhanced through close collaboration and user research. De Beers’ in-house team allocated budget for interviews and user testing to improve both the checkout and login processes. The resulting data was shared with us, allowing us to make informed design decisions that were later validated and approved by the stakeholder board.

“Since partnering with us in 2023 to re-imagine our High Jewellery destination online, Poppins have continued to accelerate our UX, blending strategy and creative thinking with a deep understanding of development & technology to achieve the art of the possible!”

Rachel Hollis – VP Digital & E-Com, De Beers Jewellers

Return to List of Works