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

Magda Butrym is a luxury ready-to-wear brand. Even if you might be unfamiliar with the name, you might have recently seen a Magda Butrym design. The brand quickly received international acclaim, landing in the wardrobes of Anja Rubik, Kim Kardashian, or Adriana Lima.

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.

From early mockups to production in 8 weeks.

A fashion calendar is undoubtedly something you cannot miss as a brand. Producing two collections each year, Magda Butrym wanted to showcase their Pre Fall 2020 collection on the new store. We worked alongside digital designers and content producers to deliver highly-performant web experience, including features like shoppable lookbooks or editorial parts. In only 8 weeks, we developed an entire custom storefront and connected it to Shopify backend.

"We've never seen ecommerce developed so fast."

Ania et Lucie creative agency, NYC

That wouldn't be possible without an underlying UI framework commerce-ui (developed by us). Commerce-ui framework accelerates custom storefront development by solving common ecommerce problems. It's empowering developers to focus on what's unique in their projects, rather than on what's repeatable.

Content and commerce

Magda Butrym saw an opportunity to evolve their existing ecommerce from being solely focused on transactions to become a centralized hub for inspiration and exclusive offers. To achieve this, we had to "unleash" the content creation and give full flexibility for the content team. We achieved this by leveraging a headless approach and integrating with Prismic CMS. New CMS allowed non-technical people to compose stories from drag and drop modular sections and populate them with unique photo and video content. Each editorial peace can be then linked with selected products, marrying content with commerce.


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.