Deeper Design Audit

After conducting market research on industry standards for how other companies handled CRUD apps (this article was my holy grail to quickly understand CRUD), I completed a deeper analysis to better understand how CRUD showed up in Airspace’s desktop features.

‍From what I found, a page would typically correspond to one of the “CRUD” functionalities (for example, a form is used to create a new data record).

After reviewing the various elements and different flows, I drafted multiple, reusable CRUD formats that could be implemented. I took them back to the lead developer to discuss the feasibility of implemention.

We decided to focus our CRUD template to be the most comprehensive format possible, as it would provide maximum impact and was most commonly used across the desktop platform.  Through this, the template could also remain flexible and adaptable for project-specific needs, as we’d be build it so that designers/developers could pick and choose elements that they found relevant.

Ideation & Iteration

After narrowing down what Airspace’s CRUD format would be, I continuously collected feedback from engineering manager and 3 other designers on the team through 2 feedback sessions and asynchronous discussions.

I would present the CRUD format to ask for feedback for overlooked considerations and discuss adherence to design system standards. Through these collaborations, I also promoted the template to other designers, encouraging its use in their future work.

Refining the Design System

From the initial audit and discussions with my teammates, I had identified several design system components inconsistencies.   I worked with the engineering manager to update these components within both the design and code libraries, as he began working on creating the CRUD generator for developer usage.

Creating a Usage Guide

To ensure that other team members could confidently adopt the CRUD template, I compiled usage guidelines in Confluence (where we stored documentation regarding larger design system patterns) that detailed the pages, interactions, flow, and components involved in each CRUD function.

For each function, I outlined use cases, examples, and content considerations, based on my audit findings and earlier feedback sessions. I also created a Figma file demonstrating the generic CRUD UI workflow so that designers could reference it when starting their projects.

Release the CRUD!

Once we had all the elements in place, the engineering manager and I demoed the CRUD template in an R&D all-hands to continue advocating for it to the rest of our department.

As projects came down the pipeline for teams, the impact of the CRUD template became evident: One month upon its release, the template was used to reduce the expected timeline of a high-priority project by three weeks. From then out, it continued to be well-received and adapted, even in its first iteration.

The End Product

The CRUD template consists of three key elements:

• A CRUD Generator: For developers to quickly set up API endpoints, folders, and pages in the defined CRUD format using a few lines of code
• Usage Guidelines: Supporting documentation on how to effectively apply Airspace's CRUD template and format to projects
• A CRUD Wireframe Flow: Designers/developers could reference this generic flow to understand its functionality and how the different elements connect

The Results

Here are some noticeable achievements we saw with the CRUD template:

• Streamlined development of a high-priority project, enabling an MVP to be delivered in a week against the original expected timeline of one month, reducing development costs by 75%
• Adapted to 6 projects across 3 product teams over the course of a year, resulting in significant development/design time savings

Reflection

I felt proud of building a stronger cross-functional relationship with the engineer manager, thinking about design systems on a larger scale, and advocating for the value of design systems to the rest of our department through a CRUD template.

Ultimately, this project reinforced the value of design systems in driving consistency, usability, and lasting, foundational improvements across an organization.