Picnic, Our Design System

Learn how Attentive’s design system empowers our team to build products that delight our customers.

Design systems are the foundation of modern digital experiences. They are a set of standards to manage designs at scale, which can streamline workflows, save time, and ensure a consistent user experience across different pages and channels. Picnic is Attentive’s very own design system, inspired by giants like Google, IBM, and Apple.

Meet Picnic

Picnic serves as the shared language between Designers and Engineers building products at Attentive. It offers a robust set of UI components, reusable patterns, and associated guidelines and documentation.

The benefits of using a shared language like a design system are:

• Consistency & Efficiency: Streamline workflows, save time, and ensure a consistent user experience.
• Scalability & Flexibility: Scale designs effortlessly, accommodate evolving needs, and maintain brand integrity.
• Collaboration & Communication: Promote cross-functional collaboration, create a shared vocabulary, and facilitate communication.

Picnic balances brand expression, product needs, and accessibility. 

• Brand Expression: Ensures our product is rooted in—and is an expression of—our brand.
• Product Needs: Enables Product teams to handle a range of problems effectively.
• Accessibility Standards: Build with WCAG 2.1 (AA) guidelines, inclusive design principles, and usability best practices in mind.

Why the name “Picnic?”

We chose the name Picnic because, like at a real-life picnic where people bring multiple foods, drinks, and items together to create a satisfying, delightful, and delicious experience, our design system must do the same for our Designers, Engineers, and users.

How Picnic Lives & Evolves

There are two important parts of any design system: the component libraries, and the people who manage it all:

A Tale of Two Component Libraries

Picnic consists of two component libraries:

1. A Figma component library for Product Designers
2. A React component library for Engineers using Storybook

Each component library is as much of a 1:1 reflection of the other as we can do! While the codebase and the Figma files have different structures to organize our Picnic components, we use the same names for the UI components to avoid confusion. 

For designers, our Figma files are divided into separate content areas. Assets & Documentation house the foundational parts of our design system: the tokens (fonts, colors, elevations, motion), global UI components, and instructions on how to use these components. Team Component Libraries house the patterns (page layouts, forms, flows) that use foundational UI components to help Product Designers efficiently produce and iterate on design projects for specific areas, such as Reporting & Analytics, Campaigns, and AI. Dev Mode allows developers to inspect UI components and easily grab specifications to build into live code.

For engineering, GitHub serves as the main source to review and approve design-related changes to frontend code with your design counterparts. We house all UI components in our UI Docs site, which is built with Storybook, a frontend workshop for viewing UI components in isolation. 

The People of Picnic

A cohort of Product Designers, Frontend and Backend Engineers make up the governing body of our design system. Collaboration about Picnic happens virtually in Slack and regular Zoom meetings. Here’s how we work together:

• Picnic Steering: A formal bi-weekly meeting with UI Platform Engineers and Product Design stakeholders to discuss anything and everything about maintaining, updating, and evolving our design system. 
• Picnic Party: An informal weekly meeting for all Picnic enthusiasts to discuss design system-related issues, questions, feedback, and gather critiques of their product design work.

How Picnic Evolves

Like anything in life, change is inevitable. The same applies to our design system. It’s important to keep evolving Picnic as we continue to innovate our products. However, we need to be mindful of changes that impact all the consumers of Picnic, so we follow a few guidelines. 

1. Follow the Rule of Three. If a new component has applicable use in at least three other instances outside its current use case, it can be considered for graduation to Picnic. Sometimes, a unique alteration of a Picnic component lives in a Team-Specific Library for a duration of time before it can be used elsewhere in the product.
2. Involve your Picnic peers. Collaborate closely with designers, engineers, and project stakeholders to ensure the design system meets everyone's needs. Ask yourselves: are we doing the best we can to ensure that this system is meeting the needs of ourselves and our users?
3. Iterate and improve. Proactively and continuously iterate and improve the design system based on user feedback and evolving design trends.

Let’s Picnic!

Design systems aren’t stagnant component libraries that are solely used by designers in their product design workflows. They live, change, and adapt over time. When implemented across teams and departments, they contribute to a culture where innovation and excellence in design, engineering, and product thrive. 

We hope to have inspired you to start dreaming about how a design system can benefit you, your teams, and your organization!

Interested in joining our Picnic? Attentive is hiring! Check out our open roles to come innovate with us.