Puccini: Luxury website for a luxury brand

A next step

While Puccini has become a well-established luxury brand, the webshop lagged a bit behind in recent years. To take the next step digitally as well, Total Design was asked to give the webshop a complete makeover. The webshop needed to have a more luxurious and modern visual appearance that would perfectly align with the beautiful brand, while also considering user experience and conversion optimization.

Researching, analyzing, and wireframing

At the start of the project we conducted an in-depth research into best practices for modern brand webshops. It was crucial that the webshop didn’t become a generic online store, but truly reflected the exclusivity and luxury of the Puccini brand. We also analyzed all the data from the current webshop and mapped out how the visitors behaved, navigated, and where there were areas for improvement.

Based on the research and analysis, we developed detailed personas and user journeys, which helped us identify the different needs and desires of Puccini’s customers. We then translated these insights into sitemaps and wireframes. In doing so, we considered principles of behavioral design to ensure that interactions and the customer journey felt seamless and intuitive.

Making it visually appealing

After the first phase, we set up a digital design system that shaped the foundation for the entire web design. Within this system, we established the existing brand identity and supplemented it with additional elements. Our challenge was to push the boundaries of this existing brand identity. By introducing an extra font and adding color shades based on the official brand colors, we were able to create a more luxurious and accessible look.

The design system also ensured consistency and efficiency in the design process. It includes standardized components, style guides, and design guidelines, all contributing to a seamless integration of the enhanced brand identity. With this approach, we were able to create functional and visually appealing UI designs that perfectly capture the essence of the brand.

From Design to Development

An important aspect of the project was the technical reconstruction of the webshop. Based on the created designs, and while maintaining the existing database and integration with WooCommerce, we completely rebuilt the frontend of the website. This ensured a smooth transition without data loss while making the webshop more secure, faster, and more future-proof.

Photography and sharpened brand compass

Puccini’s existing photography was built on the design principle of “less-is-more. Here the products were displayed entirely on a white background. In the sharpened brand compass, it became clear that we wanted the ‘craft’ to be more prominent. The new product photography had to conform to Puccini’s brand personality: honest, quality, cocky and harmony. Like the chocolates, we use what is necessary. We don’t use unnecessary elements to heighten our product. The photography did not have to be too far removed from the artisanal making process.

With this in mind, the work surface of Sabine van Weldam, Chief Chocolatier of Puccini, also became our work surface. The stainless-steel table Sabine uses in the production of her chocolates became an honest backdrop that fits Puccini’s quirkiness. The scratches in the stainless steel show the history of the making process, but also provide a quiet background that emphasizes the product. By emphasizing the blue reflection of the steel, we created – precisely because of the contrast with the warm light in the chocolates – a beautiful harmony between background and product.

Continuous optimization

To keep the website future-proof, we perform regular maintenance. In addition, we strive to continuously optimize the webshop. That is why we perform extensive monthly analyses to evaluate the webshop’s performance. We analyze user journeys, conversion rates, and other important statistics to determine where improvements can be made. This enables us to continuously optimize the webshop and ensure that Puccini’s customers always have the best experience.