ProInvoice – B2B Financial SaaS Workflow & Dashboard

ProInvoice is a full-featured invoicing and financial management SaaS platform designed for small and medium-sized businesses (SMBs), freelancers, and finance teams. I led the product from concept to launch, creating a scalable design system, responsive web and mobile interfaces, and intuitive workflows that simplify complex financial tasks.

Client:

Genyz Solutions {Fronesyz}

Role:

Lead Designer

Year:

2022 - 2023

See Live Project

proinvoice - an online invoicing software
proinvoice - an online invoicing software
proinvoice - an online invoicing software

The Problem

SMBs and freelancers often struggle with manual invoicing, financial tracking, and reporting. Existing solutions were either too complex, lacked mobile responsiveness, or didn’t integrate seamlessly into daily workflows. This led to:


  • Time-consuming invoice creation and management

  • Errors in financial documentation

  • Frustrated users and slow adoption


Goal: Design a user-friendly, scalable, and accessible SaaS platform that streamlines invoicing, improves accuracy, and enhances operational efficiency.



Target Audience


  • Finance Administrator: Needs fast, accurate invoice creation for multiple clients

  • Freelancer / Small Business Owner: Wants simple, branded invoices and easy payment tracking

  • Operations Manager: Requires dashboards to monitor cash flow and workflow efficiency


User pain points: complexity, lack of mobile-friendly solutions, scattered financial information


Process


Our team started the project by understanding the user's needs, and gathering feedback from users. We conducted extensive research on the real estate industry and competitors' websites to identify best practices and trends.

  1. User interviews & research

  2. Synthesis the findings

  3. Ideating the solution

  4. Craft a prototype with the main idea

  5. Test with users to validate the idea



User Research


  • User Interviews: Conducted sessions with 15 SMB owners and freelancers to understand pain points and workflow frustrations


  • Competitive Analysis: Reviewed top invoicing and fintech SaaS platforms to identify gaps in usability, accessibility, and responsive design



Some of the Research Questions


  • What are the current challenges faced by small and medium-sized businesses when creating and sending invoices to their clients?

  • What features and functionalities are most important to small and medium-sized businesses when selecting an invoicing generator?

  • What are the preferred payment methods for small and medium-sized businesses when paying invoices?

  • What are the common pain points in the invoicing process and how can they be addressed through technology?

  • How important is the ability to customize invoice templates and brand them with business information?



Key Insights


  • Small and medium-sized businesses commonly struggle with manual data entry, calculation errors, and difficulty tracking payment status of invoices.


  • Features such as ease of use, customization options, automatic calculation, and payment tracking are highly valued by small and medium-sized businesses.


  • Most small and medium-sized businesses prefer to receive payment through online payment gateways, but also value the option to receive payments via check or bank transfer.


  • The ability to customize invoice templates with business branding and information was found to be important for creating a professional image and building trust with clients.


  • The invoicing process can be improved through automation, better payment tracking, and a more user-friendly interface.



The user research findings provided valuable insights into the challenges faced by small and medium-sized businesses in the invoicing process, as well as their preferences and priorities when selecting an invoicing generator. The findings also informed the development of the invoicing generator web application, ensuring that it meets the needs and expectations of its target audience.



Design Process


From the insights gained from the research, we figured that we need to develop a solution that streamlines the invoicing process for small and medium-sized businesses. A solution that will allow users to create and send invoices to their clients quickly and easily, without the need for manual data entry or complex software.


  • Sketched core workflows for invoicing, client management, and dashboards

  • Created low-fidelity wireframes to test layout and flow of complex financial tasks





Wireframes









proinvoice wireframes
proinvoice wireframes
proinvoice wireframes
proinvoice wireframes

Design System Development

  • Established a financial services–oriented design system:

  • Typography hierarchy for readability in dashboards and reports

  • Color palette for functional states and accessibility (WCAG 2.1)

  • Component library with buttons, forms, tables, and modals

  • Grid system for web and mobile consistency


proinvoice style guide
proinvoice style guide
proinvoice style guide

High-Fidelity Design & Prototyping

  • Designed responsive web and mobile interfaces in Figma

  • Applied a scalable design system including typography, color tokens, grid system, buttons, and reusable components for consistency.

  • Developed interactive prototypes for usability testing.



Website


proinvoice website (mobile and desktop)
proinvoice website (mobile and desktop)
proinvoice website (mobile and desktop)

Web App

proinvoice web app (mobile and desktop)
proinvoice web app (mobile and desktop)
proinvoice web app (mobile and desktop)
proinvoice mobile app
proinvoice mobile app
proinvoice mobile app

User Testing Journey for ProInvoice: Shaping Excellence Through Feedback


  • Conducted 2 rounds of testing with 10 users each

  • Iterated on workflows and UI components based on feedback:

    • Simplified invoice creation flow

    • Improved mobile navigation and responsiveness

    • Enhanced data visualization in financial dashboards


Results & Impact


  • Successfully launched full platform from scratch on web, iOS, and Android

  • Increased user engagement and adoption by 25% within the first month

  • Streamlined invoice creation and management, reducing errors and task time

  • Built a reusable design system supporting scalable future product updates

Key Takeaway

  • Early integration of user feedback in complex workflows significantly reduces rework

  • Building a design system alongside the product ensures consistency and faster future iterations

  • Effective B2B SaaS design requires balancing feature richness with simplicity and clarity

Other Projects

Create a free website with Framer, the website builder loved by startups, designers and agencies.