Design Systems, for fast and furious product development
Project: Pattern Lab/Atomic Design/Design Systems
Role: Principal UX Designer
What were we trying to solve?
Designers/Engineers/Product managers, would like a way to confidently Design/Build/Manage a product with brand integrity, consistent UI interactions and User flows, and can be measured by quality, effectiveness, and efficiency.
Defining the experience
Who will be affected?
1, User - Those who use pattern lab to design or develop products (Designer or Engineer)
2. Builder - Those who design and develop patterns to be consumed in Pattern Lab (Designer or Engineer)
3. Stakeholders - Those who will be influenced by style guide (Project Leads, Department Heads or CEOs)
What are the users needs?
Efficiency - Users would like a way to re use patterns and code on projects with common solutions to speed up efficiency and increase quality
Confidence - Users would like to feel confident knowing how and where to use patterns and code, using the documentation from the site. And all information is accurate
Accuracy - Users would like to rely on Patttern Lab for the most up to date designs and code
User friendly - Users would like easily navigate through the Pattern Lab site to consume content they can use in their day to day product development duties.
What is the product value?
Strong Brand - Design principles are applied to the form and function of each pattern and component to make sure brand integrity is maintained amongst our products and projects
Excellent User Experience- The purpose of pattern lab is to encourage consistency and reusability. Users will start to identify similar behaviors within their tasks and will move through the app with ease
Decrease Cost - Reusing patterns and components will require less $$ and resources on common design and development challenges
Increase Innovation - We can use less resources on common design challenges and channel our $$ on projects that may have unique problems to solve
Maintain Quality - Design and code have been previously used, thought-out and measured on performance.
What's it gonna look like?
Before I started the redesign process, I made sure that I did the necessary research to uncover pain points surrounding the current design of the pattern library, patterns, processes of building a pattern & consuming them, as well as research on competitors with design systems. This was achieved from the following methods:
1. Heuristic evaluation of current pattern library, processes, and usage
2. Competitive analysis
3. Interview users on common pain points, needs, and wishes
4. Synthesize results to identify: product goals, principles, & requirements
5. Design a vision and concept to establish product direction
6. Design interface and central repository for patterns
7. Design a process that allows designers to document a detailed description of what, when and where a pattern is used
Below are a few of the documents and designs I created as a result of the above list. Check out the live version in full use. BC Pattern Lab
Grow & Nurture
Throughout the process of redesigning, we had small in-house interviews and surveys which continued well after the release of the redesign. Our Pattern Lab team communicated weekly on new and updated patterns with the intent of extending this knowledge to their cross functional teams. One of the key aspects in developing any kind of product is to grow and nurture it so we evolve and change in lock step to our customers' needs. This can only possible by having honest and collaborative discussions in a safe, supportive, and productive environment.
The things that get in the way...
Pattern lab at BigCommerce was not a direct revenue project therefore it got little to no attention and support. But as I went through the interviews with the users, we uncovered how important it was for our teams in their day to day responsibilities. I pitched the importance of this tool to the Chief Product Officer and he was supportive in investing time and a resource (me) on the product. But with lack of resources in Engineering it was difficult to depend on them to help execute and commit to our release strategy. We as the Pattern Lab team continued to innovate and evangelize the value of Pattern Lab, but depending on the Engineers to align on platforms and versions proved to be difficult because of all the technical risks. Therefore most teams deprioritized Pattern Lab integration and upgrades because they did not have the resources or time to fix bugs and refactor code and favored an old but stable environment. But continuing to nurture legacy environments prevents the new innovative products from living on the platform. This became a conundrum with many of our roadmaps.
BigCommerce soon went through an attrition which lessened the amount of Engineers and in the end the reorg eliminated the projects focused on infrastructure. Instead leadership focused resources on projects with direct revenue, high profile and priority on the roadmap.
Pattern Lab is still used today. But the pattern designs have halted because no engineers are available to execute the changes and maintain quality.
What did I do to help?
I redesigned Pattern Lab to meet the needs of our users so it can be consumed not by just Engineers but by everyone. I developed work sessions and extensive interviews from all the users to come up with a system that works well for all. And I had alot of great feedback! I also mentored and maintained hygiene on the interaction documentation by training the designers to develop discipline in quality information and designs. So my efforts extended beyond creating a functional site but to also set up processes on designing and documenting interaction behaviors and usages of patterns with quality documentation. I also helped with deprecating patterns within our products and updating them with new patterns. This was something tedious and exhausting but necessary to make room for a better system.
But my passion for this project comes from the empathy to the designers and engineers who are blocked by haphazard designs and messy code. One of the greatest values of design systems is to ensure quality control for both code and design. But also to stream line work flow and product development so we can work on more complex problems and channel our energies on finding innovative design solutions.