Disciplines: UX Design + Branding

The Annoushka.com website was moving from Magento I platform to the SalesForce Commerce Cloud platform in 2019— it was an opportunity to update the website, apply a mobile first design and bring in best practises that had been neglected. It was a mixture of custom design and re-skinning out of the box widgets and templates. Below are a couple some of the highlights of this project.

Single Page Checkout

One of the biggest aims on for the new website was to simplify the checkout process. It was previously a 5 pages process, with the last step taking you off the Annoushka website to complete the payment process. Our check out had a high drop of rate after page 3 which needed critically addressing. The solution was a single page checkout with a review page—as we felt the purchase of our jewellery was a considered purchase. Although it was a single page checkout—we took a one-step at a time approach by only showing one action at a time to keep the process easy to understand and not have any incomplete sections.

Checkout Payment Options Enhancements

When we launched the new website, a tab approach was taken to differentiate credit card payments and other such as PayPal, Klarna, AliPay etc. Customers were missing this—especially a drop in PayPal transactions—one of the most common payment methods. The tab interface was dropped and all options are shown in one go. A radio button interface was used so show as many payment options without the customer having to scroll. This new update increased PayPal and Klarna usage.

Shopping Bag

In another payment options update, PayPal Express and Amazon Pay were added to our website. This update allowed a cosmetic update on the appearance of the shopping bag page, such as applying a background table to ground the information clearer. The mini-bag was dropped in favour to be mobile first on all platforms and we prototyped two designs—placing the express options at the top vs together in the right column. User feedback was in favour of the right column design.

Modular Design

When we launched the new website we had not front-end-developers so I create a design system made up of different content blocks to allow our web-manager to easily create the pages. Each row can be selected and used interchangeable per the content needs.

Product Page Exploration

Before our team settled on using a re-skinned template (budget constraints), I explored different solutions on how this page could looked. From image placements, interactions and drop down selection. This is something I would like to revisit—since the Annoushka boutiques have been shut during lock-down our product imagery is a key driving factor in converting a customer since they can no longer touch or try on the products before they make their purchase.