We build storefronts for headless ecommerce.

Techstack

Approach

We believe that building the best online shopping experience requires a combination of meticulous attention to design detail and cutting-edge technology. For 5+ years we’ve worked with top-level designers and brands to move their concepts from design stage to production-ready code.

Working with Jonathan Arundel Head of Creative.

Working with Rolex Headquarters in Geneva under very restrictive design/dev guidelines.

NY-based Shopify Plus agency, working together on DTC brands.

Named 25 of UK’s top 30 design studios, over 2 years of collaboration / 15+ web projects


Technology

Our focus is on building the storefront part of the e-commerce ecosystem. We use React, trusted by brands like Nike, Farfetch, and Tiffany.

Features:
  • Unprecedented flexibility of content, simple to integrate with modern headless CMS (custom frontend built to bridge content and commerce).
  • State of the art optimizations allowing for superior speed and conversions (loading times under 1 second).
  • Connect with any e-commerce platform (Shopify, Commerce Tools, SAP Commerce, Magento).

Case Study

Magda Butrym headless Shopify

online

After successful six years on the market, Magda Butrym approached the commerce-ui team to help with reintroducing itself to consumers. The new ecommerce, designed by acclaimed Ania et Lucie, was meant to set new standards for unique customer experience, mobile-first store design and easy checkout process.


Case Study

Oura Ring

Branding
Digital Design

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 team of more than 100 employees globally, Oura is now a leader in the smart ring market. Recently, Oura raises $28 million series B 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 important metrics - 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 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 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 global configuration. We leveraged a design token approach for smooth communication between designers and developers.


Case Study

Rolex / Seddiqi

Digital Design

In May 2018, Rolex and Ahmed Seddiqi & Sons inaugurated the world’s largest Rolex Boutique in Dubai. The three-level structure covered an unprecedented 850 square meters of retail space. A few months earlier, we were asked to build and ship a bespoke Rolex product catalog and editorial pages — all within the existing Ahmed Seddiqi & Sons website.

Rolex Standards

Rolex watches are crafted from the finest raw materials and assembled with scrupulous attention to detail. What originates from craftsmanship extends to every customer touchpoint. Having experience with luxury brands, we could translate static designs into a fully working website in just 6 weeks. Our work was supervised by UI/UX experts from Rolex Headquarters in Geneva to meet the high Rolex standards.

Boutique Locator

Ahmed Seddiqi & Sons represents more than 60 luxury timepiece and jewelry brands across 51 destinations in the UAE. Before starting the development phase, our team performed extensive research to identify the best mobile-first patterns for store locators.

Features:
  • dynamic list order based on map position
  • find nearest boutiques with request location API
  • filtering by brand and location
  • optimised for touch geastures

Playground

Headless Storefront Demos

Please note: these are not full commercial projects, the experiences below were developed as playground projects to show the quality of our output.

Open demo

Let's talk

Do you feel like we could help with your ecommerce challenges? Reach out to simon@commerce-ui.com.