Selected workProject 4 of 4

Floowpay

Designing a simpler e-Invoicing experience for Malaysian businesses.

Role
Product designer
Team
A team of 6
Timeline
2025–2026
Tools
  • Figma
  • FigJam
  • Lovable
  • Google Gemini
Platform
Web, desktop and phone
The Floowpay app landing page: a dark hero with a mock invoice workspace showing a total of RM 12,840, due and overdue counts, and a payment timeline.
The app landing page.
A Floowpay notifications panel with All, Unread, Payments and Overdue tabs, listing invoice events with status colours.
Notifications, sorted by what needs attention.
Two Floowpay phone screens: the Create Your Account form with a password checklist, and the marketing home page promoting e-invoicing.
Sign-up and the marketing site on a phone.

Overview

Floowpay is a web-based financial operations and e-Invoicing platform for Malaysian businesses. It brings customers, products and services, invoices, estimates, payment visibility and MyInvois-related workflows together in one place.

As a product designer, I was responsible for simplifying the experience, structuring the main user journeys and designing the interface. I also used Lovable to turn the design direction into a working prototype, which allowed us to review and refine the product in context.

Problem

Malaysia’s e-Invoicing rollout added a new layer of complexity to everyday invoicing. Businesses still had to manage customers, products and services, invoices and payment follow-up, and they now also had to meet structured MyInvois requirements.

How might we make invoicing and e-Invoicing feel clear and approachable, without expecting people to understand the technical side of the system?

Our review showed that the friction was concentrated in five key areas:

  • Customer setup: Malaysian and foreign customers, and businesses and individuals, each need different information, which made a single form confusing.
  • Product and service setup: every item has to be set up with the right details before it can be added to an invoice.
  • Invoice creation and review: an invoice has to be correct before it moves on, so users need a clear way to check it.
  • MyInvois-related information: e-Invoicing adds structured fields that many business owners have not dealt with before.
  • Invoice status and payment visibility: users need to see at a glance what has been paid, what is due and what is overdue.

Research

Firstly, we wanted to understand how businesses in Malaysia are actually run. We spoke with Malaysian business owners about how they manage their customers, invoices and payments day to day, and the team also spoke with Floowpay’s founders to understand the goals behind the product.

Alongside these conversations, I reviewed the Malaysian invoicing and e-Invoicing context, and studied how existing products handle customer setup, invoice creation, business and document settings, and structured financial information.

The key insight: people should be able to focus on finishing the task, not on understanding the system behind it.

This insight informed the principles that shaped the product:

  • ask only for relevant information
  • design clearer forms
  • connect the workflows
  • keep status visible
  • use simpler language
  • reveal complexity only when it is needed

User flows

From business setup to a tracked invoiceChoose a step to see what happens there.

  1. The business is set up first.

  2. Each customer type sees only the fields that apply to it.

  3. Items are set up once and added to invoices.

  4. Built from the customer and the items, as one connected journey.

  5. The invoice is checked clearly before moving on.

  6. The information it needs, without unnecessary technical detail.

  7. Invoice and payment status are easy to read afterwards.

A user flow diagram titled Userflow for small business owner: from the landing page to sign-up or sign-in, onboarding, then the dashboard branching into invoices, customers, reports, settings and notifications, with customer creation split into Malaysian and foreign, business and individual.
The detailed user flow for a small business owner, from the Floowpay design file.

How I built it

  1. Understood the requirements. I began by understanding the business needs and what e-Invoicing requires of each invoice.
  2. Mapped the main user journeys. This showed how people move from setting up their business to getting paid.
  3. Structured the information architecture. I organised the product so that related tasks sit together and are easy to find.
  4. Designed the core flows. These covered customers, products and services, invoices and onboarding.
  5. Simplified forms and status messages. Every field and message was reviewed to ensure it was necessary and easy to understand.
  6. Made patterns consistent across the product, so that each new screen felt familiar.
  7. Built a working prototype in Lovable. Once the Figma designs were complete, I turned them into a working prototype in Lovable that behaved like the real product.
  8. Reviewed it in context. Using the prototype, we refined the interactions and the responsive behaviour.
  9. Worked alongside the developers. The code from the Lovable prototype went into the product, and I worked alongside the developers as it was built.
The Floowpay dashboard in the Lovable prototype: a sidebar with Dashboard, Invoices, Estimates, Customers, Reports, Products and services and Settings, a Quick Invoice button, cards for total revenue, invoices and pending amounts in Malaysian ringgit, and an Invoice Trend line chart with 3-month, 30-day and 7-day filters.
The dashboard in the Lovable prototype, built after the Figma designs and shown with sample data.

Key decisions

  1. Conditional customer forms. Each customer type is shown only the information relevant to it, which removes unnecessary fields and reduces confusion.
Before: an early Add Malaysian Customer screen in black and white, with a text menu on the left, step 3 of a 4-step list at 75 percent, and a small address form in the left half of the page.
Before: an early version of adding a Malaysian customer.
After: the redesigned Add New Malaysian Customer screen with a Business tag, an icon rail, step 3 of 4 Address Information with a blue progress bar, and one column of required address fields with Back and Continue buttons.
After: the customer type is shown at the top, and each step is named, in one clear column.
  1. One connected workflow. Customers, products and services, and invoices work together as one journey rather than as separate tools. For example, an invoice can be started directly from a customer’s record.
The Floowpay Customers page: totals for customers, active customers, revenue and average invoice value, then a table of companies with contact person, phone, email, invoice count, total amount, an Active status, and View and Create Invoice actions on each row.
Every customer row has a Create Invoice action.
The Floowpay Products and Services page: totals for products, services, overdue and total, a filter, an Add New Item button, and a table of items with SKU, a Product or Service type tag, price, an Active status, and edit and delete actions.
Products and services, ready to add to an invoice.
  1. Clear invoice review. Users can review the invoice exactly as it will appear before moving on to the MyInvois-related steps.
The Floowpay invoice builder: a draft invoice INV-2025-001 shown as a document on the left, and a panel on the right with customer detail, invoice details, tax rate and currency, and item columns that can be turned on and off.
The invoice is shown as the document it will become, with an Editor and Preview switch.
  1. Better status visibility. Once an invoice or estimate has been created, its status can be understood at a glance.
The Floowpay Estimates page: totals for estimates, pending value, accepted and this month, then a table of estimates with customer, amount, date, expiry date, item count, and a coloured status: Pending in yellow, Accepted in green, Expired in red and Draft in grey.
Estimates, each with a coloured status.
  1. Simplified technical complexity. Users enter and review the information that MyInvois-related workflows require, without being exposed to unnecessary technical detail.

Solution

Our solution was one connected product that supports the core business workflow from start to finish. It was designed for:

  • clarity, with complexity revealed only when it is needed
  • consistent forms
  • a stronger visual hierarchy
  • responsive layouts
  • clearer invoice status and payment visibility
  • simpler MyInvois-related workflows
The Floowpay dashboard design: a revenue summary line chart with 5Y, 1Y, 30D and 7D filters, then Overdue Invoices and Due This Week lists in Malaysian ringgit, each with Send Reminders and View All buttons.
The dashboard puts money first: revenue, what is overdue and what is due this week. From the Floowpay design file.

Outcome

Floowpay moved from design into a live, early-stage product, built from the Lovable prototype together with the developers. It is now used for demos, onboarding and outreach with Malaysian businesses. The following features shipped:

  • customer management
  • products and services
  • invoice creation
  • estimates
  • payment visibility
  • MyInvois-related workflows
  • responsive web use

Testing after launch. Once the product was live, we tested it with Malaysian businesses. This revealed two important insights. Firstly, most Malaysian businesses run their day-to-day buying and selling on WhatsApp. Secondly, even after onboarding, many business owners did not have the time to use a separate product.

The next phase. This feedback was where the idea for the next phase of Floowpay came from: building our own AI assistant inside WhatsApp, where business owners already buy and sell, so that they can create their invoices without leaving the conversation. The assistant is still in development and is not yet live.

What I’d do next

  • test the WhatsApp assistant with Malaysian business owners before it launches
  • measure where people drop off during onboarding
  • refine the MyInvois setup experience
  • improve the invoice correction and adjustment flows
  • improve accessibility
  • strengthen product analytics
  • expand the design system

What I learned

Meet users where they already work. Testing after launch showed that a well-designed product is not enough if it asks people to change how they run their business. Malaysian business owners already work on WhatsApp, so the next step was to bring Floowpay to them, rather than asking them to come to Floowpay.

Simplicity comes from sequencing, not removal. E-Invoicing has requirements that cannot be skipped, so the goal was never to ask for less. It was to ask at the right moment. Showing each customer type only the fields that apply to it taught me that a complex process can still feel simple when every step is relevant and clearly explained.

Friction often sits between screens. Designing customers, products and services, and invoices as one journey showed me that much of the effort in invoicing comes from moving between tasks, not from any single form. When each step builds on the one before it, the next task becomes easier to start and to complete.

A working prototype shows what static screens cannot. Building the design direction in Lovable allowed us to review interactions and responsive layouts in context. This revealed details that static designs do not show, and informed how we refined the experience.