📚 Introduction

My design team and I developed a payment tool for consumers shopping with merchants. We created a white-label platform, allowing it to be used by various companies and brands within their ecosystems. This platform has two sides: the consumer side and the merchant side. Currently, clients using this platform include SODI+Antwerpen and Horeca.

Project Location

Worldwide

Tools

Figma, Jira, Maze, Slack

👨🏻‍💻 My Role

As a Product Designer, I created the user flow for both the consumer and merchant sides, analyzing how the system should function. I then designed high-fidelity mockups for both sides.

My Contribution

Wallet, Main Features (pay, add ucoins, request payment, get paid), activity.

🚨Problem

There were no significant issues this project was developed from scratch, requiring analysis that would result in an outcome facilitating seamless transactions between consumers and merchants.

⚽ Goal

Consumers and merchants can transact easily and quickly.

📋 Process

It started with raw ideas and gathering references to develop a user flow. In the initial phase, we determined which features could be created and implemented in this project. Several features emerged, such as Wallet, barcode scanning, barcode creation, maps, activity, and a “how to use” section.

Consumer features

Features such as a wallet, barcode scanning, barcode creation, maps, activity, and a “how to use” section emerged. We then grouped them into three categories.

The wallet is a temporary money storage place.

The action buttons, which include barcode scanning and barcode creation, are the main features of XYZ aimed at facilitating transactions. We named the barcode scan feature “Pay,” while the barcode creation feature is used to transfer funds from Euros to Ucoin as the payment method.

The widgets, including "maps", "activity", and "how to use", are supporting features. The maps function allows consumers to find nearby merchants. The activity feature shows the history of completed transactions, and finally, the how to use feature helps users navigate and use the application more easily.

Merchant Features

The features on the merchant side are not much different only some of the feature names have been changed.

Merchants have a Wallet feature as a temporary money storage tool.

The action buttons, such as request payment and get paid, are similar to the features on the consumer side. Request payment allows the merchant to generate a QR code for consumers who want to make a payment. Get paid is a feature for merchants to transfer funds from Ucoin to Euros.

The widgets on the merchant side, activity, and how to use, function the same as the consumer features. Activity allows merchants to view transaction history, and how to use provides guidance on how to register as a merchant.

✅ Final Design

The final design was created by various parties, including the design team, project manager, and stakeholders, all of whom have collectively agreed on the development of the XYZ application.

Thank you for reading through! Hope you enjoyed learning about my design and thought process. :)