Contract Management App

Bulk Amendments, an internal facing self-service feature that I designed end to end, reducing monthly contract amending from 20 hours to 1 upon launch.

Problem + Solution:

Lack of a self-service solution to update monthly contract rates prevented Wayfair from offering more competitive freight forwarding rates on Ocean Contracts to suppliers. I led end to end discovery and design for a self service feature within the Contract Management UI that allowed Operators to create contract “amendments” in bulk.

My Role + Team:

  • 1 UX Designer (me!)

  • 1 Product Manager

  • 2 Engineering Managers

  • 8 Engineers

  • 1 Data Analyst

  • 1 Content Designer (consulting)

Stakeholders:

  • EU, NA, Asia Sales (30+ people)

  • Contract Management (6 people)

  • Pricing + Profitability (5 people)

  • Billing (10 people)

Timeline: 3 months

Users: Contract Management Team

Research

3 Remote Interviews, including:

  • 2 users responsible for the existing manual process.

  • 1 data architect supporting the backend process.

  • Mapping out the existing end to end process, including key pain-points, opportunities, and “must-haves”.

Competitive Analysis:

  • We had two sets of competitors - ocean carriers and freight forwarders.

  • Most had a very different business strategy and process than what Wayfair needed.

Flexport (freight forwarder)

Hapag-Lloyd (ocean carrier)

Framing + Ideation

Taking all my research findings to the next stage, I aligned with my product manager and stakeholders on our design direction. I then led Design Studios, involving 5 other designers from my super pod to ideate on a focused solution. Lastly, I identified key UX elements that we wanted to incorporate into the final designs.

We aligned on a file upload + import solution as the design direction

Initially, I explored an in-UI design solution as opposed to a file upload / import, but did not pursue it as it was less efficient.

Design Studio with 5 other designers to ideate on solution # 2 (view full exercise)

Final Process Flow

Step 1: Front End (FE) Validations

File validations in the UI (< 2 seconds), catching 95% of any possible errors.

Step 2: Data Base (DB) Validations

A “behind the scenes” process that validated 5% of the file data.

Step 3: Creation of Amendments

The user received an email once the process was complete.

Design Pattern Research:

  • Internally, I looked at 5 teams’ bulk edit, import, and upload patterns; documenting what aspects can be improved.

  • Externally, I took inspiration from patterns such as Google Drive’s upload and import.

Wayfair’s Supplier UI Import Pattern:


2 teams in my superpod had an established pattern that I iterated on.

NaviOS UI Drawer Pattern:


Our UI (incl. of 5 other product teams’ pages), had a side drawer pattern, but no upload/import.

Google Drive’s Upload Pattern:

I also at non Wayfair UI patterns, such as Google Drive’s file upload.

Final Designs

File Validations (over 100 unique error messages)

Front end (FE) validation example:
SuID column is missing, or the header name is invalid.

Database (DB) validation example:
SuID {new_suid} doesn't exist, value/format is invalid, or it does not match the SUID in the Contract Number {Suid from contract number}.

Import validation example:

Contract creation was cancelled, and this contract {contract number} could not be created. To retry, re-upload a file with just a list of the contracts whose creation was cancelled.

Import Drawer

Default

Loading File

Full Failure

Partial Success

Full Success

Importing

Design System Work

Working closely with 2 other product teams and their designers, I created a scalable design pattern for import / upload. I then created & published it to our design system library. Since then, both of the teams have implemented this pattern.

Awareness of Import Process

Landing Page

Landing Page - Drawer

Bulk Amendments History Page

Emails

Validation + Impact

Following UAT testing, we launched the UI feature. Without requiring any guidance, our users were able to create all 1,000 contract amendments using the new UI. Since then, the team was able to move to a bi-weekly rate update process, giving Wayfair a more competitive sales edge.

Quantitative Feedback

Contract Amendments successfully created via our UI feature

Using our UI feature saved our users ~38 hours per month

Qualitative Feedback

✅ Overall, the UI feature was “simple and easy to use” according to our users.

✅ Users felt confident moving from monthly to bi-weekly rate updates using the UI feature.

✅ 2 Other product teams adopoted our team’s import pattern, scaling it out to even more users.

🚧 Relaxing file field validations to support multiple formats, i.e. dates.

🚧 Users requested the UI feature expanded to apply to custom contracts that accounted for ~10%.