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

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

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

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

Pando: Ibotta's Design System and complete platform redesign. 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.

🤟 I played a major part in concepting, designing, and help implementing the components to completely redesign the look of Ibotta. Across all surfaces.

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.

 

🤟 I played a major part in concepting, designing, and help implementing the components to completely redesign the look of Ibotta. Across all surfaces.

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.

 

🤟 I played a major part in concepting, designing, and help implementing the components to completely redesign the look of Ibotta. Across all surfaces.

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.

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.

 

🍂 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.

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.

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.

ROLES


Style mapping

Acceptance Criteria creation

Design

Implementation

Work

I got to steer the ship while collaborating with other designers, engineers, PM's, brand and marketing folk, all the way up to the C-suite to help mold the new identity into a working system built on strong design principles.


Establishing a new UI, which I led the design of, and implemented through reusable parts across all surfaces of the product, no matter the OS.

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.

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.

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.

ROLES


Design

Collab

Implementation details

User testing

User research

Design-lead

Gallery

Have a look at some different work from my time at Ibotta, specifically working on the Pando. For other Product Design Ibotta work, go here!

pando-gallery-6
pando-gallery-7
pando-gallery-19
pando-gallery-2
pando-gallery-8
pando-gallery-4
pando-gallery-9

Wanna see it in action? Just ask!

Wanna see it in action? Just ask!

Wanna see it in action?

Just ask!

Wanna see it in action? Just ask!

Wanna see it in action?

Just ask!

Reach out to me at ck@chrisknutson.design

Reach out to me at ck@chrisknutson.design

Reach out to me at ck@chrisknutson.design

Reach out to me at ck@chrisknutson.design

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.

View