• Case study - Eley Hooper Website

Project Overview


What the client needed

Eley Hooper, a skin therapist in Perth, Western Australia, who had approached us for a website design and was seeking to revamp her the site so she could take her online presence to the next level.


We began how we always do, by first getting her to identify her major goals for the website. What is it you want the site to acheive. This is a pretty important question because it will guide every decision made in the future.


Her number one goal was to maximize the number of customer bookings and her secondary goal was to sell gift vouchers for those who may not be booking for themselves but were on the site to shop for someone they knew.


She wanted to be able to update content on the site herself so it was necessary to use a content management system. She needed a means for new and existing customers to be able to contact her, and the ability to add, remove products and services whenever she needed. She also wanted a space to be able to add new blog articles from time to time.


Image exploration


Getting the visual language right

The next step was to identify a number of competitors of Eley's in the local area and scope out their websites. We we're able to identify some of their strengths and weaknesses there, and also work out from Eley's feedback what she personally liked and didn't like visually speaking.


This was good because it gave us a direction as to what the visual tone of her own website might look like based on her own vision, tastes and how we saw her own business visually.


During our initial follow up meeting with Eley, we were able to identify there was a significant commonality between beauty-related sites, which was a strong emphasis on youthful faces up close, serving to connect the idea of healthy, young skin with the services she was able to provide to her customers. It represented what the clients sought and wanted.


We also were able to identify certain colour themes and layouts that Eley found harmonized with how she saw her own personal brand, and what could make a really good fit. By now, a strong picture was forming that we could use to then move on to the next phase of the web design project.

Wireframe layouts


Designing the layout of the content

From our discussions with Eley, we were able to work out a site map which outlined what pages were must-haves for her website and that allowed us to create a site map and menu. From there, we developed a number of wireframe sketches that helped illustrate where all the images, text and buttons would go for each of her website pages.


Knowing from the very beginning what her primary and secondary goals were (maximizing her customer bookings and selling gift vouchers) we were able to design the pages so that the natural flow of the site would work in keeping the user glued to the page. From top to bottom as the user scrolls down the page, it would feed their eyes with just the right volume of information in bite sized chunks at every step of the way. At at each crucial juncture, the pages would present buttons known as 'call to actions' which are designed to prompt/encourage the user to click through to make a booking or buy a gift voucher.


The over all design of the pages were made to be very intentionally simplistic yet striking to the user, so as to not confuse or distract them from both getting crucial information they needed as well as a clear pathway to click through on either of the two buttons presented through out the pages. Less distractions, a better funnel, and a strong focus on visual impact and a clear prompt what to do next (eg book or buy)


Simple. Effective. Clear.

Style guide


Establishing set fonts and colours

To ensure we had a consistent branded theme all through out the site, it was important to establish a specific set of colours that could be seen time and time again all though out the site, as well as a typographic web font for headings as well as body text.


Knowing what appealed to Eley, along with the theme of beauty and healthy skin, we explored a number of colour themes which were soft, light tones complimented with strong contrasting colours. We also picked a variety of web fonts that paired well together for headings and body text for Eley to select from.


You'll note the final design has a strong balance of pure white - which represents cleanliness, with a contrasting black which represents a premium, professional impression to go with it. The soft pastel colours that are included help really highlight that this really is about healthy skin and the lighter pastel tone to those colours help give the feeling that the therapy services Eley provided are soft and caring, thoughtful, that the customer is in good hands.


These style guides also detailed consistent branding rules such as what colour buttons should be and what colour links would be if either were used on any of the pages. By not having a random mix-mash of colours that changed frequently, the consistency helps establish a clean order to the entire design, which really helps pull the design together and compliment the chosen imagery and content layout we were looking for.

High fidelity mock ups


Creating website mockups before building

Now that we had worked out our wireframe layouts for Eley and established what colour and font theme would be used, it was time to start building a high fidelity mock up. A graphic image representation of what we intend the website to look in real life.


This enabled Eley to see what the site would look like when we go to build the real thing and also helped serve as a building guide for us, a blueprint if you will for how everything would actually come toghether and shape up.


This is a particularly important step of the process as it gives us a chance to show the client how all the colours, imagery and content room it occupies will look overall. It's essentially giving the client a very real sense of what it'll be. In this case, we had designed a thoughtful blend of images, white and black dividing sections that contrasted well against each other, with a subtle touch of the light pastel colours for buttons and other small elements.


It also meant when we go to build the actual site and use this as a guide, we'll know the exact measurements for various elements on the pages.


Building the website


Developing the website and providing training

So, we now have a high fidelity website mock up so we know exactly what the website should look like when we go to build it. We know what fonts and colours we need to include. From here we we're now able to program the actual website.


We used the high fidleity website mock up we did as a guide for spacings, layout, measurements, and constructed the website for Eley, linking the back end content management system with the front end of the website.


Having a content management system meant Eley would be able to update the images, text and headings herself without needing to go back to a website designer in Perth.


In addition to building the site, we also helped recommend a new website host for her and assisted her in redirecting her domain name so it pointed to the new site instead of the old one. We also recorded a good handful of screen capture videos showing her how to do all the many different things she would need to know how to do.


The end result is a stunning new website that she was really happy with that will lift her online presence up and most importantly impress her customers and improve her business.


You can visit the final end result and check out Eley's website here

Ready to start your next website project with us?

All our web designs come with our 100% guarantee

✓ We will always ensure you are happy with your design

✓ And if you’re not, we will make all reasonable efforts to work with you to get the design right

✓ We will always offer some after sales support after your website goes live to ensure everything is running smoothly

Want to get in contact? We'd love to hear from you