Bridge

Design system

Established and maintained a design system, addressing the need for unified design across iOS, web, and eventually Chrome extension and marketing materials. The primary aim was to enhance brand consistency and establish a foundation for a unified design language to evolve on demand.

Design system
UI components
Product design
Animation of icons iconic elements being drawn over guidelines
Mockup of cover of Bridge brand guidelines
Mockup of Bridge brand guidelines opened to logo specifications

Process

Understanding and adapting began with diving into existing brand elements and engaging in discussions about Bridge's brand identity, especially for adapting the system to support a universal app. Leveraging that exercise, a simple guidelines document was created. This set the foundation to begin building the design system in Figma.

A connector-first philosophy steered the development of the system, crafted to empower Connectors. This approach emphasized their success and trust, ensuring every interaction was treated with care and guiding them at every step.

Impact

Streamlined execution and collaborative refinement were central to the design system's implementation, significantly enhancing project efficiency and team workflow. The introduction of the system marked a shift towards more efficient processes and collaborative efforts, highlighted by the collaborations with newly hired designers.

System evolution and lasting impact became evident as we further refined and expanded the design system into separate libraries. This evolution, incorporating Figma's latest features, demonstrated the system's adaptability and its continued relevance, ensuring its lasting utility and effectiveness.

Mockup of Bridge design system colors and examples
Mockup of phone screen showing brand colors in UI
Mockup of phone screens showing brand colors in UI
A well-structured and thoughtfully developed system
Headshot of Connor Murphy, Bridge Founder and CEO
Connor Murphy
Bridge Founder & CEO
Mockup of Bridge design system typography and examples
Mockup of phone screen showing brand typography in UI
Mockup of phone screen showing brand typography in UI
A cohesive and efficient design infrastructure to help us deliver on our startup vision
Mockup of Bridge design system buttons and examples
Mockup of Bridge design system button rows and examples
Mockup of Bridge design system inputs and examples
Mockup of Bridge design system feed items and examples