top of page

Pluto Pay

UX Case Study

Overview

Introducing Pluto Pay. An innovative responsive web application that is designed to revitalize the conventional way of traditional banking. Pluto Pay revolutionizes the financial experience by offering a unified platform that not only seamlessly combines the functionalities of a secure bank account but incorporates a transactional card for generating payments and money transfers. Pluto Pay is an innovative method of banking that is tailored to meet the needs and wants of users that strongly desires a comprehensive and secure financial hub

Problem

In the evolving digital age, it can be determined that there is a chronic demand that exists within the financial industry. A demand that addresses the frustration of users that lack the ability to create transactions, make payments, and have a bank account that exhibits security. It can be determined that users are seeking a responsive web app in which provides consumers an array of features in which permits users with the ability to generate money transfers and payments while having access to a secure bank account. Additionally, users are requesting a unified platform that offers the convenience of traditional banking services along with the agility of transactional card features

Design Process

​

Design.Thinking.Process.png

Competitive Analysis

A competitive analysis was conducted after compiling an in-depth research on competing financial companies that provided advanced financial applications that offered innovative features to consumers within its target market. The overall main focus was to analyze the opportunities, market advantage, strategy, profile, and key objectives of the competitors. In order to gain accurate data, a SWOT analysis was conducted

CashApp.png

CashApp

PayPal.png

PayPal

​

CashApp

Strengths:

  • Simplified peer to peer transaction provided on a user friendly platform for Android and iOS

  • Via integration with service offered by Square provides users to access to a broader ecosystem

CashApp.png

Weaknesses:

  • Limited international functionality compared to rivals

  • Limited business for business accounts compared to established payment services

  • Slow response time and an array of user report issues related to account stability

Opportunities:

  • Partnerships with retail businesses to offer cashback and discounts when using Cash App

Threats:

  • Increased competition from rivals such as Google Play, PayPal, PlutoPay, Venmo, Zelle, etc

CashApp.png

PayPal

Strengths:

  • User base with over 400 million active accounts coupled with global brand recognition and trust

  • Strong mobile presence with popular apps for Android and iOS

PayPal.png

Weaknesses:

  • Complaints that user interface is less intuitive compared to other platforms 

  • Constant freezing of the accounts without notice hinders user trust

  • Prone to cyber attacks and fraud hence hindering security and user trust

Opportunities:

  • Integration with social media platforms to generate peer-to-peer payments and commerce

Threats:

  • Vulnerability to cyber attacks and data breaches hence undermining the trust of users

PayPal.png

User Research

A competitive analysis was conducted after compiling an in-depth research on competing financial companies that provided advanced financial applications that offered innovative features to consumers within its target market. The overall main focus was to analyze the opportunities, market advantage, strategy, profile, and key objectives of the competitors. 

Participants

Jamaal Ejigou
Age:  37
Location:  Miami, FL
Occupation:  Portfolio Manager

Jawaar Ekeche
Age:  40
Location:  Los Angeles, CA
Occupation:  Financial Analyst

Tamika Patton
Age:  38
Location:  Philadelphia, PA
Occupation:  Software Engineer

Affinity Mapping

 In order to distinguish the user needs and preferences after compiling data from the user research, I established affinity mapping
 
​​
​








​

Affinity.Mapping.png

User Persona

Based on the collected data that was gathered from user interviews, I developed a user persona in which displayed the needs, wants, frustrations, and pain points of users. I was able to craft a total of two personas to assist in designing on behalf of the users

Jamaal.Ejigou.[Persona].png
Jawaar.Ekeche.[Persona].png
Tamika.Patton.[Persona].png

User Journey Map

A user journey map was generated in order to empathize with the user persona of Jawaar and Tamika 

Jawaar Ekeche.[User.Journey.Map].png
TP.[User.Journey.Map].[a].png

User Flow

In order to comprehend the user's point of view, I generated a user flow to contemplate various paths and decisions that the users will have to take in order to complete a specific task. In order to determine what screens will be needed to assist the user in successfully completing a task, I generated a user flow

Jawaar.Ekeche.[UserFlow].png
Tamika.Patton.[UserFlow].png

Card Sorting

Card sorting provided the ability to identify and distinguish how potential users previewed various features and pages on the responsive web app. An open card sort technique was utilized in which consisted of a total of 5 participants via the use of the productivity tool, Optimal Workshop. The open card sort technique that was conducted presented an array of useful data which provided detailed information of the needs, wants, and expectations of the users. In addition, the open card sorting exercise granted the opportunity to assess techniques that were used hence introducing better opportunities for card sorting tactics in the near future

Card.Sorting.jpg
Card.Sorting.[p2].png

Information Architecture

Based on collected data gathered from user research, interviews, as well as the user persona, I was able to develop a sitemap that will exemplify the overall navigation of the app. In order to determine how the app will operate as well as the overall structure, developing the navigation sitemap will provide an array of benefits

SiteMap.[Revised].png

Wireframes

After recognizing how the app will navigate, I began sketching wireframes so that the process will reveal the pages and screens associated to resolving specific tasks

Sketches

Task #1: Request Funds

Homepage.[Sketch].png

Homepage

Enter Data.[Sketch].png

Input Data

Request Sent.[Sketch].png

Request Sent

E-Receipt.[Sketch].png

E-Receipt

Mid-Fidelity Wireframes

Upon the completion of the low-fidelity wireframes, I began generating a clickable mid-fidelity and high-fidelity prototype. In addition, I implemented UI elements to each screen for the purpose of obtaining user feedback on the user flows via usability testing

Task #1: Request Money

Dashboard.[Low.Fidelity].png
Request.Money.[Low.Fidelity].png
Contact.List.[Low.Fidelity].png
Enter.Data.[Low.Fidelity].png
Request.Sent.[Low.Fidelity].png
E-Receipt.[Low.Fidelity].png

Feel free to preview the entire mid-fidelity prototype

Usability Script And Test Plan

After creating the mid-fidelity prototype, I started the usability testing for the purpose of testing my prototype. In order to identify and distinguish how users will respond when operating the app, I conducted a usability test for the purpose of defining the specific goals and objectives that I aimed to achieve. 

Into the equation, after developing a plan of what I aimed to accomplish and how I was going to specifically calculate the results, a usability script was created for the purpose of recruiting participants to engage in remote usability tests

Feel free to preview the usability test plan 

Feel free to preview the usability test script 

Affinity Map

After conducting the usability tests, the participants were able to detect specific usability issues that required minor revision and made recommendations in which allowed me to make the necessary improvements to enhance the overall user experience

An affinity map was implemented into the process after calculating the results from the usability tests. This included categorizing each participant under a specific color based off observation, positive quotes, negative quotes, as well as errors. 

Upon completion of each participant, I generated a rainbow spreadsheet in which assisted me in organizing the data that was compiled from the usability test hence developing a clear visual pattern of the specific areas that needed to be addressed and modified

Mobile.Usability.Test.png
Affinity.Mapping.png

Implement Revisions

Though participants were able to complete the tasks, there were modifications that needed to be implemented in order to enhance the overall user experience 

_edited.png

Mid-To-High Fidelity

Based from the reviews and feedback that was obtained from participants, revisions were made to the usability tests. Into the equation, additional visual elements were implemented into the process prior to generating a preference tests

Task #1: Request Money 

Dashboard.[Low.Fidelity].png
Request.Money.[Low.Fidelity].png

[Mid-Fidelity] 

Contact.List.[Low.Fidelity].png
Enter.Data.[Low.Fidelity].png
Request.Sent.[Low.Fidelity].png
E-Receipt.[Low.Fidelity].png

Task #1: Request Money

[High-Fidelity] 

Dashboard.[High.Fidelity].png
Request.Money.[High.Fidelity].png
Contact.List.[High.Fidelity].png
Contact.List.[p2].[High.Fidelity].png
Enter.Data.[High.Fidelity].png
Data.Entered.[High.Fidelity].png
Request.Sent.[High.Fidelity].png
E-Receipt.[High.Fidelity].png

Preference Testing

After the completion of the wireframes as well as obtaining collected data from the usability testing phase in which provided me with an insight of participant's feedback, the next step was to develop a preference test. A preference test for the homepage was conducted and provided the opportunity to compare two different versions of the design in order to determine what users preferred

Homepage

Between both designs in the preference test, the difference is the homepage. Exhibit A reveals a homepage that is considered to be aesthetically pleasing from participants. Alternative, Exhibit B exhibited a home screen that is considered to display a sense of simplicity. Participants favored Exhibit B compared to Exhibit A. 

Preference.Test.[Exhibit.A.+Exhibit.B].png
image.png
image.png

Evolution of Home Screen

Original.{Sign.In.].png
Revised.Home.Screen.png
Official.Home.Screen.png

However, after conducting more tests among participants, the home screen significantly evolved in its entirety

Design System

Specific changes included substituting the word “Generate” for “New”, including a back button for navigation purposes as well as revising the labeling underneath the “Home” and “Profile” Icon

Design System.png

Feel free to preview the design system

Final Protoype

A completed and final prototype was developed with high-fidelity wireframes as well as screens

Official.Sign.In.png
Onboarding.[a].png
Onboarding.[b].png
Onboarding.[c].png

Feel free to preview the prototype 

Conclusion

In retrospect, I learned a great deal when working on a project that was equally informative as well engaging and fun. Throughout the process, the project provided me with the ability to not only comprehend how participants previewed the design through their perspective but also offer me the opportunity to collaborate  with fellow UX designers and obtain their  feedback on areas of the design that needed to be revised. Further more, I strongly believe that I was able to provide the necessary features based on the needs and wants from the compiled data found in the user interviews and the usability testing process. Into the equation, I learned a great deal about the fintech industry while designing an app that will meet the demand of users hence boosting the overall user experience 

Demo.Video
bottom of page