All names and trademarks are intellectual property of Signifyd. All information pertaining to this study are my own and do not reflect the views of Signifyd.
The Challenge
Timing Is Everything Relative
When I joined Signifyd, my role was explicitly created to steerhead the company’s first design system. This effort would be in tandem with developing an API integration application that I would later lead for the business unit in the coming months.
My high-level goals were to:
• Develop a content structure for design system guidelines
• Publish guidelines for elements, components, and patterns
• Allow developers to self-serve through an online design inspector
• Create components alongside another application in development
• Collaborate with the front-end team to implement components and review for accuracy
MY ROLE
I was with Signifyd from March to October of 2019 as a product designer and led and managed the development and content creation of the company's first design system as well as became the lead designer for an application used to manage customer API integrations.
Initial concepts had already circulated with some development kicking off and it was clear that having a strategy to not impede development velocity was needed.
Additionally, I was the main point of contact for all issues related to the design system including implementation and QA of all components.
RESEARCH AND INSIGHTS
Remedying Divergent Systems
An audit was performed as part of my onboarding and provided an understanding of design choices made for past problems.
Product Surface Design Audit
2019
Customer console app
Billings app
Chargeback recovery dashboard
Chargeback recovery documentation app
Developer Tools data quality verification page
Risk evaluations page
API developer resources
Investigator dashboard
JSON viewer
Insights dashboard
Customer console dashboard
Staffing table for manual review team management
Examples of Signifyd surfaces prior to my employment that were part of my design audit. Sensitive details have been blurred out intentionally for distribution.
Following the audit, it was apparent that some areas were over-designed and sacrificed functionality. As a result, text styles and color usage were inconsistent and development needed to be streamlined. This provided me with deeper insights for the exploration, including:
Finding similarities
By understanding design problems, I can then begin to find common denominators and propose a system that is not a big departure from what was already being developed.
By understanding design problems, I can then begin to find common denominators and propose a system that is not a big departure from what was already being developed.
Simplifying typographical hierarchy
Propose font hierarchy for all applications and develop classes to be used for front-end.
Propose font hierarchy for all applications and develop classes to be used for front-end.
Using color decisively
Colors can be used more effectively by having commonly used actions assigned to them in addition to semantic use to illustrate a meaning.
Colors can be used more effectively by having commonly used actions assigned to them in addition to semantic use to illustrate a meaning.
Minimizing cognitive load
Reduce the amount of arbitrary elements in order to simplify the visual language and reduce the user’s cognitive load.
Reduce the amount of arbitrary elements in order to simplify the visual language and reduce the user’s cognitive load.
Streamlining coding framework
Development team had historically created various applications in different frameworks that needed to become aligned.
Development team had historically created various applications in different frameworks that needed to become aligned.
Building a strategy that does not impede development
Understanding scrum activities for all pods in order to plan component delivery that does not impede other processes and activities.
Understanding scrum activities for all pods in order to plan component delivery that does not impede other processes and activities.
WHY IT IS NEEDED
DESIGN SYSTEMS AS A BUSINESS VALUE
Design systems in organizations that develop multiple software applications benefit by building brand awareness, improving intuitiveness from reusable components and patterns, and increasing development velocity. But there are also direct team benefits as well.
COMMUNICATIONS COMPLEXITY
2019
Source: InVision webinar, Design Systems for People. ©Rich Rogers. Redesigned by me.
Just moving 3 developers to 4 doubles the lines of communication
-Rich Rogers
Reduces communication complexity
Design and development complexity becomes exponential with every headcount. To rely on every participant to communicate all new activities to everyone is impossible. Design systems remedy that by acting as a single source of truth.
Design and development complexity becomes exponential with every headcount. To rely on every participant to communicate all new activities to everyone is impossible. Design systems remedy that by acting as a single source of truth.
Design System Models
2019
Source: InVision webinar, Design Systems for People. ©Nathan Curtis. Redesigned by me.
Design systems are a team sport
Effective design systems evolve over time and become a multi-functional collaborative effort that allows both designers and developers alike to maintain and manage a design system as a team in order to increase alignment.
Effective design systems evolve over time and become a multi-functional collaborative effort that allows both designers and developers alike to maintain and manage a design system as a team in order to increase alignment.
DEEPER PERSONA INSIGHTS
ALIGNING TWO TEAMS WITH DIFFERING OBJECTIVES
Successful design systems are a team sport that requires the needs of both designers and developers to be met.
To serve my audience to the best of my ability, I needed to be attentive to the needs of both designers and developers to give them information that could be accessed clearly and concisely.
DESIGNER NEEDS
Updating designers of new assets
Siloed operations are common in organizations that employ pod systems. By using design systems, designers can first verify if a current asset can be used for their problem, which can reduce complexity in visual language. Otherwise, they can begin to propose a new solution in a consistent language.
Siloed operations are common in organizations that employ pod systems. By using design systems, designers can first verify if a current asset can be used for their problem, which can reduce complexity in visual language. Otherwise, they can begin to propose a new solution in a consistent language.
Leveraging existing assets
Incorporating design assets for our prototyping software to increase design velocity.
Incorporating design assets for our prototyping software to increase design velocity.
Understanding design choices
By reviewing guidelines, designers can understand the design choices in solving problems and can better understand the functional use cases behind them for their own choices.
By reviewing guidelines, designers can understand the design choices in solving problems and can better understand the functional use cases behind them for their own choices.
DEVELOPER NEEDS
Informing team members of pre-built assets
All but one front-end developer at Signifyd was a remote worker, which further siloed the organization. By informing developers of design assets and developer assets, they are better equipped to make implementation decisions.
All but one front-end developer at Signifyd was a remote worker, which further siloed the organization. By informing developers of design assets and developer assets, they are better equipped to make implementation decisions.
Reducing friction
Effective design systems become a multi-functional collaborative effort that allows both designers and developers alike to maintain and manage a design system as a team in order to increase alignment.
Simplifying coding for consuming applications
To improve workflows, coding frameworks can be improved by focusing on customizable properties an obfuscating all other code that is not pertinent for reuse.
Bridging the gap between design and development
Improving the understanding of design decisions allow for improved alignment and less disputes relating to user benefit and development investment.
The Vision
InVision-ing the End Is Enough to Put the Means in Motion
Sketch app had been the main prototyping software for the company and needed to effectively work with the platform we chose for our design system as well. InVision Enterprise was a logical choice for its long standing relationship and integration development with Sketch.
Signifyd's Design System Tech Stack
Designed by me.
The benefit of using InVision Enterprise was to leverage the data exchange with Craft, digital asset management, InVision Inspect for self-serve retrieval of specifications, web hosting for the design system's guidelines, and prototype hosting and management.
The solution
Signifyd User Interface (SIGUI)
Initially launched with the first component, the SIGUI design system continued to expand as a living document that would involve varying members from both design and development to streamline processes and increase alignment.
Designed by me.
DESIGN SYSTEM WEB MONUMENT WITH GUIDELINES
Guidelines for assets that include information such as usage, anatomy, specs, behavior, and styling.
InVision DSM component guidelines. Created and managed by me.
WEB INTERFACE DESIGN PROPERTY INSPECTOR
Intuitive interface for developers to retrieve properties without need for communication provided by InVision Inspect.
Component specifications provided by InVision Inspect. Created and managed by me.
DESIGN ASSET LIBRARY FOR SKETCH
Accessing assets directly within prototyping software in order speed up productivity via Craft.
Craft asset library managed by InVision Enterprise services. Created and managed by me.
DEVELOPER COMPONENTS LIBRARY
Component library for implemented components for reuse, which also reduces coding noise and increases development velocity by focusing on customizable fields and obfuscating unneeded code.
SIGUI components library for developers. Created and managed by lead software engineer, Geoffrey Miller. QA'd by me.
THE Framework
We All Need Structure in Our Lives
Developing a consistent content structure for our guidelines would help the varying audiences include it as part of their workflows and allow them to find pertinent information quickly.
Content outline for component guidelines. Designed by me.
My initial proposal was based around mandatory fields, but would later evolve to also have optional fields to support more specific details. For components that had multiple variations, a field for Variations and Example Use Cases was later created. And for specific usage details, a Do's and Don'ts section was added in order to maintain strictness in design, content writing, and function.
I really appreciate how Tony put his efforts in the design system and advocated around teams. As a designer, a design system is not just a tool to keep things organized and consistent, but helping allows designers to focus on the user experience and not [be distracted by whether] we use the same size across all the products.
-Yitong Gao, Product Designer, Signifyd
Closer Look
Details Create the Big Picture
Details provide intent behind the design choices and allow teammates to verify if existing components match their needs before use or to provide evidence that a new component will be required. In addition, the information also acts as an onboarding tool for both designers and developers.
DESIGN GUIDELINE EXAMPLES
Title and usage for date picker. Designed by me.
Usage and principles for cards. Designed by me.
Anatomy for tables. Designed by me.
Behavior for tables. Designed by me.
Best practices for dropdowns. Designed by me.
Styling for modals. Designed by me.
Typography example. Designed by me.
Variations for callouts. Designed by me.
Specs for tables. Designed by me.
Guidelines for colors. Designed by me.
Guidelines for text styles. Designed by me.
Guidelines for iconography. Designed by me.
Examples of guideline documentation. Created and managed by me.
The look and feel was proposed with the intent to be subtle in order to keep the audience focused on the content and supporting imagery. Because we had multiple surfaces for varying information, it was also important to link details when and wherever possible in order to assist users with varying entry points.
Coding Framework
Optimizing Code Inefficiencies
When I began QA’ing components for design consistency, I observed many coding inefficient practices. The development often considered every component as a one-off and would take existing code and overwrite it for their needs. This problem would be exponential as it would pass from one developer to another.
Example code inspection prior to implementation of the design system that contains commonly found overwritten code.
An example of previous coding practices in which 60% of the code was overwritten for another need.
Impact of code volume for use in consuming apps. Metric provided by lead software engineer, Geoffrey Miller. Image designed by me.
[The system] promotes design consistency that helps both teams maximize time for collaboration.
-Geoffrey Miller, Lead Software Engineer, Signifyd
Optimizing the code structures reduced code volume by more than 10-fold on average; thereby increasing development workflows.
Example of final code in SIGUI component library. The coding framework has been shortened for quick and easily managed reuse.
An example of the coding framework for the developer’s components library that focuses on custom properties, which are the main fields that will be changed in reuse and maintain consistency.
Retroactive
Unblocking Progress
The initial launch was overall successful, but proved to be challenging to continue in the same methodology due to rising demands to increase productivity. Additionally, I wanted to have recurring retrospectives with all audience members to further improve the content and organization.
Example of condensed documentation as part of the design system retroactive analysis. Created and managed by me.
In order to speed up content creation, we needed to cull the depth of information to deliver quicker. Having more visual information in supporting images also was preferred by both designers and developers. This allowed me to speed up content creation by 75% and allowed developers to stay more focused on specific details.
Stretch Goal
LIVE COMPONENTS WITH STORYBOOK INTEGRATION
Several months following the initial launch of our design system, InVision announced support for integrations with the Storybook framework, which would allow our design guidelines to merge with our developer components library.
Animation of the power and flexibility of InVision DSM live components. ©InVision Support.
Similar to our existing developer components library, Storybook integration also allows developers to focus only on custom fields that matter. However, the interface is much more intuitive and user-friendly and allows for increased alignment by enforcing management practices of two team in one surface.
KEY TAKEAWAYS
Systems Are Meant to Be Broken To Evolve
Despite not being my first involvement in a design system, the process of working closely with the development team has taught me that design systems:
EVOLVE AS LIVING DOCUMENTS
SHOULD BE STRICT TO MAINTAIN CONSISTENCY, BUT FLEXIBLE TO ADAPT TO NEWER, COMPLEX CHALLENGES
REQUIRE RECURRING RETROACTIVES TO ADDRESS ISSUES AND FOSTER ENGAGEMENT AND ALIGNMENT
We’ve been talking about having design guidelines and a design system since I joined the company 3+ years ago. Tony and the rest of the design team has done a tremendous job in defining and publishing our [design system]. This gives us tremendous scale as we add more apps and unique experiences to our surfaces. I’ve noticed that the engineering team has far less questions during scrum regarding requirements so we’re shipping things faster while also ensuring consistency. We aren’t wasting precious cycles building one-off things. This is going to pay massive dividends for years to come.
-Chris Morris, Group Product Manager, Signifyd