ANIMATING FOR MOBILE FIRST
ICON Interactive and Education First Pro Cycling

While working with Education First on the website for their pro cycling division, ICON Interactive produced a series of animations designed to introduce the sport of cycling to newcomers in a dynamic but device-friendly way.

To someone who is unfamiliar with cycling, an event like the Tour de France may appear to be a fast-paced free-for-all with every rider jockeying dangerously for a chance at first place. In reality, however, a bicycle race is a tightly coordinated group effort in which each rider plays a strategic role in helping guide his team’s leader to the finish line.

Introducing the team-based nature of professional cycling to newbies and non-cyclists alike is what Education First sought to do through their “How to Explain Cycling to your Friends” page. In keeping with the client’s mission of opening the world through education, ICON landed on the idea of creating a series of animations that would provide a dynamic but informative experience accessible across all devices.

CROSS COUNTRY, CROSS DEVICE

In total, ICON created twenty animations for the page. As viewers scroll, they follow a cyclist—the “leader”—and watch as his teammates guide him to victory through strong winds and across tough terrain. With each new sequence in the story, the viewer learns key racing concepts through text overlays that are reinforced through the animations.

From the beginning, the team knew they wanted to create a visually-driven narrative. During the team’s research, they found that many online animated experiences that functioned well on desktop were comparatively limited on mobile devices. To ensure the Education First experience wouldn’t suffer on smaller screens, the team decided mobile would be the best place to start their work.

It was the decision to design for mobile first that informed the overall visual style of the animations and established the groundwork from which the team would build. After drafting the story for the animations based on interviews with members of Education First’s own pro cycling department, the team then solidified the look and feel of the visuals. Keeping the amount of text to a minimum let the animations carry most of the story. The vibrant color palette and stylized characters gave the experience a lighthearted feel, keeping viewers engaged with the information.


As the race ends, the team is victorious—and the viewers have successfully learned that cycling is a true showcase of strategy and teamwork. To view the full animation, please visit the EF Pro Cycling website.