Coolspotters

Coolspotters is a web application that makes it easy to discover and buy the products being used by your favorite celebrities--in their real lives, and in movies and television. It’s a wiki-like, user-generated reflection of what’s hot and what’s not.

Branding

Central to the Coolspotters concept is a ability for users to ‘spot’ product, and associate them with people. Then, to tell other users about them. It’s a very sociable application, and this needed to be reflected in a simple, striking logotype. We initially developed the brand mark in a variety of colourways, using a modified typeface, before the final logo was honed by the Coolspotters internal team.

Coolspotters brand development
Final Coolspotters logo in positive and reversed

Final Coolspotters logo in positive and reversed.

Complex architecture

Coolspotters was new. What Coolspotters was trying to do, in the way it was going to do it, was also new. It was a blank canvas with a particularly complex problem to solve. Users can create associations between things (products), and people (celebrities). Navigation to either of these, and then help the user create a connection, was central to the success of this.

Interface design

Right from the offset, we were in a privileged position. Fanzter wanted us involved right from the very start of the project. Mark Boulton Design absolutely advocates this way of working; get us involved right at the very start. Not only can we help solve some of the strategic and architectural problems, but we can follow them through to the design and back again. There are no Chinese Whispers. No communication breakdowns.

Much of this early phase of work was spent working in a lo-fi way to established the various user flows, tasks, and subsequent effects on any interface. Iterations with Fanzter were frequent, sometimes several times a day, as we honed the interface.

Sketch of Product template

We worked very iteratively with Fanzter in cool old fashioned pen and paper over many rounds of design

Following a series of pen sketches, we further honed the interface by using grey-box wireframes. It’s at this stage, we start to establish a visual language, taking into account typography, layout and iconography.

Grey Box wireframe of Product template

Already, the interface is taking shape. Further rounds of iteration, with the brand applied.

Product template with branding and colourway applied

As with all software or product design projects, things change, almost daily. As the application is built, released, re-released following testing, some of the core problems may change that require a new solution, or a tweak to an existing one. Fanzter’s talented in-house team took our concepts and branding, and developed them further as they built out the live application.

Final Product template developed in-house based on Mark Boulton Design's concept development

Final Product template developed in-house based on Mark Boulton Design’s concept development

In short, Coolspotters was somewhat of a dream project for us at Mark Boulton Design. We were involved when a designer should be. The client treated us as problem-solvers, not decorators. As a result of this close and fruitful relationship, Coolspotters is an elegantly designed, truly innovative product.

Coolspotters was launched in May 2008, in partnership with Pepsi, by Fanzter Inc.