eCommerce Website Design for Natural Skincare Business

Cecilia Rathe and her daughter Claire Huntley approached me with a view to upgrading their Moonfruit eCommerce website and I was delighted to take on the project

mary elizabeth natural skincare finished website

Above is a screenshot of the finished website for Mary Elizabeth Bodycare, as you can see it has full eCommerce functionality including WorldPay payment gateway, products carousel and social media links.

In order to get a clear picture of what Cecilia and Claire wanted I reviewed their, now old, website. It was built with Moonfruit which is, as many of you will know, a flash based free website builder. It was great as a tool to get started with their business, some years earlier, but now they needed something more professional. Step forward OpenCart, a user-friendly open-source, eCommerce system built with PHP and MySQL.

Following a telephone conversation with Claire to discuss the project and a few emails, outlining everything in more detail, I drafted my proposal for a new website. Cecilia and Claire were very happy with everything including my lead times, costs and features offered. I was given approval to start the project in late summer and began working on design concepts for the new eCommerce website.

The Problem

In the beginning using Moonfruit seemed like a good idea, it was free, easy to use and got products published in no time at all. Everything was rosy, the business was growing, the products were gaining in popularity and Mary Elizabeth Natural Skincare was getting great reviews. Everything was rosy until Cecilia and Claire gradually began to see the limitations of this popular free eCommerce system.

Even after Moonfruit upgraded their software in 2013 to output page code in HTML5, their website didn’t work as well as other eCommerce systems on iOS based devices such as iPads, iPhones and iPods. In addition it was difficult to set meta data for individual products such as titles and description snippets. Editing pages and simple customizations always proved tricky and often impossible to achieve. The software simply wasn’t working for them and it was holding them back.

The Solution

opencart

Employ a professional website designer to build a new website! It would be easy to update, look great on every device, be user friendly and show up in search engines. The new site also needed a separate news or blog area to promote new and existing products. Social media integration was also a key requirement, especially Twitter. Cecilia and Claire had seen my work on other websites and were happy for me to do the same for them. I chose to use OpenCart for the ecommerce part of the website and front page. For the blog I opted for WordPress, the best blogging platform in the world, in my opinion anyway!

About Mary Elizabeth Natural Skincare

The business was formed in 2011 by Cecilia Rathe and Claire Huntley, a mother and daughter partnership. The official name of the company, Mary Elizabeth Ltd, is their middle names. They launched their first product range in 2012 with much fan fayer and rave reviews. Cecilia is a trained aromatherapist and member of the Federation of Holistic Therapists. Her expertise in this area and recovery from skin cancer helped her create the perfect range of hand creams and moisturiser’s. You can see the full range of natural skincare products, read more about Mary Elizabeth and see the finished website here.

Design Concepts

Below you can see three design options I created for Cecilia and Claire. They are purely concept visuals of the proposed new website and were sent as links to view in a web browser. I prefer to use the full version of a website to demonstrate each design as this is the way people view websites whilst at work. Tablet and mobile versions of the website will follow the same design formatting, colour way and fonts.

skincare ecommerce website design 1

Option 1 – eCommerce Website Design for Mary Elizabeth Ltd


skincare ecommerce website design 2

Option 2 – eCommerce Website Design for Mary Elizabeth Ltd


skincare ecommerce website design 2

Option 2 – eCommerce Website Design for Mary Elizabeth Ltd

The Design Phase

Having researched competitor websites to get a feel for the skin care market, reviewing notes and requested functionality from Cecilia and Claire, I was ready to start the designs. Soft tones and pastel shades were the preferred colour scheme for the new site. A large product promotion banner slider was also a requested feature including product pictures and links through to purchase pages.

Overall they wanted a professional and sophisticated looking website to reflect the quality and target audience of their products. Natural ingredients and sustainability is the ethos of the company and the website designs needed to show this. I aimed to strike a balance between sophistication and a return to nature, without looking too earthy.

As you can see above Cecilia and Claire settled with option 2. They were happy with all three designs and said they found it difficult to choose, but in the end they felt option 2 fitted in with what they had in mind from the outset. You may have noticed the final version is slightly different! I actually carried out 2 revisions of the design before it was signed off and ready to develop. This is all part of the service and I was happy to oblige.

The Development Phase

This is by far the largest part of most ecommerce projects. Sure, the design process can be quite time consuming but throw in a few extra features and the hours start ticking away. That’s precisely what happened. I developed the site with OpenCart and vQmod for third party modules, thank the Lord for vQmod says I! It makes developing with additional modules so much easier, almost as easy as good old WordPress plugins, almost.

With a fresh copy of OpanCart installed in a sub-directory, I installed my base theme and began building the new site. I usually build the home page first as this is the page I use to demonstrate the designs. Once I had entered the products and approximately half the pages it was time to apply the design skin using CSS. Its a rewarding process as you slowly start to see everything taking shape.

Now the home page was complete and a few sample pages, such as about us and reviews, it was time to present the first draft of Cecilia and Claire’s brand new website. Feedback was fabulous, needless to say they were over the moon and so was I, it makes all the hard work worth while. We arranged a meeting here at Rabbitdigital HQ soon after to discuss the changes and additional features. It was a success and we managed to cover quite a lot in just a couple of hours.

The new modules were installed, customised and tested. The additional product display functionality was setup. All pages were complete with current content, everything was ready to launch. After receiving approval from Cecilia and Claire I removed the old website and replaced it with the brand new shiny OpenCart eCommerce website you see today. Cecilia was happy and she wrote a wonderful testimonial which you can read here.

Testing and Completion

So there you have it, in a nutshell of course, but nevertheless a full outline of an eCommerce project I thoroughly enjoyed working on. After testing and ironing out a few digital creases, the brand new website was announced to the world. I hope you enjoyed reading this post and if you have any questions or would like any advice please don’t hesitate to get in touch, I’d love to hear from you!

Cheers, Warren 🙂

eCommerce Website Design for Natural Skincare Business was last modified: January 2nd, 2015 by Warren O'Donoghue
Please share this article on :