Noma Ecommerce Framework

Product Design. Ecommerce

Project Overview

I designed a highly customizable UI Kit & Framework for building B2B and B2C multi-tenant eCommerce storefronts, primarily focused on FMCG but adaptable to any type of product. This framework served as a starting point or template for Shopery clients, enabling them to quickly set up their online stores while maintaining the flexibility for deeper customizations when needed.

The UI Kit was structured around design tokens, including typography, colors, radii, and semantic variables, combined with a set of bespoke eCommerce components leveraging these styles. This ensured that a single design adjustment would propagate across 70+ components, streamlining branding and consistency across different storefronts.

Given the high volume of mobile traffic in eCommerce, the framework was designed with a mobile-first approach, ensuring a smooth and intuitive experience on smaller screens. Every component was optimized for responsiveness and touch interactions, prioritizing fast loading times, clear layouts, and effortless navigation.

Once implemented in React, the framework delivered an enhanced user experience with dynamic interactions. Key components, like the Add to Cart button, provided real-time feedback and multiple states, making the shopping experience smoother and more intuitive across devices.

My Contributions

As the sole designer at Shopery, I led the design and conceptualization of the framework, ensuring it was both scalable and easy to adopt. I created a modular and flexible UI Kit, defining the visual language and interaction patternswhile closely collaborating with frontend developers to refine component behaviors and states. Throughout the process, I maintained detailed documentation in Figma, ensuring a smooth handoff and clear implementation guidelines for developers and agencies using the framework.

Shopery

Principal Product Designer

2022

The Challenge

The foundation of this framework was built on years of research and real-world experience. A key influence was a previous project in which we designed the B2B eCommerce platform for one of the largest FMCG brands in Latin America. That project involved months of intensive research, user interviews, and even a trip to Lima to gain direct insights from stakeholders. Continuous improvement based on feedback and performance metrics further refined our understanding of what makes a great eCommerce experience.

Leveraging this knowledge, we designed a token-based UI Kit that allowed for effortless customization while maintaining high usability standards. The component library included 70+ eCommerce-specific elements, all designed to be highly adaptable. Given the importance of mobile commerce, we put special emphasis on optimizing layouts, navigation, and interactions for mobile users, ensuring frictionless shopping experiences across all screen sizes.

Collaboration with developers ensured that the React implementation remained faithful to the original design vision, bringing interactive components to life with smooth animations, touch-friendly buttons, and responsive layouts that worked seamlessly across devices.

Results

The final framework enabled clients and development agencies to deploy fully functional, customized storefronts in just a few weeks. It provided a versatile foundation for both quick, out-of-the-box implementations and highly tailored eCommerce solutions. By translating years of industry experience into a flexible and scalable design system, we significantly reduced implementation time while maintaining design consistency and a seamless user experience.

Its mobile-first approach ensured that every storefront built with this framework was highly optimized for smartphones and tablets, offering an intuitive and engaging shopping experience, even in complex B2B scenarios.

‍

Special thanks to all the Shopery team.