Redesigning an Enterprise Contract & Invoicing Tool

Skip to Final UI

VendorBridge was built to manage service contracts and invoicing but after a year of dev led design it was confusing, incomplete, and losing trust. A large client was ready to walk away along with a multimillion dollar contract.

I stepped in to lead a course correction. Partnering with business stakeholders, developers, and end users, I rebuilt workflows, simplified invoicing, and set up a clear design system driven by voice of customer feedback.

Timeline

8/25-10/25

Team

1 Designer, 1 Product Manager, 10 Developers, 2 QA

The Situation

After a failed release, Mayo Clinic set up a 2-day on-site to review the current state of Vendorbridge. Two years of development had produced something they couldn't actually use. The workflows were broken, the invoicing was a mess, and after all that time they were frustrated with what we had built.

It was clear a total redesign was needed, so I stepped in to lead a course correction. I rebuilt VendorBridge from the ground up using customer feedback.

Our Plan For Rebuilding

Before redesigning the core screens, we needed a solid foundation to build from. I worked with product stakeholders to map each role, identify pain points, and make sure we didn't repeat the same mistakes.

Instead of forcing everything into three screens, we redesigned the product around three custom ux/ui roles: Procurement, Supplier, and Reviewer.

Procurement

Creates and manages service contracts, defining scope, terms, and approval rules.

Initiates the workflow that suppliers invoice against once services are completed.

Supplier

Submits invoices tied directly to approved contracts and completed services.

Responds to disputes by providing documentation, corrections, or resubmissions.

Reviewer

Approve, deny, or dispute invoices sent by suppliers.

If a dispute is created, resolve the dispute by working with the supplier.

Constraints & Solutions

A tight timeline, an outsourced development team, and a complete product rebuild shaped the project from start to finish. To keep the project moving, I focused on clear communication, reusable design patterns, and close collaboration with developers.

Constraints

An outsourced development team and a tight timeline made collaboration difficult.

We needed to totally redesign the product screen by screen on a tight timeline.

Solutions

I attended all agile ceremonies and held sprint reviews. I was available through all stages of development to answer questions, unblock work, and spoke with developers to learn constraints before designing.

I created reusable page patterns and worked closely with developers early to align designs with technical constraints.

Feature Parity

There were three main screens for Vendor Bridge when I first joined. The plan was to start the redesign with these 3 to create feature parity then present to our client for feedback. After the client approved the design we would advance to redesign the rest of the application and new features.

After the client approved the design we would advance to redesign the rest of the application and new features.

Landing Page & Dashboard

Invoice Details & Creation

Contract Details & Creation

What Wasn't Working?

Before I had joined the project our client had a two day onsite feedback session to review current state of the product. One outcome of this onsite was they wanted a new designer, and that is where I came in.

The feedback we received could be summarized into 4 items:

Users often weren't sure what to do next. The interface lacked clear guidance and enough context to help them complete common tasks.

Many users weren't technical, yet much of the interface felt like internal software rather than invoices and contracts they recognized.

Key features were missing, including the ability to dispute invoices, forcing users to rely on manual workarounds.

Uploading invoices required downloading and re-uploading spreadsheets, while manual contract creation was slow due to missing fields and unnecessary steps.

Invoice Details & Creation

Confusing information architecture mixed contract and invoice data, making it difficult to understand what users were viewing.

Disabled inputs, unclear buttons, and a lack of guidance left users unsure what they could edit or do next.

Outdated visual design, inactive tabs, and unnecessary elements added clutter without providing value.

The page looks and feels like a real invoice, with related information grouped together.

Clear actions, simpler inputs, and straightforward navigation make the page easier to use.

Unnecessary tabs, side navigation, and visual clutter were removed to keep the focus on the invoice.

The page looks and feels like a real invoice, with related information grouped together.

Clear actions, simpler inputs, and straightforward navigation make the page easier to use.

Unnecessary tabs, side navigation, and visual clutter were removed to keep the focus on the invoice.

Invoice Formatting Iterative Design

Our first pass cleaned up the interface, but feedback showed we hadn't solved the bigger problem. It still didn't look or feel like a real invoice. Because many users weren't technical, we continued refining the layout through multiple rounds of VOC feedback until the experience felt more familiar and easier to understand.

Built-In Disputes

The original product had no way to dispute an invoice. I introduced a dedicated dispute flow that let suppliers, reviewers, and procurement resolve issues without leaving the product.

Invoice Submission

Submitting an invoice no longer required downloading and reuploading an Excel file. Instead, users completed a dedicated invoice screen that looked and felt like a real invoice while matching the experience across the rest of the product.

Invoice Submission OCR

Creating an invoice no longer required entering everything manually. Users could upload an invoice, where OCR automatically extracted key information from the document, then users could quickly review and correct the results before submitting.

Contract Details & Creation

Combining create and view modes made it unclear which fields were editable and which were read-only.

Users had to download and reupload an Excel file to attach an invoice.

Submitting an invoice required downloading and reuploading an Excel file, adding unnecessary steps.

Contract creation and contract details were split into separate screens, making each task easier to focus on.

The Excel upload was replaced with a dedicated invoice submission experience that felt like filling out a real invoice. (Previously Shown)

Additional contract details were brought onto the page, giving users the information they needed without extra navigation.

Contract creation and contract details were split into separate screens, making each task easier to focus on.

The Excel upload was replaced with a dedicated invoice submission experience that felt like filling out a real invoice. (Previously Shown)

Additional contract details were brought onto the page, giving users the information they needed without extra navigation.

The New Contract Details & Creation

The original page combined contract creation and contract management into one screen, making both harder to use. Splitting them into dedicated experiences gave each screen a clear purpose.

The new contract details page reused the same layout as the invoice details page. This created a familiar experience for users while keeping the product consistent.

Refining the Contract Creation Flow

The first version worked, but usability testing revealed that users weren't always sure what had been completed or what came next. I added a progress tracker and subtle completion indicators to provide better guidance throughout the flow.

Dashboard

Confusing navigation, unclear page hierarchy, and limited guidance made it difficult to know what to do next.

The layout felt outdated and didn't support the different needs of each user role.

Limited search and unclear contract status made finding and managing contracts more difficult.

Created role-specific dashboards so each user saw the information and actions most relevant to their work.

Added key metrics to give users a quick view of workload and to encourage insight into action.

Introduced a work queue to surface the highest priority tasks and help users stay on top of their work.

Created role-specific dashboards so each user saw the information and actions most relevant to their work.

Added key metrics to give users a quick view of workload and to encourage insight into action.

Introduced a work queue to surface the highest priority tasks and help users stay on top of their work.

Designed for Every Role

Rather than creating three completely different dashboards, I reused the same foundation across each role. Tabs, metrics, and content were then tailored to match what each user needed to see.

The Final Product

Continuing the redesign, we expanded the platform with supplier management, notifications, user profiles, and other features that enhanced the overall experience.

Feedback & Reception

After reaching feature parity, we validated the redesign through VOC sessions and then presented the updated flows to Mayo leadership for feedback and alignment.

Blake - thank you for jumping in with such enthusiasm and making an immediate impact since joining the team. Your dedication to enhancing the UI and UX has not gone unnoticed. I truly appreciate your thoughtfulness and hard work you bring to improving our users’s experience, and I value your partnership every step of the way.

Waseem H.

Director Product Delivery

What Changed & Why it Mattered

Improved the overall user experience by acting on VOC feedback and validating changes through ongoing user research.

Regained stakeholder confidence through a clear product direction, regular collaboration, and consistent progress throughout the project.

Strengthened the relationship with developers by designing with implementation in mind and working closely throughout the build process.

Established a stronger product foundation that made future features easier to design, build, and expand.

Let's Talk