part 1: product design system
SHADCN FOUNDATION LIBRARY
overview
Following Anaconda’s acquisition of Outerbounds, a move to Svelte exposed limitations in the existing Kendo design system. I led the creation of a shared shadcn-based foundation and pattern library to improve consistency, accelerate design and development, and support AI-assisted workflows—all while teams aligned on a changing product direction.
Role
Senior UX Designer
product
Shared design system across all Anaconda products
Product manager, 3 designers, and 2 engineers
timeline
3 months
constraints
Acquisition-related uncertainty, competing stakeholder priorities, and framework limitations
impact at a glance
100%
Stakeholder approval
Faster
Implementation, reported by engineers
60% fewer
Duplicate UI patterns
the problem
Following the Outerbounds acquisition, Anaconda needed to unify products built on different foundations. The existing Kendo design system didn’t support the move to Svelte or the team’s AI-assisted workflows, making it harder for designers and engineers to build quickly and consistently.
Business Need
Accelerate delivery across the combined platform while creating a cohesive product experience and a shared foundation that could scale across teams.
Design and Engineering Need
Give teams reusable components, shared design tokens, and clear guidance so they could spend less time recreating UI and more time solving product problems.
research & synthesis
01 - finding the right design system
When we were deciding which design system to adopt, we compared top AI design systems to see which ones would meet our needs, both as designers and developers.
Why Shadcn?
Shad supports svelte, which has a smaller, faster output
full ownership and visibility of shad's code
Known, fixable accessibility
management decisions
02 - Organizing our library & managing our work
As the owner of the foundations library, I was responsible for choosing our methodology, organizing our Figma and Jira sprints, and managing my team's workflow.
decision 1
use the atomic atomic design methodology
ShadCN gives you a flat set of components with no layer above them. Atomic Design's tiered model is what made the gap visible — and gave a framework for filling it.
ShadCN never claims to be a full methodology; it's a component source.
decision 2
How will we organize our library and assign work?
Organized our figma's Shadcn foundational library into 3 sprints, using the atomic design method
Organize into sprints: I wanted Sprint 1 to be dedicated to the foundations, or "atoms," of the our library. We needed to make sure we set up these atoms and variables correctly before moving on to the molecule components. Sprints 2-3 were based on molecules. Checkmark indicates the designer completed component and it's ready for dev.
Group related components together: Instead of just a list of components, I organized the components into groups with a parent category; this way, we could see what each component fit into.
Mapping variables: As part of Sprint 1, we had to ensure our variables were set up correctly. This image shows the names of tokens we had to use in our variable collection.
b. set up jira tickets to match Sprints in Figma file
Example of Sprint 2: I made three separate sprints, one for foundations, another for the first round of molecules, and the last for the third round of molecules. I made each epic a dependency on a larger epic for the design system.
c. create acceptance criteria for each component
This acceptance criteria was in each Jira story, for each component. Only when the designer completed each task could they mark as "ready for dev."
pain points
03 - constraints that impeded our velocity
As the owner of the foundations library, I was responsible for choosing our methodology, organizing our Figma and Jira sprints, and managing my team's workflow.
constraint 1
Learning how Shadcn (and Svelt) differ from Kendo
Example: input component
Atomically speaking, we'd typically create 1 component for the input and add booleans instances so that it could be an input group when needed. Shad did not set up their system like this. We tried to create 1 parent component and add booleans, but it broke the code. Had to manually change back on Figma.
b. Example: combobox component
Same issue with the combobox component as with the input component.
c. Example: variable and token naming
We initially tried to rename our variable tokens like we had it in Kendo. When we did that, it broke the code, so we had to manually revert everything and re map all components back to the original token colors.
constraint 2
company acquisition chaos
too many merging identities
With three new acquisitions, we suddenly had to consider not just our Anaconda product but also the other ones - while still emphasizing that Anaconda's identity would be in the forefront. This created some tension.
b. staffing turbulence from acquisition
Ownership: one designer we worked with was struggling to be collaborative on a team and often tried to overtake ownership. One example was they tried to push for removing one of our brand colors without realizing the brand identity goes through an entire process.
foundation library handoff
Foundation library completed, on to the patterns
Despite some roadblocks, we were able to learn from our hiccups and still meet our foundation library development deadline.
impact
100% stakeholder approval
Aligned stakeholders across acquired teams on a shared foundation library, earning approval from Design, Engineering, and company leadership.
Less engineering friction, faster implementation
Two engineers tested the new foundations with designer-created screens and reported a smoother workflow and faster implementation compared with Kendo.
50% accuracy in AI-generated screens
Two designers used Claude Design via Figma MCP to generate three screens each. The output was approximately 50% accurate, highlighting the need for shared patterns to guide screen composition.
60% fewer duplicate UI patterns
Consolidated overlapping components and patterns into a shared shadcn-based library, reducing duplicate UI patterns by 60% and giving teams a consistent foundation across products.