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