cpa.jpg

CP Active

CP Active

cp-home.jpg
 
 

CP Active is a not-for-profit organisation which creates environments that encourage active lifestyles. It develops programmes, 'disruptions' and interventions, in partnership with communities and local government.

My Role

I was commissioned by CP to define its brand across print and digital platforms, leading the project from start to finish. Initial consultations and stakeholder interviews began in September 2015 followed by the design of the new brand, the definition of the UX and UI and the management of the delivery of the developed site through to testing and launch. 

Understanding the Problem

The wider problem is nationwide—physical inactivity across our communities leading to obesity and ill health, costing the economy billions each year. The website would help CP in realising its vision of more people enjoying being active as part of their daily lives, acting as a key signpost for funding organisations who could support CP’s environmental programmes and campaigns.

The Goal

The goal for the website was to deliver an arresting, impactful brand experience in support of CP's other activities, informing, provoking and educating decision makers.

Creating the Brand

One facet of CP's approach to its campaigns is the creation of bright yellow and highly visible environmental ‘prompts’, giving individuals a nudge toward habitually integrating activity into their lives. These prompts can be roundabout signs, bus shelter 6-sheets, lamppost banners or lift and stair signs. I used the prompts as the inspiration for the brand.

 
 
 A series of mood boards to help tease out thoughts around the brand  amongst CP stakeholders.

A series of mood boards to help tease out thoughts around the brand  amongst CP stakeholders.

 
 

I initiated discussions with stakeholders by creating a series of mood boards, stimulating conversation around the approach and direction the brand should take.

I responded with a number of concepts aligned with the stakeholder feedback. The unanimous direction for the identity was a coupling of the circular shape of key prompts with a complimentary typeface, balancing the vibrancy of a strong yellow with a weighty black. This created a bold and strikingly simple visual identity that would grab attention in much the same way as the prompts.

 
 
 
 The new identity for CP Active.

The new identity for CP Active.

 
 
 

I gave CP Active the option to vary the colours used in the prompts with a supporting palette of cyan and magenta.

 
 
 
cpa-logos.png
 
 
 

Content First

With the identity established I then moved onto the strategy and approach for the website. I had an understanding of the key audiences CP was targeting from the branding work. I spent more time with them, building up my knowledge of their key users and those users’ goals for the site.

Having worked closely with the client previously, I knew they'd have firm ideas on exactly what content they wanted to create to best serve their users and that they'd be happy to provide content for key pages before we moved into the design phase.

The Execution

I used CP's draft content to inform the initial wireframes, designing content-first for the best possible UX. I created wireframes for mobile, tablet and desktop, covering four break points. And the previous experience I had of working with CP meant I felt confident going straight from sketches to fairly hi-fidelity InVision prototypes.

 
 
cpa-wires.png
 
 

Detailed Design

Following an initial round of feedback, I iterated the prototypes, adding colour, type style and imagery.

 
 
 
cpa-m.jpg
 
 
 

I continued with the same colour palette used in the identity for the user interface design,  adopting the same approach that delivered the stand-out for the environmental prompts by sitting the logo against heavily desaturated imagery. This gave stand-out for the brand and a strong visual contrast.

 
 
cpa-t.jpg
 
 

I then balanced the imagery with large areas of high-impact solid yellow, interjecting the secondary colour cyan in places for further contrast and interest, and used the circular form of the identity as a repeated motif.

 
 
cpa-desktop.jpg
 
 

Next, I worked closely with the site developer, defining and assisting in the implementation of bespoke CSS animations and transitions, then comprehensively tested the site before I passed it to CP. 

Go Live

The site launched in June 2016.