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 by performing code reviews, writing tests, and setting the guidelines for the front-end code to be documented and executed across all teams.

What We Did:

• Implemented fast and reliable storefront service to act as a gateway for B2C and B2B clients.
• Built reusable components in Vue.js and Nuxt technologies.
• Implemented the design with HTML and Tailwind technologies.
• Integrated a headless content management system (CMS) with Craft, front-end gateways through PIM and APIs, and the front-end implementation of search.
• Integrated new and existing microservices.
• Design consultancy.
• ​​Improved user experience and accessibility.
• Optimized 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 to bond 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.

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.