Birch, a new system
💡Discover
As part of the initiative to redesign the product, I spearheaded a project to optimize our design system. While we had Seedling, our design system that was gaining traction, it left much to be desired.
✏️ Define
Research
Starting in Q2 of 2021, we kicked off some internal research with engineers and designers to understand the main issues.
The key takeaways were:
❌ 20% of NPS comments cited usability as a frustration point
❌ Engineers spent an average of 2 hours per front-end jira card and ~ 5 min per import of an individual component from Seedling
❌ Only 1/3 of engineers ever used Seedling
❌ Designers spent an average of 2 hours per week discussing recurring UI issues
❌ The UI lacked a cohesive, systematic approach and vision
❌ Components were neither accessible nor responsive
We also surveyed customers and gathered feedback on overall functionality. We believe that the lack of consistency across elements contributes to:
❌ 51% of users said Greenhouse has a steep learning curve
❌ 17% of customers cited usability as a reason for churn
Goal
How might we optimize our design system to better align visually with our brand and mission, while ensuring scalability for the future?
Key metrics to address:
Is it easier for design and engineering teams to make decisions and build pages?
Increase in pages built with the new system vs. the old.
Increase in the number of cards shipped.
Are our customers understanding flows and features more easily?
Increase in NPS.
Increase in feature adoption.
🎨 Design
Exploration
The first step was to align on the art direction for rebranding the components. How should we apply the new brand to the product?
Next, we focused on iterating on the design system. We weren’t starting from scratch, as we had basic components to build on. We were confident in most of our atoms—type, colors, icons, buttons, dropdowns—but lacked clarity on how to define clear rules, layer building blocks, and scale to molecules.
Following Brad Frost’s atomic principles, we worked together, along side our new engineering partners to create a structured foundation for our elements, designing all atoms, molecules and new components. We established a clear process for iteration. Each designer was assigned current components to audit, and we met weekly to review progress.
Understanding our use cases was crucial for scaling the system. For each component, we followed a consistent process.
Here’s how we audited and designed the callout:
Understand the use cases.
How is this component currently used? Where does it work, and where does it break? What should it be in the future?
Takeaways from the analysis
❌ Inconsistent styling
❌ Non-standardized placements
❌ Undefined use cases
The audit also led to organizing our use cases and consolidating them into two primary use cases:
Alert - pay close attention, this action might have consequences.
Informative - helpful guidance on how to become a better greenhouse user
Review the competitive landscape.
We analyzed how other systems utilize callouts and identified several key takeaways. Callouts are often used to disrupt user flow for important messages, such as upsells, errors, or guidance to enhance the user experience. A common visual trend was the use of a desaturated blue color palette, left-aligned text, and a limit of two actions per callout. These insights helped shape our own approach to improving callout design and functionality.
Design the UI.
What should it look like? How should it scale?
Placement: Where should the callout live on the page? How does it wrap and become responsive?
Styling: How do we want it to look? What feels the most like our brand? What elements are required vs. optional?
Colors: Which colors communicate the two use cases?
Alignment: How should elements be aligned (vertically centered, top, bottom)?
Create rules and document decisions.
What is the component? What isn’t it? What other components are similar? How can we help designers make better decisions?
🚚 Deliver
Implementation
Once each component was audited and defined, we worked closely with engineering to plan implementation. Engineering created a dedicated team for Seedling and explored ways to improve the developer experience.
For our customers, we wanted to avoid a disruptive learning curve, so we opted for a phased rollout.
Birch
We renamed v1 of Seedling to Azalea and created a separate branch for Birch, Seedling v2. We also reskinned Azalea to mitigate inconsistencies, allowing us to have both versions in product at once. This allowed us to test Birch in production and iterate with minimal cost.
We completely overhauled our process for introducing, adding, and optimizing components. Since then, we’ve built robust documentation on past learnings, implemented changes, and created a backlog for future improvements.
The rollout of Birch and the product reskin resulted in increased usage by both designers and engineers.
✅ 25% decrease in NPS comments related to usability
✅ 80% reduction in front end engineering implementation time
✅ As of December 2023, Birch officially surpassed Azalea in usage
✅ 90% of design work is using Birch components
✅ Ongoing evolution of components, systems, and design improvements—recently, we launched a new table component that consolidates three different list views and table styles!
✅ All components are responsive and accessible—following WCAG 2.1 standards.