OVERVIEW
Peppaca is an e-commerce marketplace platform that connects buyers with a diverse selection of products and supports sellers in growing their businesses.
Problem
Peppaca’s digital products suffered from inconsistent UI elements and redundant design efforts, leading to confusion and inefficiency across teams.
Outcome
The Peppaca Design System established a single source of truth, harmonizing UI components and streamlining workflows. Key outcomes included:
Design and development became faster and more consistent.
Teams now collaborate more effectively.
Overall user experience across products became more cohesive.
Tools
Figma, Plugins - Stark and Specs
Contributors
1 Graphic Designer, 2 Software Developers, and Product Designer (Me)
Contributions
Visual design, Interaction design, Design System
BACKGROUND
Journey as a Solo Designer
In January 2024, I joined Peppaca as their solo designer, working directly with the CEO to lead a complete redesign of the platform and all its product offerings, including the shopping platform, seller dashboard, admin dashboard, and more.
As Peppaca scaled and expanded its product offerings, the need for cohesive design and user experience became urgent. With a growing user base and diverse product lines, it was crucial to create a unified and scalable design system that could evolve with the platform’s growth.
One of the key tasks was establishing and managing the Peppaca Design System, which would serve as the foundation for consistent design across all digital products.
CHALLENGES
But first, why did Peppaca need a design system?
Peppaca’s rapid growth exposed critical gaps in design consistency, efficiency, and team alignment. Addressing these challenges was essential to deliver a cohesive and scalable user experience across all digital products.
To truly understand the urgency, let’s look at the core issues that surfaced as the platform expanded:
01
Inconsistent User Experience
Peppaca’s platform lacked a unified visual language, resulting in fragmented and unpredictable user interfaces across platforms.
02
Inefficient and Redundant Workflows
Team frequently rebuilt similar UI elements from scratch, leading to wasted effort, slower development, and frequent rework.
03
Difficulty Scaling Across New Products
As Peppaca expanded, launching new features or products became increasingly complex without reusable design assets and guidelines.
Principles & System Architecture
How We Built a Foundation for Growth and Usability?
To address these challenges, we first established a strong architectural foundation rooted in clear design principles.
Core Principles:
Consistency
Accessibility
Scalability
Clarity
Embracing the Atomic Design Methodology
To bring our core principles to life in a way that was both practical and scalable, we embraced the atomic design methodology. This approach breaks down even the most complex interfaces into a clear hierarchy of fundamental building blocks.
Image Credits: https://medium.com/@valenali
BUILDING THE SYSTEM
From theory to practice
We divided the system into two main pillars: the Style Guide and the Component Library
🎨
1. Style Guide
Colors, Typography, Brand elements
💠
2. Component Library
Buttons, checkbox, chat list, navigation
Product cards, seller side navigation, labels, etc
Collaboration & Handoff
How we kept the design & dev teams aligned
To keep our workflow efficient and transparent, we relied on Figma and the Specs plugin for all design-to-development handoff. Specs allowed us to generate detailed, visual spec sheets directly inside our Figma files, making it easy for developers to inspect components, check spacing, colors, and typography, and get all the implementation details they needed; without leaving the design environment.
This approach kept everyone aligned and minimized misunderstandings, as feedback and clarifications could happen right where the work was happening.
A few examples of specs generated by the Figma plugin
IMPACT, RESULTS & LESSONS LEARNT
“I finally feel like we’re all speaking the same language"
This headline is a direct quote from one of our developers and reflects the positive impact the design system had on the team. The system quickly became central to three core products, helped the team save time on new features.
Key Lessons:
Early stakeholder involvement and open feedback channels were crucial.
Greater investment in accessibility testing and automated documentation would have added even more value.
Next steps include expanding the system to mobile and introducing design tokens for easier theming.
