Headless architecture

Oura’s previous technology relied on WooCommerce and WordPress. The goal was to break from the existing monolithic architecture and focus on two core aspects — flexibility and speed.

What we did:

• Consulted Oura developers about picking the right framework for the task, namely next.js.
• Delivered a React storefront with a unified API layer for easy and flexible connection with other web services (including Shopify).
• We reused blog content from the old WordPress website without needing to migrate data to a new CMS (thanks to the headless approach). It saved a ton of time for the content team.
• Integrated advanced analytics including components with Segment as an underlying analytics platform.
• Advised with deployment configuration on the Vercel platform for development purposes.

Custom Checkout

We knew checkout was crucial to Oura’s international success and would be continuously improved. Using our own commerce-ui framework, we delivered a flexible system of checkout components. This empowered back-end developers to almost instantly compose interface layers for the new features they worked on.

Components library

To make it easy for Oura to understand and own their new website, we created a component-based library using Storybook. Each component has stories for understanding the context and considering all possible use cases. Every color, space, and font is used from the global configuration. We leveraged a design token approach for smooth communication between designers and developers.