Rosetta: Handshake's collective design system encompassing code, design, and documentation. Defining both visual design and interaction of components.

Designing for the entire product. Cross-platform in every problem space.

rosetta-phone
img-rosetta

As a Product Designer specializing in Design Systems, I played a pivotal role in the development of Rosetta, Handshake's inaugural design system. I collaborated closely with cross-functional teams to establish a cohesive visual language and component library, in code & Figma, ensuring a consistent user experience across the platform.

Through research and iterative design processes, we crafted a versatile system that empowered our product teams to streamline their workflows and deliver a polished, unified language to our users.

As a Product Designer specializing in Design Systems, I played a pivotal role in the development of Rosetta, Handshake's inaugural design system. I collaborated closely with cross-functional teams to establish a cohesive visual language and component library, in code & Figma, ensuring a consistent user experience across the platform.

Through research and iterative design processes, we crafted a versatile system that empowered our product teams to streamline their workflows and deliver a polished, unified language to our users.

ROLES

 

ROLES

 

Research

Testing

Design

Implementation

Documentation 

Research

Testing

Design

Implementation

Documentation 

PLATFORM

 

PLATFORM

 

iOS

Android

Web

iOS

Android

Web

YEAR

 

2022-now

YEAR

 

2022-now

rosetta-figma-3

Rosetta is a couple of different things. It is the Enterprise and Student facing Design System and a React Component library that supports the foundation of Handshake design.

Unified Visual Language: Handshake's design system provides a consistent and cohesive visual language, including color schemes, typography, and UI components. This ensures that all products and interfaces maintain a uniform and professional appearance.

 

Efficient Collaboration: It serves as a centralized resource for designers and developers, offering pre-defined design patterns and guidelines. This facilitates efficient collaboration, speeds up development, and reduces design and coding inconsistencies

 

Enhanced User Experience: By adhering to the design system, Handshake can deliver a seamless and user-friendly experience across its platforms and products. It gives teams a common language. 

Unified Visual Language: Handshake's design system provides a consistent and cohesive visual language, including color schemes, typography, and UI components. This ensures that all products and interfaces maintain a uniform and professional appearance.

 

Efficient Collaboration: It serves as a centralized resource for designers and developers, offering pre-defined design patterns and guidelines. This facilitates efficient collaboration, speeds up development, and reduces design and coding inconsistencies

 

Enhanced User Experience: By adhering to the design system, Handshake can deliver a seamless and user-friendly experience across its platforms and products. It gives teams a common language. 

Unified Visual Language: Handshake's design system provides a consistent and cohesive visual language, including color schemes, typography, and UI components. This ensures that all products and interfaces maintain a uniform and professional appearance.

 

Efficient Collaboration: It serves as a centralized resource for designers and developers, offering pre-defined design patterns and guidelines. This facilitates efficient collaboration, speeds up development, and reduces design and coding inconsistencies

 

Enhanced User Experience: By adhering to the design system, Handshake can deliver a seamless and user-friendly experience across its platforms and products. It gives teams a common language. 

The visual system

Most people start with your easiest component or set of "foundations" to establish your system. Don't. Spend 10 seconds picking a font family. Spend even less time on your colors. I picked some for you. Give me a system type, some colors that represent messaging. Worry about identifying exisiting useful patterns and building a system around those parts. Remembering that by building the backbone of your system in code, it will intrinsically allow you to change those other things later with minimal effort. 

This was the mindset we took when creating the system at Handshake.

rosetta-system

Establishing the parts

Our token-based design system is a common approach that utilizes standardized design tokens, such as colors, typography, spacing, and components, to ensure consistency and cohesiveness. This is nothing groundbreaking nowadays, but it doesn't happen overnight. Total team effort in working with Product, Engineering and C-suite to get the runway to help integrate this into our current products.

rosetta-tokens-1

2 themes: Enterprise and Student-facing

Updating the UI through implementing Rosetta: The creation of our token-based system allowed us to quickly update existing styles and improve the insterface visually, as well as the experience. From spacing and colors, to larger atomic elements such as rows, tables, and imagery. What a difference a consistent visual style can do.

rosetta-web-2

Before & after

rosetta-before-2 rosetta-after-1

Implementation

I teamed up with 10 engineers spanning Frontend, iOS, and Android development to create and manage 400+ components for Rosetta. In just six months, we pushed adoption from 20% to 70% of our codebase. This collaborative effort streamlined development, maintained design consistency, and significantly improved our product's quality. Our teamwork demonstrated the value of Rosetta as an essential asset in Handshake's design and development toolbox.
 

2 Design systems designers
10 Engineers
1 Chief Design Officer
1 Engineering Manager


 

Implementation

I teamed up with 10 engineers spanning Frontend, iOS, and Android development to create and manage 400+ components for Rosetta, our Handshake design system. In just six months, we pushed adoption from 20% to 70% of our codebase. This collaborative effort streamlined development, maintained design consistency, and significantly improved our product's quality. Our teamwork demonstrated the value of Rosetta as an essential asset in Handshake's design and development toolbox.
 

2 Design systems designers
10 Engineers
1 Chief Design Officer
1 Engineering Manager


 

ROLES


Style mapping

Roadmapping

Design

Reviews

Implementation

Maintenance

Process & architecture

Defining the architecture for a design system encompasses the seamless transition from design to development to implementation. It involves creating a comprehensive framework that outlines design principles, component libraries, and code guidelines. This architectural blueprint ensures a good workflow, fostering collaboration between designers and developers to efficiently bring the design system to life in the final product. 

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.

Process & architecture

Defining the architecture for a design system encompasses the seamless transition from design to development to implementation. It involves creating a comprehensive framework that outlines design principles, component libraries, and code guidelines. This architectural blueprint ensures a good workflow, fostering collaboration between designers and developers to efficiently bring the design system to life in the final product. 

rosetta-architecture

Gallery

Have a look at some shots of different work from my time at Handshake. Want to see more? Just ask!

rosetta-gallery-6-1
rosetta-gallery-5-1
rosetta-gallery-4-1
rosetta-gallery-3-1
rosetta-gallery-2-1
rosetta-gallery-8
rosetta-gallery-7
rosetta-gallery-9

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

View