Pantheon Design System
Documentation-first approach to its design system led to a more consistent, efficient, and collaborative environment, reducing ambiguity and streamlining design and development processes for superior user experiences.
Situation
Pantheon.io, a leading web operations platform, faced challenges in maintaining consistency and efficiency across its expanding suite of products. As the organization grew, inconsistencies in branding and user experience became more pronounced. To address these issues, Pantheon.io adopted a documentation-first approach to develop a robust design system that would unify its design language, streamline processes, and foster better collaboration between designers and developers. My role was to lead this initiative, ensuring that the design system not only met immediate needs but was also scalable for future growth.
Role
Design System Designer
Tools
Governance, Documentation, Components, Figma, FigJam, Adobe Creative Suite, Storybook, Drupal Website
Industry - Software Development
Model - Saas
Task
The key objectives of this initiative were:
Promote Consistency: Establish a uniform design language across all products to maintain brand integrity and provide a cohesive user experience.
Improve Efficiency: Streamline design and development processes to reduce time-to-market and improve overall productivity.
Enhance Collaboration: Foster a collaborative environment where designers and developers could work together seamlessly, minimizing friction and misunderstandings.
Reduce Ambiguity: Create comprehensive documentation to ensure all team members had a clear understanding of design principles and guidelines, reducing errors and confusion.
Action
To address the challenges and meet the objectives, I took the following actions:
Documentation-First Approach: I prioritized the creation of comprehensive documentation that served as the foundation for the design system. This documentation included detailed guidelines, components, and patterns that were continuously refined to meet evolving needs. By establishing this documentation early on, we ensured that all team members had a clear reference point, reducing ambiguity and enhancing consistency across all projects.
Training Programs: I organized and conducted training sessions and workshops to familiarize designers and developers with the new design system. Tools like Figma and Storybook were integral to this process, and the training ensured that all team members were proficient in using these platforms effectively. This initiative was crucial in ensuring that the design system was adopted smoothly across the organization. View Training
Collaboration Tools: I integrated the design system into platforms like Storybook, making reusable components easily accessible to all team members. This integration allowed for real-time collaboration, where designers and developers could work together seamlessly, accessing and implementing the design system components directly within their workflow.
Consistent Communication: I established regular communication channels and feedback loops to ensure ongoing collaboration and continuous improvement of the design system. This allowed us to address any issues promptly and refine the system based on real-time input from the team.
Resource Allocation: Recognizing the need for ongoing support, I dedicated a team specifically to maintain and update the design system. This team was responsible for ensuring that the system evolved with the company’s growth, incorporating new components and guidelines as needed to keep the design system relevant and effective.
Grid
What is a Grid: Grids provide foundational guidelines for the layout of visual elements, aiding readability and consistency by creating seamless visual hierarchies and establishing horizontal positioning within a layout. They offer structure across devices and mediums.
The Pantheon.io Grid: The Pantheon Design System (PDS) grid adapts based on its width, utilizing a fixed number of columns at different breakpoints to maintain flexibility while minimizing excessive variation.
Fluid Columns: The width of the columns and the gutter/gap are fluid and vary in calculated width based on the overall width of the grid itself. At its largest, the grid is made up of 12 columns for wider displays, which is considered the logical endpoint for layout enhancements. The grid starts with the smallest, 4-column, grid for mobile displays, then scales to 6 or 12 columns for larger screens.
Typography
Typography in the Pantheon Design System is used to create clear hierarchies and streamline information organization, guiding users through their experiences.
The Scale: Mathematical typographic scales ensure consistent hierarchy and information organization. The core heading levels and body copy sizes are outlined for each context and scale within the system.
Market vs Product: Marketing values use a 1.25 scale (Major Third), while product values use a 1.2 scale (Minor Third).
Spacing
After setting up a grid and type scale, we developed a fluid space scale essential for component design.
Spatial System: This system ensures functional layouts with consistent spacing, setting rules for measuring, sizing, and spacing UI elements to promote consistency and effective communication.
@Min to @Max: We calculated and tested fluid spacing for both @min and @max viewports. Using a 1.25 scale (Major Third), 1rem equals 16px for the min viewport and 24px for the max viewport.
Tip - Marketing vs Product Spacing: Marketing uses larger spacing for an airy feel, while product spacing is more compact and cozy.
Training
As a lead design system designer, I offered diverse training to help designers effectively use the design system, including onboarding, tool training, workshops, documentation, and ongoing support. My goal was to ensure that all designers were set up for success.
Key Areas:
Product Design Toolkit: Self-paced exploration of Figma, leveraging existing components.
Components: Linking to the DS Product Toolkit, grid, variants, auto layouts, spacers, tables, and governance.
Figma Tips and Tricks: Enhance efficiency and mastery of design tools.
Result
The implementation of Pantheon.io’s design system led to significant improvements:
Consistency and Brand Integrity: The uniform design language we established across all products maintained brand integrity and provided a cohesive user experience, regardless of the product or platform.
Improved Efficiency: By streamlining the design and development processes, we reduced the time-to-market for new products and features. The clarity provided by the documentation-first approach allowed teams to work more efficiently, with fewer misunderstandings and errors.
Enhanced Collaboration: The integration of the design system into collaboration tools like Storybook, combined with regular communication and training, fostered a more collaborative environment. Designers and developers were able to work together more effectively, leading to higher-quality outputs.
Reduced Ambiguity: The comprehensive documentation reduced ambiguity and confusion, allowing teams to focus more on creativity and innovation rather than deciphering guidelines. This not only improved the overall quality of deliverables but also encouraged innovation by freeing up time and resources.
Scalability: The design system was built with scalability in mind, ensuring that it could grow with Pantheon.io as the company expanded. The dedicated team responsible for maintaining and updating the system ensured that it remained relevant and effective over time.
Conclusion
Reflecting on the journey of implementing the documentation-first design system at Pantheon.io, I am proud of the tangible improvements we achieved. The enhanced efficiency and consistency not only streamlined our processes but also fostered a more collaborative and innovative environment. By prioritizing documentation, we built a robust foundation that will continue to support Pantheon.io's growth and success. This experience underscored the value of meticulous planning and the power of a well-implemented design system in driving organizational excellence.