Invoice and Billing
Scroll down to View
ui/ux case study : A Saas/B2b Invoice & Billing Platform
Invoice and Billing
Scroll down to View
ui/ux case study : A Saas/B2b Invoice & Billing Platform
Invoice and Billing
Scroll down to View
Invoice & Billing
Overview
This platform was designed to provide a comprehensive billing and payments solution, enabling businesses to process payments, modify invoices, and distribute customer payment links.
The products initial target was SMB's ( small Businesses) and the personas of the trusted employee or family member turned book keeper. As the product grew, it became a SaaS product for large service based companies, offering businesses of all sizes a user-friendly mini ERP solution.
Invoices and payments are seamlessly synchronized in a two-way sync with users' accounting software, enhancing efficiency and cost-effectiveness.
User Pain Points
The Problem
- Certain payment gateways are not always accepted.
- Invoice payments mailed traditionally take longer to be paid.
- Payments between payment application and accounting software do not sync bi-directionally.
- Manual entry of finding and updating the status of invoices.
Businesses frequently encounter challenges when attempting to automate invoice and payment processes through their accounting software. Many existing solutions offer limited synchronization capabilities, often supporting only one-way data flow for billing and payments, and they often impose restrictions on the choice of payment gateways.
Users are actively seeking a comprehensive platform that integrates seamlessly with their current payment gateway and enables bi-directional data synchronization between their accounting software and the payment application. Additionally, users require features such as the ability to send payment links and access a virtual terminal for processing payments.
Above all, users are in search of a platform that mirrors the functionality of their accounting software, thus minimizing the learning curve and allowing them to concentrate on their core business activities.
Chargezoom's role syncing the billing and payments process.
Chrome Extension Flow
This is a userflow done for a chrome extension design for the product.
Payment Link Sketch
This is a wireframe sketch for payment link checkout for products and services
Customer Detail Sketch
This is a wireframe for the platforms Customer Details page.
Dunning Wireframe
This a wireframe sketch of the dunning feature for the platform.
Invoice Page Wireframe
This is a wireframe iteration for the invoice page showing the positioning of snackbars.
Invoice & Billing: User Flow and lo-fidelity wireframe sketches for product features.
Chrome Extension Flow
This is a userflow done for a chrome extension design for the product.
Payment Link Sketch
This is a wireframe sketch for payment link checkout for products and services
Customer Detail Sketch
This is a wireframe for the platforms Customer Details page.
Dunning Wireframe
This a wireframe sketch of the dunning feature for the platform.
Invoice Page Wireframe
This is a wireframe iteration for the invoice page showing the positioning of snackbars.
Problem framing & Resolve
The Result
My design approach was deeply empathetic, aligning closely with users' existing accounting workflows to minimize the learning curve. The aim was to empower users to intuitively navigate the platform from day one, potentially requiring only a basic training tutorial.
Central to the design strategy was the creation of intuitive user interfaces, providing users with easily accessible pages to manage customer interactions and track recent activities. This seamless experience allowed users to effortlessly execute tasks such as invoicing, emailing, and payment processing, with all actions automatically synchronized with their accounting software. This ensured data consistency and accuracy between the billing and accounting applications.
By eliminating the need for manual paper invoices, our design solution significantly reduced payment delays. Users could now conveniently monitor their latest transactions and manage overdue payments directly from the dashboard, enabling swift action with just a single click.
Video: demonstrates the behavior of the invoice details page where users can process and make changes to open invoices
Customer Details Page
This is a finished iteration of the Customer Details page, showcasing it's various features.
Invoice Overview
This is a finished iteration of the Invoice overview page.
Subscriptions Creation Page
This is a finished iteration of the subscription creation page on the billing and payments platform.
Payment Link
This a design for a payment link that user can send to customers.
Mobile Design
This shows an iteration of the platforms mobile design as it would be seen on mobile browser.
Finished Designs: This shows the; customer details page, Invoice Overview, Subscription Creation Page, Payment Link & Mobile Application.
Customer Details Page
This is a finished iteration of the Customer Details page, showcasing it's various features.
Invoice Overview
This is a finished iteration of the Invoice overview page.
Subscriptions Creation Page
This is a finished iteration of the subscription creation page on the billing and payments platform.
Payment Link
This a design for a payment link that user can send to customers.
Mobile Design
This shows an iteration of the platforms mobile design as it would be seen on mobile browser.
Mobile Platform: Videos show mobile behavior and Ui, this was accessible by web browser. The mobile version of the application did not have all sections of the platform but rather based on users feed and and need when having to use the platform on their mobile phone.
Navigation Components & Style Library: These are two examples that are part of the Chargezoom design library. I created this system as the sole designer for the startup. Prior to my tenure and redesign their was no design system, nor style library for the platform. The task required close collaboration with product management and the development team to standardize and document the whole projects completion.