Launched

September 2013

My role

Designer,
Content planning

Agency

Foolproof

Recognition

Best Agency Responsive Site
eConsultancy 2014

Foolproof was rebranding, and needed a new site that better described and demonstrated the values, skills and capabilities of the agency. The site needed to be something employees would be proud of, while also improving the quality of enquiries and job applications. The site also needed to be much more flexible, and easier to maintain on a daily basis.

Working with a bold brand

An external agency developed the new Foolproof brand using bold themes of negative space and geometric shapes. This meant the site also needed to be strong, ensuring that the feel of the brand was demonstrated through every style and interaction. I used a mix of sketches and clickable prototypes to explore concepts of how the brand could be translated into the website. These looked at how the F-mark could be used as a visual anchor throughout the site. Once the team had agreed on the concept, these were then developed further in wireframes and visuals.

Foolproof concept 1
Foolproof concept 2

Designing for content management

It was important that the site was much easier to manage and maintain, therefore we thought alot about the structure and taxonomy of the site. Using a features specification document, I defined what content we wanted to update regularly, and how we wanted to update it. This provided the developers wih guidance on how to structure and code the CMS.

Testing and iterating

We had several testing and iterating stages throughout the design process. This was to ensure that the content, style and structure of the site was going to meet the desired goals. This allowed us to develop the site in stages, and focus on some of the key content and feature areas.

Foolproof insight sketch

Initial sketches were turned into a prototype to demonstrate concepts.

Foolproof insight wireframe

Wirframes let me explore the content and layout in more detail

Foolproof insight visual

Final visuals helped define the overall look and feel.

One of the components we spent time iterating was the main navigation menu. It was important that we maintained the integrity of the brand, but also ensure easy navigation to, and between, deeper pages. The initial design made it difficult to represent second and third level pages, so we designed and tested multiple versions until we had a solution that worked.

Foolproof navigation

Collaboration with development

Next, we had a detailed design process where I produced responsive screens, and site and CMS features specifications for the external development agency. Due to the visual style of the site, we required 5 break points to ensure the layout and content flowed well. Rather than produce every screen, I worked collaboratively with the developers to make sure everything worked appropriately across all screens widths.

The results

The site has been very successful, and along with recognition from eConsultancy, it has gained 500% more business enquiries per month, and higher quality enquiries since it’s launch. The site is undergoing optimisation and improvements that I continue to provide advice on.

Foolproof Homepage

Foolproof Work - Desktop

Foolproof Work - Tablet and mobile

Foolproof Design

Visit the website