Case Study — Magda Butrym

How we have built a beautiful and engaging headless store with Shopify, next.js and Prismic CMS.

online

Headless is not easy. But growing as a brand is neither. At Commerce-ui, we think it's the only way forward if you're serious about your business. Gartner has recently reported that "in 5 years 80% of ecommerce will be headless". The emerging ecosystem of tools is making it more approachable than ever. Learn how we helped Magda Butrym's team on their journey to the new e-commerce store.

“Commerce-ui not only brought fantastic coding skills to our project but what is even more important, a deep understanding of the business needs on our end as well as a lot of commercial awareness. Commerce-ui also demonstrated a fantastic problem-solving mindset, which allowed us to overcome many issues we wouldn’t know how to tackle without their help. The team demonstrated extraordinary communication skills, which allowed us to complete the website design in record time.”

Jakub Czarnota, General Manager, Magda Butrym

Thanks to underlying React technology, we made it possible to use high-quality photo and video content and keep the performance high.

Background

Even if you were unfamiliar with the name, you might have seen Magda Butrym pieces recently. Founded in 2014, the brand quickly received international acclaim, landing in the wardrobes of Kim Kardashian, Adriana Lima or Hailey Bieber.

Magda Butrym approached the Commerce-ui team to develop their new e-commerce on the Shopify platform. Designed by acclaimed Ania et Lucie creative agency based in NYC, it was meant to increase sales in the direct-to-consumer channel and set new standards for the years to come.

Key challenges:
  • Make the new e-commerce lightning fast, with sub-second reloads.
  • Introduce a content platform for rich stories and lookbooks.
  • Leverage the best mobile-first UX patterns to boost conversions.
  • Develop a robust future-proof foundation, unlocking features like product drops, exclusive stories, AR, buy with assistance or live stream.

All within a very tight deadline (just eight weeks from start to release).

We made it easy to connect photo and video content with shoppable products.

Architectural decisions — speed

If a store loads over 3 seconds, people will likely abandon it. This applies not only to the first load but also reloads in-between pages.

Today, no ecommerce can afford to be slow, yet most Shopify stores are extremely slow due to technology limitations and apps overload. Fortunately, for more demanding retailers, Shopify opened a so-called 'headless' way. It means you can still use exceptional capabilities that Shopify gives you on a back-end part, but the front-end can be built in a modern, performant way.

Commerce-ui team used a technology called React used by Facebook, Netflix, Farfetch, Nike, and many others. React is the next big thing on the web. This technology allows for advanced performance optimizations, unachievable in the standard Shopify approach.

Magda Butrym's new e-commerce was especially challenging as it's full of high-quality imagery and videos. Commerce-ui team leveraged the most up-to-date performance optimizations (like static regeneration, prefetching, native lazy loading) to deliver a highly performant e-commerce store; that's also beautiful. The best part — once loaded, you navigate in-between pages almost instantly. It feels more like an app than a regular website.

Embrace commerce with content

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. With only basic Shopify CMS capabilities, we simply couldn't bring to life any designs we got from Ania et Lucie. To achieve this, first, we had to 'unleash' the content creation and integrate with way more powerful Prismic CMS. We made this possible by deciding on a 'headless' architecture in the first place.

The external content management system unlocked the marketing team. Now they can compose stories from drag-and-drop modular sections and fill them with unique content. Each editorial peace can then be linked with selected products to make a seamless transition from content to commerce.

The marketing team can now compose pages from drag-and-drop sections.

There is no limitation on how things look, CMS holds only the 'data' layer and allows for any visual presence designers can imagine. The marketing team is now using these capabilities to drive new exciting features like product drops and we're sure this is just the beginning.

Mobile-first UX patterns

Mobile accounts for up to 85% of total traffic, buy only 20% of sales. Performance, mentioned before, is a significant factor here, but not the only one. Our development team, together with designers, focused on creating an app-like mobile shopping experience and fast mobile checkout (with Apple Pay).

From early mockups to production in 8 weeks.

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

“We've never seen ecommerce developed so fast.”

Lucie from Ania et Lucie, NYC

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

A foundation for whatever the future brings.

We're still in the early days of ecommerce. Covid-19 pandemic changed the way brands communicate with their customers. Product drops, engaging stories, assistance features or live streams. E-commerce was never moving that fast and it will only accelerate. We believe the new experience we developed is a solid foundation for future change. Commerce-ui team will keep working closely with Magda Butrym's team and explore new ways of engaging with their customers.


Let's talk

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