I'm trying to figure out what is the best way to add data for a simple backend for a car insurance agency.

I have three tables: clients, cars and insurance. Clients can have multiple cars. Each car can have one owner and multiple insurances, but only one active insurance.

The app will only be used to add an insurance to the agency's local database after the insurance has been made. That's why I was thinking of adding a main "Add" button on each page that can add everything:

  • new client / existing client
  • new car to new client
  • new car / existing car to existing client
  • new insurance to new client / existing client

Like in the image below.

Click image to enlarge

But then what if the insurance agent is navigating to a client's page and wants to just add an insurance. Should I have another form that can only add a car and an insurance to the existing client? Won't two 'add' buttons be confusing? Should I then add an "Add New Client" button on the clients list page as well? Should I separate POST actions for those page specific buttons? Like only be able to add clients on the /clients/ list page and only be able to add cars and insurance on /clients/:id page?

Or should I just keep the main Add button that can add everything and no other POST forms?

Sorry for the long post, but I'm not really good when there are so many ways to go. :)

  • Are these accordion forms separate pages styled to look like a collapsed wizard, or an AJAX-driven SPA?
    – msanford
    Feb 9, 2015 at 17:28
  • They are part of the same accordion form on the same page in different circumstances. Left column when adding to a new user and right column when adding to an existing user.
    – Norbert
    Feb 9, 2015 at 17:34
  • Can the user click the header to navigate or is it driven only by the buttons?
    – msanford
    Feb 9, 2015 at 17:43
  • Yes, clicking will open the one you clicked and close the current one. The "Next Step" button will open the next header and close the current one. "Add Insurance" will first validate the form and show possible errors in their respective headers.
    – Norbert
    Feb 9, 2015 at 17:49

1 Answer 1


Based on what you've told us, it seems like there are three primary routes to the add/edit workflow for customers:

  1. Global Nav → Add/Edit Customer
  2. Customer List → Add/Edit Customer
  3. Customer List → Individual Customer → Edit Customer

enter image description here

Regardless of route or status, I think the window should use one pattern that's used globally. If you're creating a new user, you get the full ("default") form; if you're editing a user, you get the same form, you're just placed at the appropriate point in the data entry process, possibly with some type of indications for completed sections.

Scenario #1: Adding/changing insurance for a customer with existing personal and vehicle information.

enter image description here

Scenario #2: Adding a new vehicle for a customer with existing vehicles, insurance information, and personal information.

enter image description here

Both scenarios give you the same window, but the user is placed in the appropriate spot in the process based on the context.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.