WHOOP
Building a sophisticated digital experience for a one-of-a-kind product
( Services )
- Commerce
- Customer Experience
- Tech & Data
WHOOP is a performance wearable unlike anything else on the market.
It doesn’t just track your sleep, strain, and recovery data; it translates this information into actionable insights and coaches you toward better fitness and lifestyle outcomes. A complex product with a wide range of intricate features called for straightforward storytelling – yet the site fell short of delivering a cohesive narrative on what WHOOP was, and more importantly, why what it offered mattered (and was different from the market).
Prospects didn’t “get” WHOOP, and as a result, couldn’t identify it as something they needed. It was time for a refresh.
BASIC/DEPT® launched its partnership with WHOOP to reimagine the site, showcasing what WHOOP had to offer while strengthening brand perception, evolving brand and product storytelling, and simplifying the path to purchase.
A revitalized experience vision to help unlock brand equity
We set out to define a new approach to brand and product storytelling, interrogating existing site and categorical pain points, brand USPs, and consumer benefits.
A deep understanding of existing headwinds and tailwinds helped us define a vision for the site that transitioned it from a traditional e-commerce experience to a resource for those seeking to elevate their performance and unlock what’s next—less about selling a product, and more about building brand momentum and excitement for what WHOOP enables.
From the elite to the individual
WHOOP originally built a following among elite athletes and professionals, but as it moved into its next chapter, it wanted to open the aperture of who was invited in — a pursuit reflected in the new site experience.
We evolved the existing WHOOP audience to more granularly capture nuanced mindsets, behaviors, touchpoints, and points of tension, ultimately landing on three core audience segments against which to build the experience. We audited where the site fell short in addressing these new segments and identified areas of opportunity to tailor the experience accordingly.
Solving pain points through key features & design language
We took our newly crafted audience segments and built comprehensive journey maps, pinpointing high-value moments for content and feature concepting. In tandem, the team explored several territories for the site’s new visual identity and aesthetic. This served as the basis for the overall design language and system.
A new approach to storytelling
Given the complexity of the product and the existing confusion around what WHOOP was, we needed to overhaul the existing information architecture. We created a new site map and conducted a comprehensive content strategy and mapping exercise for each page, identifying where new pages were required.
We paired the newly minted visual identity with our content outlines to bring each new page to life. Motion was a major component of the new experience as well, and we used mechanisms like progressive disclosure to help audiences dig deeper without being overwhelmed with information.
Data-focused design system
With a compelling new visual identity in tow, we developed a flexible design system that enabled us to integrate the data-forward storytelling of WHOOP with its new look. The system created intrigue around the product, connecting emotionally on subjective preferences like band-color, and functionally on utility preferences like feature sets.
We leveraged UX tactics like progressive disclosure to allow for moments of deeper discovery, all while reducing the amount of overwhelming data and information found on each page.
To ensure we moved ahead in a way that made sense to WHOOP audiences, we conducted a series of user tests to gain qualitative feedback and real user insights. We built over 10 comprehensive, fully functional prototypes that showcased different features and flows on-site, allowing users to envision the live experience. Learnings from testing allowed us to hone in on areas to both sharpen and build upon.
Providing a new perspective on content creation
Content creation was focused on ensuring our audiences were well represented, from elite athletes to individuals looking to optimize their physical performance. Branded content needed to balance the sophistication of the product and real athlete endorsement, with a real user’s everyday life. Lifestyle imagery that positioned WHOOP as a daily health coach helped us strike the right balance and reach this broadened audience.
Building with Next.js & Contentful
To fully realize the ambitious vision for the website, significant development work was required. The team implemented a Next.js front-end with Contentful CMS. To support WHOOP’s global reach, a custom localization architecture was built using Contentful locales and the new Next.js app router. This was a large-scale Contentful application utilizing the latest features.
Delivering a customizable and flexible experience
To achieve the desired level of customization and flexibility, the team developed a fully modular system. This allowed every piece of the site to be customizable and reusable, with all content managed through Contentful. This modular approach not only streamlined the development process but also empowered the WHOOP team to easily maintain and update the site going forward.
