Skip to content

Jotform

Designing a QuickBooks mapping flow

Role
Product Design
Timeline
July, 2023
Company
Jotform

This is one case study from my broader Jotform role, which included work across product interfaces and the design system. As part of the integrations team, I designed a QuickBooks connection that lets form submissions create customer records and invoices.

Jotform QuickBooks integration cover

I was the sole designer on this project, collaborating with PMs, engineers, and the UXR team. I handled end-to-end design—from research synthesis to high-fidelity mockups and developer handoff.

The challenge was translating a form submission into the right QuickBooks object without asking a non-accountant to understand the accounting model first.

Research synthesis with the UXR team highlighted three setup needs:

  • Map specific form fields to QuickBooks fields.
  • Distinguish customer details from invoice fields.
  • Keep the setup path understandable while preserving control.
User research slide

The resulting flow has three steps:

  1. 1Authenticate a QuickBooks account.
  2. 2Choose whether the submission creates an invoice or customer.
  3. 3Map form fields to QuickBooks fields.
Field mapper interface

UI Details & Components: I designed custom mappers, validation hints, and dynamic selectors, extending Jotform’s design system with more app-like interactions.

Action selection screen

Delivered capability: people can authenticate, choose an action, and map their fields before a form submission creates the selected QuickBooks record. This case does not claim conversion or support outcomes without a published baseline.

Create customer UI

The durable decision was to make the accounting choice explicit before mapping begins. That keeps the field mapper specific to the record a person is trying to create.