Paytive

A responsive web application that provides a secure, convenient, and efficient solution for users to make transactions without the need for physical cash or cards.

Project Details

Role :

UX Researcher

UX Designer

UI Designer

Tools:

Figma, Photoshop

UsabilityHub, Slack

Optimal Workshop, Miro

Duration :

7 months

part-time

Industry :

Fintech

Overview

Case Study Banner

PAYTIVE will provide users with a comprehensive digital payment platform for managing payments, making contactless payments, and money transfers without relying on physical banks or credit cards.

In addition to its convenience, it offers advanced features like transaction tracking and budgeting tools to provide a comprehensive user experience. Whether you need to settle a debt or split the cost of an expense, it simplifies the process and helps you stay organized.

See the

comprehensive case study

for this project.

Problem

Problem Icon

Users want an all-in-one solution for secure and convenient management of payments, contactless payments, and money transfers. They prefer a single app for various bank and credit card transactions.

Success is evident when users actively use the app for financial tasks, and a high user retention rate reflects their ongoing satisfaction.

User Research

Competitive analysis

A competitive UX analysis was performed on two existing payment platforms - Revolut and Wise - reviewing the key objectives of each brand,  their overall strategy, their market advantage, and a full SWOT analysis.

Executive summary

Competition

Present competitors like Wise and Revolut enable swift, low-fee money transfers directly between users through bank accounts or cards. They provide transparent exchange rates, devoid of hidden charges, while also offering transfer tracking and savings account features.

Risk/Opportunity

The main challenge is the overshadowing competition, as established, reputable companies tend to garner more trust due to their longevity and proven service. To enhance user engagement and foster loyalty, we should offer an array of compelling features that go beyond simple money transfers.

Conclusion

There is a competitive market for digital wallets and banking. This also shows the huge demand for a user-friendly application. Providing user-friendly and interactive features such as a personalized budgeting plan and a unique marketing strategy could attract more loyal users to use this app.

User intervew

I interviewed five individuals within my personal network to gain insights into their overall perspective on digital wallets. This helped me understand their requirements and the current challenges they face with existing apps.

Research goals
Problem Icon
Identify the motivation of the user to use the Paytive app
Identify current pain points and struggles around the use of existing apps
Understand user‘s attitudes and behaviors using digital banking/wallet apps
Understand what kind of features users find helpful or unhelpful for the Paytive app
Key insights
Problem Icon
Participants desire a simple and user-friendly app due to challenges encountered while navigating complex apps.
The majority seeks transaction history display and categorization for better clarity.
Trust leans towards reputable, established companies; new apps require recommendations to gain trust.
Limited financial background leads to difficulty understanding complex terms; preference for simpler language.
Limited financial background leads to difficulty understanding complex terms; preference for simpler language.
Using usernames or emails for transactions is favored over IBAN for speed and convenience.

Affinity mapping

Story Image
Key findings
  • The app should provide initial instructions on how to use the app.
  • The app should categorize the transactions into different categories.
  • The app should save all the entered information for future transactions.
  • The app should offer instant payment.
  • The app should offer different authentication methods so that the user has the option to choose to be more inclusive.
  • The app should offer payment by user link in addition to IBAN.
  • The app should offer a saving and rewarding feature.

Personas & user flows

User persona

After conducting user interviews and analysis, I  created two unique user personas to cover the wide range of online banking users.

Useflow Map Image
Useflow Map Image

User journey

Based on the user personas, I have elaborated on the thoughts, emotions, and actions that each persona may experience while completing key tasks within the application.

Useflow Map Image
Useflow Map Image

User Flow

User story: As a user, I want to schedule my payments in advance, so that I don‘t have to spend hours every month transferring my bills.

Use flow Image

Information architecture

Site map

Useflow Map Image

Wireframes & Prototypes

Low-Fidelity

With the results of the competitive analysis and user interview, I could define the key features and functionalities. By considering the sitemap and user flow I created a rough layout of my application. Once I had the rough layout, I started adding more details such as placeholders, images, and buttons to each screen.

Mid-Fidelity

Following the low-fi wireframes and some rapid prototyping, I created the Mid-Fi wireframes and prototype with more details using Miro to get it ready for user testing.

Hi-Fidelity

By refining the visual design of the Mid-Fi wireframes and adding colors, typography, and imagery I brought my design to life. I ensured that my design adheres to my brand's style guide and follows best practices for user interface design.

Usability testing

Goals

The goal is to evaluate the user experience and identify usability issues for improvement. The ultimate goal is to uncover any difficulties or challenges that users might face using the app, such as confusing navigation or an unclear interface, and improve the use and overall user experience. I conducted remote and in-person moderated usability tests with six participants.

Test objectives
  • Find out the user’s feedback on navigation within the app and how easy they can complete a task
  • Collect user’s feedback about UX writing, visual and interaction design of the app
  • Determine user’s pain points and struggles using the app
  • Uncover the errors and how easily users can recover from these errors and finally what causes these errors

Design iterations

Six usability tests were conducted remotely. All six participants were able to complete the tasks successfully and agreed on simple and clear navigation of the prototype. By analyzing the data using the rainbow spreadsheet, I identified six main issues and errors mentioned above that the participants experienced during testing. I improved the prototype further by prioritizing the issues with the highest error ratings.

1. Typos and spelling errors | Severity: High

Although only one participant mentioned spelling errors, we know that typos and grammar mistakes can seriously impact how the product is perceived. So, the misspelling correction has a high priority in the next iteration.

2. Color consistency for the CTAs | Severity: High

Only one participant mentioned this issue, but it made me realize the importance of the CTAs buttons design. I will redesign and test the buttons in the next iteration to solve this problem.

3. Unnoticeable Analytics icon | Severity: Medium

Since only one participant had a problem discovering the feature “Analytics”, the redesign of the icon has a mid-priority. Considering 1 out of 6 users might have the same problem I decided to redesign the icon and test it in the next iteration.

4. Unclear term ''Get a statement'' | Severity: High

Although only one participant mentioned it, I think it is necessary to add a pop-up explanation besides the feature to guide the user.

Conclusion

Overall, the participants found Paytive easy to use and had a positive experience with the app. They were all able to complete all tasks with ease. Some participants found the navigation familiar to the other apps they use daily which helped them to use Paytive smoothly.

Design System and Style

Aside from integrating the user feedback gathered from user testing, I was able to improve my designs considerably by taking the following measures. I enhanced my design by implementing a proper grid framework for better alignment, incorporating peer feedback for text refinement and clarity, and prioritizing accessibility improvements based on WCAG guidelines including label additions, contrast enhancements, and compliance with AA and AAA standards.

Color

Design Image

Typography

Design Image

UI Elements

Design Image

Final design

Informative onboarding

This feature guides new users through the features and functionalities of the app to help them understand how to use it effectively.

Clear overview

Clear overview helps users quickly find the features or content they are looking for, improving navigation and reducing frustration. It also improves the overall user experience by providing users with a visually pleasing and intuitive interface.

Send & recieve money

The project's highlight was a collaborative design process with a UX researcher. I enjoyed seeing how we integrated process and achieved evidence-based design.

Recent transactions

This feature allows users to view their transaction history, providing them with a quick and easy way to track their spending and monitor their account activity. It also helps users manage their finances more effectively.

Split bills

This feature provides a convenient way to make payments or send money to friends and family and a more secure and reliable way to transfer funds.

Set a budget goal

This feature allows users to set specific financial goals and track their progress towards achieving them, providing a powerful tool for managing their finances. This motivates users to stay focused on achieving their financial objectives. It also helps users to develop better financial habits and increase their overall financial literacy.

Reflection

This project brought challenges, rewards, and insights. Understanding user needs before design, valuing user testing and feedback, mastering UI design steps, handling challenges like balancing business goals and accessibility, and embracing feedback all enriched my understanding of user-centric design.

Overall, I learned valuable insights into the design process that meets user needs and provides a positive user experience.

See more work of me