Magda Butrym
A Video-First Fashion eCommerce Built With Headless Shopify
Shopify Development
Ecommerce Consulting
Headless Commerce
Internationalization
UX Consulting
Shopify Development
Ecommerce Consulting
Headless Commerce
Internationalization
UX Consulting
Live site
https://magdabutrym.com
Digital design
Ania et Lucie
TechStack
Prismic,
Next.js,
Shopify Plus,
Imgix,
Vercel,
Klaviyo,
Sentry,
Even if you’re 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, and Hailey Bieber.
Magda Butrym approached Commerce-UI to develop their new eCommerce on the Shopify platform. Designed by the 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 years to come.
“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 at Magda Butrym
↑ Thanks to underlying React technology, we made it possible to use high-quality photo and video content and kept the performance high.
Key Challenges:
- Make the new eCommerce lightning fast with sub-second reloads.
- Introduce a content platform for rich stories and lookbooks.
- Leverage the best mobile-first user experience (UX) patterns to boost conversion.
- Develop a robust, future-proof foundation to unlock features like product drops, exclusive stories, augmented reality (AR), and buying with assistance or through a live stream.
↑ We made it easy to connect photo and video content with shoppable products.
Architectural Decisions to Improve the Speed of the Site
If a store takes over three seconds to load, 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 overloaded apps. Fortunately, for more demanding retailers, Shopify opened a so-called ”headless” way. This means you can still use the exceptional capabilities that Shopify provides you on the back end, but the front end can be built in a modern, performant way.
The Commerce-UI team relied on a technology called React that is used by Facebook, Netflix, Farfetch, Nike, and many others. This technology allows for advanced performance optimizations that are unachievable with the standard Shopify approach.
Magda Butrym's new eCommerce was especially challenging because it's full of high-quality imagery and videos. The Commerce-UI team leveraged the most up-to-date performance optimizations, like static regeneration, prefetching, and native lazy loading, to deliver a highly performant eCommerce store that's also beautiful. The best part is that, once loaded, you navigate 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 becoming a centralized hub for inspiration and exclusive offers. With only basic Shopify content management system (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 it with the way more powerful Prismic CMS. We made this possible by deciding on a headless architecture at the beginning.
The external CMS unlocked the marketing team. Now, they can compose stories from drag-and-drop modular sections and fill them in with unique content. Each editorial piece can then be linked with selected products to make a seamless transition from content to commerce.
There is no limitation on how things look because the CMS only holds the data layer and allows for any visual presence that 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 but only 20% of sales. Performance, mentioned before, is a significant factor here, but it’s 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.
↑ Homepage with high-quality video of the current campaign.
↑ Video-first product detail pages with unique content.
↑ Photo and video content connected directly with shoppable products.
↑ Instant filtering overlay.
↑ Search with real-time suggestions.
From Early Mockups to Production in Eight Weeks
A fashion calendar is clearly something you can’t 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 pieces. In only eight weeks, we developed an end-to-end headless Shopify store.
“We've never seen an eCommerce developed so fast.”
Lucie from Ania et Lucie
This wouldn't be possible without an underlying user interface (UI) framework that we developed. Commerce-UI accelerates custom storefront development by solving common eCommerce problems. We empower developers to focus on what's unique in their projects rather than what's repeatable.
A Foundation for Whatever the Future Brings
We believe the new experience we developed is a solid foundation for future change. The Commerce-UI team will keep working closely with Magda Butrym's team to explore new ways of engaging with their customers.
