Hire UsWe partnered with Handshake's UX, engineering, and product management teams to design a platform-and-device-agnostic multi-brand design system under a cohesive design language to support the rollout of an upcoming rebrand.
The Handshake team had built a successful platform to connect up-and-coming talent at Universities with employment opportunities, and were looking to set the stage for their next phase of growth.
Forge was asked to establish a design system that would:
To achieve this, we partnered with internal UX, engineering, and product management teams to define and design a platform-and-device-agnostic multi-brand design system consisting of style tokens, a component library, and cutting-edge Figma tooling, extensible system documentation, and synchronous and asynchronous training.
Design systems, Design Tokens, Product Strategy, UI/UX, Product Design
Platform and device-agnostic multi-brand design system, Design system guidelines and documentation, Component library, Training videos
Handshake found product market fit early and have been growing rapidly ever since. The product teams encountered common challenges while rapidly scaling their platform—new products and features were added, and eventually launch times became slower and inconsistencies in visual styles, frontend components, and the interactions across UI/UX patterns became more common.
As Handshake grew, they started to better differentiate experiences between students, universities, and employers with the latter two comprising of the “Enterprise” side of the house. The team needed a design language to unify the design and baseline UX across products and platforms.
We decided early on To enable the extensibility and flexibility needed to support multiple brands and themes. Thorough documentation is a hallmark of the team's approach, encompassing all fundamental styles alongside their corresponding design token names and values.
This comprehensive repository includes essential elements such as color primitives, semantic color usage, typography, sizing, grids, border radius, border width, spacing, shadows, and various effects. With this meticulous documentation, the team ensures clarity and consistency in their design decisions, fostering seamless and efficient design and implementation.
As Handshake prepared for an upcoming rebrand, they needed a way to support the rollout while avoiding various parts of their UIs clashing as possible. Our baseline design language needed to ensure a clean, flexible design baseline that would harmonize with the styles of the current and new brands, themes, while being malleable and flexible enough to support multiple brands and themes on the other side of the rebrand, delivering a cohesive user experience across all things Handshake.
We began testing our design system through a pilot where we vetted design style and component decisions against real user interfaces and interaction flows. This helped us stress-test the system, evaluating its performance under various conditions and edge cases. It also provided us the opportunity to elicit feedback from the Handshake design team, and the extended XFN partners, ensuring that the design system had cohesive foundation that would the lay the groundwork for its successful implementation and future evolution.
Creating precise design system documentation is crucial for any design system. Our main goal is to promote adoption and smooth collaboration with FXN partners, designers, and engineers from day one.
We want everyone involved to feel comfortable and confident using the design system, so in addition to the written design guidelines, we conducted live training sessions, as well as interactive workshops, with the product design team, and recorded a series of recorded how-to Loom videos that we embedded into the guidelines.
Additionally, using Figma widgets, we established a framework to help ensure that component statuses can be kept in sync between Jira and Figma—maintaining alignment between design and engineering.
Following the successful launch of their rebrand, the Handshake team has integrated the new brand designs into the Rosetta design system, and into their product.
In the example on the left below, you can see how the sidebar navigation is themed while working seamlessly with the base system styles and components in the page layout.
Asset attribution: Handshake marketing site
A Figma-native, platform-agnostic, and multi-brand design system to unify design for one of the fastest growing B2B tech companies and their ever-expanding customer base and suite of products.
Read more