Web design is more than just making a web page look nice. It has to be purposely thought through. You have to know who your visitor is and make the web page appeal to them.
It is a tool of communication. A website represents your brand and tells the visitor what you are all about and why should they stay.
In this case study we will demonstrate how simple clean design can dramatically change the way visitors interact with a website.
Brief background about the client
eyeSlices is a proudly South African born product founded by Entrepreneur Kerryne Krause-Neufeldt who spent over 10 years developing the range. eyeSlices are patented re-usable eye treatment pads designed to target puffiness, dark circles, tiredness, redness and wrinkles all in one.
Educate the visitor on the product before they leave. Gain their trust and get them to buy the product online.
So here’s the problem…
eyeSlices are such a unique innovative product you would have to instantly communicate exactly what they are and what they can do for you.
Their website needed a complete overhaul.
The website was not serving its purpose, have a look at the screenshot of the original landing page. Although the heading summarizes what eyeSlices do for your eyes, the font is slightly too narrow and large making it hard to read on a green background.
When a visitor is faced with even the slightest discomfort they move on. More so, there is no real explanation of what eyeSlices are in this example.
Here is how we improved it
- created a white background which made it look cleaner
- added an eye catching photograph of a model demonstrating the use of eyeSlices.
- changed the heading to “Never Switch Again” intriguing the visitor to want to read more.
By adding a paragraph that describes the product and its benefits the visitor understands what eyeSlices are.
The visitor is able to connect the dots by looking at the model first then read the description.
Now that the user knows what eyeSlices are, the visitor knows how to use them and what they can do for you; we are able to entice a purchase with a high contrast large green button.
The visitor learnt:
- what eyeSlices are
- how to use them
- what benefits do they have to the user
- where to buy them
All this happened in less than 7 seconds
Creating trust signals
A landing page is an opportunity to not only showcase your product and company but, to convert visitors into buyers. Every scroll should be carefully utilized to build trust in a visitor and guide them to the end of the funnel which is ultimately to buy the product.
What do I mean by building trust?
Just because you know what eyeSlices are and what they do does not automatically mean you want to buy them. What risk is it to me? Will they work for me? Is this product even real? What do other people say? What is it made of?
These are the questions that start running through a visitor’s mind after seeing the first section.
Your website’s job is to answer these questions or your visitor will leave.
Before I show you how we transformed the website have a look at this screenshot. This was the second section of the old website.
“10 Reasons why you will make eyeSlices a lifelong choice” a great title.
A great title in the wrong place.
This will make a great blog article but, the placement does not work on a landing page.
The first heading said “Relax Restore Revive tired, puffy, red, ageing eyes – Or your money back” followed by this section in the screenshot above.
At this point you still don’t know what eyeSlices are. 90% of visitors dropped off here because it seemed that the website never got to its point.
It sold great headlines but, never gave an answer. It did. Eventually. But, at that point it was too late, they lost the visitor.
How we built trust in the visitor
Going back to the original website’s first headline at the end it reads “… Or your money back”
Now this is interesting because its a guarantee.
What an easy way to build trust in a visitor. With a guarantee you eliminate risk. You say “My product is so good, I am so confident that it WILL work for you that I am prepared to give you your money back if it doesn’t”
The way it works is eyeSlices ask you to use their product everyday for 28 days and take selfies on day 1, 10 and 28 using their App. If you can’t see a difference they will give you your money back.
What is interesting to us is the App.
This allowed us to add more trust signals.
Everybody knows these logos, the Apple App store and Google Play Store.
We took advantage buy adding the App download buttons underneath the Buy button. Why?
These are brands any visitor already trusts and are familiar with. By using (note that these app download buttons are used under the terms and conditions of Apple and Google and permission for when you have an authorized/approved app) familiar logos a visitor instantly gains your trust.
Another great way of building trust is testimonials. People are interested to see what others think.
Add social proof to your design.
In this section we added
- testimonials for social proof
- a nice wide banner telling a visitor how they can fit eyeSlices into their routine
- a bit of vanity
And the winner goes to…
If your product or service won any industry awards you MUST showcase on your landing page. Nothing shows a visitor how seriously good you are than a list of awards to prove it.
Just after the awards we decided to put a face to the product.
In the picture to the bottom left is Kerryne Krause-Neudeldt the innovator, face and founder of eyeSlices.
By doing this tells the visitor that this is a real company. It gives the visitor an emotional connection by adding a human face to a product. This helps remove resist to buy.
What makes this a good landing page:
- explain what your product does
- remove risk
- use familiar brand logos
- give social proof
- what is in it for the user
- human element
- patents and testing
- showcase ingredients
- clean design
- good flow
- clear call-to-actions
As you can see at every point we had a button that tells the user what to do. It is part of your web page’s job to influence the visitor and tell them what to do next. In this case the goal was for the visitor to be converted into a buyer.
Keep doing A/B testing. Once you rolled out a new layout monitor how your visitors interact with it using tools like Google Analytics or Hotjar. Gain as much insights as you can. Use that data to make changes.
What did your visitors like? What didn’t they like? How long does it take to convert? Do they even convert?
Make adjustments and test again. There is no perfect way to design a landing page people’s interest change everyday. Always make sure you design with the goal and end user in mind.