design system

the problem

In Fulcrum’s first year as a product company, we were moving fast and solving problems one at a time. Without a component library, designers and engineers kept rebuilding the same patterns, and the product felt increasingly disjointed to the customers learning it.

the research

full product audit

customer & internal team interviews

sales demos & onboarding session reviews

atomic design research

my role

User research, design principles, components design, frontend component styling

the team

3 designers, 3 engineers

the timeline

6 months (engineering buildout continued beyond)

the tools

Figma, Storybook, VS Code

the goal

Make Fulcrum feel like one product, consistent in look and behavior yet flexible enough for very different customer workflows.

the solution

A complete Figma library covering color, typography, inputs, buttons, and a 12-column grid, structured with Atomic Design so every pattern builds from the same foundations. Five principles to guide development decisions, and key components like inputs and panels were built in code so design and engineering work from the same pieces.

the impact

Development and decision-making got faster for years to come, and customers could pick up each new feature without relearning the product.
 
 

the solution

Users were given a collapsible panel on the left side of the Bill of Materials which allows for adding items, materials, and routing steps to the BOM & routing interchangeably while viewing the full BOM & routing. This panel also includes settings, attachments, and quality checkpoints for each routing step and the full routing sequence. The original UI used a number of modals that fully obstructed the view of the BOM & routing and forced users to add items and routing steps separately.

 
 
 
 

drag & drop

We also added the ability to drag and drop elements from the panel into the BOM or routing as well as within the BOM & routing levels. I also added the first right click functionality in the site here so that users could quickly copy and paste elements, delete elements, or duplicate portions of the BOM. We also updated the order of the items to reflect newly added items and materials at the top so that relevant data was readily accessible.

 
 
 

shortcuts

Based on research into other softwares and workflows common for the power user of the BOM & routing, we chose to include shortcuts often incorporated in other softwares. This included right clicks that allowed for quickly deleting or duplicating elements and creating new items. This was the first implementation of any right click shortcut in the entire product.