Blackroll

Building a modern shopping experience with Shopify Plus

Case Study

Digital design

Jonathan Lumb

TechStack

Craft CMS

Vue.js

Nuxt

Shopify Plus

Algolia

Tailwind

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

Our engineers were a part of a multicultural group of specialists tasked to build a cutting-edge ecommerce system using the latest technologies. They also wanted to while taking advantage of the modern, decentralized work culture. The goal was to deliver quick fast and reliable software that would allow our client to grow in terms of gross merchandise value (GMV), sales conversion rate, and brand recognition.

“If you’re in search of top-notch headless frontend developers combined with state of the art ecommerce knowledge and user interface expertise, then look no further. Commerce-UI and their team are spot on and their delivery is excellent and right on the money!”

Antonietta Cosentino, Product Owner at Blackroll

Extending the Blackroll Development Team

Our engineers acted as a true extension of Blackroll’s Development Team. We built responsive, interactive components that extend to a broad range of Blackroll’s digital properties, including both B2C and B2B ecommerce services. We used Nuxt and Vue.js technologies to integrate Craft CMS into the design from the simplest button to the most complex components. This allows marketing teams to create custom designs and layouts at high fidelity and with maximum flexibility. Any campaign or creative ideas can be done at a much quicker pace without extensive needs from the development team.

We played an integral role in creating and updating hundreds of components, performing code reviews, writing tests, and setting the guidelines for the frontend code to be documented and executed across all teams.

What we did

  • Fast and reliable storefront service to act as a gateway for B2C and B2B clients.
  • Build reusable components in Vue.js and Nuxt technologies.
  • Implement the design with HTML and Tailwind technologies.
  • Integrate a headless CMS with Craft, frontend gateways through PIM and APIs, and the frontend implementation of search.
  • Integrated into new and existing microservices.
  • Design consultancy.
  • ​​Improve user experience and accessibility.
  • Optimize page load time and technical SEO.

Thanks to all the underlying performance optimizations, the new ecommerce feels super responsive for end users.

Performance optimizations

Speed and scalability were the two main factors when 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 the old monolithic architecture and moved to microservices to connect Craft CMS to highly specialized endpoints, including PIM Core, Nuxt, Agolia, Shopify, and many more. Each layer of the application had a dedicated team of developers and continuous integration and delivery pipelines bonding it all together.

  • Server-side rendering and cache
  • Measuring via Core Web Vitals and Lighthouse
  • Profiling and optimizing the size of bundles
  • Decreasing the image and video download size impacts page load times
  • Delivering tailored image and video scales for any screen size
  • Decreasing the number of HTML nodes
  • Implementing small-scale custom functionalities in place of large libraries
  • Improving the first and largest contentful paint

Empowering the content team

For more flexibility and freedom across the entire site, we developed the front end in a componentized way that is supported by Craft CMS and GraphQL. Content creators have hundreds of components to choose from when building complex, yet beautiful sites in several different languages. Editors can build editorial content anywhere within a site structure and easily link that to shoppable products.

Each product, exercise, article, routine, and collection has its own dedicated page that allows for publishing the most possible content. Ranging from the simplest articles to video and animation-heavy exercise routines, we managed to stay quick on load times and really strong on SEO. Search engines love us.

Optimize load times for images and videos across all screen resolutions and devices.

Extensive exercises library and knowledge base linked directly to shoppable products.

Search with real-time suggestions.

Custom editorial content anywhere within a site structure.

Built for new and existing customers

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

Achieving the goal

The final product is a beautiful, swift, and seamless experience for clients. It manages to stay SEO-friendly because it was built with mobile users in mind. Now, it supports an ever-increasing share of Blackroll’s revenue.

Oura Ring

Next project — Oura

Let’s talk
Do you feel like we could help with your ecommerce challenges? Reach out to Simon.
simon@commerce-ui.com
Copied to clipboard
Insights about the future of ecommerce in your inbox.

default

© 2023 Commerce-UI

linkedin
instagram
twitter