We were charged with the task of merging Bloomberg’s historical success with its vision for the future. We used fonts and colors reminiscent of the traditional terminal typeface, but with a modern accent to emphasize their innovative dominance within the media space.

In order to ramp up excitement for the sites second phase, a live countdown clock was inserted into the first. All of the content served as a teaser to the MTTS rally, yet introduced the user to the program and taught about the partnership between Mini and Feed America.

The 14 day cross-country journey was not only focused on MINI USA, but also on Feeding America’s progress and impact. We utilized Mapbox to build an interactive map showcasing the narrative from food bank to food bank, while the cars traveled through each city.

Using D3, a custom map-box-layer was created to give the map a defined aesthetic that matched the brand. We used Mapbox’s directions API to create an animated path line, so users knew where the cars were each day of the race. This also gave the map a feeling of being in real time.

A custom script was written to offset the map box, so that the map point’s positions matched the intended design.

A LIVE SOCIAL FEED

We aggregated and mixed the social feed with documentaries for a diverse, engaging social experience.

The social feed was meant to not only show the Mini’s journey, but the progress of meals donated through the Feeding America initiative. The social feed encouraged community participation and a larger voice throughout the site.

INTERACTIVE QUIZ

The game aspect was chosen to help reinforce the idea of running–against time and against better judgment. Under time pressure, readers are forced to answer the hard questions about Pablo Escobar and his involvement in the drug trade.

INTERACTIVE MAP

An interactive map and timeline accordion communicated the length of how far the drug trade had spread over continents and decades. In one quick glance, readers were able to visualize the stronghold of the Medellín Cartel.

Custom event tracking allows for detailed analytics on user actions from answers, to restarts, to how long a user spends on a screen. An extensive logic engine built to determine how ready a user is for the IoT was built for this project. This engine issues a total score with dynamic content, a star rating per question and serves up resources for each answer to be improved upon.

We optimized for accessibility, designing specialized breakpoints for desktop, tablet, and mobile. We also built in features for custom sharing that allows issuers not only to share the assessment, but also their results.

Video was seamlessly integrated throughout the site to create maximum engagement. As this was a video rich site, The Charles prioritized the site’s video optimization and loading time. Visual cues, such as an interactive pulsing play button, were implemented to give the user a visual cue to click on the video. Full bleed video provided a more immersive experience while viewing the video content.

To create a seamless narrative from start to finish, a topographic map with a golf course was designed as a progress bar down the side of the page. At each hole on the course, the user would receive a fact about the relationship between golf and the cloud. This storytelling device, was controlled by the users scroll so it follows the user down the page as they navigate through the story.