Bigtincan Design System
A design system to support efficient and robust product design and
development of the Bigtincan platform.
The work showcased on this page is the result of collaborative effort shared among Bigtincan’s Design System Team:
Katie Schmitt, Lead Designer
Drew Mitstifer, Program Manager
Chris Keramidas, Product Designer
Adriana Gunczler, Product Designer
Bigtincan’s fast growth as a sales enablement platform means it is
constantly leveling up its capabilities. As far as features go, Bigtincan’s platform includes an
AI-powered sales coaching suite, a sophisticated learning platform, a presentation editor, and a video
meeting service — and that’s only the tip of Bigtincan’s sales enablement iceberg. Bigtincan needs a
design system to allow them to build high quality products efficiently and quickly.
The huge variety of products and features at play means there is not a prefab design system that satisfies all the product design and development needs of the company. A custom design system is necessary to help ensure good, consistent user experience, efficient product design and development cycles, and positive brand perception.
The huge variety of products and features at play means there is not a prefab design system that satisfies all the product design and development needs of the company. A custom design system is necessary to help ensure good, consistent user experience, efficient product design and development cycles, and positive brand perception.
Guiding Principles
The design system must be accessible.
The Bigtincan Design System conforms to Web Content Accessibility Guidelines 2.1, which serves as a set of guiding principles to help ensure a positive, universal user experience.
The Bigtincan Design System conforms to Web Content Accessibility Guidelines 2.1, which serves as a set of guiding principles to help ensure a positive, universal user experience.
The design system must be multilingual.
All components in the Bigtincan Design System are built with internationalization in mind, including support for both LtR and RtL languages, and various date and number formats.
All components in the Bigtincan Design System are built with internationalization in mind, including support for both LtR and RtL languages, and various date and number formats.
The design system must be customizable.
Bigtincan’s customers are businesses with visual brands of their own. The Bigtincan Design System allows for customizability by not only designers and developers who build products, but also the end users who want to tailor a product to their brand. It does all this while still being visually consistent, recognizable, and accessible.
Bigtincan’s customers are businesses with visual brands of their own. The Bigtincan Design System allows for customizability by not only designers and developers who build products, but also the end users who want to tailor a product to their brand. It does all this while still being visually consistent, recognizable, and accessible.
The design system must be communicative.
Expanding the Design System past visual design, we realize the importance of consistency and clarity in communication and content, thus leading a product-wide effort to create accessibile messaging and content guidance that all team members (not just designers and developers) pull from.
Expanding the Design System past visual design, we realize the importance of consistency and clarity in communication and content, thus leading a product-wide effort to create accessibile messaging and content guidance that all team members (not just designers and developers) pull from.
Foundations
Contains styles for color, typography, corner radius, spacing, elevation, and iconographyA useful design system has a strong foundation of primitive tokens, that can support the growth and change of the design system as a whole. The Bigtincan Design System’s Foundations Library contains these tokens and variables.
As for color — the Design System leverages existing color values from Google’s Material Design language, as well as custom colors to support the Bigtincan platform. The Design System utilizes a custom Tint color, which is used throughout the platform and is customized by end users. We build this customizability on the most basic, foundational levels because it allows users to customize the entire look and feel of the platform with ease.
Foundations also includes a robust library of custom icons, glyphs, and illustrations (along with many other variables and tokens), all of which help make up the unique design language of Bigtincan.
Component Library
Contains all the components needed to build products with the Bigtincan Design SystemThe centerpiece of a design system is a component library. Bigtincan Design System’s component library includes over 50 custom components, which are all scalable and customizable to fit the huge variety of use cases at Bigtincan. These components are super flexible, and allow us to add new capabilities when necessary, if design or dev needs arise.
These components all make use of the tokens defined in Foundations. Components use customizable Tint colors broadly and often, which makes it easy for users to customize their platform experience with a single click.
Pattern Library
Library containing common UI and UX patternsSince the Bigtincan product library is so broad, having repeatable design patterns is integral to efficient work and maintaining consistency across features. Our design patterns include platform navigation, empty states, error messages and screens, filters, and toolbars, to name a few. These patterns are widely used and documented, and are a huge help for designers, developers, and end users.
Documentation
Guidelines for component usage and in-product communicationComponents aren’t all that effective when nobody knows how to use them. An integral part of the Design System is documentation. We tailor documentation to our core users — the product designers and developers who use the Design System to build products and features. Included in component documentation are general design guidelines around layout, usage, best practices, accessibility, and consistency, as well as guidelines specifically relevant to developers, such as component anatomy, measurements, spacing, and variables.
The Design System’s documentation also includes robust guidelines for in-product communication and messaging, including guidance around voice and tone, grammar and mechanics, error messaging, and a glossary of terms, with each entry containing concise usage guidance, definitions, and associated words or iconography.
Process
Internal components and templates for designersComplementary to the Design System, we maintain internal components for use in product design, such as product templates, component status cards, frame headers and labels, and comment cards for design QA use. The product templates are particularly flexible, featuring a main content area with selectable widths and overflow behaviors, modular left and right panels, and a customizable top bar, header, and footer.
Outcomes
The Bigtincan Design System has had a measurable positive impact on the company. To list a few benefits:35% increase in design productivity 1
compared to projects that do
not use the Design System
30% increase
in development productivity 1
compared to projects that do
not use the Design System
Projected
savings of $96,000/year for design and $240,000/year for each development
framework 2
React and
Angular frameworks
In addition, the Design System has brought many quality of life
improvements, such as reduced design and tech debt, positive brand perception and user experience (which
helps with customer retention and cross-selling), improved team happiness, and faster time to market for
products and features.
We’ve received positive feedback from not only our internal folks who help build products, but also end users who notice the refined user experience and ease of use of the platform. The Bigtincan Design System has allowed teams on opposite sides of the world, and in different frameworks (we maintain separate Angular and React implementations of the Design System), to build great products together.
We’ve received positive feedback from not only our internal folks who help build products, but also end users who notice the refined user experience and ease of use of the platform. The Bigtincan Design System has allowed teams on opposite sides of the world, and in different frameworks (we maintain separate Angular and React implementations of the Design System), to build great products together.
1
Productivity gains are based on survey information from individual designers and developers at
Bigtincan and actual completion time for Jira tickets. This information is checked against
general industry findings.
2 Savings are based on average salary of team members and estimated productivity gain for each respective team. Savings also factor in resource and infrastructure cost of the Design System.
2 Savings are based on average salary of team members and estimated productivity gain for each respective team. Savings also factor in resource and infrastructure cost of the Design System.
More reading: