WHOOP
- Retail+eCommerce
- Electronics+Hardware
WHOOP.com — Building a sophisticated digital experience for a one-of-a-kind product.
View live siteOVERVIEW
WHOOP is a performance wearable unlike anything else on the market. For starters, there is no screen. But more importantly, WHOOP doesn’t just track your sleep, strain, and recovery data, it translates it into actionable insights and coaches you toward your better fitness and lifestyle outcomes. A complex product with a wide range of intricate features called for clear storytelling – yet the site to-date 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.
In the fall of 2022, BASIC/DEPT® kicked off its partnership with WHOOP to reimagine the site in a way that clearly evidenced what WHOOP had to offer, while also strengthening brand perception, evolving brand and product storytelling, and easing the path to purchase.
APPROACH
In order to get brand storytelling back on track and clearer, the team dove head first into a comprehensive strategic analysis of the existing experience and landscape, mapped out a new vision for the site based on audience needs and journeys, and crafted an entirely new visual language for WHOOP.com. From extensive content mapping to feature concepting, and building a scalable, modular system through to development, we worked in lockstep with the WHOOP team to help craft the most impactful next iteration of the site.
A revitalized experience vision to help unlock brand equity through storytelling
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 allowed us to define a vision for the site that moved it from a traditional eCommerce experience to a resource for those looking to level up 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 amongst elite athletes, professionals even, 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 existing WHOOP audiences to more granularly capture nuanced mindsets, behaviors, touch points, and points of tension, 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 and 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 a number of 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 and what made it different – we needed to overhaul the existing information architecture. We built a new site map and underwent a comprehensive content strategy and mapping exercise for each page, identifying where net new pages were needed. 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 mechanisms like progressive disclosure were used to help audiences dig deeper without being overwhelmed with information.
a data-focused design system
With a compelling new visual identity in tow, we built a flexible design system that allowed us to marry the data-forward storytelling of WHOOP with the new look of WHOOP. The system created intrigue around 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.
Adapting to user feedback
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 10+ comprehensive, fully-functional prototypes that evidenced different features and flows on-site and allowed users to imagine 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 the elite athlete all the way through to the person 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 the thing
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 enterprise Contentful application using the latest features.
Delivering a customizable and flexible experience
In order to achieve the desired level of customization and flexibility, the team built 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.
OceanSpray
- Food+Beverage
OceanSpray
- Food+Beverage
