Blueland: Eco-Friendly Cleaning Products

General Project Scope

1. Full visual redesign of all store pages on headless Shopify
2. Reusable React 18 component library covering all core UI elements
3. Collaboration with the design team to translate design tokens into reusable code variables, including typography, colors, spacing, and layout constraints
4. Storybook implementation with Chromatic for automated visual regression testing
5. Custom release planning, QA, and production launch execution

Duration: 6 months

The Challenge

The project required a complete redesign of the storefront, including a full refresh of all pages and UI elements. Implementing the new brand experience across a headless Shopify architecture created several challenges.

The team needed a structured way to translate the new design system into development standards, ensuring consistent use of typography, colors, spacing, and layout rules across the site. At the same time, the platform required a set of reusable UI components to support multiple storefront scenarios and be applicable to further growth and changes.

Additionally, the team had to maintain strict control over visual changes during development and establish a reliable release process, as the recommended Pack Digital deployment workflow did not fully meet the project’s needs.

The Solution

Design System & Token Architecture
We worked directly with the designer to establish a structured design system. Core style variables, including typography (sizes, weights, line heights), color palette, spacing scale, and content width constraints, were defined as design tokens. These were documented into a shared reference table used both in Figma and in code, eliminating the gap between design intent and implementation, making future updates a single-source change and enabling faster updates across the platform.

Reusable Component Library
To support the progress of a new design, we built a reusable library of React components. This included key UI elements such as Text, Buttons, Product Cards (with variations for collections, galleries, and the shopping cart), Radio inputs, Checkboxes, Tooltips, and Dropdowns. Every component was built to cover all states and usage contexts, allowing pages to be assembled quickly while maintaining consistent styling and behavior.

Storybook & Chromatic Integration
To maintain quality control and UI consistency as the component library grew, our team implemented Storybook with Chromatic for visual regression testing. Before every release, Chromatic compares the current components with their approved baseline versions and flags any visual differences, even at the pixel level, requiring explicit approval before deployment. This process protects against unintended visual regressions.

Full Site Redesign
Using the new design system and component library, we rebuilt the entire storefront interface. The result is a cohesive and up-to-date user experience aligned with the client’s refreshed brand identity.

Custom Release Planning & ExecutionTo ensure a smooth launch, a project-specific release strategy was developed, tested and validated with the client prior to go-live. The release workflow initially recommended by a third-party proved incompatible with the project’s architecture, so our team designed and validated an alternative approach. The final release plan was successfully executed on launch day, ensuring a stable rollout.

Project Results

The project resulted in a fully refreshed storefront aligned with the client’s refreshed brand identity. By introducing a shared design system and reusable component architecture, the team significantly improved development efficiency, reduced the risk of UI inconsistencies across the platform and enabled faster development cycles for new features and updates.The implementation of automated visual regression testing also reduced the risk of unintended UI changes, allowing the team to confidently ship updates while maintaining design quality. Together, these improvements created a more efficient development workflow and a more reliable storefront experience.