CORPORATE WEBSITE FOR CAPLIN SYSTEMS

Overview

Redesign of Caplin.com started as a "just re-design the homepage" which turned into a restructure of the whole site.

Problem statement

Initially I was approached to solve the problem of an outdated design of the caplin.com home page. After digging deeper I eventually found the problem to be:

 "The Caplin site does not effectively communicate what Caplin do or what their value proposition is."

The Caplin homepage in 2013

Users and audience

IT managers and heads of FX trading at tier 2 banks.
The website itself does not generate business, it comes from meeting customers in person. The site then acts to support the initial meeting with detailed information and should help the users promote Caplin products in their own organisations to get the necessary budget to buy Caplin products.

Team and my role

One person maintaining the code part time. My role was defining project scope, content strategy, information architecture and the visual design.

Constraints

Lack of development resources and no owner of the project to define the overall strategy or to make key decisions.

Design process story

This project was assigned to me during my internship at Caplin, I was still learning, so when I was asked to "redesign the website, just start with the home page", that's what I set out to do. For the first design review, I produced two different directions for the home page layout. One was a more conservative reworking of the existing structure, the second was a wireframe that completely changed the delivery of information to the user. The two designs where presented on my behalf and the more innovative design was picked.

The second design moved away from the text heavy introduction and attempted to break up the content into digestible chunks.

Some content was removed at my recommendation then a second wire frame produced which was taken into production.

 

I thought this was an improvement but I knew there were problems with the content. At this stage, I did not know the content was something I could help with. Instead, I set out to prove the content was unsuitable by making a mobile first layout with the content I was given.

Given only the information on the screen, it is still very difficult to understand what Caplin do.



Old footer content and proposed new layout.

Old footer content and proposed new layout.

The content in the footer took up as much space as the rest of the home page and contains very little useful information. Working mobile first I reduced the content to a minimum and added a sitemap to the desktop view.


A false start

At this stage the project lacked definition, it had no clear goals or guiding principles. I decided to do something about it, first investigating the most common answer to the sites purpose, "It generates sales leads through the contact from".

Looking at the logs for the contact form it was clear that it was not doing what people expected.

From July 2012 to July 2014 a total of 233 messages where received from the contact form, or 9 per month.

Of the 9 messages a month:

  • 1-2 where for technical help
  • 3 where considered an 'OK' or 'Great Lead' according to the CRM database
  • the other 4-5 where recruitment agents, other sales people and miscellaneous.
But out of 233 messages over 2 years only one meaningful sales contact was made.

The calls to action throughout the site where inconsistently worded inline links that lacked any visual prominence. The form itself had 7 fields in total, 6 of which were mandatory. Considering this was supposed to be the main purpose of the site it wasn't exactly straight forward.

I first proposed putting a link to the contact page in the site footer so it appears on every page. I also made a prototype of a Contact Form that only required you to pick a person, by doing so a subject line was generated for you from a drop-down. For example, picking the Financial Officer would change the subject line to "I have a question about Caplin's :Tax/insurance/revenue". This responsive form allowed you to send a message by picking from a list instead of forcing the user to fill out 6 fields which ultimately just populated a CRM database.

Given that all new business came from elsewhere, the Contact Form optimization was not considered a good use of resources. New information came to light about the use of the website by the Sales Team. The Sales Team said that new contacts look at the website after they have met them in person and it prompts them to ask more focused questions about the business. However, the questions they asked indicate they did not understand Caplin's main products and services.

The site needed a clear communication of what the business does. The message is simple enough, Caplin make cutting edge trading software. To convey this message quickly and effectively, I shot some concept photos to put forward a new approach for the home page.


These shots formed the basis of the new conceptual layout.


A set of 5 images made into a responsive prototype of the home page.

The phone was positioned in the centre, to allow the frame to crop the images equally from both sides. This made it easy to art direct a set of 5 images. Unfortunately when you get down to tablet and phone sizes it didn't make sense to have an image of a phone on your phone, so I changed the shot to a desktop when the viewport is less than 480px wide.

I also produced an inner page concept design that focused on typography improvements. To do this I worked closely with some one who was tasked with writing a new page for the website. I helped them hone the content down and made a prototype of a desktop view.


The paper content audit

The problem with the content became more of a blocker at this stage. The home page designs acted as a PR campaign internally to inspire people to make the effort where it is really needed. I found trying to talk to anyone about the content was difficult, it was hard to get a shared understanding of the problems I could see. To solve this I printed out every page of the website and stuck it on a wall in a high foot traffic area. This way I could grab anyone for a few minutes and we could instantly talk about the content together and also generate interested in the project.

The content was then marked up with pen and post it notes based on the conversations. The edits where mostly cuts and merging of pages with little content into one section.

The edit formed the basis for a page architecture for new content to be written.

Home page information structure.

Product page information structure.


Development of new site

The navigation of the site underwent further visual refinement but functionally is the same.

Original design

Developed navigation

During the development of the site I consulted to resolve the edge cases and visual refinements.


Retrospective & lessons learned

The project needed a strategy, without it time was wasted going in circles and arguing over what should be worked on first. The home page was a bad place to start, the content should have been addressed before the visual design. People are impatient and want to see something very quickly, more time should have been taken to explain why this would not produce the best outcome. I did do some quick and dirty user testing but there were no recordings to show stakeholders, I think if i had made a highlight reel of people consistently misunderstanding the core message of the site it would have provoked the right conversations earlier in the project.

Getting people's input on anything other than the visual design was hard work, as soon as I realised I needed to make it as easy as possible to contribute the project gained momentum.