Case Study — Blackroll

Building a modern shopping experience with Shopify Plus.

online

design

Jonathan Lumb

About

Established in 2007 Blackroll quickly became a standard for athletes of any level. The Swiss brand is recognized in more than 57 countries with over 5,000 qualified trainers in 37 countries worldwide.

Goal

Our engineers were a part of a multicultural group of specialists, tasked to build a cutting-edge ecommerce system using the latest technologies while taking advantage of modern, de-centered work culture.

The goal was to deliver fast and reliable software that would allow our client to grow in terms of GMV (gross merchandise value), sales conversion rate and brand recognition.

“If you’re in search of top-notch Headless Frontend Developers combined with state of the art e-commerce knowledge & UI expertise, then look no further. Commerce-UI & team are spot on & their delivery is excellent and right on the money!”

Antonietta Cosentino, E-commerce Product Owner at Blackroll

Extending Blackroll Development Team

Our engineers acted as a true extension of the Blackroll’s development team as we built responsive, interactive components that extend to a broad range of Blackroll’s digital properties, including both B2C and B2B ecommerce services. We were using Nuxt (Vue JS) technology to integrate Craft CMS into design - from the simplest button to the most complex components. This allows marketing teams to create custom designs and layouts at a high fidelity and with the maximum flexibility. Any campaign or creative ideas can be done at a much faster pace without an extensive need for the development team. We played an integral role in creating and updating hundreds of components, performing code reviews, writing tests and setting the guidelines under which front-end code was documented and executed across all teams.

Scope of work:

Fast and reliable storefront service to act as a gateway for B2C and B2B clients

Build reusable components in Vue.js/Nuxt technologies

Implement the design with HTML/Tailwind technologies

Integrate with Headless CMS (Craft), Frontend Gateways (PIM-APIs) and Frontend Implementation of Search

Integrate into new and existing micro-services

Design consultancy

Improve user experience and accessibility

Optimise page load time and technical SEO

Thanks to all the underlying performance optimisations, the new e-commerce feels super responsive for end users.

Performance optimizations

Speed and scalability were two main factors when it came to building our software. We took special care to optimize load times for images and videos across all screen resolutions and devices. For better end-to-end performance, we scratched old monolithic architecture and moved to micro-services, connecting Craft CMS to highly specialized end-points: PIM Core, Nuxt, Agolia, Shopify and many more. Each layer of the application had a dedicated team of developers and Continuous Integration & Delivery pipelines Bonding it all together.

Server Side Rendering and Cache
Measuring via Web Vitals and Lighthouse
Profiling & Optimizing bundles size
Decreasing image and video download size impact on page load times
Delivering tailored image/video scale for any screen size
Decreasing number of HTML nodes
Implementing small-scale custom functionalities in place of large libraries
Improving First and Largest Contentful Paint

Empowering Content Team

For more flexibility and freedom across the entire site, we developed the front-end in a componentized way, supported by a Craft CMS and GraphQL. Content creators have hundreds of components to choose from when building complex, yet beautiful sites in several different languages. Each product, exercise, article, routine and collection had its own dedicated page, allowing to put out the most possible content. Ranging from the simplest articles to video and animation heavy exercise routines, we managed to stay lightweight on load times and really strong on SEO. Search engines love us.

Editors have flexibility to build editorial content anywhere within a site structure and easily link that to shoppable products.

Built for existing and new customers

New blackroll.com brings way more than just shopping functionality. With an extensive knowledge base and video exercises users can find useful information about various pains, causes, symptoms and get professional guidance on how to use Blackroll products.

Achieving the goal

The final product is a beautiful, swift, and seamless experience for clients, managing to stay highly SEO-friendly built with mobile users in mind and to support an ever-increasing share of Blackroll’s revenue.