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 the long deposit times, especially over the weekend.
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. Therefore, I wanted to figure out what worked for other softwares.
Key takeaways?
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.
04 | INFORMATION ARCHITECTURE
Using insights from web traffic data, I identified three places in the software where Instant Payout would live.
This ensured that the Instant Payout feature would have maximum reach to our users, and was also easily accessible – especially on the mobile app.
05 | 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.
Results
Version B (Toggles) performed the best, with 5 out of 5 users able to complete the given task with an average completion time that was shorter than the other two versions.
06 | MOBILE DESIGN
Elevating the design system to maximize the mobile experience.
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.
Doesn't show user much information.
Might be too unassuming for a first time user.
Yes I drew and animated this!
07 | 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. Because it was hard to get time with everyone at once, I ended up having to spread my time across the different teams.
Eventually, this got to the point where the different teams weren't aligned and I was the main Point of Contact.
In the end I resorted to using 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.
Within a month of launch, this is how Instant Payout performed.
Instant Payout Users
1,248
Number of Payouts
3,112
Total Payout Amount
$1.8M
Total Revenue
$14,858
Conversion Rate