Shopery Design System

Product Design. Design Systems

Project Overview

The goal of the Shopery Components project was to build a design system that would standardize UI components across multiple B2B applications.

Before its creation, the product ecosystem faced several challenges: UI inconsistencies across different applications and teams, a lack of a unified approach to component design and implementation, and scalability issues that made it difficult to maintain and evolve the UI efficiently.

A design system was needed to address these problems by providing consistency, improving collaboration between designers and developers, and ensuring scalability.

My Contributions

As the sole designer in the company, I took on the responsibility of designing and maintaining the entire design system. This involved conducting research and benchmarking top-tier design systems, auditing existing UI components, and merging and parameterizing similar elements to create a streamlined system.

I also defined core design principles and established strategies for scalability while closely collaborating with frontend developers and product managers to align design and development efforts.

Shopery

Principal Product Designer

2018 - Now

The Challenge

The system was built on several key principles: it needed to be agnostic to adapt to different projects and technologies, scalable to support future growth without requiring major rework, modular to ensure components were reusable and flexible, and accessible to meet compliance with accessibility standards. The success of the design system relied heavily on cross-functional collaboration, with designers ensuring consistency, frontend developers addressing technical feasibility, and product managers ensuring that the system met business needs.

The components in the system were designed with clear foundations: a typography system for clarity and hierarchy, a flexible color palette, a custom icon library, and a defined spacing and grid system to maintain alignment and consistency across screens. The component library included buttons, inputs, containers, indicators, and tables, all designed to be reusable and adaptable.

For implementation and documentation, I documented the components in Figma, detailing the specifications such as sizes, parameters, and spacings for each component. Developers maintained Storybook, which served as the source of truth for the components, showcasing the interactive elements and ensuring consistency between design and development. To ensure alignment between the teams, we established a clear naming convention for components and standardized the parameters and options to ensure flexibility and avoid redundancy.

Results

The results of the project were significant. The design system significantly reduced design and development time by providing a reusable component library and increased consistency across products, which improved the overall user experience. It was widely adopted within the company, receiving positive feedback from developers. The system, which was launched in 2018, continues to evolve in 2025, supporting a variety of projects, including online store creators, multi-vendor platforms, B2B e-commerce platforms, banking services platforms, and procurement enterprise applications.

Looking ahead, there are plans for continuous improvements to accessibility, the introduction of new components to address emerging use cases, and the removal of unused components to maintain efficiency. Further unification of similar components will also be explored to optimize the system. Ultimately, Shopery Components has proven to be a robust, scalable, and adaptable design system, remaining a key asset in ensuring a seamless design-development workflow for B2B applications.

‍

Special thanks to all the Shopery team.