Design System
Defining Signifyd’s first design system to increase developmental velocity and design consistency.
As Signifyd surged in the fraud detection industry, the need for a robust design system became evident to keep pace with rapid development and market demands. This initiative aimed to streamline processes, ensure consistency, and fuel the company's growth trajectory.
Various representations of the look and feel prior to having an official design system:
Understanding Stakeholder Needs
Amid Signifyd's rapid growth in 2019, streamlining product development processes became imperative. Our objective was to extend early design concepts into the company's first design system. Through stakeholder interviews, we deciphered the unique needs of designers and developers:
Designers sought seamless access to design assets and clear guidelines to fuel creativity
Developers required a repository of pre-built components and comprehensive instructions to streamline their workflow. Armed with these insights, our journey toward crafting a unified design solution began, poised to empower both teams for success
Identifying Challenges for Strategic Solutions
To identify usability issues, we initiated a heuristic evaluation. This pinpointed existing problems for the new design system to address. Shadowing the fraud team provided valuable insights into their pain points with the existing solution. Additionally, a design audit assessed the fragmented state of our current design system, guiding our consolidation and evolution efforts. These steps laid the groundwork for a cohesive design system to enhance development efficiency and user experience.
Overcoming scattered design practices, the Signifyd UI design system, or Sigui for short, emerged as our unified solution, offering clear guidelines and reusable components. Through prototyping and collaboration, we crafted more than just a tool—it became our product development backbone.
Various examples of the Signifyd Design System:
Design Guidelines
We developed our design guidelines using InVision DSM, a CMS for design systems that integrates seamlessly with Sketch, our preferred prototyping tool. This solution enabled us to quickly establish and maintain a consistent design language.
We created a clear content structure to help different audiences integrate the guidelines into their workflows and find information quickly. Initially, we mandated certain fields, later adding optional ones for specific details. For components with multiple variations, we included fields for Variations and Example Use Cases. Additionally, we introduced a Do's and Don'ts section for specific usage guidelines.
Our guidelines explain design choices, helping team members ensure existing components meet their needs or identify when new ones are necessary. This also serves as an onboarding tool for designers and developers. The design is subtle, focusing on content and supporting imagery, with linked details to accommodate various user entry points.
However, we quickly discovered that newer projects required us to pivot and develop less content upfront. This approach allows us to continue evolving components to meet near-term needs and provide a path forward.
Designers can get assets from a living document using InVision Craft
Developers have an intuitive tool to gain specs at-a-glance with InVision Inspect
Sketch Integrations
InVision provided Craft, a Sketch plug-in integrating design system elements between InVision DSM and Sketch, and Inspect, which gives developers access to detailed CSS code and specs.
These turnkey solutions fit seamlessly into Signifyd’s Sketch-specific development environment, a critical factor in my decision. Craft and Inspect streamlined our workflow, enhancing designer-developer collaboration and ensuring consistent and accurate design system implementation across the product.
Example of coding inefficiencies (overwritten code) prior to effort
Example of typical code structure for design system components after this effort
Components Library for Developers
Early in my discovery phase, I found that reused and ad-hoc altered components led to inefficiencies, with over half the code often overwritten, making the codebase hard to maintain and understand. To address this, I collaborated with our tech lead to QA components from the Signifyd developers library, ensuring alignment and fostering collaborative design and development.
After refining the components library, the impact was immediate. Developers, previously needing to review 350 lines of code to modify components, now deal with only 10-30 lines, thanks to stricter usage guidelines. This significantly enhanced efficiency and streamlined the development process.
Average code structure that developers reviewed before our effort
Average amount of code developers reviewed with our design system
Measuring Success
SIGUI significantly accelerated product development speed, reduced coding inefficiencies by up to 60%, and ensured a consistent user experience across all products. The release of 18 components with comprehensive guidelines marked a significant milestone. Despite project challenges, it was immensely rewarding to contribute to the team's support and observe rapid understanding of component usage among new team members.
