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.
Research
Testing
Design
Implementation
Documentation
Research
Testing
Design
Implementation
Documentation
iOS
Android
Web
iOS
Android
Web
YEAR
2022-now
YEAR
2022-now
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.
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.
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.
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.
Style mapping
Roadmapping
Design
Reviews
Implementation
Maintenance
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.
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!
Reach out to me at ck@chrisknutson.design
Reach out to me at ck@chrisknutson.design
Reach out to me at ck@chrisknutson.design