Any creative who has had a standoff with a blank piece of paper can tell you that limitlessness can hinder creativity. Someone who has experienced writer's block knows that the weight of wide-open possibilities can be crushing. In certain situations a lack of limits is actually limiting, and conversely, constraints can help kindle creativity.
Indeed, a recent summary by Harvard Business Review detailed how a healthy dose of constraints can force teammates off the path of least resistance and get them thinking more creatively. The report noted that while most managers believe that “by getting rid of rules and boundaries, creativity and innovative thinking will thrive,” research “suggests that managers can innovate better by embracing constraints.”
It’s important to note this theory has an upper limit: If constraints become too intense, creativity fizzles. An inventive challenge is healthy, but an impossible task will smother motivation. If team leaders introduce constraints in the sweet spot between a puzzle and a muzzle, it spurs innovation.
Naturally, new constraints might be met with side-eye from teams. Michael Bowser, systems design director at marketing company Vistaprint, has seen this in action. When Vistaprint introduced a new UX design system — a comprehensive catalog of rules and standards to manage design at scale — Bowser noted that team members felt the rules might stifle their creativity.
Bowser transformed resistance into motivation by inspiring and educating the team. He presented the constraints of a design system as more “tool” than “rule.” As Bowser discovered, if leaders prompt team members to embrace constraints and realize the benefits it offers their design process, everyone wins. The design is scalable, the brand is cohesive and team members don’t feel like their creativity is being smothered.
Built In Boston connected with Bowser to learn how Vistaprint tackled these cultural challenges as the company rolled out a new design system.
Vistaprint is a marketing and printing platform for businesses. The company was on Built In Boston’s 2021 list of the Best Places to Work.
In the initial planning phase, what were your key requirements for the design system? How did you determine the process for building it?
We actually began the design system creation process simply wanting to create a portfolio of reusable UI components. As these came to fruition, we realized there were opportunities to identify patterns and rituals of how these components worked together. What started as a basic simplification and streamlining exercise evolved into a strategically planned system.
Our biggest challenge was cultural. In theory, everyone wants a clear visual identity to work off of, but in practice there is a bit of a learning curve.”
What was the biggest challenge your team faced while building and implementing a design system?
Our biggest challenge was cultural. In theory, everyone wants a clear visual identity to work off of, but in practice there is a bit of a learning curve. Getting teams to recognize the value of a system as it related to their real-life, everyday decision making was difficult. Many folks feared early on it would limit their design possibilities and constrain the site UX. But there are so many benefits of a design system, from accelerating design and development to creating brand consistency for the customer. Once we could inspire and educate our teams around these benefits, we were in a good spot.
Making the difference for Vistaprint's design system:
- Design-first process via Figma
- Input from adjacent teams
- Automated testing at build time via TypeScript
- Self-service documentation site with live components
- Code in a single repository
What processes have been especially useful for keeping your design system relevant and reliable?
We focus on getting input from many adjacent teams. Also, we employ a design-first process, using a shared Figma file. We've automated testing at build time, with TypeScript for type-checking. Our UX designers visually quality check changes before we release. Our documentation site uses live components with real-world examples. The site is self-service so designers, copy editors and marketers can add or edit content. Our code allows for experimental branches, so we can test variants without needing approval to release that idea in the main branch. The code is in a single repository to make it easier for developers to contribute.
