A web form builder

The challenge

Nutshell is a customer relationship management software, commonly referred to as a CRM. Despite a decade of refining its CRM capabilities, one critical feature remained absent: the ability to collect and organize contacts from a form on your website without the need for supplementary tools.

Racing against time

In the last week of September, just before Q4, our small design team of two was tasked with designing a solution by the end of the year. This was the quickest we’d been asked to design a brand-new feature, and the pressure was on. We knew this project would require an unprecedented level of planning.

Project planning

My teammate and I had spent the previous summer studying a design textbook and holding a book club, where we delved deep into the importance of planning. Armed with the tools outlined in Kim Goodwin’s book, Designing for the Digital Age, we felt confident in our ability to develop an informal, day-by-day project plan that helped us stay on track and avoid dedicating excessive time to any one part of the process.

A calendar for October with all of our design tasks laid out.

Determining the information architecture

Our first step was to think through the system at a very high level. This usually involved creating simple flow charts where circles represented elements of the UI and arrows were actions taken to navigate between them.

A bird's-eye view of what early information architecture diagrams look like.

We avoided designing UI details too early, which could derail the project, and instead, we captured ideas that formed during our high-level brainstorming in quick sketches.

The earliest designs of the web form builder were sketched out during initial brainstorming sessions.

Low-fidelity prototyping and feedback collection

After many discussions with our CEO and VP of Product, we agreed on a high-level information architecture that fit well into our existing app and the other features it connected to. This paved the way for us to start designing the form builder experience.

We referred back to our stash of sketches, picked out the elements we liked, and put them together into some low-fidelity prototypes that explored several different approaches.

The approaches

#1: “Tabbed schema”

This approach relied on a tabbed page structure to section off different aspects of form creation: adding fields, designing how it’s styled, configuring other form settings, and viewing responses. We quickly realized that this approach felt a bit disjointed.

Approach #1: Different aspects of form creation are sectioned off into separate tabs.

#2: “Sidebar editing”

This approach explored what it might look like to do most of the configuration right within a preview of the form itself. After seeing this, we felt more confident that this was the direction we’d like to head in.

Approach #2: Editing occurs directly within a preview of the form.

#3: “Filter-style fields”

To reuse some of the app's existing technology, we also explored using the same filtering UI that powered lists throughout Nutshell. Unfortunately, this didn't translate as well as we had hoped nor did it feel like a very good experience.

Approach #3: A more technical approach where fields are selected or deselected using checkboxes.

Presenting the options

We took all three approaches back to stakeholders for their input and hosted a meeting with our company's internal marketing team, as they had extensive experience creating web forms with other software. Their feedback helped us decide on the inline sidebar editing experience of approach #2.

Low-fidelity mockup of the 'Sidebar editing' approach that we liked best.

Iteration, pivots, and final design

Our prototype went through many rounds of iteration. Each version nailed down another set of details while exposing more questions that needed to be answered with the next one. As we designed, our engineering team investigated the implementation lift. Occasionally, they’d uncover a limitation that was going to impact the form builder’s design. When this happened, we reacted quickly and pivoted as necessary.

The most challenging of these pivots occurred when our team realized that “live-editing” was not going to be possible. Instead, we needed to tweak our solution so that you could enter an “editing mode” where you could publish (or discard) a batch of changes all at once.

While this created the biggest wrench in our plans so far, it pushed us in an unexpected direction and opened the door for us to try a slightly different layout. We landed on a final, lo-fi prototype that worked surprisingly well.

A higher fidelity mockup of a form page and a full-page editor for publishing changes in batches.

Preparing designs for handoff

Translating a prototype into materials that engineers can use for implementation is one of my favorite parts of the design process. In the past, we relied on written documentation and supplementary Figma prototypes to convey most of the design details, but we knew we weren't using these design files to their fullest extent.

That changed when we attended John Meguerian’s talk at Config 2021, a virtual design conference hosted by Figma. His presentation pushed us to begin thinking of our design files as communication tools.

John advised that design files should mirror how they will be implemented, looking more like the code that would eventually be shipped. He recommended a three-page structure for organizing Figma files that completely changed the way we work:

1. ❖ Components
   The building blocks of a feature
2. ⬒ Views
   Each screen (in every state) constructed with the components
3. → Prototype
   The major flows of a feature, created by stitching together the views

With this 3-page structure as our framework, we got to work converting our low-fidelity prototype into materials for our engineering team. Our final design files had become much more valuable.

Impact & lessons learned

Designing Nutshell's new web form builder demonstrated the effectiveness of strategic planning, iterative design, and agile responses to emerging challenges. We delivered a robust solution that exceeded people's expectations and integrated smoothly into our existing app framework.

Many customers could now abandon their use of third-party tools, streamlining their operations within their CRM. The feature also became a crucial tool for our sales and marketing teams, acting as a strong selling point and engagement driver for the product.