Pando: Ibotta's Design System crafted to create consistency, leverage reusable components, and make a beautiful & visual language that is accessible.

Pando: Ibotta's Design System crafted to create consistency, leverage reusable components, and make a beautiful & visual language that is accessible.

Pando: Ibotta's Design System crafted to create consistency, leverage reusable components, and make a beautiful & visual language that is accessible.

Pando: Ibotta's Design System crafted to create consistency, leverage reusable components, and make a beautiful & visual language that is accessible.

Pando: Ibotta's Design System crafted to create consistency, leverage reusable components, and make a beautiful & visual language that is accessible.

img-pando

As the lead systems designer, along with our Product Design team, we created Pando, Ibotta's first and very own Design System from the ground up.

We started with design tokens leveraged from our re-branding efforts to create, build, and implement components, patterns & elements that scale to all of Ibotta's platforms.

As the lead systems designer, along with our Product Design team, we created Pando, Ibotta's first and very own Design System from the ground up.

We started with design tokens leveraged from our re-branding efforts to create, build, and implement components, patterns & elements that scale to all of Ibotta's platforms.

ROLES


Research

Testing

Design

Implementation

PLATFORM

 

iOS

Android

Web

YEAR


2020

Pando is a design system used by designers, writers, and engineers to build thoughtful, useful products at scale.

­čŹé It's a design system. A design system is a foundational tool built to serve the design and engineering of digital products. It's Ibotta's digital visual language built into accessible UI components, offered as multi-OS code and Figma-designed assets with full documentation.

 

­čôÂ It's built on components. This system promotes reusability of modular components to spread a more cohesive user experience across our enterprise of digital product development teams. Components allow us to build more efficiently as teams and products change and grow.

 

­čĹę­čĆ╗ÔÇŹ­čĺ╗­čĹĘ­čĆŻÔÇŹ­čĺ╗ It gives teams a common language. Pando unifies design and development with an alphabet of building blocks that allow us to create in the same language.

 

img-whofor
img-figma

Concept

I was brought on board to Ibotta to help lead a squad to implement a system across multiple platforms, while incorporating a brand-new rebrand.

With experience in building out component libraries both on the design side and in the codebase, we decided to bring a guild of designers, engineering managers, and developers into a weekly cadence to help strategize on how to build this at scale.

We used weekly meetings on the design-side to help navigate the coming months. At the time, we had multiple patterns, components, and random naming conventions. It was up to a select few of us to build a system starting with design that was true to the voice, brand, and tone, while also making the patterns indentifiable and accessible.

As the lead systems designer, along with our Product Design team, we created Pando, Ibotta's first and very own Design System from the ground up.

We started with design tokens leveraged from our re-branding efforts to create, build, and implement components, patterns & elements that scale to all of Ibotta's platforms.

ROLES


Research

Testing

Design

Implementation

img-old-new
img-pando-type
img-pando-color-light
img-pando-color-dark
img-jira
img-styles
img-components

Implementation

We started as a team of 8 individuals.

1 Director of Design
1 Staff Designer
4 Engineers
1 Head of Product
1 Project Manager


Our goal: to implement a design system, at scale, across 15 squads, with 200+ engineers. 

Using lean methodology, and strict deadlines, the team mapped the current tokens, styles, components, and writing to our new design language to help create this.

As the lead systems designer, along with our Product Design team, we created Pando, Ibotta's first and very own Design System from the ground up.

We started with design tokens leveraged from our re-branding efforts to create, build, and implement components, patterns & elements that scale to all of Ibotta's platforms.

ROLES


Style mapping

Acceptance Criteria creation

Design

Implementation

Wanna see it in action? Just ask!

Reach out to me at ck@chrisknutson.design

Let's work together. Say hi sometime.´╗┐

Let's work together. Say hi sometime.´╗┐

Let's work together. Say hi sometime.

Copyright 2021

┬ę 2021 Chris Knutson

Contact

ck@chrisknutson.design