Design System
The Archer design system was built from the ground up to establish a scalable and consistent foundation for the product experience. In collaboration with an external branding agency, the system translated brand guidelines into a cohesive, product-focused design language. Informed by research into established, large-scale design systems across the industry, it defined core components, patterns, and usage principles that balance usability and flexibility. The system was rapidly developed and implemented within a two-week timeframe, maintaining a high standard of execution despite the accelerated pace. Close collaboration with stakeholders throughout ensured alignment, incorporated feedback effectively, and supported smooth adoption across teams.
Design to development
We started the conversation early with development teams, collaborated on how the ideal design system should look like. It is experimental yet practical on having two streams of work happening simultaneously to reach our set timeline and goal.
Collaboration
The components need to be not only aesthetically pleasing and consistent, they also have to be usable to the whole team. In order to achieve that, the focus of the Figma components has always been the construction and flexibility first and documentation second.
The power of mapping
The design team started to complete a rather simple and functional white label design system, based on common practices. Then the development team had the initial UIs to build the product. Once the branding was completed, designers mapped the new design system with the white label and created a 1-1 translation to the development team to apply the branding with just a few hours of work.
Theming
With clear mapping and token logic, designers can easily create dark and light themes, which is a rare practice in online dating products yet a very powerful feature. Not only it serves a practical purpose, it also symbolizes that gay men can now live authentically loud and proud instead of hiding in the dark.
Impact
Product Snapshots
