Designing to convert – our experience redesigning the SYNAQ website
Designing your site to look good and convert can be two different things.
We learned this when recently redesigning the SYNAQ site not so long ago to better match our corporate CI and branding. This was the site that we launched in the beginning of March 2010.
The site was designed to match our corporate identity and physical brochures that we hand to prospective customers. The thinking was that the prospect would then have a consistent image of the company both offline and online with the same imagery carrying through no matter how they contacted us.
We also wanted a clean look and feel that upfront gave a new visitor enough insight into who we are and what we do.
What we found in practice was a little different. The feedback that we got from most people is that they found it difficult to understand what it is that we do and where to click. Thereafter, once going deeper into the site the call to actions were even less prominent and the new site proved extremely poor at converting new visitor traffic into leads. So we embarked on a redesign of the site with the aim of streamlining our message and incorporating a stronger call to action to improve conversion rates.
The end results was a new site which we had designed using 99designs.com. For those of you who haven’t used 99designs.com I strongly recommend you try it. 99designs allows you to submit any kind of design project that you have, specify the amount you willing to pay to successful bidders and within a few hours have hundreds of designers begin submitting their designs for you to review, rate or disqualify. At the end, you choose a winning designer and pay them the prize money. The turnaround times and quality of work that you getting from 99designs.com is simply incredible.
Anyways, back to the site. In September 2010 we relaunched our new-new site. The design was based on giving new visitors two options based on our two core product offerings (Cloud Messaging and Pinpoint Suite). We opted to go with a strong payoff line to help bring focus to “what it is that we do” and two prominent choices on the landing page believing that this would simplify choice and better direct new visitors.
The end result was as follows:
Once clicking through our content pages were designed to bring a stronger call to action (big See Plans and Pricing button) as well as be more descriptive about the product that the visitor was viewing, moving away from the CI elements in our brochures.
The new site however proved to be only marginally more effective in converting new visitors then the previous.
When comparing the analytics of our second iteration to the first we found the following:
- increase of 49.84% in website traffic (due to increasing our Google Adwords and SEO efforts)
- 71% increase in new visits
- 19% increase in bounce rates
- 30% drop in the average time on our sites
In addition to this we were barely getting any lead conversions and / or people contacting us.
What had we done wrong?
To figure this out we ran a live usability test through UserTesting.com. For just $39 you’re able to have a video recording of a person running through your site trying to complete any number of tasks that you have assigned to them.
The video proved invaluable giving us tremendous insight into where our site was confusing our visitors and prompting them to leave before contacting us. We ran 3 separate tests, each giving us different feedback about what changes needed to be made.
You can view one of the actual test video results here:
From the video we learned a number of key insights
- What we thought were two simple options for a visitor to choose from completely confused the living daylights out of them. They had no idea which option to choose (the copy was not direct enough)
- There was not a strong enough call to action
- There was a disconnect between the content page and the sign-up page prompting people to want to leave the site
In addition to this, we decided to consult some experts and signed-up for an express review of our site with SiteTuners.com. The express review gives you 45 minutes of feedback from a usability and conversion expert giving you insight into the main problems preventing conversion with your site.
From this discussion we got the following:
- Not enough trust built into each landing page
- The two boxes on the landing page proved confusing
- There was not enough consistency between each page
- The banners on each content page were too large
- The conversion call-to-action buttons were not prominent enough
- Content pages were too text heavy with the critical information not being brought to the fore
Some of the problems were easy to fix and could be done immediately (which we did). Others were a bit more difficult. With the amount of mistakes that we had made in the new design we decided to rather start again and go for a third attempt (the recommended option is always to try tweak rather then redesign but we felt the site was so bad that a redesign was in order). So we embarked on the third iteration of our new site incorporating the feedback given to us by both our User Tests and the experts.
We used the previous winning 99designs.com designer to do the new site design but this time provided a lot more specific guidelines as to the designs that we wanted incorporating actual wire frames of how we wanted each page to be designed with specific placements of where we wanted the call to actions, icons, etc.
We used a great tool called Balsamiq Mockups. Balsamiq lets you quickly put a wireframe together. The benefit of this is that people can comment and tweak the design before the actual “heavy lifting” needs to be done. Ensuring that the brief given to the designer is precise.
Here’s an example of a Product Page wireframe that we put together.
What you can see with the above wireframe is:
- A stronger call to action
- Brought in the 3 main features / benefits that we want the visitor to know immediately above the fold
- Supported these 3 benefits with an icon
- Incorporated our trust elements above the fold “Brands who trust SYNAQ to”
- We also made sure that every product page followed this exact same layout ensuring consistency across the site
After a few iterations, the designer came back with a page that looked like this:
He missed some of the elements but we felt that the design was clean and effective and would be something that we could work with moving forward but needed a bit more testing. To do this we used another tool from two companies: attentionwizard.com and feng-gui.com to produce visual heatmaps of where the attention is being placed on each site. It’s a nifty tool to try and predict if your call to action has enough prominence on the site that you’ve designed.
The example below gives you an idea. From this you can see that the first thing “predicted” to be viewed would be the screenshot thumbnail that we have followed by the company logo and so forth.
The See Plans and Pricing button is not noticed at all.
Using the opacity view, this is what is believed the person sees in the first few seconds.
Again, the call to action is lost. With some minor tweaks (changing the text colour of the call to action, placing one or two elements in different locations and changing the background colour of the banner) we managed to get the following prediction:
From the picture above, you can see much more attention placed on the call to action button. Again, this is predicted. Actual user behavior could be different but we were happy that from a call-to-action perspective we seemed to be making progress. So we decided to build the site and again run a live user test using Usertesting.com
The next set of user tests proved much more effective. The navigation seemed simpler to each visitor, there were no major complaints and two of the user testers spoke very positively about the experience of the site! Which felt great to hear and see with our own eyes.
After some final tweaks and changes we’re proud to launch the latest iteration of our site. The proof of how effective the new design is, is yet to be seen. We’ll be watching closely and keep you updated on the results and our new findings. Watch this space!