Responses by CUSP.

Background: TOGETHXR is a new media and commerce company founded by four of the world’s greatest professional athletes: basketball player Sue Bird, snowboarder Chloe Kim, swimmer Simone Manuel and soccer player Alex Morgan. With a focus on rich storytelling rooted in lifestyle and youth culture, TOGETHXR is an unapologetic platform where representation and equality are the norms.

The launch of togethxr.com was a small part of an international publicity effort featuring coverage from more than 100 news organizations worldwide. Coverage was wide-ranging with features across sports, pop culture and mainstream media outlets. This site was the only way to sign up to join the “Inner Circle,” where members could receive early access to news and exclusive merchandise for sale.

Design core: The architecture of the main page is section-based with different styles and a large number of moving elements, so we divided the page into noticeable blocks, each of them drawing attention to the content presented. Visually, the site resembles a modern sports magazine with bright, memorable content.

Favorite details: This site is all about the details. One of the first features we planned during the design phase was the music. We had this idea to have an A track playing when you landed on the homepage with a slightly muted B track on the menu only. It’s one of the features on the site that surprises and delights the audience when and if they find it!

One of the other main features is the content page interactions when users hover on the cards. The background and the color of the border change dynamically based on settings in the CMS, changing the style of the whole page in an instant.

Challenges: Basically, every element on this site moves and changes based on user input. The hardest part during development was the need to combine and optimize all these animated and interactive elements. Since this is also an e-commerce site, all these elements had to work seamlessly with the Shopify Storefront API, which required some custom coding on the front end to enable the outcomes we wanted.

New lessons: We repeatedly ran up against the rendering limitations of modern browsers throughout this project, with some of our early builds requiring some serious hardware to run smoothly. Obviously, this isn’t viable for mobile or tablet, so we had to invent new ways to optimize animation and content based on the device. We also explored some new methods of applying shaders and working with PixiJS and Next.js.

Navigation structure: Our original idea for the navigation was to have a super grainy, infinite-scroll navigation that would be very large on mobile. However, launching an experimental navigation with such a large audience guarantees that you will receive user feedback. After listening to users’ first impressions, we scaled back the navigation to a more traditional, finite structure to make it easier and clearer for people to find the content they were looking for.

Special navigational features: A site like this benefits from lots of navigational options. Both the Content and Shop sections have multiple formats for easy viewing on any device. Our content section specifically was a big focus of the project, with two layout versions and many interactive elements. It’s a fun section to play with, and the video content itself is, of course, world-class.

Technology: We used the Next.js React framework on the front-end web app for custom scroll and custom sliders and the Prismic CMS for simple content management. We integrated these with the Shopify Storefront API for product management and global fulfillment as well.

Anything else? This is one of the most technically complicated sites we’ve ever worked on, and we want to thank the team at TOGETHXR for working with us shoulder to shoulder throughout the process!