Mayo Clinic
SaaS Invoice Redesign
Saving a multimillion-dollar hospital contract with an invoicing platform redesign.
I led a full course correction of Vendor Bridge, simplifying workflows, improving invoicing clarity, and bringing the experience up to the expectations of a large healthcare client.
Timeline
6/25 – 11/25
Role
Lead UX/UI Designer

Overview
What is Vendor Bridge?
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.
The Situation
Mayo Clinic Threatened to Terminate Our Contract
After a failed release, Mayo Clinic set up a 2-day on-site to review the current state of Vendobridge. 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 from the start the product needed a full redesign. The dashboard was a static table with no guidance, missing features, and fragmented workflows.
Our Goal
Rebuild Vendor Bridge
Complete a full redesign of Vendor Bridge in three months to fix broken workflows, simplify the experience, and make it usable day to day, while meeting the expectations of a major healthcare client and rebuilding confidence in the product.
My Role & Responsibilities
Sole Product Designer/Led the redesign from start to finish
User Interface & Visual Design
QA & Development Support Throughout
User Research & Competitive Analysis
Cross functional collaboration between Product, Stakeholders and Developers
Approach
Our Plan for Rebuilding
When I joined the project, the first priority was to stabilize what already existed. We set a plan to achieve feature parity by fixing the broken and incomplete features, creating a solid base to expand from.

Evaluation & Repair
Our goal was to reach feature parity across the dashboard, invoice details, and contract management. User feedback helped guide how we approached that work, surfacing a few key themes:
What Was Feature Parity & How Can We Fix Current State?
No Clear Action
Users couldn’t tell what to do next, with the interface offering no clear guidance.
Confusing UI
The screens didn’t feel like an invoice or contract and were just very confusing.
Missing Features
There was no way to dispute invoices, creating a major workflow gap.
Internal Heuristic Analysis & Evaluation
Before beginning the redesign, I took time to understand what wasn’t working and why, conducting my own analysis to avoid repeating the same issues
The Dashboard/Landing Page

1
2
4
3
5
6
1
Unclear tab architecture
Tabs didn't reflect user workflows—navigation felt arbitrary and users couldn't predict what they'd find where.
2
No page hierarchy
Dashboard title and CTA appeared without context, leaving users unsure of their location or next steps.
3
Overall Page Design
The interface lacked visual refinement and didn't communicate trustworthiness to enterprise users managing millions in contracts.
4
Role-based inconsistency
The same layout served, reviewer, procurement and supplier roles without addressing each role's actual needs.
5
Status visibility gaps
Contract and invoice status—critical for procurement—blended together without clear distinction, creating compliance risk.
6
Search without structure
Search existed but offered no filtering options, making it impossible to narrow results in a database of thousands of contracts.
Contract Creation & Details

1
2
4
3
5
6
1
Disabled navigation elements
Tabs and fields were disabled without explanation, leaving users unsure whether they could interact with content or why certain options were unavailable.
2
Confusing page instructions
Introduction text and headings were awkwardly written, making it unclear what users should do or what section they were in.
3
Always active input fields
Input boxes appeared in an active state even when disabled, creating visual confusion about what was actually editable.
4
Manual invoice upload burden
To attach an invoice to a contract, users had to download and reupload an Excel sheet, adding unnecessary friction to the workflow.
5
Primary action buttons
Buttons appeared randomly throughout the form with no context, and critical dispute functionality was missing entirely.
6
Dated visual design
Cluttered drop shadows and outdated styling made the interface feel unprofessional and difficult to scan quickly.
Detailed Invoice Screen

1
2
4
3
5
6
1
Inactive tabs with no purpose
Tabs appeared in the navigation that weren't even active or relevant to the current view, adding visual clutter without value.
2
Confusing information architecture
Mixed contract and invoice data in navigation without clear separation, making it difficult for users to understand what they were viewing.
3
Disabled input fields always active
Input boxes appeared in an active state even when disabled, creating confusion about which fields were actually editable.
4
Outdated visual design
Dated styling made the interface feel unprofessional and difficult to scan, undermining user confidence in the system.
5
Buttons without context or dispute
Secondary buttons appeared with no explanation, and critical dispute functionality was entirely missing from the interface.
6
Inputs with no guidance
Input fields appeared without context or instructions, leaving users uncertain about what data belonged where or why fields existed.
User Feedback Loop
Iterative Design Approach
I started the redesign with the invoice details page, using VOC feedback to guide an iterative feedback loop on this screen. While only one feedback cycle is shown here, this process was consistently applied across the redesign.

V1
The Starting Point
Users said the screen didn’t match how they expect invoices to look, making it confusing and hard to read.
V2
Improved, but Still Off
I improved spacing, hierarchy, and structure, but it still didn’t feel like an invoice for non-technical users.


V3
Matched Real-World Expectations
Shifted to a more document-like layout with familiar patterns to better match how users expect an invoice to feel.
Repair & Improvement
Reworking the Original Screens
After aligning on the new direction and getting client approval, the three screens were redesigned to be more clear and easier to use. This set the foundation for how the experience adapts across each role.
The Dashboard/Landing Page
Rather than a generic list view, we built role-specific landing pages that surface high-priority work, key metrics, and actionable insights upfront. The reviewer dashboard is shown below.


Role Based Dashboards
Show only what each role needs.
Remove irrelevant data
Focus on key decisions
Work Queue
Keep critical work front and center.
Surface disputes and approvals
Defer non-urgent tasks
Key Metrics
Turns insight into action.
Highlight priority trends
See workload at a glance
Create Invoice & Invoice Details
Split invoice creation and details into separate screens, replacing Excel uploads with more flexible options like manual entry, email, and OCR uploads. The invoice details view was reorganized to surface key information, clarify status, and added a dispute functionality.


Flexible creation
Multiple ways to create invoices.
Manual entry
Email submission/Upload + OCR HITL
Familiar structure
Matches how invoices actually look.
No Excel dependency
Built for non-technical users
Faster input
Less friction, quicker completion.
Streamlined fields
Clear flow from start to finish

Clear overview
Everything important, in one place.
Key info surfaced upfront
Continued the physical invoice mental model
Action-ready
Next steps are obvious.
Approve, reject, dispute
Status always visible
Better organization
Easier to scan and understand.
Clean hierarchy
Reduced clutter
Create Contract & Contract Details
Split contract creation and details into separate screens, introducing a clearer flow with progress tracking across the contract lifecycle. The details view reuses the invoice layout for consistency, improving usability and making actions like adding invoices quick and straightforward.

Separate flow
Separate from invoice details
Clear step-by-step process
Reduced confusion upfront
Guided input
Structured to match contracts.
Logical field grouping
Progress tracking through steps
Faster setup
Less friction to create contracts.
Streamlined inputs
Clear path to completion

Consistent layout
Built on the invoice details structure.
Familiar UI patterns
Fasted development
Actionable view
Key actions are easy to take.
Add invoices in one click
Manage contracts more efficiently
Clear structure
Clean design and scannable.
Better organization of key data
Reduced clutter across the page
The New Flow
Switching to a Role-Based Structure
After reviewing user feedback and stakeholder input, we stepped back and rethought the structure. 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.

Wrapping Up
The Redesigned Product
Due to the length of the case study, this is a condensed view of the final work. What you’ve seen here reflects my overall approach, how I restructured the product, simplified key flows, and iterated based on regular user feedback. I’m happy to walk through the full set of designs, decisions, and iterations in more detail in a conversation.
The final designs shown below represent the next phase of the redesign as the product continued to evolve.
Two additional role-specific dashboards
Expanded information and features on invoice details
Expanded information and features on contract details
More complete dispute functionality
Additional features currently in progress




The Result? A Platform That Looks, Works, and Feels Completely Different.
Wrapping Up
Feedback & Impact
The redesign received great feedback from the client, team members and Vizient Leadership.
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.
Senior Director of Product Delivery
Thank you for being a UX design weapon on the Service Sync project. I want to recognize you for: Raising the bar on Service Sync design, providing high quality design iterations in a timely manner, being a true advocate of the customer by leading VoC sessions and incorporating their feedback into our solutions, leading client facing UX presentations, collaborating with the engineering team to address design feedback, and being a great design partner. Looking forward to our continued collaboration.
Matt C.
AVP Finance Delivery
What Changed and Why it Mattered
VendorBridge went from a confusing, outdated liability to a tool users trust and Mayo Clinic depends on, thanks to a complete redesign and renewed relationships across teams.
Streamlined Core Workflows
Simplified the product with clearer navigation and a more structured interface, making key tasks faster and easier to complete.
Rebuilt Stakeholder Confidence
Worked closely with stakeholders to align on a better direction and regain support for the redesign.
Repaired a Strained Client Partnership
Delivered clearer, higher-quality work and collaborated closely with the client to rebuild trust and move forward.

