A long-standing and valued client of Si digital, Boadicea the Victorious, were recently faced with UX and technical challenges when launching their Samples and Travel Spray offering to the online market. There was a need for customisable variables and visual demonstrations, allowing customers to build their own product choice and enhance their experience. Using Magento, we worked hard to ensure both these products were successfully launched.

If you’re not familiar with the brand Boadicea the Victorious, they are a luxury perfume company selling niche and luxurious fragrances. They are stocked all over the world with a flagship presence in Harrods, London. The brand has a true British heritage and is inspired by the fierce and noble warrior Queen Boudica or Boadicea. She ruled the Iceni tribe of East Anglia alongside her husband King Prastutagus. The fragrances produced by Boadicea the Victorious are influenced by this period in time, and fragrance names such as Valiant, Glorious and Heroine with bottles emblazoned with decorative Celtic shields reflect this.

Helping customers find Samples

Over time, Boadicea the Victorious have released more than one hundred fragrances. The biggest UX challenge the brand faces online is the customer’s inability to be able to smell each fragrance and get a sense of the notes they exude. This means that descriptive copy and indulgent imagery are the most relevant touch points to demonstrate the essence of a fragrance. 

We’ve been working with Boadicea the Victorious to help overcome this challenge and recently we worked on a campaign to bring 1.5ml samples to market, allowing potential customers to sample a fragrance before they buy a 50ml or 100ml bottle. Samples have always been available on the website, however, they were unique to each product page and often difficult to discover. This particular campaign grouped samples in one place, presenting key ingredient information upfront allowing a quicker way to purchase numerous fragrances.

10ml Travel Spray proposition

In addition to the Samples and to help match the fast-paced lifestyle of their customers, Boadicea the Victorious have produced 10ml fragrances derived from their key headline 100ml bottles. Their purpose is to always be by your side when you need them on the go. These compact and portable bottles are contained within a luxury atomizer made in finishes such as rose gold, silver and gunmetal. We were given the task of creating the UX online to be able to offer these as a customisable collection to customers, where they could choose their atomizer in the finish they desire along with their three favourite fragrances.

Considering a new customer experience  

The proposition of Travel Sprays was really exciting for us and presented a number of UX and technical challenges. Customers had to be able to select their atomizer and three fragrances to build their complete collection in order to checkout. Therefore, we had to make considerations outside of the typical shopping pattern of adding multiple products one by one to your basket and then checking out. 

We approached the UX of this page a little differently and treated it more like building a product bundle before entering the checkout. The first step was to select the atomizer and its finish. The second was to view and review the different fragrances and select three of these. We also had to consider the use case of customers adding two (or more) of the same fragrance to their collection and how this interaction would work.

How we overcame technical and UX challenges

Using the concept of building a bundle of products, we were able to effectively allow the customer to create their collection. The initial landing page required some clear education around the concept of a Travel Spray collection and what that consisted of. The biggest challenge was keeping the customer informed whilst they made their choices, as a typical ‘add to basket’ would result in having to constantly check the cart to see what had been added. We overcame this with a persistent faux shopping cart, fixed to the bottom of their viewport. When adding their atomizer, this immediately communicated the customers’ selection, sub-total and provided further instruction about the next step – choosing their three fragrances. 

On the fragrance page itself and taking lead from the previous Samples page launch, we showed the ingredient information upfront. Selections of preferred fragrances could then be made and if the customer desired an additional quantity of a particular fragrance, this could be edited inline. 

Technically, this provided greater challenges within the Magento backend as we had to create a bundle item consisting of 4 options (Case colour, Fragrance 1, Fragrance 2 and Fragrance 3). The 3 fragrance options needed to be presented in a single catalog form and had to allow for the user to choose any combination of scents. Once all the items were selected by the user, we had to validate and build the items into a single, custom item.

Using micro-interactions and animation to demonstrate the concept

The concept of inserting a travel spray into an atomizer was exciting. The metallic finish of the atomizer is excellent and the 10ml bottle just slides in with ease, we wanted to replicate this and show the process of the 10ml being encased inside. Using CSS animation and waypoints, we were able to create the effect of the atomizer closing up on the 10ml fragrance as the customer scrolled through the page. This demonstrated the nature of the product proposition and was really fun to create.

For the launch of the Travel Spray campaign, we devised a 15-second animation for the screens in Harrods, which are present when entering the prestigious Salon de Parfums, where Boadicea the Victorious has a prominent presence. 

Campaign success

So far, the new two new campaigns from Boadicea the Victorious have helped generate additional revenue for the brand – it’s a bit too early in the process to provide any metrics, however our client is happy with the two new campaigns and they have been well received by their customers.