Design System Process Revamp
Codecademy
Context
Gamut, Codecademy's design system, has been a cornerstone of the product since its early days. Over the years, the team model supporting Gamut has evolved, fluctuating between a dedicated team, a part-time team relying heavily on contributions, and now, a small but dedicated team consisting of one designer and two engineers. This current structure brings renewed focus and ownership to the system, addressing long-standing scalability, collaboration, and decision-making challenges within the design and engineering teams.
Pain Points
Implementation Delays and Efficiency Gaps
Delayed Identification: Updates needed for Gamut were often recognized too late in the process, leading to brittle, ad-hoc solutions.
Challenges in Scaling: A tendency to create new components rather than improve existing ones increased complexity, impacting the scalability and usability of Gamut.
Communication and Collaboration Barriers
Hesitation in Early Sharing: Designers were reluctant to share early concepts in larger forums, opting for private consultations, which limited open collaboration.
Siloed Discussions: Proposals were rarely reviewed collectively, resulting in incomplete feedback and a lack of understanding about the proposal’s broader impact.
Transparency and Workflow Issues
Lack of Transparent Decisions: Gamut decision-making and prioritization were unclear, leaving the team without a solid understanding of how proposals were evaluated.
Inconsistent Proposal Management: The proposal process was inconsistent, with vague next steps, which created workflow inefficiencies and reduced transparency in decision-making.
Goal
Streamline the proposal process, foster open communication within the design team, and provide a structured environment for enhancing and scaling our design system. Additionally, ensure transparency and consistency in decision-making.
Process
User feedback survey
Problem discovery and definition
Process proposal
Stakeholder feedback
Iteration
Prioritization framework development
Workshop facilitation
My Role
Product design
System design
Workshop facilitation
User research
Tools
Microsoft forms
Figjam
Notion
Jira
The Solution (part 1): Gamut Proposal Crit
We implemented a "Gamut Proposal Crit" to streamline the proposal process, foster open communication within the design team, and create a structured environment for enhancing our design system. This initiative addressed previous limitations by providing a comfortable, focused setting for designers to share early ideas and receive constructive feedback from peers, replacing the less structured approach of posting in a company-wide Slack channel or attending optional office hours.
By establishing this regular forum, the team prioritizes refining existing components over adding new ones, ensuring the system’s evolution remains both strategic and inclusive.
Regularly Scheduled Critiques
Strategic Timing: Scheduled twice per shape-up cycle, ensuring a Gamut Crit session early in each cycle to capture timely feedback.
Comfortable Setting: Limited to the design team and two engineers, fostering a space where designers feel comfortable sharing early-stage ideas.
Required Participation: Ensures all key stakeholders are present, reducing siloed conversations and supporting unified decision-making.
Accessible History: Maintains an ongoing FigJam board for pitches and decisions, making it easy for designers to refer back to past critiques and earlier decisions.
Template-Driven Proposals
Targeted Templates: Includes templates specific to four types of contributions—updating a component, adding a variant, adding a property, and creating a new component—helping designers match proposals to the correct type.
Guidance and Examples: Each template provides clear definitions and examples, enabling designers to make informed choices, often leading to modifications of existing components rather than creating new ones.
Streamlined Contribution Process: Sets clear expectations for required information, making it easy and efficient for designers to contribute.
Reference Section: Incorporates a section for references from other design systems, encouraging designers to draw from best practices across the industry.
Decision Clarity and Action Plan
Decision Reached in Each Session: A final yes or no decision is made by the end of each critique, providing immediate clarity on proposal status.
Consensus-Driven: Aims for consensus, with me as the final decision-maker, ensuring all perspectives are heard and each session concludes with a definitive outcome.
Consistent Next Steps: Establishes a standard set of next steps based on the decision, maintaining a predictable and efficient workflow for each proposal.
Defined Interim Solutions: When proposals are accepted, the "now" solution is outlined during the crit to allow feature teams to proceed without implementing brittle or unapproved workarounds while awaiting the final design system update.
The Solution (part 2): Gamut Prioritization Framework
We developed the TRUE prioritization framework to introduce data-driven, balanced decision-making into our backlog, enabling the team to focus on high-impact initiatives. By scoring proposals based on Team Efficiency, Reach, and User Impact, divided by Effort, TRUE provides a transparent, objective method for assessing and prioritizing work. This framework ensures fairness and consistency, with each score based on measurable criteria rather than subjective input, fostering confidence in our prioritization process.
(Team Efficiency * User Impact * Reach) / Effort
Enhanced Team Efficiency
Prioritization of High-Impact Projects: By evaluating team efficiency based on engineering, design, and squad reuse, TRUE prioritizes projects that provide significant time and cost savings.
Balanced Resource Allocation: Averaging efficiency scores across disciplines helps balance team needs, ensuring that both design and engineering resources are optimally allocated.
Streamlined Multi-Squad Workflows: This approach surfaces initiatives that streamline workflows across multiple squads, bringing higher-impact projects to the forefront.
Maximized Reach
Comprehensive Impact Assessment: TRUE’s reach score evaluates the extent of a component’s impact, factoring in how widely it will be encountered across the product and the number of product areas it will affect.
Prioritizing Broad Use: By prioritizing components with higher reach, TRUE ensures that improvements are targeted to areas with the greatest potential for cross-product influence.
Prioritized User Impact
Focus on Usability Improvements: The user impact score directly addresses usability needs, such as fixing accessibility issues or simplifying confusing elements, ensuring that high-impact user needs are prioritized.
User-Centered Design Focus: Combined with the reach score, this approach emphasizes enhancements that align with user needs and maximize impact, focusing on components that serve the largest user base and span multiple product areas.
Effort-Based Scalability
Incentivizing High-Impact, Low-Effort Work: Because Effort is the divisor in the TRUE calculation, lower-effort, high-impact projects receive a higher score, promoting resource-efficient prioritization that drives maximum impact with minimal resource investment.
Alignment with Capacity and Planning: Effort scores consider sprint duration and team size, helping prioritize work that fits within team capacity and providing a clearer view of resources needed. This structured approach enables more accurate project planning and reduces the risk of overcommitting.