Responses by Kasper Laigaard, designer and director, Kasper Laigaard Studio; and Joey Maese, senior front-end developer, ESPN.

Background: ESPN The Magazine’s annual Body Issue showcases the world’s greatest athletes demonstrating the power and vulnerabilities of the athletic form. Throughout the site creation process, we took a mobile-centric approach, aimed at a general audience of the vast number of sports and non-sports fans alike. While the magazine runs a limited set of photo assets, the site enables a deeper dive into each athlete, featuring photos, behind-the-scenes content and video interviews. The site was built to be future-focused and the home of the Body Issue for years to come.

Design core: The design consists of simple compositions and straight-forward motion—as to not distract from the content—while still hinting to the user which interactions are available on any given screen. The simplicity enables the site to maintain a clean appearance while offering fun interactions for the user to discover, without the need for tutorials or instruction, such as pinching on mobile devices to zoom within the galleries and instant filtering within the search function. The search was also planned to expose detailed information relating to each gallery, letting users search for broad terms—for example, “rookie,” “wide receiver” or “University of Kentucky.”

Process: The site’s 200-plus galleries provided a unique challenge of having to plan around different naming structures—one athlete name, two athletes’ names, long and short names, team names, etc.—while still maintaining a responsive design that scales from the smallest phones to the largest monitors. These galleries contain more than 1,200 images and videos, providing another challenge of smoothly loading content without bombarding users with preloaders.

Since the Body Issue is a major tent-pole project, there are a lot of hands involved with the final product: the photography team, QA, UX, design, stakeholders and countless others. Communication is always a challenge when handling a group of this size, but we were able to manage it with regular team meetings and consistent Slack conversations.

Through several rounds of user research, we were able to catch any red flags and quickly iterate on the design during the creation process. Bring able to pinpoint any user frustrations meant that we could encourage longer engagement times and increase the likelihood that users will navigate through more galleries.

Navigation: The homepage navigation is primarily image-centric and explorative, enabling the user to easily browse through all galleries and get a sense of the gallery’s visual aesthetic before navigating in. A menu icon at the top-right of the window enables for a text-centric gallery list to let the user quickly filter and find their interests. Both navigations are meant to be frictionless and enjoyable to use.

Technology: The site is built using vanilla JavaScript and SASS, while the content is stored in JSON format. The only included libraries are GSAP for animations and Hammer.js for touch interactions.

The site preloader detects how many images the user will initially see based on their viewport size and only loads those images. Once the content is shown, we try to predict what the user might view next and load in those images as well. The goal is to maintain an experience where users can swipe and scroll at their own pace, without running into layout adjustments caused by the various content-aspect ratios.