Oura
Building a Digital Foundation for International eCommerce
Shopify Development
Design System Development
Next.js
UX Consultancy
Shopify Development
Design System Development
Next.js
UX Consultancy
Oura monitors your body's pulse, movement, and temperature to give you a holistic picture of your health. With sales of over 150,000 rings and a team of more than 100 employees globally, Oura is now a leader in the smart ring market. Recently, Oura raised $28 million in series B funding for its health and sleep tracking ring.
We helped Oura build a new eCommerce storefront and incorporate reimagined branding by San Francisco-based agency Character.
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 an 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 on deployment configuration on the Vercel platform for development purposes.
Custom Checkout
We knew checkout was crucial to Oura’s international success and that it 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.
