Role Lead product designer — I led the end-to-end design process
Outcome
$1.7 M
in sales transactions by July 2021
22 %
of Timely's revenue by July 2021
Background
Timely’s payment gateway didn't support saved payment methods. Every payment processed outside Timely was revenue the business was missing.With this opportunity in mind, our team was assigned to deliver an experience that would reduce payment time for beauty businesses using Timely to free up their time and help increase revenue for both parties.
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 customers 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
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.
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
Key design updates
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
The biggest challenge for the checkout experience
A separate team was redesigning the checkout UI in parallel — creating a risk that our work would conflict with theirs and delay our launch. To stay aligned, I set up weekly syncs to go over:
Any UI changes that has arisen from the other team since we last checked in
What design updates we’d be applying from our user testing results
What components would not be built in time for our feature’s release
Outcome and future work
Outcome and future workCardless checkout launched in October 2020 and as of July 2021 processed $1,765,739 in sale transactions - accounting for 22% of revenue made by Timely’s Payment gateway.
“LovingCardless 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.
