Merchant Form Terminal
The Merchant form terminal is a feature for Timely’s customers to save credit card details.
I led the end to end design process for this feature work from start to finish.
Users problem
Internal data showed Timely’s customers had over 500 credit card numbers saved on multiple client profiles in Timely. Observing past feedback from our internal customer success team, our hypothesis was that customers commonly store clients credit card details for their highest value clients to speed up the payment process.
Saving credit card details on the product this way also meant that Timely was not a PCI compliant business and risked failing an upcoming card payment audit. With this information on hand, we sought to design a way for Timely’s customers to be able to securely store credit card details and improve the client checkout experience.
Conducting remote user interviews
I ran moderated user interviews with users across New Zealand, Australia and the United Kingdom to learn why customers were saving client’s credit card details and if a new tool would even be beneficial to help save these details.
Our results from interviewing 5 users gave us the following trends:
Customers were commonly storing credit card details for their highest value clients to reduce payment time, but also keep these particular clients feeling like they’re a higher priority to them
Customers shared they’d find value a tool to save credit card details if it allowed them to use credit card details for payments rather than just kept in the system as static information
In the Covid 19 period, the idea of reducing checkout time faster was attractive to reduce the number of people in the room
Seeing a tool like this gives the impression Timely was a more secure tool to add payment related information into
“We keep a lot of clients cards on hand. Holding their card details means we have a level of trust. It’s a luxury to have someone take care of what you need without referring to the cash.” - Customer quote from user interview
Core Userflows and Co-Design workshop
The main user flows I identified to allow users to add credit card details were:
In the main Point of sale (POS) experience where businesses can charge for a completed service or product being purchased
When reviewing a customer’s profile with their past history is and what payments are outstanding
When adding a new customers profile and their card details for future payments
Once we had identified these core flows, I hosted a co-design session with our team to generate a range of ideas on what the experience could look like for customers and build shared alignment where the solution was heading.
Core userflows for this product feature
Co-Design session sketches
Internal and external User Testing
I ran 8 rounds of testing (4 internal and 4 external participants). Key insights found to apply to the design included:
Technical terms to do with credit cards or security caused confusion, so copy needed to be in plain language
Participants expected it wouldn’t be mandatory to save card details at checkout due to the busy environment
All found it easy to add a card and liked that it pays off the appointment when a card is saved at once too
Participants would like an email or text sent out to their clients when card details are saved to give confirmation
“Very straight-forward and guides you to what needs to be done. I liked that it’s in very plain language and it’s very much how you would speak” - Customer quote from user testing
The biggest challenge with the UI Design
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 one of the core experiences we were looking at to add the merchant form terminal in. 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
Updated responsive UI with new styles
Outcome
The merchant form terminal was launched to all Timely customers March 2021 and helped ensure Timely pass their PCI audit in February 2021.
Our feature significantly reduced the number of credit cards insecurely stored in Timely by well over 50% and also increased the number of payments made on Timely.