Cardless Checkout
Cardless Checkout is a pre-payment solution that reduced checkout time and increased revenue for both beauty businesses and Timely.
I led the end to end design process for this feature work from start to finish 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 both on-site customer visits and online interviews with salons to validate our assumptions gathered in our assumption map ahead of our research and also identify other pain points we weren’t aware of in the payment process. I also built out our research plan and script for the sessions.
Key insights showed that:
Majority of interviewees 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 that take too much profit (E.g Payclips chew up a LOT of income made)
Smaller businesses/solos tend to use the Timely iPad app for faster checkouts compared to bigger businesses with a set area
Customers expressed concern that they need to get client consent to charge a saved card to protect their business
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
The main user flows I identified that were needed for our first iteration were:
Allowing beauty businesses to switch on this feature when using Timely’s payment gateway TimelyPay
Letting clients (the individuals booking appointments) to add their credit cards ahead of bookings via Timely’s online booking tool
When beauty businesses were ready to charge any outstanding payments on bookings that have had credit cards pre-added
I then facilitated a in person co-design workshop to align on solution direction and generate a variety of approaches to solve our main goals.
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 found it easy to turn on this feature on the settings page and easy to complete outstanding payments
Many participants found the features original name “Card capture” confusing and unclear what it meant
Concern was initially raised regarding security on storing card details, but users felt comfortable saving card details on the booking experience seeing that clients give permission when booking
Customers also wanted a way to save credit card details on the main platform even if clients hadn’t made a booking yet so they can have these details in future to charge
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
“Really easy. Straight forward to follow” - 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 UI changes
A new settings page specifically for TimelyPay to allow beauty businesses to manage all their TimelyPay related settings in
Utilised app cues to improve the awareness and onboarding for our new tool in the settings page
Designed our new page to allow clients to add their credit cards and also a disclaimer for clients to confirm they give consent to saving card details in Timely
Settings
Client booking
The biggest challenge for the checkout experience
The biggest challenge with this feature was that whilst we were working on this feature, 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 updates 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, our teams set up regular weekly meetings to go over:
Any UI changes that have arisen since we last checked in
What updates we’d be applying from user testing results
Identify what components may not be built in time for our features release
Old UI Designs for the checkout experience
Updated responsive UI with new styles in collaboration with another team
Outcome and future work for TimelyPay
Cardless checkout launched in October 2020 and as of July 2021 processed $1,765,739 in sale transactions and accounted 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.