Disciplines: UX Design + Branding
The Annoushka.com website was moving from the 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 practices 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 of some of the highlights of this project.
Single Page Checkout
One of the biggest aims of the new website was to simplify the checkout process. It was a 5-page process, with the last step taken off the Annoushka website to complete the payment process. Our checkout had a high drop-off rate after page 3 which needed critical 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 others such as PayPal, Klarna, AliPay etc. Customers were missing this—especially seeing a drop off in PayPal transactions. The tab interface was dropped and all options are shown in one go. A radio button interface was used to condense the input tabs so that many payment options can show 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 of being 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 no front-end developers so I created 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 interchangeably per the content needs.
Product Page Exploration
Before our team settled on using a re-skinned template (budget constraints), I explored different solutions for how this page could look. From image placements, interactions and drop-down selection. This is something I would like to revisit—since the Annoushka boutiques have been shut during lockdown 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.
© MMXXIV PARCA
