Home
My Work
About Me

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.

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.

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.

Increase efficiency and reduce redundant work

Standardized UI components saved time, allowing designers to focus on innovation instead of recreating elements.

What is
Atomic Design
Atomic
Design
Abstract
Concrete

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

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

Design
System

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.

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.

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.

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.

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.

What Are They

A centralized resource defining accessibility, best practices, and usage principles, ensuring smooth adoption and maintenance across teams.

Let’s Talk!

jvfmf@hotmail.com

Linkedin

Let’s Talk!

jvfmf@hotmail.com

Linkedin

Project Results
Project Results

Beyond KPI's and Metrics…

…Success stories which include:

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.

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.

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.

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.