The Shape Editor reimagined a core feature of TakeShape to bring it in line with the company’s new focus. This was one of my most challenging UX development experiences, but also one of the most rewarding.

One of TakeShape’s early features was the Form Studio, an interactive drag-and-drop tool to build data types. As the feature name implies, the Form Studio was driven by the user choosing a form field by type: one-line string, text area, rich text editor, date, time, etc. The type of the data in the resulting API was derived from this form input.

While this interface fit TakeShape’s initial direction as a headless CMS platform, it failed to account for the product’s reimagining as a platform for building APIs. Most immediately, inferring datatypes from form fields created a tight coupling between forms and the resulting data, which got the relationship between the two backwards.

I was an early advocate for reimagining the user experience for creating Shapes (a term I coined) to make it API-centric. This meant coming up with a new interface that still felt familiar to longtime users. Based on the product principles I helped set, we knew the interface needed to be driven primarily by keyboard entry, feel wicked fast, and autosave changes made by users.

I started by designing interfaces over multiple iterations in Figma, incorporating feedback from the team every step of the way. This process allowed us to quickly develop the visual language for the new tool and test interactive prototypes with both new customer and longtime users. With a solid design, we confidently moved into a challenging development process.

Developing this new interface meant reworking many elements of the frontend stack and application data structure to support autosaving and immediate mutations in the APIs data structure. Slowly but surely, we got each component of the new interface functioning correctly. After a few months of consistent, iterative development, we launched the new feature. It immediately received a warm reaction from users, despite being a whole new paradigm.

It continues to serve TakeShape’s users today. Over time, this new interface gracefully evolved to support increasingly complex functionality, like supporting data structures from 3rd party APIs and building shapes that extended other ones in an object-oriented way.