.

Our Challenge 

Released last March, CO3 - ultranoir's website for Le Mouv' Radio's new scientific docufiction - is our case study of the day, focusing on the design challenges of the project which resulted in the form of a digital share-house flat.

The pitch for this project was seemingly simple:  “How to interest Le Mouv’ Radio's main target audience, aged 20-25, to science?”. Yet ultranoir had to face several challenges including  “How to make listening to a scientific webseries fun and so that newcomers will want to come back to the website again and again”. “How to incorporate modern web technologies to serve a smooth and responsive experience in order to provide a deeper immersion for the target audience”. Or even “How to combine many different types of content dealing with many different subjects”.

All in all, bringing the client as far as ultranoir’s ambition to produce an immersive and captivating experience, which helps bridge the gap between science and the main target audience's everyday life. 

Design problematics

In order to represent the three colorful universes of the three eclectic radio hosts of the show, ultranoir drew on the field of modern art, mixing the monochrome painting tradition with a fresh and fun pop art colorimetry. Each room of the apartment is a homogeneous assortment of miscellaneous pieces.

The ton-on-ton technique is used to blend the objects in while emphasizing their shapes. A few of them hide as many as 70 bullet points, which act as "play" buttons that the user can activate to discover the ten scientific themes, aiming at the general public in the theme of a treasure hunt. 

While not only creating material portraits of the three heroes, the objects were also selected according to the show's various themes. We therefore had to highlight their features in the clutter of the apartment. The pop colors enabled us to stimulate the different scenes and modernize CO3's scientific subject.

Beyond this avant-garde atmosphere, ultranoir wanted to capture the spirit of a true roommate's flat. From the flat ground-plan-inspired UX navigation, to the deliberate choice of a 3D modeling application, provided with a construction grid presented as a stage set, the whole project was designed and created as a real environment.

The "mise en scène" notion, the presence of cameras on the virtual set, the light and depth of field quality; each of these details became essential when trying to give life to these series.

As for the natural blur, the clean but nevertheless unconventional style of the modeling renders, it was a bold design commitment from our part. Indeed from the peculiar aesthetics it generated a real force of attraction which allows the user to focus on the content of the CO3 episodes.

Technical preparation 

Our integration and development was based on 3 structural pillars :

1) The immersive pillar, including an ongoing experience result with the relevance of hash routing for a better reactivity and smoothness. The use of CSS3 combined with GSAP helped create the genuine principal navigational module necessitating 4 development and graphic adjustments. At last, the user browsing history which enables the user to pick the show up where he left it off, just like a TV series. 

2) The social pillar counting the use of Soundcloud API to host the audio tracks, the customization of the HTML5 player and the systematic share of contents on social medias ( Facebook, Twitter, Google+) at each episode.

3) The responsive pillar taking into account the interface and navigation adaptation for a tablet experience along with a specific development for the mobile experience, which shares the same functionalities as the desktop version. This pillar also includes front-end optimization and client-side templating.

By working onto balancing a creative technical approach with the client’s requirements we achieved our ambitions and objectives.

The Results

Our Client Radio France was very satisfied with our service, and therefore so were we. An average of 5.3 pages are loaded per visit & visits represent 20% of lemouv.fr's total traffic during the broadcasting period. The website already won a few awards including FWA site of the day. As a conclusion, CO3 is the result of a trusting relationship between the client and ultranoir for a sleek and serene collaboration.

 


Links

hr
A quick look at out research for the look and feel of navigation
A quick look at out research for the look and feel of navigation





The final artistic direction
The final artistic direction



A content treasure hunt
A content treasure hunt

Ton on ton colors
Ton on ton colors

All rights reserved © 2000 - 2014 Favourite Website Awards (FWA) -  Terms & Conditions -  Privacy statement -  Cookie Policy -  Advertise -  About FWA -  Contact