Case Study: Ecommerce Web Design for Beauty Salon

We recently completed a large ecommerce project for Skinmaze; a traditional beauty salon and online retailer of beauty products, based in Westbourne Dorset.

This is a case study about the ecommerce web design and web development that we carried out for Skinmaze, and will be perfect if you want to better understand our process when we come to work on large ecommerce web design projects. So lets get started! Read on or check out the new website by clicking the button below.

View the website

Project Background & Brief

When Skinmaze came to us to work on their project, they had 8 existing websites, which were almost all ecommerce, excluding one simple brochure style site that represented the Skinmaze salon itself and the treatments they offer. Each site Skinmaze had running was dedicated to selling one of the beauty brands that they sell in their actual salon, located in Westbourne, Dorset. Each website had an established customer base, and was making a large number of sales online.

So why did Skinmaze hire us to redesign their ecommerce websites?

Put simply, they wanted to bring all of their old websites under one roof, to better represent the Skinmaze brand and allow them to manage everything from one place, rather than having multiple adminstration areas. They also recognised the importance that design could have in taking their business to the next level, as they were keen for us to create a website that was much more modern. Skinmaze also wanted access to more sales reporting statistics, as their current system was limited in this respect.

Here’s a look at two of the old ecommerce sites

old-skinmaze-sites As you can imagine, bringing 8 websites together was quite a challenge, but one we’re delighted with the final outcome of. So here’s how the project went…

Initial Meetings & Goal Setting

After several meetings with Skinmaze to ensure we fully understood their requirements, we began to plan how best to tackle the project. In terms of “functionality” there was much that Skinmaze required that we needed to create from scratch or achieve by heavily modify existing Woocommerce plugins. So our first step was to undertake a mini “Discovery” project, to play around with some ideas in code to ensure we would be able to get the main elements of the project functioning correctly. Search engine optimisation was also very important to Skinmaze as their current website’s were getting a lot of good organic rankings on Google, so our second step was to plan how best to handle the old websites that would no longer exist once the new Skinmaze website launched. With everyone settled on a plan that would see the old websites redirecting users to “brand specific” pages of the new Skinmaze Shop and Skinmaze’s PPC campaigns pointing users at these pages too, we began to explore possible layout ideas for the website.

Wireframes

The first stage of any project we work on always sees us creating wireframes before rushing straight into producing designs for the new website. Wireframing the key pages of the new Skinmaze website allowed us to work with Skinmaze to ensure they were absolutely satisfied with our plans for structuring the website and laying out all it’s information. Naturally this was a very collaborative process, and below you can see some of the final wireframes that were agreed upon.

Homepage Wireframe

The aim with the homepage was to clearly show a selection of products from the two main brand categories that Skinmaze sell. We proposed having a carousel style banner that would show that the salon was a “Guinot Crowned Salon” and that Skinmaze mainly stocked the “Guinot” and “Jane Iredale” brands. The idea for the main navigation would be to show the logos of the brands users can buy, and for there to be some elements further down the homepage that would show the personal service you get as a Skinmaze customer, with the ability to request free consultations and actually get treatments at the beauty salon. beauty-salon-wireframe-home

Brand Specific Shop Page

Effectively a category page — but the main difference being that the Skinmaze header and branding takes a back seat — our idea was to have the branding for that particular product line to come to the fore. In the example below you can see the “Guinot” logo occupies most of the header. beauty-salon-wireframe-brand

Product Page

Product pages needed to incorporate some key functionality, like the ability for users to benefit from discounts from purchasing greater numbers of the product, to have associated videos, to offer a tip from Leonilla (the face of Skinmaze) specific to that product and to be sharable on social networks. beauty-salon-wireframe-product

Your Bag Page

The Bag was kept as simple as possible, but with one key difference — the incorporation of “Free Gifts”. With the purchase of certain products and total spend amounts, different numbers of free gifts become available to the customer on checkout. beauty-salon-wireframe-bag

My Private Corner

The is effectively the “My Account” area of the website, where a customer can do the usual — manage their details, update card details etc. However we also incorporated some additional functionality, where the user can keep a record of their skin, by uploading photos over time. And also request a skin consultation with the founder Leonilla. beauty-salon-wireframe-mpc

Web Design

Once Skinmaze signed off on the wireframes, we moved on to create the actual look and feel of the website. Here’s a quick look at the concepts we put forward, which Skinmaze loved.

Homepage Design

It was important here to make the Skinmaze branding really prominent, but achieve a clean feeling that let the information and products take pride of place. The illustration of the girl in the banner had to be included in the end due to this being a massive wall feature in the actual salon (the subsequent banner slides do look a lot cleaner). It was also super-important for us to include telephone numbers for the salon and also online orders. _beauty-salon-design-home

Mobile Homepage Design

We also mocked up how the homepage would look on a mobile device, so we could talk Skinmaze through how the navigation would change and how everything would scale down on these devices. _beauty-salon-design-mobile-home

Brand Page Design

This was the page we were most worried about, what with there effectively being two headers — one for Skinmaze and then another for the brand itself. We and the client were very happy with the outcome though and especially the idea of colour coding each brand area, to make recognition easier for the Skinmaze customers. _beauty-salon-design-brand

Product Page Design

Product pages looked nice and clear, presenting the information in a no-frills way. We made sure that the price saving options for buying multiple product were designed in a clean way, and that Leonilla’s Tip stood out nicely. _beauty-salon-design-product

Ecommerce Web Development

Once Skinmaze signed-off the design concepts, it was on to the build. The first step for the ecommerce web development was to integrate all the design concepts and create all the various templates. Once that was done and the site was also responsive and working nicely on mobile and tablet devices, it was on to the more bespoke functionality Skinmaze required.

Over the Phone Order System & Dispatch

Because of the nature of the products Skinmaze sell, many of their customers choose to call up to get advice directly from the experts in their beauty salon. We needed to come up with a robust, speedy way for Skinmaze beauty salon staff to take customer orders over the phone. By default Woocommerce lets you manually add orders, but it wasn’t geared up to handle finding customer postcodes quickly, calculating discounts based on multi-product purchases, generating “picking lists” for Skinmaze staff to print to let them pick and pack the orders ready for delivery, and creating part orders. A lot of modification to Woocommerce’s default functionality took place here. Part orders meant we needed to introduce “colour coding” and “tooltips” in the back-end to allow Skinmaze staff to easily recognise part orders in amongst all the other orders that still needed picking and posting when products came back into stock.

Loyalty Points / Premium Clients

Rewarding customers for their loyalty was big on Skinmaze’s agenda. They have a database of very loyal clients, so we created the ability for customers to become “premium” after they spend a certain amount. Customers also collect points from each order which they can redeem against purchases.

Free Gifts / Samples

To encourage users to spend more we implemented a “Free Gifts / Samples” system, so if customers spend over £70 they are able to add a selection of free sample products / gifts to their order from the “View Bag” page.

Product Names from the Guinot brand in French and English

Guinot are a leading French beauty brand and many of their loyal customers know their products by their French names. We created a way for the products to appear with both their French and English names so recognition was easy for Skinmaze’s customers.

My Private Corner

As mentioned briefly earlier on in the case study, My Private Corner allows customers to upload images of themselves over time to track the progress of their skin, and to also request consultations with Skinmaze’s founder Leonilla.

Integrating the existing customer database

We were able to successfully export from the old system the entire client database and load this into the new system so all users were kept intact and able to access the new site.

Reporting

This was really important functionality for Skinmaze’s founders. With their old system they had limited ability to track sales. We were able to let them see:

  • Sales by product
  • Sales by brand (and the ability to compare sales between different brands)
  • Sales by product variations (e.g. shades of eye liner)
  • Registered user acquisition

Email marketing with MailChimp

Also as part of this project we revamped Skinmaze’s email marketing to be more in line with the look and feel of the website and to offer them more flexibility with the kind of content they send out. In the past Skinmaze had a series of different email templates for each brand that they sell. We created one single “product” template that would allow them to send out one email with featured products across multiple brands OR just one brand. The beauty with MailChimp and it’s content management capabilities, is that you can set up content to be hidden/ visible, to be repeated, to be removed, so the client can have total control. Here’s a look at the “product” email we created with all brands showing by default (of course Skinmaze have total control here), and some brands showing multiple products, with others showing none. beauty-salon-email-newsletter-design2 And here’s the “general” email we created for Skinmaze so they can email clients about latest news, beauty salon treatments etc. beauty-salon-email-newsletter-design1

To conclude

The Skinmaze Ecommerce Beauty Salon project was a BIG project for us to work on — the biggest to date. We learnt a lot along the way, and our team did a fabulous job. It doesn’t stop there either. We’re looking forward to working with Skinmaze moving forward, helping them get the most out of their website through conversion optimisation and ongoing maintenance. David Beck, Skinmaze’s owner is also delighted with the final result and the orders have really been ramping up. View the website

Authentic Style have a fantastic eye for design, they completely understand the intricacies of user experience, and they have mad front-end development skills. On top of it all, they are easy to work with and responsive to their clients. If you want a beautiful app or website that will delight your users, you can’t go wrong with Will and his team.

Subscribe to our newsletter

Get access to all our guides and resources

We will never treat your email address badly. We’ll love and cherish it and treat it right.

Would you like to be notified each time we post new digital media?