Theringer.com, founded by Bill Simmons and now part of Spotify, has become a go-to destination for culture, sports, and sharp commentary. But as the brand’s content expanded and its audience grew, the platform struggled to deliver the seamless functionality that users expected and failed to fully reflect The Ringer’s vibrant energy. The challenge was to create a digital experience as bold as their editorial voice, one that could scale with future ambitions and adapt to different visitor behaviors. From skimmers looking for quick hits on trending topics to obsessive fans eager to deep dive into long reads and complex theories, the platform had to welcome them all. This was about building a digital home — a space that truly reflected their personality, celebrated its mix of media, and kept the community coming back.

We kicked things off by digging into everything from desktop research and benchmarking to creator and stakeholder interviews, user journey mapping, technical and CMS requirements, and creative workshops, all in close collaboration with The Ringer team. And of course, we immersed ourselves in their world — reading, watching, and listening to their content to truly understand what they do (and having a great deal of fun while doing so!). From these insights, we shaped personas and design guidelines that defined core principles, key themes, and attributes to steer the user experience. This became the foundation for a new information architecture, wireframes, and a refreshed visual identity — one that reflected their values and personality more accurately: playful yet sharp, smart yet approachable.

The new platform is designed mobile-first, built around flexibility, discovery, and a celebration of The Ringer’s universe. Content comes to life in dynamic ways across pages, modules, and components, while seamlessly integrating ads and new opportunities for brand partnerships. 

At the center is the homepage: a vibrant kaleidoscope into The Ringer world, alive with curated entry points into stories, creators, and conversations. Topic hubs, collections, and bundles extend the experience, opening up new ways to explore by theme or interest. With podcasts and video as a cornerstone of The Ringer, we created dedicated multimedia landing pages, rich show hubs and detailed episode pages, making these formats just as enjoyable to explore as they are to consume. An evolving menu, powerful multimedia search, and deep mega menu tie it all together — making it effortless to move from a trending headline to the narrowest subcategory. 

To make content easier to explore and navigate, and to give editors the ability to package stories in a more intentional way, we developed a flexible system for creating collections and bundles. These features and modules invite audiences to dive deep into specific topics. From playlists that gather episodes around specific themes, to smaller modular bundles spotlighting timely topics or events, the collections connects articles, podcasts and videos, into cohesive and engaging experiences.

A key goal of the redesign was to create a seamless experience that unites videos, podcasts, and articles, while clearly signaling what type of content users are clicking into, something the previous design lacked. We addressed this through our new media cards, dedicated landing pages for video and podcast content, and curated hubs for shows and episodes, giving The Ringer space to present its content in its own voice and style. In collaboration with Spotify’s internal teams, we designed and developed a new sticky player that lets users watch or listen effortlessly while browsing the site.

To support a platform of this scale and complexity, we created a flexible design system designed to grow alongside The Ringer, its content, and its audience. Using design tokens and variables, we made even the most advanced components easy to manage, from toggling between light and dark modes to adapting breakpoints and spacing. The system also includes comprehensive guidelines and scalable foundations for typography, color, iconography, grids, and more.