Close (x)

+44 (0)20 7229 0202 | interact@skywire.co.uk

Digital Luxury, Fashion + Lifestyle Specialists

Elemental Herbology Magento Rebuild

Skywire took over Elemental Herbology’s Magento website for 2016 with a complete overhaul and redesign.

Their old website had an outdated design with many usability problems and out of date extensions. It was built using a Magento shop with Joomla managing the CMS pages.

After our code review, we found a Magento re-build would be the best way to proceed, rather than painting over the cracks. See below for the website’s ‘Before’ and ‘After’ shots with our applied UX suggestions:

Homepage

  • Added newsletter sign-up pop-up to increase database
  • Less content, more imagery, layout and font/button refresh
  • Added Best Sellers and additional content blocks
  • Moved subscribe to bottom right hand corner and added in incentive to drive registrations

Before_After_Blog_Elemental

Navigation

  • Changed ‘Shop Now’ to ‘Face’, ‘Body’ and ‘Gifts’ categories in navigation with Product Type/ Range
  • Added ‘By Skin Type’ as another way for customers to find products for their specific skin needs
  • Roll-over mega menu – easier to read font, lined up and better utilised space/ categorisation

Before_After_Blog_Elemental4_MagentoCategory Listings Page

  • Beforehand the layout for each product was busy and difficult to read
  • Changed text and positioning
  • Banner redesign for Free UK shipping and 10% off first order

Before_After_Blog_Elemental2_MagentoProduct Page

  • Moved Price to the top under product name
  • Changed ‘Add’ to ‘Add to Basket’ button and in black colour to stand out
  • Moved quantity and ‘Add to basket’ button up (CTA was below the fold before)
  • Introduced multiple product views
  • Added delivery and returns info

Before_After_Blog_Elemental_Magento

 

Shopping Cart Notification

  • Added preview drop down for items in my basket with images and details i.e. cost
  • Before had ‘Complementary Samples’ notification but no details on what this means

Before_After_Blog_Elemental5_Magento

Shopping Cart

  • Made updating shopping bag qty’s easier with +/-
  • Changed layout of ‘You may also be interested in…’ so products are side by side – took up too much space before getting to ‘Proceed to Checkout’ CTA button (below the fold before)
  •  ‘Proceed to Checkout’ needed to stand out more – now in black colour against other buttons, at the top and button

Before_After_Blog_Elemental6_Magento

Checkout

  • Quarantined the checkout with a re-skin (Before the layout, buttons etc. were not aligned)
  • Old checkout felt cluttered – too much content on the page – now it expands / hides section being completed
  • Added images for products in Checkout Review
  • Added Customer Service contact details
  • Once get to ‘Payment Method’ it shows cards accepted in SagePay (titled ‘Pay By Card’ instead)

Before_After_Blog_Elemental7

The new Elemental Herbology site went live last month with these fresh new design and usability fixes. The website content was all moved onto the latest version of Magento, with the new blog built using WordPress.

Contact us if you’d like us to do a UX review on your website for best practice design and functionality experience.

FacebookTwitterLinkedInPinterestReddit

Tags: , , , , , , , , ,