Home page & call to action redesign

04.Jun.2013 • Founders Blog2 Comments

I wanted to explain to you the process I have been through to redesign my website. Although I have always had two distinct objectives for my early stage website I wanted to make them clearer.

My two objectives are:

When I first built this website using the responsive theme  I thought it was the bees knees. It is funny how you can so easily change your perception.

ItIsWhatIt.Is ready to launch

Site that I designed and launched two weeks ago using responsive WordPress theme

 

I met with Lucas Haas and have been working with him to redesign my web site. Between the two of us we have been bouncing ideas of each other for the last week. I thought I would share with you the thought process and what decisions we have made.

The first design he sent me has the video much more prominently placed on the home page. It was definitely heading in a better direction.

lucas haas itiswhatitis home page mockup

Lucas’ first draft

The most important things I want people to do when they land on my home page is to watch the video and to give me their email address so I can let them know when I launch. I wanted to make the design less busy and a more simple call to action. I wanted people to know more obviously what I wanted them to do when they landed on the page.

second draft of ItIsWhatIt.Is

Second draft

I came back to him and said I like the simplification of the design but I wanted the header to look a bit simpler and clean like this site. I also didn’t like the red box call to action design. I wasn’t sure why but I said, have a play and see what you can come up with.

These are two designs he sent back.

It Is What It Is 3rd draft 1

Lucas 3rd draft 1

It Is what it is 3rd draft 2

Lucas 3rd draft 2

When Lucas sent me these two designs I made a few tweaks to the header and I think we are ready for him to start coding the theme design.

Chris' attempt to finish up the layout design - it is what it is

Chris’ attempt to finish up the layout design

 

Once I was happy with the lay out I started to think about the content on the page and how I could make the message clearer. I wanted to be laser focused on what I wanted people to do when they landed on the web page.

YouTube custom video thumbnail

I found out that you can get a custom thumbnail for YouTube video. When you go to change the thumbnail you may or may not have the custom thumbnail option. If you turn on monitization of your videos then you get the custom thumb nail option. I turned off all the advertising options so although it is an option I have enabled I am not using it. I do not want to make money through my ads.

youtube video thumbnail it is what it is

youtube video thumbnail

Although you can enable the custom thumbnail the quality of the picture is not that great. I have found a couple of ways of getting a better thumbnail.

I used the third option, the only downside is that when you click on it once the thumbnail disappears and then you have to click on it again to get the video to play. I will try and find another way somehow to make it a bit slicker. It also isn’t that easy to change the thumbnail which is a bit of a pain.

Font colour for email form

I then started think about the wording on the email collecting form, the colour of the font and the button colour/text.  I thought that red is the colour which draws the most attention so I would go with that to start off with. At some point in the future I will try some A/B testing to on the colours & buttons etc but for now I was happy with red.

I also tried red text and a white fade on the video thumbnail to match the form but I preferred the black fade with white text.

New colour fonts and call to action text

New colour fonts and call to action text

 

I went back to the black and white thumbnail and I changed “Give us your email and we will tell you when we launch”  to “Drop us your email and we’ll tell you when we launch” because I thought it sounded less bossy and demanding! I changed the title to “quicker, better” so I can put “and why you should trust us” on the thumbnail.

I am really trying get across my key messages and simplify things as much as possible.

 

new header & thumbnail text

new header & thumbnail text

 Simplify the sign up form

I initially thought I would gather feedback from the form but the more I think about it the more I want to keep it as simple as possible. Every extra bit of information you ask for will increase the number of people who can’t be bother to fill out the form. I thought once the people have signed up I can email them at some point to get there feedback so it is not essential to get it when they fill out the form.

 

Simple sign up form with one box

Simple sign up form with one box

 

The last bit is to work on the text under the video which is there in case someone isn’t able to watch the video. I want to give people more clarity on what I actually do and why they should be able to trust me.

It initially said:

What information you can trust online?

Don’t just compare biased information from companies and sales people, who want to sell you their product. Let us help you with totally unbiased advise.

 

Some of the ideas I had were

Headings
  • We are the comparison site which is on your side
  • We are the comparison website you can trust
  • The transparent comparison website
  • The comparison website who doesn’t just give you what we get paid to sell you.
  • The comparison website who puts you first

Body text

  • We believe in putting you first and giving you the most unbiased information
  • Unlike a normal business we will give you all the options not just the products we can get paid to sell you. You can trust us because we are unbiased and transparent about how and when we make money.
  • We care more about you making the best decision for you than we do about us making money. We this is the best for you and for us in the long run.
  • We put your interests before our own every time.
  • We put you first and we hope that you will support us
  • We put you first and are transparent about where we make money so you know that you can trust us.
What I have settled on for now is:

The comparison website you can trust

We believe transparency helps build trust and trust helps you make quicker, better purchase decisions. We aim to be the most trusted source of product information on the internet.

 

I should be launching the site this week at some point and would really value your feedback. Drop me a comment and let me know what you think.


2 Comments

  1. Lucas Haas says:

    Was a pleasure designing the itiswhatit.is website! I am glad to see working now! Regards!

Leave a reply



  • Get new blog posts in your email inbox

  • Let’s get social