Once we finished the wire-framing of London Made, I knew that I wanted to write a Case Study for our strategy and design choices. This post will explain our process and hopefully inspire some changes with your design.

As with all websites, ours has many design decisions that are not obvious. Even the most simple websites like Google have had countless hours of design decisions; “Is this really needed? What can we remove?” If you are looking for a more involved case study, I recommend nGen work’s latest series of posts.

Version 1

We ran a series of A/B Tests and to confirm a lot of our suspicions.

Our Goals

1. Email us.
2. More time on page (which would hopefully affect the first.)
3. Download a vCard for later.
4. Click on our Twitter.

Discoveries

• The use of phrase ‘happy clients’ is particularly good in increasing conversions.
• Usage of the word “you” helps increase conversions.
• People downloading vCards did not increase conversions. It made people put contacting us off to later. (We had to assess this by our experience too obviously.)
• The shorter the Headline Pitch, the better.
• The less the content in general the better. Keep it strong, keep it short.
• People found it hard to find the Contact button.

We decided that we would not realign the design but start it from scratch because there was a lot of fundamentals that needed changing. There comes a time when it’s just best to start from a blank canvas than building on something that is too different from what you want.

Decisions

Version 2: Initial Mock

• As people could not find the Contact buttons, using the rule of thirds we added a Contact Us button into three of the four corner quadrants.
• To condense information we decided to make the main area displaying our contact details to have a similar experience to the real tangible world – we added a business card to the top left. Being a large chunk of black on a mostly white body gives enough contrast that people’s eyes are drawn to it
• We added a slideshow with captions and impacting headlines. The transitions are to help move the eye towards it and keep an awe factor.
• We wanted to keep all the text (or at least the headlines if needed) above the fold.
• Paired down every extraneous piece of information unless asked for.

Version 2 Final.