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.
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 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.
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.
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.
Before & after
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.
Gallery
Have a look at some shots of different work from my time at Handshake. Want to see more? 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