Attachment: Before the Breakup

Attachment: Before the Breakup

Category:

Quick redesign

Date:

September 2024

Duration:

4 weeks

Pepper Website in Framer
Pepper Website in Framer
Pepper Website in Framer

In September, the team confronted a critical design challenge: implementing Multi-Document Support for contracts while navigating the constraints of an outdated 'Attachment' system that could not be immediately deprecated.


This case study aims to illustrate how strategic design decisions enabled seamless functionality integration.

(IMPACT)

(VISION & INNOVATION)

My vision is to advocate for component reusability and eliminate random element usage, establishing new design standards through consistent component implementation across the platform.

Pepper 00
Pepper 00
Pepper 00

(CHALLENGES)

Reinventing the wheel is not a option.


Navigating a critical design challenge, we addressed legacy system constraints by balancing user experience with innovative platform capabilities. The transition strategy prioritized maintaining existing user workflows while strategically introducing advanced functionality within tight development parameters.


(PROBLEMS)

First of all, what are 'Attachments'?




What makes the 'Attachments' architecture fundamentally challenging to scale?



The Multi-Document Support structure introduces additional complexity, as overlapping actions like "Add" and "Link" create user confusion between document handling and attachment management, compromising interface clarity.


See the old interface for 'Attachments' below:


Pepper 01
Pepper 01
Pepper 01

You will find the early iteration for Multiple Document Support in the Document tab below.


While the iteration confirmed that properly handling the list of attachments remains important, it also revealed that attachment-related actions should be removed to avoid confusing users.

L: Document list
R: Document viewer

Pepper 02
Pepper 02
Pepper 02

(USER CENTRED DESIGN)

(SOLUTION SPACE)

Users can now digitally file and manage contracts in a document repository supporting various file formats. The Document tab enables document navigation as shown above, while the new 'Related' tab organizes current 'Attachments' and 'Linked contracts' (later 'Related Contracts').

(ITERATIONS)

Design closely monitored feedback before and after launch. The feature's release triggered an intensive feedback loop to capture user perspectives often missed in routine CX communications.



(USER NEEDS)

One month post-initial release, comprehensive feedback analysis revealed insights into the new Related tab's UX. The design received predominantly positive validation from newer users—who had no prior exposure to the old dropdown—for separating 'Documents' and 'Related' spaces.

However, longitudinal user segments expressed concerns about reduced visibility into 'Attachments' after losing the unscalable dropdown menu.

(FURTHER USER NEEDS)

To restore a comprehensive overview, the subsequent iteration introduces a preview mechanism for 'Attachments' and incorporates clear visual indicators for the number of relations and documents.

Hypothetically, this approach will also be effective if the Related tab is exclusively used for 'related contracts'. It would also help users quickly decide whether to migrate 'Attachments' to 'Documents' (already implemented) when they are merely PDF storage.

To restore a comprehensive overview, the subsequent iteration introduces a preview mechanism for 'Attachments' and incorporates clear visual indicators for the number of relations and documents.

Hypothetically, this approach will also be effective if the Related tab is exclusively used for 'related contracts'. It would also help users quickly decide whether to migrate 'Attachments' to 'Documents' (already implemented) when they are merely PDF storage.

To restore a comprehensive overview, the subsequent iteration introduces a preview mechanism for 'Attachments' and incorporates clear visual indicators for the number of relations and documents.

Hypothetically, this approach will also be effective if the Related tab is exclusively used for 'related contracts'. It would also help users quickly decide whether to migrate 'Attachments' to 'Documents' (already implemented) when they are merely PDF storage.

To restore a comprehensive overview, the subsequent iteration introduces a preview mechanism for 'Attachments' and incorporates clear visual indicators for the number of relations and documents.

Hypothetically, this approach will also be effective if the Related tab is exclusively used for 'related contracts'. It would also help users quickly decide whether to migrate 'Attachments' to 'Documents' (already implemented) when they are merely PDF storage.

Enhance user comprehension by providing a structured overview with numeric tags, concise previews, and clear context to facilitate informed decision-making and quick navigation.


(to be tested)