UIUX | Fintech | B2B | Blockchain | Web App

HamsaPay

Invoice Financing Platform

Overview

Redesigning Invoice Financing to Build Trust and Simplify funding

At-A-Glance

HamsaPay is a blockchain-based invoice financing platform for small businesses to secure funding faster and safer.

I led the full redesign—from research to execution—simplifying complex flows, clarifying navigation for dual-role users, and building trust across touchpoints.

The new experience helped drive 130% user growth in 3 months, $3.2B in transaction, and 90% user satisfaction, attracting trial customers like Uber Eats, Target, and JP Morgan.

My contribution

1.

Customer Insights & Ideation: Uncovering & translating valuable insights into actionable features that align with customer behaviors and motivations.

2.

Experience Strategy & Vision: Created frameworks, prototypes, and communicated a clear vision to align stakeholders, facilitating decision-making processes.

3.

Planning & Scope Definition: Balanced customer goals with business objectives, prioritized features for successful launches and future iterations with PM

4.

Design Execution & Validation: Developed design handovers, and build and maintain design system.

My Role

Design & Prototype
Design System & Branding

Team

Lead Designer x1
Eng x5, PM x1

Timeline

San Francisco
Jan - Dec, 2021

Tool

Usertesting
Figma, ProtoPie

Problem

Traditional invoice financing is Stressful, Slow, and Hard to Track

Before HamsaPay, small businesses had to submit complex paperwork, wait days for approval, and manually track repayments—often feeling skeptical, anxious, and overwhelmed.

‍Data analysts and compliance officers rely on spreadsheets, in-house systems, and legacy platforms to input, extract, and apply business rules, leading to inefficiencies and limited visibility across stages.
We see a clear opportunity to create a more streamlined, efficient, and transparent product experience to solve these financial challenges.

Why It Fails Today

Cumbersome Document Prep

Manual entry and scattered tools slow down application prep

Slow, Limited Funding Access

Long approval cycles delay funding and limit capital options

No Real-Time Tracking

Users can’t tell when clients pay or when they’ll receive funds

Stressful Experience

Unclear steps and rejection reasons frustrate small business owners

HamsaPay Solution: Streamlining the Borrower Journey

Design Challenge & Strategy

Solution Validated by the Market, but Poor UX -> Redesign!

Borrowers felt skeptical

No legal document explanation during onboarding

Borrowers felt overwhelmed

Hard to track multiple invoices per order

Borrowers felt anxious

No timely notifications
No central hub for notifications

The problem & constraint

Rebranding & solving complex UX problem with limited resource in a fast pace

Our user experience before this redesign was tedious. There was no clear brand representation making it indigestible for both our customers and potential investors. Applying for an invoice financing was super confusing for new customer users.
Being engaged with all facets of the business meant cooperation with different product managers and teams. Each of these products have a lot of user views which meant that the redesign had to carefully consider each stakeholder’s opinions on the requirements and goals.

HMW & strategy

How might we Rebuild a Trustworthy and Worry-Free Financing experience?

Simplify rule creation

An intuitive interface that reduces the learning curve and facilitates easy workflow configuration.

Enhance testing accuracy

Robust simulations that mirror real-world scenarios and optimizing system performance for large data sets.

Streamline data retrieval

An intuitive filtering system that allows compliance officers to quickly access audit-relevant information.

Ensure efficient deployment

Automating the rule integration process to minimize downtime and avoid disruptions to live operations.

Design challenge

How might we create an automatic and transparent platform that can form an effortless invoice financing experience for suppliers and buyers?

The solution

From Functional to Frictionless

Worry-Free Onboarding

We turned a previously daunting process into a guided experience.
By embedding explanations for each legal field and tailoring the flow by business type, we reduced user confusion and helped borrowers gain early confidence.

Worry-free onboarding

We image the onboarding process as a teaser to our new users, providing the just enough relevant contents in a comfortable range is the key.
Users can set the account type based on their business needs, complete the KYC form, invite the workspace members with a sharable link in order to receive a personalized dashboard experience, with a contextual sidebar to minimize user concerns.

Clarity in Transaction Management

We restructured the invoice dashboard with grouped views by order ID, added contextual sidebars for quick status reference, and surfaced required actions to the top—so users always knew what to do next.

Intuitive representation for complex data

The primary challenge we faced in the dashboard was displaying various edible numbers. We chose to arrange numbers logically based on how the sales process work, especially on mobiles since the sales spend most of their time travelling and process transaction via smaller devices. Thus, it’s easy for anyone to relate those numbers logically; also, with tiny round dots to represent the stage of each request.

Role Toggle Dashboard = New Business Potential

We introduced a new dashboard with Role Toggle tab, allowing borrowers to seamlessly switch and explore investor features.
This small UI addition unlocked new product surfaces and revenue possibilities without compromising usability.

An effortless way to view various notifications

Our users complained that they got the overwhelming amount of notifications every day. The reason was all messages looked the same. Therefore, I came up with adding an icon that classified each information and made the list accessible.
After the implementation, the notification engagement ratio increased by 7 %.

Notification System to Reduce Anxiety

We created a multi-channel notification system that bridged the gaps between email, in-app messaging, and dashboard alerts—giving users peace of mind and visibility throughout their financing lifecycle.

Contextual sidebar with actions highlighted, minimizing the navigation effort

The business owners care more about the pending or RFI invoices when they were processing financing requests. The statue and its causes are their biggest concern. Accordingly, we decided to add a contextual sidebar without breaking their reviewing flow, with status and actions highlighted.

Modern Look, Clearer Flow

Redesigned the UI to be clean, structured, and easy to scan—boosting efficiency and user trust.
(See Before vs After visual comparison.)

Before
After

Outcome

Build Trust = Boost Business

↑ 130% user growth

in 3 months. After the redesign, users found the app intuitive on both web and mobile.

90% user satisfaction

After the redesign, users described the UX as trustworthy, organized, and easy to use.

Expanded business

Land trial customer: Uber Eats, Target, JP Morgan,

Research & define

Before we paint the product with pretty pixels

Key findings from strategic discovery meetings

Clear brand representation required, aligning with homepage and product

Re-organzie information architecture

Form an experience that help to build the learning curve

Use simple language, learn how users address them

Key findings from user research & customer insights

The weekly customer insight meetings with our existing users proved to be super helpful, allowing us to gather hand-on insights and confirming our initial assumption

Notifications with similar looks is overwhelming

The sales complained that they get the overwhelmed amount of notification they get every day.

Team Account management needed

Sales team always have one admin who has higher authority, can invite and assign tasks to the rest teammates.

Our concept is powerful but complicated to potential customers

63% of potential customers find our solution super powerful but hard to understand at the start.

Error status matter more

The business owners more cares about the pending or RFI invoices since they are the ones blocking the money flow

Design & iterate

Translate concepts into features that address customer behaviours and motivations

User flow

In order to start designing, I decided to kick off with the information architecture and flow of the product and each financing model to narrow down the task the user needs to complete.

Crafting new visual identity

Our visual identify need to cover the ROW/China websites, two web applications, digital and offline material, which suffered from a breach of consistency. Henceforth we decided to make a scalable design system across all the platforms.
First, I worked with our marketing director to select keywords that describe our brand. This method helped, but it was by no means like the be-all-end-all. Further, I talked to our stakeholders to understand the company's vision.

Then, I started building out the mood board, pulling inspiration from previous discussions, Behance and Dribble, showcasing across the team.
And in this process, I even intentionally included some not-so-suitable examples because I want to keep the first couples of conversations as broad as possible to make sure we touched more angles before moving further. My team would comment on the ones they like, dislike, and why via Figma.

It was really helpful to do a mood board first because I didn’t need to spend a ton of time designing anything only to find it wasn’t going to work. I was able to cross that idea off my list initially. For example, our brand wants celebratory feeling, but we were more about the interaction than the visual elements.
Finally, we found our new brand look. Then we evolved our brand idea into a complete brand guideline definition, then emerged into company product website and web application.

Crafting dashboard UI

1. Define widgets based on user needs

We started with two question: what info do the users concerned the most and what is the best practice to present them, which allowed us to form a rough idea of the dashboard UI

2. Simplify widget sizes with grid layout, optimized by user flow

We twisted widget sizes and arrangement in grid layout, to help us create an essential structure for our product. Finally, we simplified our widget into three widths: large, small, and mini widgets.

3. Finalizing with the new brand identification

I tried different pairings, changed composition, polish specific alignments until it looked good. I kept similar margins/spaces between the elements to ensure visually proportional spacing.

Implement & evaluate

Iterate and enhance the feature with user feedback

Massive drop found in the onboarding process

Initially, we included more questionnaires and steps during the onboarding flow, which makes users spend more extended time preparing the required documents and provide quite a bit of personal information before they even understand its purpose, increasing concerns and anxiety, which leads to a massive drop of users.

We mapped all possible flow under signup and log in.

cut down all the redundant questionnaires to fabricate into two sections

let users easily resume onboarding later and send a reminder push notification in [X] hours

let users skip KYC entirely and let them do it only when they need to send/ receive financing credits

add a contextual sidebar with relevant support for information requested on each page to minimize users concern

Furthermore, we need to explain to the exceutives team and different stakeholders thoughtfully to explain the impact I was envisioning.

We released to 50% of the users, and 45% of users signed in and started using our product.
As a result, this flow ends up being a successful project of the year. Although it's a small design work, the thinking behind took us a long time.

Well-designed empty state benefit UX

The dashboard is the last step of our onboarding and the first step of our product, especially when they log in for the first time. Therefore, it's necessary to prepare for the empty state:

give new users a clear instruction of what to do or a quickstart guide

help new users have a better sense of the structure of the product

Below was the two initial ideas we had:

We preferred the 2nd one because these four CTA gave new users a clear clue of what they could do, however it gave users no chance to see the actual dashboard, and the four CTAs only appeared before users took any actions.
So we combined these two solutions-- Put the CTA in its corresponding widget.

And we also mapped all possible dashboard cases based on our persona to ensurers would not end up with an empty, clueless dashboard.

Takeaway

Looking Beyond Aesthetics and Embracing Collaboration

Looking beyond aesthetics

Focus on solving real problems, not just visual polish

Embracing the problem

Take time to fully understand user needs and align them with business goals.

Involving the developers

Early collaboration ensured solutions were feasible and scalable.

Sperta
Branding

The decision making platform

Type

Fintech

Timeline

Jan - Dec, 2021

My role

Strategy + planning
User research
Design + prototype
QA

Tool

Usertesting
Figma
ProtoPie
Jira

About the project

Discover how I gave this fintech product a fresh visual start. After our investors and potential companies showed great interest in our product, it was time to replace the outdated look with a redesign that match our ambitions.
The product is a supply chain financing platform with blockchain technology to enable global enterprises to make well-priced financing available to every tier of their supply chain, at the push of a button.

My contribution

In this project, I worked with one Design lead on

  • Strategic Discovery & Visual definition

  • Web/mobile application redesign & optimization

  • Component-based UI-kit

  • Product Design Sprints to explore new functionality

The problem & constraint

Rebranding & solving complex UX problem with limited resource in a fast pace

Our user experience before this redesign was tedious. There was no clear brand representation making it indigestible for both our customers and potential investors. Applying for an invoice financing was super confusing for new customer users.

Being engaged with all facets of the business meant cooperation with different product managers and teams. Each of these products have a lot of user views which meant that the redesign had to carefully consider each stakeholder’s opinions on the requirements and goals.

Design challenge

How might we create an automatic and transparent platform that can form an effortless invoice financing experience for suppliers and buyers?

The solution

Uniting the world through enlightened trade
Worry-free onboarding

We image the onboarding process as a teaser to our new users, providing the just enough relevant contents in a comfortable range is the key.
Users can set the account type based on their business needs, complete the KYC form, invite the workspace members with a sharable link in order to receive a personalized dashboard experience, with a contextual sidebar to minimize user concerns.

Intuitive representation for complex data

The primary challenge we faced in the dashboard was displaying various edible numbers. We chose to arrange numbers logically based on how the sales process work, especially on mobiles since the sales spend most of their time travelling and process transaction via smaller devices. Thus, it’s easy for anyone to relate those numbers logically; also, with tiny round dots to represent the stage of each request.

An effortless way to view various notifications

Our users complained that they got the overwhelming amount of notifications every day. The reason was all messages looked the same. Therefore, I came up with adding an icon that classified each information and made the list accessible.
After the implementation, the notification engagement ratio increased by 7 %.

Contextual sidebar with actions highlighted, minimizing the navigation effort

The business owners care more about the pending or RFI invoices when they were processing financing requests. The statue and its causes are their biggest concern. Accordingly, we decided to add a contextual sidebar without breaking their reviewing flow, with status and actions highlighted.

The outcome

Our clean looks = increased efficiency.

Increased users by 130% within 3 months after new launches

After redesigning the UX flow, users found the application on both desktop and mobile intuitive to use.

The improved UX liked by 90% of users

After rebranding the company identity, 90% of users appreciated its delightful experience.

The business landscape grown.

Land trial customer: Uber Eats, Target, JP Morgan, and we adapted our product for each specific needs

My approach & responsibilities

No tricks. Just strategy and collaboration

The process followed when solving this problem consisted of 3 phases, below is an overview of the latter:

Research & define

  • Stratefy: Align our understanding of the product and define the roadmap through several Discovery Sessions.

  • Research & analysis: conduct user research to define goals and pains

  • Prototype: created wireframes, which helped to gain alignment and drive decision-making within team.

Design & iterate

  • Ideation: uncover insights and translate concepts into features that address customer behaviours and motivations

  • Brand & UI: Jump on a new visual identity from scratch along with marketing materials, and UX/UI guidelines

Implement & evaluate

  • QA: with front-end dev team to implement MVP, and with QA team to test and optimize the product.

  • Usability testing: iteration and enhance the feature with user feedback

Research & define

Before we paint the product with pretty pixels
Key findings from strategic discovery meetings

  • Clear brand representation required, aligning with homepage and product

  • Re-organzie information architecture

  • Form an experience that help to build the learning curve

  • Use simple language, learn how users address them

Key findings from user research & customer insights

The weekly customer insight meetings with our existing users proved to be super helpful, allowing us to gather hand-on insights and confirming our initial assumption

Notifications with similar looks is overwhelming

The sales complained that they get the overwhelmed amount of notification they get every day.

Team Account management needed

Sales team always have one admin who has higher authority, can invite and assign tasks to the rest teammates.

Our concept is powerful but complicated to potential customers

63% of potential customers find our solution super powerful but hard to understand at the start.

Error status matter more

The business owners more cares about the pending or RFI invoices since they are the ones blocking the money flow

Design & iterate

Translate concepts into features that address customer behaviours and motivations
User flow

In order to start designing, I decided to kick off with the information architecture and flow of the product and each financing model to narrow down the task the user needs to complete.

Crafting new visual identity

Our visual identify need to cover the ROW/China websites, two web applications, digital and offline material, which suffered from a breach of consistency. Henceforth we decided to make a scalable design system across all the platforms.

First, I worked with our marketing director to select keywords that describe our brand. This method helped, but it was by no means like the be-all-end-all. Further, I talked to our stakeholders to understand the company's vision.

Then, I started building out the mood board, pulling inspiration from previous discussions, Behance and Dribble, showcasing across the team.
And in this process, I even intentionally included some not-so-suitable examples because I want to keep the first couples of conversations as broad as possible to make sure we touched more angles before moving further. My team would comment on the ones they like, dislike, and why via Figma.

It was really helpful to do a mood board first because I didn’t need to spend a ton of time designing anything only to find it wasn’t going to work. I was able to cross that idea off my list initially. For example, our brand wants celebratory feeling, but we were more about the interaction than the visual elements.

Finally, we found our new brand look. Then we evolved our brand idea into a complete brand guideline definition, then emerged into company product website and web application.

Crafting dashboard UI

1. Define widgets based on user needs

We started with two question: what info do the users concerned the most and what is the best practice to present them, which allowed us to form a rough idea of the dashboard UI

2. Simplify widget sizes with grid layout, optimized by user flow

We twisted widget sizes and arrangement in grid layout, to help us create an essential structure for our product. Finally, we simplified our widget into three widths: large, small, and mini widgets.

3. Finalizing with the new brand identification

I tried different pairings, changed composition, polish specific alignments until it looked good. I kept similar margins/spaces between the elements to ensure visually proportional spacing.

Implement & evaluate

Iterate and enhance the feature with user feedback
Massive drop found in the onboarding process

Initially, we included more questionnaires and steps during the onboarding flow, which makes users spend more extended time preparing the required documents and provide quite a bit of personal information before they even understand its purpose, increasing concerns and anxiety, which leads to a massive drop of users.

We mapped all possible flow under signup and log in.

  • cut down all the redundant questionnaires to fabricate into two sections

  • let users easily resume onboarding later and send a reminder push notification in [X] hours

  • let users skip KYC entirely and let them do it only when they need to send/ receive financing credits

  • add a contextual sidebar with relevant support for information requested on each page to minimize users concern

Furthermore, we need to explain to the exceutives team and different stakeholders thoughtfully to explain the impact I was envisioning.

We released to 50% of the users, and 45% of users signed in and started using our product.
As a result, this flow ends up being a successful project of the year. Although it's a small design work, the thinking behind took us a long time.

Well-designed empty state benefit UX

The dashboard is the last step of our onboarding and the first step of our product, especially when they log in for the first time. Therefore, it's necessary to prepare for the empty state:

  • give new users a clear instruction of what to do or a quickstart guide

  • help new users have a better sense of the structure of the product

Below was the two initial ideas we had:

We preferred the 2nd one because these four CTA gave new users a clear clue of what they could do, however it gave users no chance to see the actual dashboard, and the four CTAs only appeared before users took any actions.
So we combined these two solutions-- Put the CTA in its corresponding widget.

And we also mapped all possible dashboard cases based on our persona to ensurers would not end up with an empty, clueless dashboard.

Key takeaways

Lessons I've learn

Working for a start-up was an excellent experience for me. I enjoyed working in the fast-paced environment and seeing how our initial tech solutions transformed into the service that can impact people's lives. In addition, it was fascinating to test what kind of strategies would guide our users and address customer insights under the constraints and limitations.

One of the service features that set us apart from others is that it has a mechanism to accelerate the financing process of small business owners. This ensures that all the users are connected by credit flow and facilitates finance knowledge sharing. Although our team has experienced engineers, it is still very challenging to scale up a sustainable business model in such a short period. It seemed that local business owners needed to see profits that we could bring to them immediately and how to adapt our product into their own business need is a big challenge.

Additionally, I found that one thing which helped during meetings was sketching. It sounds simple indeed but did help us a lot. For example, when we were in discussions with many product managers and engineers, everybody argued about products and features. And people were talking to each other, but they did not see what was in the other person's head. So I started to draw those ideas on the shared whiteboard (Miro/FigJam) or sketch on my iPad Procreate. And as soon as I drew something, everyone could look at it, and then this was where it clicked because this was where we could actually start a real conversation. This method I took proved to be super helpful, especially we were working remotely, and accelerated the decision-making process.

NEXT
Sperta Design system

RoboForce – Copilot for AI Robots

Sperta – Financial Decision-Making Platform

HamsaPay – Invoice Financing Platform

Sperta – Scalable Design System

RoboForce – Brand & Website

Sperta – Brand & Website

RoboForce – Titan: Robotics Concept Design

Fliptrip – Trip Itinerary Planner