Transforming The Course
In early 2016, The Charles collaborated with Wall Street Journal Custom Studios and The Microsoft Cloud to rewrite the way standard native advertisements work, by turning the Transforming The Course site into a rich storytelling experience about the relationship between the cloud and golf.
- Digital Strategy
- Creative Direction
- Web Design and Development
Capturing The Narrative
In order to maximize engagement at all parts of the narrative, we integrated thoughtful animations and fluid transitions to create a seamless reading experience. Transforming The Course was strategically designed to bridge the gap between golf and technology, as there is an increasingly lowered interest in golf in the millennial generation.
"Through an animating topographic map, we navigated the readers through the story."
Making The Site Come To Life
To reinforce The Microsoft Cloud branding throughout the site, we implemented an animated custom cloud texture in the background, to give the content the illusions that is is floating in the cloud. Through the integration of optimized video and pop up side bar statistics, to compliment the long-form article, we created diversity in the way the content was consumed.
To connect the narrative to the subject, we implemented a topographic map of a golf course as the progress bar for the website. Sidebar statistics were added as well to provide snackable pieces of the story for the readers.
Video was seamlessly integrated through out 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 was 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 give the site movement, and a nod to the topic, the cloud, we added subtle moving cloud textures to the background of the article. We used looping CSS animations to create the custom cloud texture in the background of the site.