Yoco
Project
Point of Sale Payment
My Role
Product Designer
Industry
Fintech
Timeline
2021
Overview
Yoco provides everything that a growing business needs. Card machines. Online payments. Business tools. Yoco wanted to introduce and encourage more payment s to be made via NFC (tap).
Goal
Create trust between users and card payments. Encourage more users to tap their card as a payment method. Increase the overall transaction growth of NFC.
Problem
Many people in South Africa are still scared to even use a card for payment.
Research
Discovery and iteration focused on cross-functional input and user needs:
Conducted collaborative workshops on the existing design with Product Managers, Engineers, and Product Designers to identify improvement opportunities.
Partnered with Customer Support and distributed surveys to validate whether users were actively seeking a tap-to-pay payment option.
Developed wireframes and end-to-end user journeys to explore and compare multiple potential payment experiences.
Below: The previous design used to guide users through payment. Notably, it did not support or reference tap-to-pay interactions.
Research
Discovery and iteration focused on cross-functional input and user needs:
Conducted collaborative workshops on the existing design with Product Managers, Engineers, and Product Designers to identify improvement opportunities.
Partnered with Customer Support and distributed surveys to validate whether users were actively seeking a tap-to-pay payment option.
Developed wireframes and end-to-end user journeys to explore and compare multiple potential payment experiences.
Below: The previous design used to guide users through payment. Notably, it did not support or reference tap-to-pay interactions.
Research
Discovery and iteration focused on cross-functional input and user needs:
Conducted collaborative workshops on the existing design with Product Managers, Engineers, and Product Designers to identify improvement opportunities.
Partnered with Customer Support and distributed surveys to validate whether users were actively seeking a tap-to-pay payment option.
Developed wireframes and end-to-end user journeys to explore and compare multiple potential payment experiences.
Below: The previous design used to guide users through payment. Notably, it did not support or reference tap-to-pay interactions.
Testing
After all the research and insights were gathered, a prototype was designed for user testing. The test would enable us to assess the effectiveness of a new design and determine if we have indeed enhanced its intuitiveness, thereby motivating users to choose card tapping as their preferred payment method.
Testing
After all the research and insights were gathered, a prototype was designed for user testing. The test would enable us to assess the effectiveness of a new design and determine if we have indeed enhanced its intuitiveness, thereby motivating users to choose card tapping as their preferred payment method.
Testing
After all the research and insights were gathered, a prototype was designed for user testing. The test would enable us to assess the effectiveness of a new design and determine if we have indeed enhanced its intuitiveness, thereby motivating users to choose card tapping as their preferred payment method.
Feedback
User feedback highlighted:
Users clearly understood where to tap their card during payment.
The three available payment methods were immediately noticeable and easy to differentiate.
The NFC icon was widely recognized and correctly associated with tap-to-pay.
It was evident that the bank card needed to be placed visibly on the device to initiate NFC payment.
Feedback
The feedback gathered was:
It was clear where to tap their card as a user when paying.
They could easily notice the three different ways you could make a payment.
Users recognized NFC icon and it's meaning.
To utilize the NFC tap function, it is was evident to the users that the bank card should be placed visibly on the device.
Users were still slightly against the tap to pay method because of it's unfamiliarity.
Feedback
User feedback highlighted:
Users clearly understood where to tap their card during payment.
The three available payment methods were immediately noticeable and easy to differentiate.
The NFC icon was widely recognized and correctly associated with tap-to-pay.
It was evident that the bank card needed to be placed visibly on the device to initiate NFC payment.
Final Design
Final Design changes:
Repositioned the Cancel action to the top-left and introduced custom illustrations to add personality without disrupting task focus.
Added an infinite loading spinner to provide clear, continuous feedback during payment processing.
Surfaced the Total Amount on the processing screen to reinforce transparency and user confidence.
Introduced a clear Done / Finish action to explicitly signal the end of the flow.
Designed for edge cases and error states, ensuring the experience remains resilient under failure conditions.
Final Design
Final Design changes:
Repositioned the Cancel action to the top-left and introduced custom illustrations to add personality without disrupting task focus.
Added an infinite loading spinner to provide clear, continuous feedback during payment processing.
Surfaced the Total Amount on the processing screen to reinforce transparency and user confidence.
Introduced a clear Done / Finish action to explicitly signal the end of the flow.
Designed for edge cases and error states, ensuring the experience remains resilient under failure conditions.
Final Design
Final Design changes:
Repositioned the Cancel action to the top-left and introduced custom illustrations to add personality without disrupting task focus.
Added an infinite loading spinner to provide clear, continuous feedback during payment processing.
Surfaced the Total Amount on the processing screen to reinforce transparency and user confidence.
Introduced a clear Done / Finish action to explicitly signal the end of the flow.
Designed for edge cases and error states, ensuring the experience remains resilient under failure conditions.
Metrics & Signals
As a 0→1 introduction of NFC payments, success was evaluated using early adoption and confidence signals rather than quantitative performance metrics. Signals we looked for: - Users understanding how and where to tap. - Ability to complete a tap-to-pay flow without guidance. - Reduced hesitation at the moment of payment. - Willingness to try NFC over existing payment methods.
Metrics & Signals
As a 0→1 introduction of NFC payments, success was evaluated using early adoption and confidence signals rather than quantitative performance metrics. Signals we looked for: - Users understanding how and where to tap. - Ability to complete a tap-to-pay flow without guidance. - Reduced hesitation at the moment of payment. - Willingness to try NFC over existing payment methods.
Metrics & Signals
As a 0→1 introduction of NFC payments, success was evaluated using early adoption and confidence signals rather than quantitative performance metrics. Signals we looked for: - Users understanding how and where to tap. - Ability to complete a tap-to-pay flow without guidance. - Reduced hesitation at the moment of payment. - Willingness to try NFC over existing payment methods.
