ROLE
Design Lead
TIMELINE
Oct 2024 - Dec 2024
OVERVIEW
Businesses have continually vented their frustrations with having to wait to get their money, which is a major reason why businesses are reluctant to sign up for Vagaro's payment processing.
To target this pain point, I led the design for the Instant Payout feature, which would allow users to instantly get their money for a small fee. This involved surveying users, presenting designs to executives, and collaborating with major stakeholders from cross-functional teams.
The successful launch of Instant Payout in the end of Q2 led to an increase in total revenue, user signups, as well as retention.
01 | BACKGROUND
Vagaro is a B2B SaaS platform that offers beauty and wellness businesses to manage their calendar, clients, inventory, and more.
Vagaro also offers a variety of add-on features depending on the business's needs, including credit card processing, which allows users to accept payments securely.
02 | CONTEXT
Credit card processing is Vagaro's number one feature when it comes to business retention.
The data shows that when a business signs up for VMS, they are much more likely to stay with Vagaro than businesses who do not. This means that increases in signups for VMS will lead to increased retention overall.
As such, we started to hone in on opportunities to improve VMS — the most obvious being the ability to instantly deposit your money.
Batch deposit waiting times frustrate existing users.
Other competitors already offer the feature.
66% of all current users would pay a small fee to use the feature.
Users had many frustrations about having to wait one-two business days for their funds, especially over the weekend where they would have to wait till Monday.
03 | COMPETITIVE ANALYSIS
There's a lot of good examples of an "instant transfer" feature already out there.
Instant Payout is already a commonly offered feature in most credit card processing softwares. I looked at the user flows for initiating an instant transfer on other industry standard finance platforms to see what worked for them.
Our competitive analysis revealed several patterns and opportunities:
Transfer amount is always given highest visual hierarchy.
The fee is often in fine print and sometimes isn't even visible until you start the transfer process.
Mobile experience is integral - softwares will emphasize the ease of use on mobile.
Yes I drew and animated this!
04 | STAKEHOLDER FEEDBACK
Dealing with money meant that every team was involved.
I needed to work cross-functionally with a lot of different teams to have a better understanding of all the feature requirements.
This meant that I was constantly reviewing my designs with stakeholders, but because it was hard to get time with everyone at once, I ended up having to spread my time across the different teams.
I noticed that the challenge of coordinating individual schedules and managing fragmented updates was leading to growing misalignment across teams, with myself becoming the sole point of contact for disparate information. This inefficiency was impeding the progress of the project.
Payments
Payments team cared deeply about how the Instant Payout would show on reports and how users would be able to monitor their transactions.
Fraud & Risk
Fraud team had requirements and restrictions which led to designing for specific edge cases related to handling fraud.
C-Suite
C-Suite wanted Instant Payout to be more accessible across the platform so I needed to identify where else I could add the feature.
Development
Development had specific guidelines on how the Instant Payout had to be handled, which meant designing around those restrictions.
I also made the decision to move all further conversation to dedicated team channels to notify all stakeholders of every update.
This was big for three reasons:
Kept everyone involved aligned on big changes to the project.
Eliminated the need for unnecessary meetings explaining the same things over and over again.
Helped keep a record of important decisions made and the reasons behind why we made them.
05 | INFORMATION ARCHITECTURE
Using insights from web traffic data, I identified three places in the software where Instant Payout would live.
Deposit Report
Our web traffic data showed the 'Deposit Report' was the most frequently visited section by businesses checking their finances, making it a natural entry point.
Merchant Accounts
Analytics revealed that users often navigated to the 'Merchant Accounts' to manage payment settings, indicating it's a high-intent area for financial actions like payout.
Notification Panel
The 'Notification Panel' had the highest daily engagement rate, making it ideal for timely prompts or quick access.
This ensured that the Instant Payout feature would have maximum reach to our users, and was also easily accessible – especially on the mobile app.
06 | USABILITY TESTING
Evaluating UI Patterns for Scheduling an Instant Payout.
Users have the ability to schedule an Instant Payout for the days of the week. That way, if they want to get their money instantly every time they clock out on Friday, they can schedule it instead of having to manually click it every time.
My original design for the scheduled Instant Payout had dropdowns where users were able to choose what kind of payout they wanted each day. However, testing with users showed that toggles actually performed better.
Hypothesis
Version C (Dropdowns) would perform the best because having the dropdown interface directly within the transfer type column helps give clarity to the action it performs and dropdowns offer a clear selection of choices.
Results
Version B (Toggles) performed the best, with 5 out of 5 users able to complete the given task ('Schedule a recurring payout') with an average completion time that was shorter than the other two versions.
07 | MOBILE DESIGN
Elevating the design system to maximize the mobile experience.
Given that a significant portion of our users access Vagaro on mobile, optimizing this experience was crucial for engagement and conversion.
One thing that I noticed from the competitive analysis was that the balance was always the main focus in the payout flow. Our current typography tokens didn't have the visual flair that I was looking for, therefore I convinced the team to add a new larger font size to our system.
I explored many different iterations in which I cut content, added more clicks, all to save space on a mobile screen.
Iteration 1
Saves a lot of space.
Lets user know what deposit type they have.
Doesn't let them know their schedule if they have same day enabled.
Might not look clickable at first glance.
Iteration 2
Lets user know what deposit type they have.
Shows schedule if same day is enabled.
Takes up more room than needed.
Table might look clickable.
Iteration 3
Saves the most room.
Follows a common mobile pattern - card design.
Doesn't show schedule
Iteration 3 was the best compromise between reducing visual overload and also having just enough information to show the user how they could access their deposit settings.
Within a month of launch, this is how Instant Payout performed.
Instant Payout Users
1,248
Number of Payouts
3,112
Total Payout Amount
$2.3M
Total Revenue
$24,858
Conversion Rate