teamusa_thumbnail

A Showcase of the Latest in Web Design and Technology: The Redesign of BPUSAthletes.com

Every four years, athletes from across the U.S. inspire us and capture our imaginations during the Olympic Games. More often than not, these are otherwise ordinary people who self-finance their preparation for an arduous journey that will change and enrich their lives. They represent our struggles as well as our triumphs, and they deserve a special place in our hearts.

BP has joined the family of U.S. Olympic Committee partners to sponsor Team USA, helping to fuel these athletes’ journey to the London 2012 Olympic and Paralympic Games, and beyond.

The Social@Ogilvy office in Washington, D.C., in partnership with BP, recently launched the BPUSAthletes.com website to showcase BP’s commitment to providing opportunities, support and critical funding to the U.S. Olympic Committee. We placed great care in crafting the site’s content in an engaging, emotionally-rich fashion, so audiences could develop a genuine emotional connection with the Olympic and Paralympic athlete ambassadors.

All athletes exercise a dual role every day: In training and in competition, they adopt a heroic dimension, but at heart they are ordinary men and women, just like the rest of us. The new site aims to be a true reflection of this duality, in how the athletes and their rich stories are presented. We follow these athletes, and can observe them at their most relaxed and approachable, while also experiencing their intense dedication in the practice of their sport. In that way, site visitors can truly learn what it takes to be an Olympic Team USA champion.

The site’s content is mostly comprised of video, but each athlete’s own track record, and even personal likes and dislikes, are also showcased via infographics, photos, and biographical articles. We set out to construct a site with incredible visual richness. We believe that the best way to connect emotionally with the athletes is by showing their lives, rather than narrating them at a distance—by expanding the canvas and letting audiences be immersed in the Olympians’ stories in a very immediate way.

This approach places visual design in service of the content, rather than relying on an overly-rich graphic interface to form the look and feel of the experience. We aimed to create an easy-to-use site with a humble, understated design, optimized for both traditional web and mobile web, using responsive design techniques.

One of the biggest challenges was to design and develop liquid layouts that adapt to different screen sizes and resolutions, while preserving the integrity of the underlying grid, and avoiding excessive and/or inopportune cropping. Lots of head-scratching and complicated math went into figuring out the aspect ratios and scales of each of the elements of the design.

As Social@Ogilvy’s Vice President of Interactive Technology Mike Mangi puts it: “The development team took advantage of new coding techniques to achieve the site’s responsive design layout. We used the latest HTML5, CSS3, and JavaScript programming standards. This allowed us to code the site to scale for desktop and mobile devices. Grab the corner of your browser and drag it in and out to see how this works. You’ll notice the design layout of pages like Meet the Athletes changes, based on the size of your browser window. Depending on your browser size, you may see the nine athletes stretched across the screen, or you may see them in a three-by-three grid.

We chose not to rely on standard web video player embed codes, because they would have barred us from achieving full site-width high-definition video. Instead, we used HTML5 to render a custom video player. We also included video buffering to speed up load time for the 140+ videos on site. For the developers out there, we used AJAX linking to create smooth transitions between pages, and as a mechanism to integrate dynamic social sharing buttons.

Mobile users will find that the website is tailored to their devices, as well. We created a device-specific content experience optimized for users on-the-go. To keep mobile users on the site, we embedded videos in a full-screen player, so users are not pushed out of their mobile browser into a native application.

These new web technologies helped us bring the site to life, and provide an immersive user experience that not only prompted the user to engage with the content, but also to establish a substantive connection with BP’s nine Team USA athlete ambassadors.”

-->