top of page
Design system
Salesloft
Overview
Salesloft's comprehensive repository of design guidelines, components, and patterns that ensure consistency and efficiency across the product
Team
Contributions:
-
Setting team principles
-
Accessibility guidelines/standards
-
Weekly meetings/syncs
-
Working closely with Design System devs
-
Public doc-site
-
Maintaining Figma component library
-
Figma file library organization and standards
Innovation
Styles library
The Salesloft design system solidifies a styles library that encompassed the company's visual identity and aesthetic consistency across the product. By providing a single source of truth for visual elements, our styles library helps our designers and developers maintain brand integrity and streamlines the end-to-end development process.
Colors
Typography
Elevation
Iconography (Library partially shown)
Component library
Along with our styles library, the design system team created a well-curated and thorough component library that serves as the backbone of a design system, enabling the design team to work quickly, efficiently and easily when creating solutions. This file is shared across the entire organization and is maintained in parallel to our public doc site/internal Rhapsody component library. The screenshots shown below cover 1/3 of the entire component library.
Chips
Data visualization
Call-out cards
Row card component
Motion
I collaborated with our motion designer to introduce engaging animations and transitions into our design system, aiming to enhance user experience and bring delight to interactions.
Copywriting
Our team worked with a contract copywriter on standardizing platform writing and ensuring accessible content.
Maintenance
Along with innovating, maintaining a design system is crucial for product design teams because it ensures consistency, efficiency, and scalability in the design process. Our design system team was responsible for maintaining a robust design system to accelerate the design and development process, allowing teams to focus on innovation and problem-solving rather than reinventing the wheel.
Auditing
Our team regularly audits the platform to document what's in production and to ensure that patterns are up to par. We also run audits when innovating to identify opportunity areas/which components to focus on next.
Prioritizing
Since we don't have a formal project manager on our team, we prioritize components based on customer support tickets, user feedback, and internal team input.
We attend team design reviews to note any issues or requests for updates to specific components, and use Trello to manage our backlog, ongoing, and completed tasks.
Team Figma library
The design system team also works on internal initiatives, such as standardizing Figma file covers to ensure projects are easily identifiable and accessible and organizing the team Figma library effectively.
Updating colors with brand evolution
Salesloft has gone through multiple brand updates. I collaborated with our senior visual designer on exploring and auditing updates to align the design system with marketing and brand changes.
Illustration color tests
Impact
On the product
Increase workflow efficiency
-
Tokenizing components
-
Cleaning up shared libraries
-
Setting clear guidelines around component usage
Solidify product identity
As Salesloft matures as a product and company, solidifying the design system enhances its identity by ensuring consistency and coherence across visual and interactive elements.
Ensure product scalability
A strong design system ensures product scalability by standardizing components and guidelines, facilitating efficient development and adaptation as the product matures and evolves.
On the team
For designers
-
A collaborative, creative and vibrant space to do what designers do best--the team worked hard in curating and prioritizing components to focus on. I learned a lot from all of our extremely talented teammates.
-
Clearer Figma workflow, files, standards
-
Designers feel like they have more authority to make informed and best decisions.
For engineers
-
Cohesive component library
-
Upgraded component library to be more flexible and easy to maintain
-
More visibility into design team
For PMs
-
Reliability of product efficiency and experience to keep customers happy
-
Reliability on designers to make informed, strategic decisions for product interface
-
Scope features and timeline to consider design priorities
Dev hand-off for header component
Reflection
-
Internal team health is crucial for product health and output to customers.
-
Maintenance is just as important as innovation, making sure the foundation is solid enough to build upon.
-
Thinking systematically is really fun and challenging.
-
Product and design cohesiveness is crucial for a polished, trustworthy and professional product tool.
bottom of page