Dubsado's Form Builder

How we provided small business owners with the flexibility and control they need to build forms that create lasting client experiences.

Role: Product Designer

Team: 4 Engineers, Product Manager, Copywriter

Platforms: Desktop, mobile web

Who is Dubsado?

Dubsado is a business management software (CRM) designed to take care of administrative tasks for small business owners.

Project Overview

Dubsado's previous form builder was in need of a massive overhaul. Its performance was buggy and slow, and the existing form elements did not provide the value that business owners needed. This created a high risk of business owners losing leads due to the poor form experience.

Although the bulk of the redesign was focused on the backend, the frontend of Dubsado's form builder also got a facelift. As the lead product designer on the project, I focused on:

  • Ensuring drag-and-drop behavior worked smoothly

  • Adding inline text editing and an inline element library to allow for quick updates

  • Refreshing the UI to promote more trust & excitement in the form-building experience

  • Building Dubsado’s design system and developing new components and patterns

Project Overview

Dubsado's previous form builder was in need of a massive overhaul. Its performance was buggy and slow, and the existing form elements did not provide the value that business owners needed. This created a high risk of business owners losing leads due to the poor form experience.

Although the bulk of the redesign was focused on the backend, the frontend of Dubsado's form builder also got a facelift. As the lead product designer on the project, I focused on:

  1. Ensuring drag-and-drop behavior worked smoothly

  2. Adding inline text editing and an inline element library to allow for quick updates

  3. Refreshing the UI to promote more trust & excitement in the form-building experience

  4. Building Dubsado’s design system and developing new components and patterns

Project Overview

Dubsado's previous form builder was in need of a massive overhaul. Its performance was buggy and slow, and the existing form elements did not provide the value that business owners needed. This created a high risk of business owners losing leads due to the poor form experience.

Although the bulk of the redesign was focused on the backend, the frontend of Dubsado's form builder also got a facelift. As the lead product designer on the project, I focused on:

  1. Ensuring drag-and-drop behavior worked smoothly

  2. Adding inline text editing and an inline element library to allow for quick updates

  3. Refreshing the UI to promote more trust & excitement in the form-building experience

  4. Building Dubsado’s design system and developing new components and patterns

Project Overview

Dubsado's previous form builder was in need of a massive overhaul. Its performance was buggy and slow, and the existing form elements did not provide the value that business owners needed. This created a high risk of business owners losing leads due to the poor form experience.

Although the bulk of the redesign was focused on the backend, the frontend of Dubsado's form builder also got a facelift. As the lead product designer on the project, I focused on:

  1. Ensuring drag-and-drop behavior worked smoothly

  2. Adding inline text editing and an inline element library to allow for quick updates

  3. Refreshing the UI to promote more trust & excitement in the form-building experience

  4. Building Dubsado’s design system and developing new components and patterns

Project Overview

Dubsado's previous form builder was in need of a massive overhaul. Its performance was buggy and slow, and the existing form elements did not provide the value that business owners needed. This created a high risk of business owners losing leads due to the poor form experience.

Although the bulk of the redesign was focused on the backend, the frontend of Dubsado's form builder also got a facelift. As the lead product designer on the project, I focused on:

  1. Ensuring drag-and-drop behavior worked smoothly

  2. Adding inline text editing and an inline element library to allow for quick updates

  3. Refreshing the UI to promote more trust & excitement in the form-building experience

  4. Building Dubsado’s design system and developing new components and patterns

Full-screen editing mode helps business owners focus on one task at a time

Full-width containers gives forms more of a "landing page" feel

Added more flexibility and control to form elements and their settings

Adding elements inline allows for quicker form building

Conflicting priorities

During the redesign, we discovered we could not implement our desired drag-and-drop experience while also introducing the new inline editing feature. We had to choose which one to prioritize because we could not have both. Ultimately, we decided to prioritize the drag-and-drop experience because users relied heavily on it and it was the primary issue that prompted the redesign. Inline editing was considered more of a quality of life improvement and could be revisited at a later time.

How did this impact the design?

Rather than allowing inline editing with just one click into the element, users must click a pencil icon to enter “inline editing mode.” This approach worked even better than expected as it prevents users from making unnecessary errors with a bit of added friction when editing an element’s text.

Outcome

Upon initial release of the new form builder, we received an overwhelming amount of positive feedback from our business owners. It was clear to us that this was a highly-anticipated feature update. Within the first 24 hours of release, we even had ~25 users collect payments using our proposal form templates. Here are a few comments from happy users!

Let’s make some ✨

magic

✨ together

Let’s make some ✨

magic

✨ together

Let’s make some

magic

together

Let’s make some ✨

magic

✨ together

Let’s make some

magic

together

© 2024 Caroline Chang

Thanks for stopping by! 🙌

© 2024 Caroline Chang

Thanks for stopping by! 🙌

© 2024 Caroline Chang

Thanks for stopping by! 🙌