All works

BBB business profile form

A form that lets a business check its Better Business Bureau profile and fix only what changed. I designed it in Figma and coded the front end.

The company profile page in a browser window, with the missing information check and the business address dialog open over it, on a teal background
Timeline
2019
Scope
UI/UX design, front-end development

The profile

Confirm it, don’t refill it.

Most of a business profile is already on file, so the form opens on the profile itself. Every value has a pencil beside it, and an owner with nothing to change can finish in one click.

Company profile page for a sample business: addresses, phones, emails, fax and website each with an edit pencil, an orange This information is correct button, business category tags and profile enhancements marked Missing or Entered
The profile page, with the confirm button at the top of the right column

Dialogs

One field, one dialog.

Each pencil opens a dialog for one kind of information. Names, addresses and phone numbers can have several values, so each dialog lists them with tags like Primary, Mailing or Billing, with an add form below.

Business Address dialog: three addresses tagged Primary, Mailing or Billing, a map, an add address form, a review note, and Cancel and Save Changes
Business Name dialog: four names, one tagged Primary, with edit and remove icons, an add form and a review note Learn about BBB Accreditation card asking whether the business would like to be contacted, with Yes, No and Maybe buttons
Contact Information dialog: name fields with prefix and title, then phone, fax, email and address picked from values already on the profile
Business address, business name, the accreditation question and contact information

Principles

Three rules behind every screen.

  1. 01

    Confirm, don’t retype

    Show what is on file and ask if it is still right. Owners only touch what changed.

  2. 02

    Same pattern everywhere

    One dialog, one value table, one set of tags. Learn it once, use it for every field.

  3. 03

    Say what happens next

    Every dialog notes that edits are reviewed and take a few days to publish.

Submitting

A last check, then a clear thank you.

If required details are still empty, the form lists exactly which ones and why they matter before it sends. The answers are full sentences, and going back to fix it is the filled button.

You have missing information dialog listing Phone Number, Business Start Date, A Primary Contact and Product and Services, with two full sentence answers
Thank you page: the information will be reviewed and applied to the online profile, with buttons to review changes or learn about BBB Accreditation
The missing information check and the thank you page

My role

Designed it, then built it.

Design

Flows, wireframes and the final UI in Figma: the profile page, every field dialog, the missing information check, sign up and thank you.

Front end

I coded the screens myself. Designing with the build in mind kept the parts few, so every field reused the same dialog and table.

Let’s talk

I’d love to tell you more on a call.

There’s more to this project than fits on one page. If you’re interested, I’m happy to walk you through the decisions, the trade-offs and what I’d do next.