FlexiPay Web Application — UI/UX Case Study

8 min readMar 8, 2023

Background

FlexiPay is a payment service provider web application that is specifically designed for the hospitality industry. The hospitality industry includes restaurants, hotels, amusement parks, events, cruises, entertainment, and other tourism-related services. FlexiPay offers a single payment gateway that customers can use to pay for all their hospitality needs. The application is easy to use, secure, fast, and offers a range of payment methods to cater to the diverse needs of customers. Flexipay is the perfect solution for customers and vendors in the hospitality industry who want a fast, secure, and hassle-free payment process.

Problem Statement

Customers in the hospitality sector often face issues when it comes to making payments for the services they are offered. They may not have access to multiple payment methods or they may have difficulty tracking their expenses. Additionally, the payment process can be time-consuming and confusing, leading to a poor experience for customers.

The Solution

The solution is to create a payment service provider web application that is specifically designed for the hospitality industry. The application would be visually appealing, highly functional and easy to navigate. The application will offer a single payment gateway that customers can use to pay for all their hospitality needs. The payment gateway will be easy to use, secure, and fast. It will also offer a range of payment methods, including credit cards, debit cards, and mobile payments, to cater to the diverse needs of customers.
The final design of the web application aims to have the following features:

Dashboard: The dashboard will provide users with an overview of their account, including their current balance and recent transactions. It will also allow users to access other features such as managing their wallet and paying bills.

Plans: Users will be able to choose the type of payment plan to use for the services they want and can manage them through the web application.

Transactions: The transactions feature will enable users to view their transaction history, including details such as the date, amount, and description of the transaction. This feature will allow users to track their expenses and ensure that all charges are accurate.

Wallet: The wallet feature will allow users to manage their funds and add funds to their account.

Payment Methods: The payment methods feature will enable users to add multiple payment methods to their account, such as credit cards. This feature will provide users with flexibility and convenience when making payments for their stay.

Payment Links: The payment links feature will allow users to generate a unique payment link that they can send to their friends or family members. .

Settings: The settings feature will allow users to customize their account settings, such as editing their profile information.

Design Process

Pain Points

Inconvenience in making payments: Users experienced difficulties in making payments for hospitality services, such as restaurants or hotels, which have led to the need for a dedicated payment service provider.
Security Concerns: Users are always concerned about the security of their payment information when making transactions in the hospitality sector, especially if they had to provide their credit or debit card details directly to the establishment.
Limited Payment Options: Users complained that the hospitality sector lacked diverse payment options, such as the ability to pay with cryptocurrency or split payments with friends or family.
Inefficient Billing Processes: Users have experienced issues with billing processes in the hospitality sector, such as delayed invoices or incorrect charges, which has led to the need for a streamlined payment system.

User Persona

Empathy Map

Brand Identity & Style Guide

The Web Application

Registration, Login & Forgot Password Screens

User Dashboard

The dashboard in the payment service provider web application displays the user’s wallet balance, allowing them to easily track their funds. The dashboard also provides quick actions such as paying bills, funding their wallet, transferring money, and withdrawing funds. The recent transactions section displays a list of the user’s most recent transactions for easy reference. The dashboard also features an adventure booking section, where users can book experiences related to the hospitality industry. Finally, the card balance section displays the user’s balance on any linked cards. All of these features are designed to provide users with easy access to important information and functionality from the dashboard.

Quick Actions

The quick actions section on flexiPay dashboard is a central hub for users to perform the most frequent financial transactions. The section allows users to quickly pay bills, fund their wallet, transfer money, and withdraw funds without having to navigate to different parts of the app. The quick actions section is designed to save users time and effort and offers a simple and straightforward way to manage their finances. The section is easy to use, and users can perform any of the actions with just a few clicks. Overall, the quick actions section is an essential feature of flexiPay, providing users with a fast and efficient way to manage their payments and transfers.

Book an Adventure

The “Book an Adventure” section on the flexiPay dashboard allows users to quickly access and book various hospitality services such as hotel reservations, restaurants and events. This section provides a list of recommended adventures and allows users to search for specific adventures based on their location and preferences. Once the user selects an adventure, they can proceed to book and pay for it using their wallet balance or preferred payment method. This section provides a convenient way for users to plan and book their hospitality activities without having to leave the flexiPay platform.

Plans

The Plan feature allows users to choose between a single payment plan for themselves or a split payment plan for themselves and others such as friends, family or someone else. The single payment plan allows users to pay for services or products in full, while the split payment plan allows users to divide the payment with others. Users can easily set up and manage the split payment plan, including adding or removing participants and specifying payment amounts for each person. The split payment plan can be useful for group events or when sharing expenses with others.

Transactions

This provides a comprehensive overview of all incoming, pending and outgoing payments. Users can filter transactions by date, amount, and payment method, making it easy to track expenses and monitor account activity. The transaction history also includes details such as the name of the recipient/sender, the transaction status, and any associated fees. This feature helps users to stay organized and in control of their finances.

Wallet

The wallet feature on flexiPay allows users to manage their funds with ease and convenience. Users can view their current balance and transaction history for various folios such as Naira, Dollar, and Cryptocurrency. They can add funds to their wallet using various payment methods and easily withdraw funds as needed.

Payment Methods

The payment methods feature allows users to securely link their bank accounts or physical payment cards to their account. Users can add multiple payment methods and choose their preferred payment method for transactions. This feature is convenient for users who want to quickly and easily make payments without having to manually enter payment information each time. Additionally, users can also manage and update their payment methods as needed.

Payment Links

This feature allows users to create custom links to sell a product or service, or accept donations. Users can customize the link by setting the amount, currency, and description of what the payment is for. They can then share the link via email, social media, or any other platform they choose. This feature is especially useful for small business owners, freelancers, or anyone who needs to collect payments quickly and easily without needing to set up a full e-commerce website.

Settings

The settings feature in flexipay includes the following options:
Profile Information: This section allows users to view and edit their personal details, such as name, email, phone number, and date of birth.
Password: This section allows users to change their account password.
Badges: This section displays badges earned by the user, such as referral badges, birthday badges or loyalty badges.
Security: This section includes security-related settings, such as two-factor authentication and security questions.
Help: This section includes links to various resources to help users with their account or any issues they may encounter while using flexiPay. It also includes a FAQ section and a customer support chat feature.

Lessons Learned ✨

Empathy is key: By beginning the design process with empathy for the end user, I was able to identify pain points and design solutions that truly met their needs. This highlights the importance of putting the user at the center of the design process.
Clear and consistent branding: By maintaining a consistent visual language and branding throughout the web app, users were able to quickly and easily understand the purpose and functionality of each feature. This highlights the importance of creating a strong brand and maintaining consistency across all touchpoints.
Simple and intuitive user interface: By prioritizing simplicity and ease of use in the web app’s design, users were able to quickly navigate and complete tasks without confusion or frustration. This highlights the importance of designing user interfaces that are intuitive and easy to use.
Flexibility is important: By offering multiple payment methods and features, the web app was able to meet the diverse needs and preferences of its users. This highlights the importance of designing for flexibility and catering to a range of user needs and preferences.