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.


Let's talk

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