GoPuff Design System
Released in 2022 with constant updates.
Company
Tribalscale
Client
Gopuff
Role
Product Designer
Tools
Figma
Miro
Deliverables
Design Components
Library Components
Wireframes
&
Prototypes
Context
About
TribalScale
TribalScale is a digital innovation firm based across north america, specializing in transforming businesses through agile development and user-centered designs.
The company collaborates with clients across multiple industries to build scalable digital products that drive growth and user engagement.
This and other projects were conducted by me during my time with them.
Partnership with GoPuff
GoPuff partnered with TribalScale to enhance its design and development workflows. The collaboration focused on:
User-Centric Redesign: Conducting competitive analyses and user-tested mockups to refine the web and native applications.
Design System Development: Auditing components and implementing a scalable design system for consistency.
Performance Optimization: Addressing Figma file inefficiencies and reducing technical debt to streamline design processes.
This eight-month initiative resulted in a modern, responsive design system that improved engagement, efficiency, and long-term scalability.
Project Goals
Streamline Communication
Clear documentation and interactive prototypes bridged gaps, making handoffs smoother and reducing misalignment.
Ensure scalability for future growth.
Flexible components and templates allowed for seamless expansion as GoPuff evolved.
Increase efficiency and reduce redundant work
Standardized UI components saved time, allowing designers to focus on innovation instead of recreating elements.
A quick word about atomic Design
Building with atomic components ensures a scalable, consistent, and adaptable design system, allowing for seamless updates and accommodating both simple and complex use cases.
As seen in the attached prototype.
Expand
Atoms
What Are They
The smallest, indivisible elements, such as colors, typography, and spacing. These create the visual foundation, ensuring a cohesive look across all UI components.
Molecules
What Are They
Functional groupings of atoms, forming basic UI elements like buttons, form fields, and icons. These allow for fundamental user interactions while maintaining consistency.
Organisms
What Are They
Larger UI sections combining molecules into reusable patterns, such as navigation bars, product cards, or modals. These form the backbone of interface design.
Templates
What Are They
Structural blueprints that organize organisms into full-page layouts. These guide designers and developers in structuring content while maintaining brand coherence.
Guidelines &
Documentation
What Are They
A centralized resource defining accessibility, best practices, and usage principles, ensuring smooth adoption and maintenance across teams.
Beyond KPI's and Metrics…
Impact & Adoption
40% faster onboarding for new designers.
70% improvement in designer-developer collaboration.
Reduced redundancy, streamlining component usage.
Improved design consistency, elevating user experience.
Real-World Outcomes
Faster product iteration, reducing bottlenecks.
Lower technical debt, with reusable components.
Higher user engagement, with a polished, consistent interface.
Driving Engagement
Workshops & Training: Educating teams on best practices.
Clear Documentation: Ensuring ease of use.
Cross-Team Collaboration: Aligning design and development.
Iterative Updates: Refining the system based on feedback.