Project Overview
ESPN The Body Issue
For 11 years, the Body Issue showcased world-class athletes and their unique physical traits. ESPN's design team created a visually stunning digital archive, winning an Awwward Site of the Day, but it needed usability improvements. I conducted user research, identified key issues, and presented findings to guide the team toward a more user-centric design approach for future projects.
Impact
Following my report, the team implemented many of my suggestions. I created visuals and video clips to help them empathize with users navigating the site's frustrating pain points.
Role
UX Researcher
Team
The longform feature stories team
Deliverables
Usability Audit
UX Research Report
Insights
How might we improve the experience of viewing The Body Issue Archive?
Despite featuring the same photos, the archive offered a very different experience from the yearly issues. The archive lacked vital elements from the yearly issues:
- Limited text (only name, sport, demographic info, and photo shoot details)
- No athlete quotes
- Photos only, with no way to access interviews or yearly issues
Experience Discrepancy
The archive lacks the depth of the yearly issues, making it less engaging.
Navigation Problems
Issues with search, filter, and sort made the site difficult to navigate.
Usability Issues
Confusing instructions, non-standard user flows, and unexpected UI placement did not align with users' expectations.
Research
Process
Unmoderated testing was conducted with 4 users recruited from various platforms to help the client establish a workflow for continuous user testing. Users tested the archive on both desktop and mobile.
To prevent bias from brand recognition, participants were initially told the study was for a "major sports news network." They were informed it was for ESPN only after being selected and receiving the instructions.
The tasks included:
- Content review
- Undirected and directed searches
- Navigating thumbnails
- Using the home icon
- Filtering for a specific athlete
- Scrolling through search results
Define and Ideate
Key Solutions
The archive had search functionality and navigation but, it had several issues.
Search Functionality Issues:
- Many users missed the instructions that you could type anywhere to search.
- Many users missed the tiny icon for searching that only appeared on the home page.
- The featured section presented unique issues since it was first and the navigation was different in this section.
- Searching by name didn’t always return expected results.
- Searching by name for someone in a group photo only returned the first person mentioned.
This instruction to type anywhere to search is not visible if your internet download speeds are fast since it was part of the loading screen.
Many users missed the small search icon on the homepage. The featured section acted differently and once a user clicked into it, it was difficult to get back to the outside navigation.
Inefficient Sorting and Filtering:
- The menu included sorting by athlete or by sport, but it wasn’t an efficient way of finding a specific athlete.
- The athlete filter lacked a way to jump to a particular letter.
- The sport filter had a subfilter for athletes, but the link was tiny and easy to miss because it looked like a non-interactive title with a decorative underline.
All of these pages don't have a search bar but do have small links that filter the list of all athletes. These links double as titles so most users didn't know they were links.
To find Michelle Waterson, an MMA fighter, users had to scroll 31 times.
To find Michelle Waterson, one user searched by sport but missed that the sport titles were links and because there are no athlete labels and all photos of the athlete are displayed in this view, This was also a slow method for searching.
Search Input Limitations:
- The search input box only existed on the home screen. Once users clicked into a photo series, they had to return to the home screen to search again.
The search input only existed on the home page. This confused users who expected it to be a persistent component in a consistent place.
Outcome
Final Design
An ESPN designer implemented several of my suggested changes, leading to the following improvements:
- The search input is now always visible.
- Athlete photos are stacked for easier browsing.
- Additional content includes full interviews, quotes, and behind-the-scenes videos.
- Athlete names are clearly visible when side-scrolling.
- Excessive space in the search view has been compressed for easier scanning.
The updated website implemented many of my suggestions.
