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.
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.
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.
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.
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.