Quill & Pigeon

Quill & Pigeon helps people manage recipients and important dates. During my design and development internship, I designed and built the bulk contact import interface: file selection, editable review, validation feedback, and confirmation. My hypothesis: if people could fix contact data before saving it, more of them would finish an import instead of leaving to edit their spreadsheet.Quill & Pigeon helps people manage recipients and important dates. During my design and development internship, I designed and built the bulk contact import interface: file selection, editable review, validation feedback, and confirmation. My hypothesis: if people could fix contact data before saving it, more of them would finish an import instead of leaving to edit their spreadsheet.

• CSV and XLSX spreadsheet inputCSV and XLSX spreadsheet input
• Review and correction before savingReview and correction before saving
• Confirmation for each imported contactConfirmation for each imported contact

DecisionDecision

Make uploading a spreadsheet and saving its contacts two separate actions.Make uploading a spreadsheet and saving its contacts two separate actions.

Entering contacts individually repeats work when a recipient list already exists in a spreadsheet. Bulk import avoids that repetition, but a readable file can still contain incorrect contact data. I designed a checkpoint where people can inspect and correct those values before saving.Entering contacts individually repeats work when a recipient list already exists in a spreadsheet. Bulk import avoids that repetition, but a readable file can still contain incorrect contact data. I designed a checkpoint where people can inspect and correct those values before saving.

DecisionDecision

Keep individual entry available and give spreadsheet imports their own review path.Keep individual entry available and give spreadsheet imports their own review path.

ConstraintConstraint

The file can contain values that need correction, even when its contents can be read.The file can contain values that need correction, even when its contents can be read.

The import dialog accepts CSV and XLSX files and offers a template download beside the file picker. The supported formats and example structure are available before the user commits to an upload.The import dialog accepts CSV and XLSX files and offers a template download beside the file picker. The supported formats and example structure are available before the user commits to an upload.

DecisionDecision

Put file guidance at the point of selection, where it can help prevent a wrong input.Put file guidance at the point of selection, where it can help prevent a wrong input.

The selected filename remains visible before upload, with an option to remove it. File selection does not immediately save contacts: users can check their choice, replace it, and then continue to review.The selected filename remains visible before upload, with an option to remove it. File selection does not immediately save contacts: users can check their choice, replace it, and then continue to review.

DecisionDecision

Keep the file choice explicit and reversible before parsing begins.Keep the file choice explicit and reversible before parsing begins.

I made the review table the checkpoint before import. Names, addresses, and dates appear as editable fields, with the contact count on the final action. People can inspect the parsed values and correct them in context before saving.I made the review table the checkpoint before import. Names, addresses, and dates appear as editable fields, with the contact count on the final action. People can inspect the parsed values and correct them in context before saving.

DecisionDecision

Allow corrections inside the product rather than requiring a new spreadsheet upload for every edit.Allow corrections inside the product rather than requiring a new spreadsheet upload for every edit.

ConstraintConstraint

Review adds a step to the happy path. That step gives people a chance to catch incorrect data before it becomes saved contacts.Review adds a step to the happy path. That step gives people a chance to catch incorrect data before it becomes saved contacts.

I paired a page-level alert summary with feedback beside the affected fields. In this example, 15 alerts signal the scale of the review, while Duplicate labels identify the nickname fields that need attention. Other rows stay visible while the user works through the list.I paired a page-level alert summary with feedback beside the affected fields. In this example, 15 alerts signal the scale of the review, while Duplicate labels identify the nickname fields that need attention. Other rows stay visible while the user works through the list.

DecisionDecision

Put the explanation next to the value that needs correction, rather than relying on a general upload error.Put the explanation next to the value that needs correction, rather than relying on a general upload error.

OutcomeOutcome

The review preserves the surrounding contact data and shows where to focus next.The review preserves the surrounding contact data and shows where to focus next.

My frontend work connects the selected file, an editable contact table, field-level validation feedback, and a confirmation of saved contacts. The interface has to preserve the user's context across those states: uploading the file and saving the reviewed contacts are separate actions.My frontend work connects the selected file, an editable contact table, field-level validation feedback, and a confirmation of saved contacts. The interface has to preserve the user's context across those states: uploading the file and saving the reviewed contacts are separate actions.

• Selected file → upload → editable reviewSelected file → upload → editable review
• Review → field feedback → correction in contextReview → field feedback → correction in context
• Final import action → saved-contact confirmationFinal import action → saved-contact confirmation

DecisionDecision

Keep the review and correction steps inside the import workflow, before the final save.Keep the review and correction steps inside the import workflow, before the final save.

The completed workflow connects file selection, review, correction, and import. The final dialog confirms each saved contact and the total added; this example shows two successful imports. My contribution combined product design and frontend development across that interface.The completed workflow connects file selection, review, correction, and import. The final dialog confirms each saved contact and the total added; this example shows two successful imports. My contribution combined product design and frontend development across that interface.

ConstraintConstraint

Feature-level adoption and setup time are not reported here. The product served more than 100 users; that figure describes its audience, not use of this import. To test the hypothesis, I would measure how many started imports end in saved contacts, and how often people abandon review to re-upload a file.Feature-level adoption and setup time are not reported here. The product served more than 100 users; that figure describes its audience, not use of this import. To test the hypothesis, I would measure how many started imports end in saved contacts, and how often people abandon review to re-upload a file.

OutcomeOutcome

A working bulk import interface with an explicit checkpoint before saving and a clear result afterward.A working bulk import interface with an explicit checkpoint before saving and a clear result afterward.