Client

Plan Blue is a rapidly expanding service for vendors and advertisers to buy and sell online video media in real time to maximise the goals of the campaign.

Date: March 2016 (On Going Project)

Type: Company Website

Client: Plan Blue

Role: Concept Development, Layout, Typography, UX,


Brief

Design the new company website for Plan Blue as it pushes to gain a new round of clients in 2016. The company ethos is creating clarity in a very complex and constantly evolving new industry. The design must convey a feeling of quiet and resolute confidence in the product, trustworthiness through professionalism and serenity for those plagued by the problems that the product fixes. 


Research

The previous site was very minimal, using only the key blue, white and grey for it's palette. The graphics and the company's logo are made up of soft circles in abstract patterns to represent the obtuse concepts of the product in a non complex and calming manner.

The previous site design 1/2

The previous site design 1/2

The previous site design 2/2

The previous site design 2/2


Sketching & Initial Wireframing

Using block colours and a generously spaced lay out, my initial design is minimal, letting the user focus on the core information. The logo's shapes drive my decisions for graphic and button designs and I've extended the colour palette to allow for more nuanced graphics that compliment and balance the composition without distracting users from the copy.

 

Prototyping

To aid the design from looking too static I have mocked up animations and transitions that will add a level of polish and professionalism to the design.

 

Animated Infographics

Feedback from the initial design required that the abstract arrangement of shapes on the pages should in fact form a more literal animated infographic. I wanted to keep using the rounded rectangles to stay on brand and to keep the design minimal and abstract so as to not overpower the more important content on the page. Here are a round of quick test animations to find a style on the subject of 'filtration'. 

 
 

Once the aesthetic and narrative style was found, I could build the animations quickly around the two concepts of security / filtration and forecasting / feedback-loop. Below are the final versions that were then converted to javascript for implementation into the site.


Final Wireframes

After a few rounds of feedback, including changes to the actual content, I produced the final wireframes below.


Development & Launch

This project is ongoing and currently being built out.