ESPN Body Issue
Impressive bodies of work
Every body has a story
We branded the 2017 edition of ESPN’s Body Issue, and designed its mobile-first online version.
In the Body Issue, published annually since 2008, ESPN matches up-and-coming athletes with photographers, producing some of the finest sports photography around. This year’s theme: Every body has a story.
For the 2017 edition, ESPN came to Ueno for the website design (UX/UI, prototyping, interaction, animation), as well as the overall branding for print and digital.
The project is notable for being decidedly mobile-first. For the previous edition, about 70% of users visited on mobile, so we did a bunch of stuff to make the mobile experience really stand out.
We began by doing the overall branding of the project, to be applied throughout, both in print and digital. After that had been approved, we moved on to the website, applying elements of the branding to the user interface.
A brand within the brand
Logomark, typefaces and colors
The diagonal lines in the Body Issue’s logomark are a reference to the tension and dynamism of athletes bodies in motion. It’s also a tip of the hat to ESPN’s own logo.
Variations on a theme
A logo for all contexts
The logotype is designed for use in both print and digital, with ten variations depending on context.
From print to digital
The interactive gallery
One of the challenges was to use technology to elevate the experience of print, improve on it, and make it more intriguing wherever possible.
Eye on the prize
Making the photography stand out
The Body Issue is full of spectacular athlete photos, and the mobile-first design allows for a lot of playful interactions with them. One of the challenges was to keep the branding present, but subtle enough to let the photography really stand out.
Show your moves
Tilt and zoom
An intuitive and non-invasive UI allows the photography to take center stage.
Larger than life
Making the photo look bigger than the screen
The photos are big, your phone screen is small. Users get the whole picture by tilting and moving their phones.
Touch and go
From mobile to desktop
The Body Issue is designed for touch, but also works on traditional screens. The desktop version comes with an indicator prompting users to move their mouse and bring the images to life.
The main idea behind the design was to give the Body Issue a solid identity and a really good user interface, but not something that would overwhelm the athlete photos. The interactions really played a crucial role in this.
A cross-media experience
Body Issue branding was designed for both digital and print.
We challenged ourselves to make an experience that would solve the limitation of displaying big imagery on small screens. This pushed away the obvious solutions and forced us to experiment more. Taking this challenge definitely lead us to a more unique end product.
The Ueno team seamlessly integrated into our existing ESPN team. With clear communication and thoughtful collaboration, they solved any problems we threw their way without ever breaking a sweat. The final presentation was above and beyond what we expected – providing our fans with an immersive, mobile-first visual experience.
The bottom line
How did it go?
This project benefited from a really close relationship with the team from ESPN. With daily check-ins, design reviews every three days, and quick sign-offs on changes and updates, this was a real team effort.