AIRSPACE · INTERNAL PLATFORM
Cutting feature delivery time by 65% with a reusable CRUD template
At Airspace, I partnered with an engineering manager to design and implement a reusable CRUD template by treating it like a design system component. CRUD stands for Create, Read, Update, and Delete — the four basic operations used to manage and interact with an application's data.
Impact
The template cut development time by an average of 65% across 5 features that adopted it. These features were estimated to take an average of 3–4 days of custom design + development time, but instead took 1–2 days to deliver.
Core Team
1 Product Designer (me!) + Engineering Manager
Role
Lead Designer
Duration
6 weeks | Oct – Dec 2022
Note: Certain details are left out and images are intentionally blurry / cannot be viewed in higher resolution to adhere to an NDA. To learn more about this project, please contact me directly.
Project Brief
The Proposition
Every feature that touched a dataset was quietly rebuilding the same four flows
While working on Airspace's desktop design system, an engineering manager and I noticed a similar flow in features managing different datasets (such as user profiles). These features had basic functionality to create, read, update, and/or delete data records within each dataset, but nobody had named a pattern for them.
We saw a chance to standardize this flow into a single template that designers and developers could pull from directly, the same way they'd pull a button or a modal from the design system.
Design Process
Deeper Design Audit
Every CRUD feature I audited split into varying types of UI elements for each function
Auditing existing CRUD-based features surfaced inconsistencies at the pattern level, not just visually. For example, a separate page with a form was most often used for the "create" functionality — but sometimes, that form would be in a dialog instead.
Translating the Audit
The audit gave me raw versions to work from, so I decided which differences were meaningful
I drafted three variations showing how the four operations could be structured into a single format. For each draft, I noted which variations reflected a real product need (like certain datasets only being deletable by specific roles).
Defining CRUD format
We bet on templatizing the most comprehensive format, even if it meant more upfront time to build
From the three draft versions, the engineering manager and I selected to build the third, most comprehensive version. Given we also wanted the template to be flexible and adaptable, it would allow designers and developers to modify certain elements based on project needs.
Two feedback sessions with three other designers validated this direction, surfacing minor placement adjustments (like button positioning) to align the format with best practices.
Refining the Design System
Components used in the CRUD format didn't yet match what designers already treated as the gold standard
The audit had also surfaced components that didn't line up with what designers were already using from their existing library. As the engineering manager began building a CRUD generator for developers, we worked together to update these components for parity.
Creating a Usage Guide
I created comprehensive usage documentation so otherscould use the CRUD template with confidence
I built usage guidelines in Confluence and Figma covering the pages, interactions, flow, and components involved in each CRUD function, backed by examples and content considerations from the audit and feedback sessions.
Conclusion
Results: Release the CRUD!
One project used the CRUD template within a month of release, shipping 3 weeks ahead of schedule
The engineering manager and I showcased the CRUD template at a department-wide all-hands after launch, demoing that it was built on three pieces: A CRUD generator for developers to scaffold endpoints and pages in code, usage guidelines for applying the format, and a reference wireframe flow showing how the pieces connect.
Beyond that early win, the template was adopted across 6 projects and 3 product teams within a year.
Reflection
Early, honest scope discussions with the engineering manager kept the ambitious version on track without any cuts
It's a tradeoff I'd make again, as it ensured we built a comprehensive template that ended up being an invaluable design system tool.
Can't get enough of my work?
Well you're in luck—here's another project
you can read up on ➡️
