Catalyst Composable Storefront

To enable customizable and scalable storefronts, BigCommerce launched the Catalyst Composable Storefront. As the lead product designer, I crafted the complete shopper-facing experience, integrating it into boilerplate code that allows for easy customizations.

‍

In addition, I designed the seamless, one-click provisioning flow, empowering less technical users to quickly demo the storefront from the BigCommerce platform.

Catalyst provides a composable, end-to-end shopping experience built on a modern framework that’s simple to customize for developers and agencies and seamlessly adaptable to an individual brand needs.

Product features

Easy Deployment: Seamlessly deploy from the BigCommerce control panel or through CLI, making setup flexible for all user types.
Page Builder Integration: Compatible with Makeswift page builder out of the box, empowering merchants with no-code page design options.
Scalable Design System: Built on a scalable design system ready to support complex features, with advanced functionalities like BOPIS and B2B capabilities on the way.
Customizable Shopper Experience: Flexible, boilerplate code built with Tailwind CSS allows for extensive customization, enabling unique brand experiences with minimal setup.

Template Design and Usability

‍The Catalyst Composable Storefront is built as a fully-featured eCommerce template, following usability best practices from merchant feedback and Nielsen Norman Group for a modern UX. While the Catalyst code is open-sourced on Github, the design files are also available in Figma Community and mirror the code 1:1, allowing anyone to access and repurpose them as a resource.

‍

View the Catalyst Storefront Figma

Developer-Centric Design System

The storefront’s design system is structured with developer-friendly tools, using Tailwind CSS alongside fully defined variables and components to simplify integration. Every element is built with scalability in mind, and new features are continuously rolled out to the community, enabling broad, ongoing engagement and easy customization.

‍

View the Catalyst Design System Figma

Impact

Fully Composable Framework

Designed with modularity in mind, the storefront allows agencies and developers to effortlessly build out their own templates by leveraging pre-configured components and resources.

Un-opinionated Design

The storefront serves as a straightforward starting point, offering agencies and developers the essentials they need to build customized, robust eCommerce experiences.

Unmatched Modern Tech Stack

Built on React and Next.js, Catalyst provides a cutting-edge, developer-friendly foundation that sets a new standard for flexibility and performance in composable commerce.

Enhanced BigCommerce Patterns

We revamped complex app-installation workflows to simplify backend provisioning, introducing improved patterns that make storefront setup smoother for users across the BigCommerce ecosystem.

Read full case study