Invoicing Redesign
Empowering supplier trading with smarter invoicing solutions.
I led the UX redesign to streamline and rebuild the supplier invoicing experience for Marcura, a B2B maritime trading platform that allows buyers and sellers to trade in marine goods.
The Impact
→ 16% Uptick in total invoices
→ 4 New suppliers onboarded to ShipServ
→ 39% Reduction time in invoice creation
→ 4.6 CSAT Score (Invoicing)
ROLE
UX Designer
TEAM
UX, Engineering
TOOLS
Figma
Loveable
Maze
Miro
Power BI
Datahub
Final Solution
Bulk Upload
Invoice Checker
New
Invoice Checker
Invoice Checker allows you to upload your invoices, ensures all data is correct, then auto submitted to your buyers.
Drag and drop
or upload a file
JPG or PDF
Upload
Problem
Most suppliers could complete a transaction, but only 20% proceeded to invoice, treating it as an optional step instead of a critical endpoint. This made it hard to ensure payment traceability, automate financial workflows, and provide a complete audit trail.
We wanted to understand why users weren’t adopting invoicing, and what we could do to improve the transaction-to-invoice conversion rate, turning invoicing into a natural, expected part of the workflow rather than an afterthought.
Business Goals
1
Improve transaction to invoice ratio.
Increase the amount of transactions that include an invoice.
2
Reduce invoice submission time
Reduce the time taken from invoice creation to submission to buyer.
3
Onboard 4 prospective suppliers
Satisfy the invoicing criteria required to onboard targeted suppliers.
Role
As the UX design lead, I worked through ideation and strategy.
→ I created the full design flow for invoicing creation, management and in-house tooling.
→ I led concept testing & usability studies using AI built prototypes
→ Worked and communicated across 3 teams to provide alignment (Engineering, Data & Solutions)
→ Provided rapid feedback reacted quickly to changing requirements
My Approach
1
Clear, concise & collaborative.
Understand the parties involved, and keep a responsive and open communication channel.
2
Work with, not against.
Ensure everyone feels heard, and act quickly on any pivots or concerns
3
Work smart & holistic.
Respect the current design system where necessary, and think platform wide.
Research
Opening Discovery Workshop
The solution teams has spent years receiving feedback on our invoicing solution from their clients. I thought it valuable to dig deep into these insights, wherever they are stored, and share them across teams. This was a fairly informal setting, but it created an initial baseline between us.
We also spent time mapping out the current flow, identifying the user pain points, and where we could improve based on the feedback
Discovery Session
Research
Internal & External Research
User Interviews
User Interviews
I spoke to some of our current users for invoicing to get direct feedback. This uncovered some key issues, as well as some quick wins.
Hotjar Recorded User Sessions
Usability Reviews
We had installed HotJar to record invoicing sessions. Here i could gather some important data, and understand some frustrations suppliers where experiencing.
Gap Analysis
Stakeholder Workshops
I communicated with all stakeholders to supplier invoicing internally to get a broader understanding of some of the pain points, as well as constraints for the project.
GA4 Path Exploration
Data Analysis
investigated the repository of recorded analytics through Google Analytics, which i could sift through to get some quantitative data such as average submission time, and purchase to Invoice %.
Research
Issues we identified
1
Bulk Invoicing is tedious
Users would often do their invoicing in bulk. This lead to lots of repetitive and slow work, and having to input similar data for every invoice.
2
Manual Inputs
Users had to add all of the inputs manually, and that caused major frustration, as we had some of the data in our master data.
3
Invoice Status
Users didn't know what happened after they submitted an invoice. They had no feedback on whether it was received or read. They often resorted to following up with the buyer via email.
4
Lacking Features
Users didn't get the same roster of features that we have in other list based UIs. Users wanted the ability to filter & customise their lists, to ease invoice navigation.
Research
Current Design
I spent some time with the product team to collate all of the information, and start to define what success looks like, and how we can achieve it. We reviewed all of the feedback, and assessed which ones where important to focus on for this iteration. We identified four major pain points to address.
Invoice Management
Invoice list made finding invoices difficult, and no clear division of invoices and invoice types.
Invoice Creation
Invoice creation requires lots of data, however we have a lot of the data already stored.
Ideation
Ideating solutions
At this point, I had everything I needed to dive in and start sketching ideas. i was able to start my ideation phase. This consisted of the following:
Initial ideation phase completed, I had enough artefacts to get the idea validated by the user, and stress tested by engineering. A few more supporting documents came out of this stage, such as excel documents for validations, rules, fields, master data required and data dashboards
Whiteboarding
I use whiteboarding to throw all of the problems and ideas into one space.
User Flows
I put together some initial flow diagrams for invoice management & submission.
Conceptual Design
I started with some mid-fi component designs to get my ideas across to the team.
Technical Limitations
I caught up with engineering to pitch some of my initial ideas to get a quick feedback on any technical limitations we could face.
Ideation
Prototyping with AI
Using AI, I was able to build some rough prototypes which we could use for testing. I chose to use Lovable. I was able to prototype a few different iterations to three key flows we wanted to test; autofill, bulk processing & transaction list enhancements
+
Autofill
Concept 1
OCR Parsing
Allowing the user to upload their buyers invoice, and automatically extract all of the data using our OCR & AI capabilities.
Bulk Processing
Concept 2
Bulk Processing Documents
The ability to drag multiple invoicing documents directly to the transaction screen, and creating drafts automatically.
Transaction Improvements
Concept 3
Transaction List Improvements
Multiple UX enhancements to the transaction list, such as saved filters, sorting, analytics and invoice folders.
Testing
Concept Testing
We tested time to completion, clicks to completion, and heatmap data to evaluate the usability of the concepts. We also asked for feedback after the session.
1
Concept 1
Clear improvements with the autofill feature with already onboarded suppliers
1m 13s Submission Times
23 Reduced Clicks
8.5 Ease of Use Scores
90% Task Success Rate
2
Concept 2
Bulk uploading allowed users to drag multiple invoices to send to their buyers.
12s Upload per Invoice
4 reduced click actions
8.7 Ease of Use Scores
87% Task Success Rate
3
Concept 3
General invoice list enhancements saw increased customer satisfaction.
4.4 CSAT Score
Ideation
Reiterating based on feedback
Using the Maze data, we did a final round of design changes to our prototypes, using feedback provided from our test users. We moved our designs back to Figma, connecting the prototypes together, annotating them and presenting them for refinement.
Feedback for Autofilling
Testing
Deploying to Beta environment
We now had everything we needed to deploy the feature update to our beta users. That way, we could see how the updates held up in the real world, and whether they actually solved the problems we set out to fix.
Time to Invoice
We measured the avg. time to invoice. We recorded a reduction of 22% in time taken to submit an invoice (single session).
Manual Inputs
We tested the amount of manual input the user had to do in order to submit an invoice. We saw a huge reduction of data entry, and user interaction
Conceptual Design
We tested how many invoices a user tends to submit per session. We recorded an increase of 19% more invoices being submitted per session
Technical Limitations
I caught up with engineering to pitch some of my initial ideas to get a quick feedback on any technical limitations we could face.