Cardless Checkout
Beauty businesses using Timely had no way to save client payment details ahead of appointments. Every checkout meant manually processing payments at the front counter — wasting time and costing Timely a revenue opportunity.
I led the end-to-end design of Cardless Checkout, a pre-payment solution built on Timely's payment gateway, in close partnership with product and engineering.
The opportunity
Timelys payment gateway didn't support saved payment methods. Beauty businesses had to manually process payments at checkout, wasting time settling the bill owing at the front counter and creating a missed opportunity for Timely to clip the ticket and increase revenue for us and the user.
With this in mind, the business approached our team with the goal to deliver an experience that can reduce payment time for beauty businesses using TImely to free up their time and help increase revenue.
Discovery with customers
I conducted on-site customer visits and online interviews alongside my product manager. We gathered our key questions in an assumption map ahead of meeting customer and built out a user interview script for the sessions.
Key insights showed that:
The majority of participants would prefer clients book and add card details online compared to offline like they were at the time
Customers expressed interest in having the ability to charge in Timely to help reduce alternatives as 3rd party payment tools like Payclips cut into their profit margins
Smaller businesses tended to use the Timely iPad app for faster checkouts compared to bigger businesses with a set area
Customers expressed concern that they needed to get client consent to charge a saved card to protect their business if this concept went into production
Example of a larger business with their own seperate checkout area
A smaller beauty business explaining their checkout process at home
Core Userflows and Co-Design workshop
Before any design work began, I mapped three core user flows for our first iteration:
Beauty businesses enabling Cardless Checkout through their TimelyPay settings
Clients adding card details ahead of their appointment via Timely's online booking tool
Beauty businesses charging outstanding payments on bookings with saved cards
Defining these flows early helped align the team on scope and allowed us to plan the work across each area before designing anything.
I then facilitated an in-person co-design workshop to explore solution directions and build team alignment on the strongest approaches to take forward.
Core userflows for this product feature
Co-Design session sketches
User Testing results
I led 8 rounds of testing with participants across New Zealand, Australia and the United Kingdom. User Testing revealed:
All participants found it easy to enable the features settings page and complete outstanding payments
Many participants found the feature's original name "Card Capture" confusing — they couldn't tell what it did from the name alone
Participants raised security concerns around storing card details, and flagged clients needed to explicitly agree to having their details saved
Participants wanted a way to save card details directly on the platform, even without an existing booking, so they had payment details ready for future charges
Customers wanted to see more information on how to refund on a stored card
“It makes sense. It fits in with everything else you do as far as taking payments is concerned” - Customer quote from user testing
Final UI for the settings and client booking experiences
For the settings and client booking experiences, I applied the following design changes
Renamed the feature from "Card Capture" to "Cardless Checkout" in collaboration with stakeholders — testing revealed participants couldn't tell what "Card Capture" meant, so we chose a name that clearly described the experience from the customer's perspective
Built a dedicated TimelyPay settings page to give beauty businesses a single place to manage all their payment settings, rather than scattering them across various products settings pages
Added an explicit consent disclaimer to the client booking flow — participants flagged during testing that they needed clients to agree to having card details saved before businesses felt comfortable using the feature
Set up Appcues onboarding tooltips to surface the feature to existing users at launch
Settings
Client booking
The biggest challenge for the checkout experience
While we were working on Cardless Checkout, we also had another team re-designing the UI for the Checkout experience we were looking at updating. Having to manage a fair amount of UI changes from their team at the same time as we were doing our work meant that we were risking not launching on our intended target launch date.
In order to help reduce inconsistencies and stay aligned, we set up regular weekly meetings to go over:
Any UI changes that have arisen from the other team since we last checked in
What design updates we’d be applying from our user testing results
What components may not be built in time for our features release
Old UI Designs for the checkout experience
Updated responsive UI with new styling in collaboration with another team
Outcome and future work
Cardless checkout launched in October 2020 and as of July 2021 processed $1,765,739 in sale transactions - accounting for 22% of revenue made by Timelys Payment gateway.
“Loving Cardless Checkout!! Best thing ever!! Clients have found it really easy to add cards. Checkout has been seameless!! - Customer success team member sharing feedback from users
After our launch, we continued to enhance the feature to allow beauty businesses to save credit cards at the front of counter and explored how we could make this experience work on iPad as well.