Previously, brands had no easy way to track contract progress within the platform. They relied on reaching out to the 1stCollab team for emailed CSV reports. The original contracts page only surfaced to-do actions, offering little context on how campaigns were progressing.

Original Design

Our contracts experience was built around the contract, and fulfills the core job of surfacing todo actions to the brand as they come up. It doesn’t do great at providing an overview of how things are going.

The first part of the solution we landed on involves moving the to-do’s to a new Task Page - which means we now have to come up with a new design for Contracts page that enhances a brand user’s visibility into the content production process.

We’re a campaign management platform — but brand users had no way to track their creator partnerships. For example:
‍

• Where are creators in the process (working on concept, working on draft, etc) and how many are at each stage?
• What content is scheduled to go live next week?
• Timelines — which creators are behind, which ones are moving as planned?
• Which creators are newly signed on to the campaign?

Throughout the design process, we had the help of two of our clients for user research and testing:
‍

• Carina, Head of Marketing at a large tech firm
• Josh, CEO of an early-stage startup

I interviewed Carina and Josh to identify their key goals when managing creator partnerships and pain points they experience with the original Contracts page. I discovered that:

Users struggled to track deliverables or know when contracts would be completed.

Users wanted to be able to substantiate contracts and export information.

CSVs were the norm for tracking data and progress, but visual structure was missing.

During a white-boarding session with the team, we concluded that dashboards are the best way to convey key information and metrics in an easily digestible format. Because our users already consume contracts information in a CSV file, I decided to explore a modernized data table design to help with tracking and monitoring.

After discussing my proposed sketches with the team, we decided to scope the V1 to show contracts signed via 1stCollab, pushing the “Add off-platform contracts” feature to a later phase due to backend complexity.

Our team adopted Mantine, a React component library, to speed up dev and ensure accessibility. With the contracts dashboard, I had to create custom components where needed: a nav bar, summary cards, price filters, etc.

I documented the custom components I created

We recruited Carina, Josh, and 2 other brand users to understand if the contracts dashboard met their needs and their impressions of the user interface and flow. What I tested:
‍

• Navigating to the contracts dashboard
• Filtering and customizing views
• Accessing summary metrics
• Downloading reports

First hi-fidelity draft of the contracts dashboard

Key screens that went into the prototype

Overall, our users loved the dashboard layout and gave feedback that the interface was easy to use. They requested the following updates:
‍

• A campaign-wide metrics view
• A way to copy contract links

The second concept test covered two features, the new deliverables view and downloading reports.
‍

Deliverables View

• Each row = one deliverable
• Tracks deliverables from “not started” to “live”
• Added a column for usage rights

Custom Reports

Users wanted CSV exports—but customizable ones. I explored 2 options:
‍
Option 1: Users customize their table view. Export reflects the display.

Option 2: A modal appears when clicking “Download CSV,” allowing users to choose fields.

Users preferred Option 2 for its simplicity and focus, so we moved forward with that.

Option 1: Customize the table view. The CSV file reflects the display properties.

Option 2: Select "Download CSV" then customize settings from a modal.

By addressing these usability challenges, the new Contracts page will empower brands with better insights, streamline workflow management, and create a more cohesive experience when working with creators. The redesign aligns with our broader goal of making the creator-brand collaboration process more seamless and effective.

Next, we would like to implement the ability to let users import contracts that was negotiated off-platform.