ADD FEE
MODAL
Simplifying fee automation to streamline payment workflows.
PROJECT STATS
In Fees Collected
Design Iterations
Insight-Driven Design
Insight-Driven
Design
User Interface Work
Stakeholder Presentations
Total Transactions Processed
THE PROBLEM
Fullbay users wanted a streamlined way to automate credit card fees for select shops or individuals. This could mean applying a flat fee or percentage based on the transaction. Previously, there was no native support for this, forcing users to do manual workarounds, which increased errors and support tickets.
This feature needed to serve all user types within the Fullbay ecosystem from veteran users to newcomers without gating access behind a paywall. The business imperative was clear: enable smoother payment operations while maintaining compliance and trust.
THE PROBLEM
Fullbay users wanted a streamlined way to automate credit card fees for select shops or individuals. This could mean applying a flat fee or percentage based on the transaction. Previously, there was no native support for this, forcing users to do manual workarounds, which increased errors and support tickets.
This feature needed to serve all user types within the Fullbay ecosystem from veteran users to newcomers without gating access behind a paywall. The business imperative was clear: enable smoother payment operations while maintaining compliance and trust.
THE PROBLEM
Fullbay users wanted a streamlined way to automate credit card fees for select shops or individuals. This could mean applying a flat fee or percentage based on the transaction. Previously, there was no native support for this, forcing users to do manual workarounds, which increased errors and support tickets.
This feature needed to serve all user types within the Fullbay ecosystem from veteran users to newcomers without gating access behind a paywall. The business imperative was clear: enable smoother payment operations while maintaining compliance and trust.
THE 2 BIG CHALLENGES
Our dev team had minimal experience beyond Bootstrap, so we had to keep UI technically simple and implementation light. Often using things straight out of the framework to avoid any "can't do".
Our dev team had minimal experience beyond Bootstrap, so we had to keep UI technically simple and implementation light. Often using things straight out of the framework to avoid any "can't do".
Our dev team had minimal experience beyond Bootstrap, so we had to keep UI technically simple and implementation light. Often using things straight out of the framework to avoid any "can't do".
This was the first time user testing had been formally introduced at Fullbay. I had to advocate for and get approval to conduct user research, making stakeholder education part of the design challenge.
This was the first time user testing had been formally introduced at Fullbay. I had to advocate for and get approval to conduct user research, making stakeholder education part of the design challenge.
This was the first time user testing had been formally introduced at Fullbay. I had to advocate for and get approval to conduct user research, making stakeholder education part of the design challenge.
HOW MIGHT WE MAKE ADDING A FEE EASIER AND INTUITIVE?
THE GOAL
We converted our key usability challenges into opportunities for improvement in the onboarding experience.
THE GOAL
We converted our key usability challenges into opportunities for improvement in the onboarding experience.
THE GOAL
We converted our key usability challenges into opportunities for improvement in the onboarding experience.
CONFUSING
>
CLEAR
We simplified language and added inline legal disclaimer... not to advise, but to clarify. We increased user confidence while staying within compliance boundaries.
CONFUSING
>
CLEAR
We simplified language and added inline legal disclaimer... not to advise, but to clarify. We increased user confidence while staying within compliance boundaries.
CONFUSING
>
CLEAR
We simplified language and added inline legal disclaimer... not to advise, but to clarify. We increased user confidence while staying within compliance boundaries.
OVERWHELMING
>
STEPS
We moved from a dense, one-page form to a wizard-style experience. This reduced cognitive load, allowed for progressive disclosure, and helped users complete setup without errors.
OVERWHELMING
>
STEPS
We moved from a dense, one-page form to a wizard-style experience. This reduced cognitive load, allowed for progressive disclosure, and helped users complete setup without errors.
OVERWHELMING
>
STEPS
We moved from a dense, one-page form to a wizard-style experience. This reduced cognitive load, allowed for progressive disclosure, and helped users complete setup without errors.
LEGACY UI
>
MODERNIZATION
To work within Bootstrap and avoid overwhelming devs unfamiliar with modern frontend tooling, we prioritized layout clarity, native form without sacrificing usability gains.
LEGACY UI
>
MODERNIZATION
To work within Bootstrap and avoid overwhelming devs unfamiliar with modern frontend tooling, we prioritized layout clarity, native form without sacrificing usability gains.
LEGACY UI
>
MODERNIZATION
To work within Bootstrap and avoid overwhelming devs unfamiliar with modern frontend tooling, we prioritized layout clarity, native form without sacrificing usability gains.
PASSIVE
>
INPUT
The new design gave users granular control: flat or % fee, by shop, by entity. Each choice was clearly labeled, with preview summaries before confirmation empowering users to act confidently and prevent mistakes.
PASSIVE
>
INPUT
The new design gave users granular control: flat or % fee, by shop, by entity. Each choice was clearly labeled, with preview summaries before confirmation empowering users to act confidently and prevent mistakes.
PASSIVE
>
INPUT
The new design gave users granular control: flat or % fee, by shop, by entity. Each choice was clearly labeled, with preview summaries before confirmation empowering users to act confidently and prevent mistakes.
THE SOLUTION
RESEARCH AND DISCOVERY
We started with user interviews provided to us, identifying key patterns and needs.
- Control over when and how fees are applied (flat vs. %).
- Clarity on what each step meant, especially around legal or compliance.
RESEARCH AND DISCOVERY
We started with user interviews provided to us, identifying key patterns and needs.
- Control over when and how fees are applied (flat vs. %).
- Clarity on what each step meant, especially around legal or compliance.
RESEARCH AND DISCOVERY
We started with user interviews provided to us, identifying key patterns and needs.
- Control over when and how fees are applied (flat vs. %).
- Clarity on what each step meant, especially around legal or compliance.
A/B TESTING
Version A: A traditional long-form input, consistent with Fullbay’s existing UI
Version B: A modern step-by-step wizard with progressive disclosure
Our goal was to challenge the default without alienating stakeholders. Given the team’s attachment to legacy patterns, I made sure to loop in stakeholders early with design previews and walk-throughs.
A/B TESTING
Version A: A traditional long-form input, consistent with Fullbay’s existing UI
Version B: A modern step-by-step wizard with progressive disclosure
Our goal was to challenge the default without alienating stakeholders. Given the team’s attachment to legacy patterns, I made sure to loop in stakeholders early with design previews and walk-throughs.
A/B TESTING
Version A: A traditional long-form input, consistent with Fullbay’s existing UI
Version B: A modern step-by-step wizard with progressive disclosure
Our goal was to challenge the default without alienating stakeholders. Given the team’s attachment to legacy patterns, I made sure to loop in stakeholders early with design previews and walk-throughs.
USER TESTING
I facilitated usability tests where participants rated each version (1–5 stars per task) and gave open-ended feedback. This approach helped us quantify preferences while surfacing usability pain points.
Check out the video to see how it was presented to our CEO, CPTO, VP and other stakeholders.
USER TESTING
I facilitated usability tests where participants rated each version (1–5 stars per task) and gave open-ended feedback. This approach helped us quantify preferences while surfacing usability pain points.
Check out the video to see how it was presented to our CEO, CPTO, VP and other stakeholders.
USER TESTING
I facilitated usability tests where participants rated each version (1–5 stars per task) and gave open-ended feedback. This approach helped us quantify preferences while surfacing usability pain points.
Check out the video to see how it was presented to our CEO, CPTO, VP and other stakeholders.
FINAL SOLUTION
We moved forward with Version B, the wizard flow.
This was no small feat as even towards the tail end of the presenation and facts our stakeholders were still concerned with migrating to a new style.
FINAL SOLUTION
We moved forward with Version B, the wizard flow.
This was no small feat as even towards the tail end of the presenation and facts our stakeholders were still concerned with migrating to a new style.
FINAL SOLUTION
We moved forward with Version B, the wizard flow.
This was no small feat as even towards the tail end of the presenation and facts our stakeholders were still concerned with migrating to a new style.
THE IMPACT
Title Card
298 entities and 412 shops used the feature
47,517 transactions processed
$1.4M in fees collected, averaging $30/transaction
Beyond just the numbers, we also made an internal impact…
Improved onboarding experience for new users, a key stakeholder concern
Introduced Fullbay’s first formal user testing process, paving the way for more research-informed decisions in the future
Stakeholders who were initially hesitant became champions after seeing clear user preference and business results