Tap on Mobile

Tap on Mobile

Tap on Mobile

Mobile payment terminal app for iOS and Android

Mobile payment terminal app for iOS and Android

Mobile payment terminal app for iOS and Android

Client

Worldline

Services

UX & UI Design

Industry

Fintech

Date

January 2024 - May 2024

Tap on Mobile simplifies transactions by adding advanced payment features directly to mobile devices, eliminating the need for special hardware and reducing costs for merchants. 

Tap on Mobile simplifies transactions by adding advanced payment features directly to mobile devices, eliminating the need for special hardware and reducing costs for merchants. 

Overview

Overview

Overview

This case study highlights the adaptation of 'Tap on Mobile' for iOS and the optimization of both the iOS and Android versions, with a focus on enhancing usability and efficiency for merchants.

I created over 160 wireframes for the iOS version, aligning them with the Android counterpart and Apple's guidelines. I integrated the company’s design system, adjusting elements for accessibility.


I enhanced payment flows with better visual feedback and introduced 20 new transaction flows, reducing transaction times on both platforms.


My contributions not only improved the product but also laid the foundation for future enhancements.

This case study highlights the adaptation of 'Tap on Mobile' for iOS and the optimization of both the iOS and Android versions, with a focus on enhancing usability and efficiency for merchants.

I created over 160 wireframes for the iOS version, aligning them with the Android counterpart and Apple's guidelines. I integrated the company’s design system, adjusting elements for accessibility.


I enhanced payment flows with better visual feedback and introduced 20 new transaction flows, reducing transaction times on both platforms.


My contributions not only improved the product but also laid the foundation for future enhancements.

This case study highlights the adaptation of 'Tap on Mobile' for iOS and the optimization of both the iOS and Android versions, with a focus on enhancing usability and efficiency for merchants.

I created over 160 wireframes for the iOS version, aligning them with the Android counterpart and Apple's guidelines. I integrated the company’s design system, adjusting elements for accessibility.


I enhanced payment flows with better visual feedback and introduced 20 new transaction flows, reducing transaction times on both platforms.


My contributions not only improved the product but also laid the foundation for future enhancements.

Starting point

Starting point

Starting point

The existing Android app was developed by various international teams, who implemented new features over time, leading to design inconsistencies. The imminent launch of the iOS version provided an ideal opportunity to incorporate the company's latest design language and update the Android version. Additionally, I redesigned screens to include native iOS components and developed new, consistent elements for both the app and the company's design system.

The app had broken components, missing parts, and typos. I fixed these issues and ensured color accessibility.

The app had non-native elements that looked out of place, along with missing information and icons. I updated the design to follow iOS guidelines and added the missing content and icons.

Boosting accesibility

To support neurodivergent users, I replaced disabled buttons with active ones to prevent confusion and reduce the mental effort of figuring out why certain buttons were inactive.

Accessibility was further improved by updating low-contrast colors to meet standards, ensuring usability for people with visual impairments. 

Hints were added to highlight important information, while less relevant details were reduced to simplify interaction.

I replaced disabled buttons with active ones to reduce cognitive load for neurodivergent users.

Improving key areas

Improving key areas

Improving key areas

We received feedback from merchants who found the instructions for testing payment cards or verifying their mobile devices unclear. The original instructions contained spelling errors and lacked clarity. To address this, I redesigned the screens, providing clearer instructions and making it more self-explanatory. Additionally, I stopped using color-based feedback as the primary method to ensure that users with visual impairments would not encounter challenges during testing.

The original testing instructions were unclear, had spelling errors, and relied only on color changes for feedback. I clarified the instructions and added a popup for visual feedback.

Some of the new proposals for inputting transaction amounts and reference numbers.

In response to merchant feedback, I developed around 20 new proposals for inputting transaction amounts and reference numbers. These options will be used for testing to select the most effective solution.

Revamped settings

Revamped settings

Revamped settings

I revamped 13 settings screens to better align with the app’s card-based design. In the process, I eliminated the phased out hamburger menu navigation and introduced consistent icons with only one color to help users quickly identify them.

The original settings screens clashed with the app’s card-based design and had gradient icons. The updated screens now align with the design and use non-gradient icons for better visibility.

Results

Results

Results

The ‘Tap on Mobile’ app underwent key usability and efficiency improvements for both merchants and customers. I ensured cross-platform consistency, integrated the company’s design system, and streamlined payment flows to cut transaction times.

By addressing design inconsistencies and accessibility gaps, I created a more cohesive and inclusive user experience. Enhanced screens and clearer testing instructions, based on merchant feedback, further optimized the app, setting the stage for ongoing improvements and greater user satisfaction.

The ‘Tap on Mobile’ app underwent key usability and efficiency improvements for both merchants and customers. I ensured cross-platform consistency, integrated the company’s design system, and streamlined payment flows to cut transaction times.

By addressing design inconsistencies and accessibility gaps, I created a more cohesive and inclusive user experience. Enhanced screens and clearer testing instructions, based on merchant feedback, further optimized the app, setting the stage for ongoing improvements and greater user satisfaction.

The ‘Tap on Mobile’ app underwent key usability and efficiency improvements for both merchants and customers. I ensured cross-platform consistency, integrated the company’s design system, and streamlined payment flows to cut transaction times.

By addressing design inconsistencies and accessibility gaps, I created a more cohesive and inclusive user experience. Enhanced screens and clearer testing instructions, based on merchant feedback, further optimized the app, setting the stage for ongoing improvements and greater user satisfaction.