Contact TIBdesign
About TIBdesign

Working as a small team of associates TIBdesign are specialists in producing UX/UI and print design for varied clients and briefs. Over the past 25 years we’ve worked with clients such as TechRadar, Adobe, Ford, Sony, Microsoft, Apple, T3, and Google. Here is some more detail about our work.


The making of Cannondale Synapse

Designed as a proof of concept, this special multimedia immersive feature tracks the development of Cannondale’s ground-breaking bike design.

 

  • 1_CannondaleSynapse
  • 2_CannondaleSynapse
  • 3_CannondaleSynapse
  • 4_CannondaleSynapse
  • 5_CannondaleSynapse

One of the constraints of working on websites that need to make revenue is that they are often plastered with advertisements.

I wanted to dispense with this clutter and explore alternative solutions – specifically a way of presenting long-form journalism through art-directed web design. I wanted the feature to have full browser video on every pane.

The vision

The solution was to build a web app that could be served as a web article. I envisaged it being a full-screen presentation with video elements that looped in the background behind editorial content. I also wanted it to be responsive.

More importantly it needed to be engaging and have a commanding narrative. As I was working on a redesign of BikeRadar one of the UK’s premier cycling websites at the time, I wondered if we could get access to a bicycle manufacturer and to synchronise building this immersive feature while rebuilding the main site with a view have it complete for launch.

We were lucky enough to have a great relationship with Cannondale and they offered us some time with their designers, engineers and test riders in Freiburg, German where we talked about the history and development of their bike design. I then sat down with the editorial team on BikeRadar, commissioned the in-house broadcast team and carefully storyboarded the shots.

The science bit

Built from scratch, the project had to re-usable and needed to work on any website. The developer settled for using a JavaScript setup with RequireJS & HandlebarsJS. Doing this, we could bundle the templates and source code and serve it via CDN. Tasks were automated by GruntJS. Styles were built in SASS and Compass, and HMTL 5 video was used to produce moving backgrounds.

Unique elements used in this project were:
  • HMTL 5 Video
  • Browser Fullscreen API
  • Customised HMTL 5 Video player
  • Animated slide panels
  • Responsive on mobiles, tablets and desktop

The result

The beautiful Cannondale feature was well received by the bike industry and received plaudits from several design blogs. Analytics showed that most users enjoyed the whole article, spending up to 30 minutes reading it. The dwell time on each pane was quite high, in part due to the videos being loops and fun to watch.

This is probably one of my favourite projects of all time.

View project