plutopay

PlutoPay

Manage and use money securely anytime, anywhere

A UX/UI Case Study - CareerFoundry

VIEW PROTOTYPE OVERVIEW
wallet

Your Accounts in One Place

Easily access and manage your bank account, gift cards and more!

PlutoPay: The out of world experience for personal banking

VIEW PROTOTYPE OVERVIEW
splitbill

Move Money Your Way

It's never been easier to send and receive your money your way, any day.

PlutoPay: The out of world experience for personal banking

VIEW PROTOTYPE OVERVIEW
alternative

Win Rewards Tailored to You

Do more than banking and earrn rewards while using PlutoPay

PlutoPay: The out of world experience for personal banking

VIEW PROTOTYPE OVERVIEW

Project Overview

Pluto Pay - CareerFoundry UX Design Program Project

Role: UX Researcher and UI Designer (solo project)

Methodology: Competitive Analysis, User Interviews, Survey, Task Analysis, Prototype Design, Feedback & Testing Research, Information Architecture, Wireframe and Prototype Design, Usability Testing, UI Design

Tools: Pen and Paper, Google Slides, Google Meet, Photoshop, Usability Hub, Balsamiq, Adobe XD, Adobe Illustrator, Adobe Dreamweaver

The Challenge

There are numerous financial management tools – various banking institution apps, peer-to-peer payment apps, eWallet apps - all speaking its own language and performing similar tasks in their own way. The sheer volume of apps and the attention needed to keep up with it all can become cumbersome or sometimes overwhelming when you have to access multiple apps to do your day-to-day financial tasks.

The Goal

The goal is to provide users a singular source of intuitive tools to make managing their finance tasks easier.

The Process

The non-linear narrative of PlutoPay’s evolution is summed up by six the categories of the Design Thinking Process.

design process

DISCOVER

Understanding the Market

With so many options in the average users’ hands, the stress of having to keep up with these solutions constantly vying for your attention, speaking its own language and performing its own tasks can create a chaotic environment of information overload. Where do I start?

Conducting Competitive Analysis

competitive analysis

The process of discovery began with initial research of the digital finance landscape, specifically peer-to-peer transactions apps with an eWallet function. I chose to conduct my analysis on two of the most popular companies in the industry, Venmo and PayPal.

View Complete Analysis

I started with a Strength, Weakness, Opportunities and Threats profile for each Venmo and PayPal.

Both wireless transactions tools can be used as eWallet. Venmo’s main selling point is leveraging the social aspect to personalize the experience, but it can only be used in the United States. PayPal’s popularity has global reach and their main selling point is their security measure of masking the users’ financial information to facilitate safe transactions.

By analyzing these two apps, PlutoPay will focus on the following for opportunities for improvement:
  • A clean and simple onboarding interface with a friendly tone of voice
  • Easy and no-fuss transactions
  • Accessible features
  • Secure features

EMPATHIZE

Understanding the User

With the understanding of the market, I then move to the emphasize phase of the design process journey. To empathize with the user I conducted a short survey to understand the motivation of people who may use an eWallet financial tool like PlutoPay.

Beginning with a User Survey

Setting Up the Survey

I sent a very informal/casual BCC mass text to 30 of my friends and co-workers just to determine who I should interview.

  • Initial Text Hey! I’m working on a project for my UX class and was wondering if you’ve used peer-to-peer payment apps, eWallets and/or currency exchange apps? Let me know!
  • Response if they said they have some experience: That’s great! Would you be willing to be interviewed about your experience? Just for research purpose over the phone or facetime? You up for it?
  • Response if they said they have no experience: That’s okay! Would you mind telling me why you stay away from these types of apps? I was curious why they don’t use one just to see if its valuable information for the research. Maybe it’s something I can help solve as well.
Survey Results
survey results

Conducting User Interviews

Goal 01

Understand the motivation of users to use a financial app like the one we want to create.

Goal 02

Determine favored and disliked features from similar apps that they currently use.

Goal 03

Listen for and identify what hurdles/pain points our users encounter in their journeys.

participants

I focused on three categories for data gathering: their Behavior or Attitude, Needs or Goals and their Frustrations to prepare for affinity mapping session.

Extracting Insights

AFFINITY MAPPING
alternative

I’ve assigned each of the interviewees a specific color so we can keep track of their thoughts and responses as we start analyzing findings. With the data acquired from the interviews, I used the affinity mapping method to group similar responses to uncover patterns that can be improved upon.

Key Insights
  • Contact-free/touchless transactions - People are looking for payment options like QR codes and near-field communications as people social distance for safety.
  • Users like layers of security measures that error proof processes - increases users’ level of trust and are more likely to use it again and/or do more
  • Preference for quick access for transactions - liked the speed and convenience of an eWallet
  • Users disliked re-downloading apps/re-entering their information multiple times and jumping between different apps for similar actions. “All-in-one” and “combination” came up often during the interviews
  • Range of use also came up as a feature desired (worldwide - not only in the continental US)
interviews
User Interviews

View the notes from the interviews the four participants

affinitymap
Affinity Mapping

See the details and documentation of the affinity mapping session

DEFINE

Identifying the Problem and the User

The data gathered through the market research, survey and the user interviews led the way to formally defining the problem statement. I have to keep this research-based statement in mind in the process to create a meaningful solution for our target audience.

Defining the Problem

The Problem Statement

Our users need a secure, convenient and easy to use app to store and manage their financial information for easy access in local and foreign transactions and money wires without the use of physical cards.

We know this to be true when users have a singular robust and reliable digital wallet that allows them to securely manage their accounts and financial data and use their money for purchases and transfers - all wirelessly, all day, everyday.

Defining the Users

USER PERSONAS

Now that we have defined our why we are creating our product, the next step is to define who are we designing for.

The previous research laid a great foundation to advocate for the product’s users and their interests leading to create the four personas that will represent my general user group. Meet Serena, Alisa, Ted and Easton.

persona_serena

Serena, the always on the go social butterfly wants to be able to split a bill with friends but hates having to enter her password repeatedly or jumping between apps.

persona_alisa

Alisa, the adventure seeking nurse wants to pay for her purchases or her bus rides wirelessly when she travels for work so she can travel light and be less exposured to germs and diseases.

persona_ted

Ted, the techy family man uses his phone to send allowances to his kids accounts as well as for wiring money to his family in the Philippines. Security of his data is very important for him.

persona_easton

Easton, the traveling student wants to track his spending in USD but needs help with currency conversions. He gets confused with all the different country restrictions and rules for payment. 

Defining the Users' Goals

USER JOURNEY

With the user group established, I delve deeper into the possible experiences and scenarios these group of people may experience as they are using the product through user journey mapping. This way, I can explore solutions that cater to their need and goals.

journey_serena

"It's faster if I just pay for this than splitting it 5 ways. We're going to be late for the show. And I get points!"

journey_alisa

"With Covid-19, I want to minimize the surfaces I touch and personal exchanges. Wireless is the way to go!"

journey_ted

"That typhoon really did a number on mama's house. I have to send money to them in the Philippines to help ASAP!"

journey_easton

"I budgeted $300 USD for this trip. Let me see how much I have left after this purchase in £ GBP."

IDEATE

Mapping the User Experience

With the insight of the target audience goals and motivations, I initiate the ideation process with some brainstorming of possible features to incorporate for our app. As a starting point, I took some of the pain points from my established user group and posed it as a question. Then I started jotting down some possible features and solutions to address those pain points.

Drafting Possible Solutions

BRAINSTORMING

With the insight of the target audience goals and motivations, I initiated the ideation process with some brainstorming of possible features to incorporate for our app. As a starting point, I took some of the pain points from my established user group and posed it as a question. Then I started jotting down some possible features and solutions to address those pain points.

SECURITY

How do we ensure security for each transaction type and users’ personal financial information?

  • High level of security and encryption
  • Two-step verification
  • Backup Methods
  • FaceID
ACCURACY

What methods and security measures can we provide to ensure the accuracy of the intended person to pay or send money to?

  • Text/in-app validation to show who you're sending to - include photo for extra verification
ONBOARDING

How can we introduce and guide our users to get to know the different app segments and features?

  • In-app assistantvintroduces main features and navigation items
  • Gamification of exploring the app or rewards for completing goals
GLOBAL REACH

How can we make it easy for them to use this app for foreign transactions?

  • Allow foreign currency conversion
  • Extra security measures for international purchases
  • Worldwide adoption instead of regionalized
  • Regionalized options for getting cash
DIFFERENTIATOR

How can we stand out against competitors? What elevated value can we add to the users’ needs?

  • Ability to track or set up goals
  • In-app assistant
  • Many ways to pay and request money
  • Gamification/Reward system
  • Store more than debit/credit cards
PERSONALIZATION

How do we personalize their experience with our app?

  • Personalization of dashboard
  • Customize in-app assistant/guide
  • Choose personal avatar
  • Customize which cards go in virtual wallet but still track other cards for financial health

Establishing Information Architecture

SITE MAP & CARD SORTING

Keeping the possible solutions in mind with the user-centric goals, an initial sitemap was created. To test the validity of user associations for an intuitive experience, a card sorting session was conducted.

Initial Site Map
lowfidelityscreens
Key Insights from Card Sorting

The card sorting data showed that I had to re-categorize a few things that caused some confusion.

  • Rethink priority of Wallet (Later separated to Wallet and  Cards & Accounts)
  • Consolidated “Recent Activity” and “Track Receipts”
  • Added link to “Personal QR Code” under “My Profile”
  • Added link to “Report/Flag” under “Support”
  • Removed My Rewards, Deals and Offers and Pluto+ Sign Up from Settings to its own category “Rewards, Products and Offers”

View Site Map and Card Sorting Details

sitemap-cardsorting
Revised Site Map
lowfidelityscreens

Mapping the User Flow

TASK ANALYSIS AND USER FLOW

With the updated information architecture, I then started mapping out how some of our target audience might navigate our app to attempt their selected task. This would help me foresee any glaring roadblocks that may prevent our users from completing their tasks. The sample below gives a quick glance at the task flow of oone of our personas, Serena.

alternative
Entry Point

Open app and go to Split Bill

Success Criteria

Everyone pays her back what she’s owed.

Task Flow
  • Open app
  • Login manually with email and password or via Face ID or other biometric dictated by user’s device
  • From the homepage dashboard, navigate to and select Request
  • Navigate and select Split Bill
  • Enter/select contacts
  • Input total bill amount
  • Select Split Equally
  • Confirm details on the summary page
  • Press Submit to send requests.
SERENA

View the details of Serena's task flow to Split a Bill with friends.

ALISA

See Alisa's task flow scheduling a payment and filing the receipt.

TED

See Ted's task flow sending money to his family in another country. 

DESIGN

Creating the Experience 

I used what I know from previous research to draft the initial designs and constantly use data from more testing to make some informed decisions. With every test ran, the design shifts. My thought process for the design of PlutoPay is documented below, but is still evolving.

Initiating Design with Sketches

LOW-FIDELITY SKETCHES

The initial design phase started with sketching out low-fidelity wireframes. I focused on selecting the functionality and style of the navigation first and loosely sketched the other elements. I opted for a bottom primary navigation to feature the main actions combined with a top hamburger menu at the top for supporting functions and profile modifications for the mobile experience.

View the Sketech Details

lowfidelityscreens

Adding Form and Function

MID-FIDELITY PROTOTYPE

With the navigational structure established, I moved on to creating the mid-fidelity wireframes using Balsamiq to put more definition to the interactive elements and focused a little bit more on user interface considerations. During task flows, I had noted to account for different user entry points to the app. I introduced a splash screen, a login options page and onboarding screens to the experience flow.

View Details and Interactivity Notes

midfidelityscreens

Stringing It All Together

INTERACTIVE PROTOTYPE

With the data and planning previously gathered, a clickable asset is created in Adobe XD to visualize the navigation between screens or wireframes. This prototype paints a better picture of a more complete experience as we test for usability. Color and images were kept at a minimum so that the focus stays on the usability over visuals.

Interact with Clickable Prototype

highfidelityscreens
alternative

TEST

Evaluating Usability

With a prototype ready for testing, I proceeded to the testing phase of the design process. This phase required creating a plan, conducting the usability test and analyzing the results. 

Setting Up A Plan

USABILITY TEST PLAN

I created a usability test plan to keep me organized and as a guide for consistency for each of the usability test participants. I maintained an informal tone to keep them relaxed and less nervous as we head into the testing. To encourage a conversational interview, I crafted open-ended questions and some back up follow-up questions to get the most insight out of the participants. They were asked to share their screens as they narrate their observations.

Six participants were recruited - 3 women and 3 men, age ranging from 25-64 from different backgrounds and levels of experiences using digital wallet/e-finance solution tool. Sessions were approximately 20-30 minutes for each participant.

participants
TEST OBJECTIVES

Gauge PlutoPay’s usability through the observation of users’ interaction with the app while completing basic tasks, including:

  • Completion of the onboarding process
  • Use of the Virtual Assistant tool
  • Sending Money Person to Person vs Sending Money Worldwide
  • Ease of Splitting a Bill
  • Efficiency of Wireless payments leveraging QR codes or NFC
  • As well as overall impressions

View Full Test Plan

alternative

Confused over and questioned the scan functionality - is it scan to pay or scan to get paid or share your contact?

Jeffrey - Agency Consultant

Moderated Remote

alternative

Have never heard of the term “World Remittance.” Maybe use something that is more commonly known or familiar?

Mary Rose - Logistics Manager

Moderated In-Person

alternative

Thinks the news and announcements takes up too much space and wants to leverage that area for something else.

Nhil - Quality Systems Manager

Moderated Remote

alternative

Was very excited that this app can combine several banking functions and different type of accounts - even loyalty cards

Nicole - Bank Relations Manager

Moderated Remote

alternative

Questioned why there's only one payment option featured on the homepage. Eventually went to accounts to make a payment.

Kyle - Inside Sales Manager

Moderated In-Person

alternative

When in doubt, she preferred to use the AI to point her to where she needs to be. Had no experience of Splitting a Bill before.

Venus - Registered Nurse

Moderated In-Person

Analyzing the Results

AFFINITY MAP

I went back through my notes and the recordings and started to the process to create an affinity map. I assigned each of the participants a color and started writing my findings down - one on each note and then started separating them into categories.

View Participant Notes in Detail

interview_notes
affinity


Using the same colors used from affinity map, I plotted the findings in a rainbow spreadsheet so that I can identify, categorize and assess the severity of the errors. I also made notes on possible solutions to implement in the next round of design.

rainbowspreadsheet_observations
rainbowspreadsheet_errors

The interviews provided invaluable feedback for possible enhancements down the line as well as identified areas that need improvement now. It also showed what is working well.

The videos are very helpful as a reminder of what was discussed and to see the participants’ raw and unfiltered reactions since this is their first encounter with this application. The video also helped me see what I missed while I was helping the participants or taking notes during the usability testing sesssions.

With the data gathered from affinity mapping and the rainbow spreadsheet, I focused on 5 areas to improve for the next iteration of the design:

  • Scan function in bottom navigation
  • Hidden Banking Functions in Hamburger Menu
  • News and Announcements too prominent
  • Account vs Pay Confusion – Pay Needs to be more Prominent
  • Sending Money - To a Contact vs Worldwide

DESIGN

Refining to Solve Usability Issues

With the priority of issues identified, I made design decisions to present solutions for the main issues. I'm aiming to minimize issues down the road. Therefore, I focus on presenting the solutions, update the prototype and send for more feedback to see if a proposed solution is effective in making the process easier for our users.

participants
introduction
background
questions
background
questions

VISUAL DESIGN

Elevating the Visuals

I jump started the Visual Design process by brainstorming some strategies for boosting user engagement. I began with considerations for color and image strategy.

Developing the Strategy

VISUAL STRATEGY 
Using Colors Strategically
Purple
    Shades of purples as the primary color is the smart choice for our app to represent personal wealth and financial wisdom.
  • Research show that purple signifies success and wisdom.
  • It’s also a color that represent royalty and wealth.
Blue
    Juxtaposing blues as a secondary/accent color with the warmer purple brings a sense of balance.
  • Blue is a color associated with productivity and stability
  • This cool color is associated to water or flow
Developing Personality
  • To enhance the user experience, the users will be introduced to a face for the Intelligent Assistant aspect of the app. It will be a little astronaut named Luna and she will live on the top bar – easily accessible anytime.
  • Luna will help users navigate and explore PlutoPay - incredibly helpful during onboarding and when the users ask questions.
  • Luna adds a level of warmth and friendliness in a landscape where it can be overwhelming or complicated. She will be there to help you break down big tasks and use common friendly terminology to avoid any confusion.

With these considerations, I took the prototype and continued enhancing the design with basic design principles, Gestalt psychology , Material Design Components and web accessibility considerations.

View Initial Visual Design Considerations

Validating the Strategy

A FEW ROUNDS OF TESTING TO REFINE DESIGN

I continued the process of refining the design and getting a few rounds of feedback. I had a rounds of feedback from the original test participants from the usability test, informal and A/B testing via guerilla method with several of my co-workers and a round of feedback from fellow UX students on CareerFoundry. I've documented the visual evolution to reflect the valuable research and feedback gathered.

Reduced to a text link instead of a buttona nd fix proximity of Forget Password to the password field. Also aligned it with Use FaceID function so its anchored to another element and not floating on its own.

background

Enlarged and set text size in the menu  to a minimum of  16pt type and reconfigure menu items to streamline homepage to have less clutter so that users can get to and complete their task faster.

questions

Reduced number  of items in bottom nav by making the homepage the wallet. (From 5 items to 4 items). Wallet looked like its currently selected in the old navigation even when its not active. Old wallet page is also  too overwhelming with so many colors for sections and cards. What happens when there are no cards yet? (ex. after new user onboarding)  

View Homepage Evolution Details

View Main Navigation Evolution Details

participants

Adding a country code for the phone number and having an option to hide and show password for the sign up page and bigger font size for login page

background

Clearer call to action button language to avoid confusion - avoid cutesy terms that will cause some confusion or detract from accomplishing the goal

questions

Redesigned card dashboard - original introduced a style that was not used before so for consistency, I modeled after the wallet and moved Add Account to the top. View Card Dashboard Evolution

background

Redesigned Card Management page - original had too many primary CTAs. Changed CTA priority and placement as well as management details for better flow. View Card Management Evolution

questions

Modal looked crowded and it was suggested that maybe using a fuller screen for the modal

background

Split Bill section - Custom amounts number was confusing - adding a label on what that number is will help clarify it

questions

DESIGN

Developing the Visual Ecosystem

The culmination of the visual strategy and feedback sessions brought about the creation of the design ecosystem of PlutoPay. The iteration process truly evolved the visual design to focus on simplification while keeping it user-centric.

participants
PLUTOPAY's DESIGN LANGUAGE SYSTEM 

The visual considerations of using colors strategically, infusing the design with personality  and basic design principles jumpstarted the creation of the design language system of PlutoPay. 

This will serve as a common language for the designer, stakeholders and developers when referencing visuals. It will also help guide and ensure consistency in typography, illustrations, iconography and tone of voice.

View Complete Design Language System

FINAL PRODUCT

Getting Ready for Development and Launch

After rounds of testing, revisions and collaboration sessions, the current product state is ready to be handed off for development.

PlutoPay

Manage and use your money securely – anytime, anywhere

Interact with the prototype below or you can view the prototype in a new tab.


VIEW PROTOTYPE

Planning for the Future 

While the product is in development, I will be ready to answer questions and keep an open line of communication for any issues that can come across from development. I would be open to testing portions of the app if need be. 

The project is far from being over - what I hand off to the development team is just a portion of the experience of the app. When new features and tasks need to be developed, I would like to dedicate a 2-month cycle: 3 weeks to creating and refining areas for improvement and 3 weeks user testing and findings analysis and 2 weeks to iterate based on those findings.

REFLECTION

Evolving with Each Test and Iteration

Deliverables shift and will continue to shift with more testing as more features and design are introduced. The documentation of the evolution reminds me of the journey of the iterative process.

KEY TAKEAWAYS

Focused on simplifying – force myself to reevaluate the hierarchy and categories of features. I started with serving up a everything to the user in the homepage all at once which proved to be overwhelming.

It’s not enough that the user just complete the task, but that the user complete the task as efficiently as possible, which meant minimizing the number of clicks to get to an important task. I had to reevaluate the nested features in categories to boost learnability, otherwise users can get lost or forget how to get to that feature when they return to the app.

PREVIOUS: This is the updated sitemap after card sorting. This had too many elements on the homepage level which showed that it was too complicated.

background

UPDATED: This is simplifying the experience to ensure efficiency. You can also see how this affects the user task from one of the personas.

questions
old task flow
updated taskflow

When I first started, I questioned the volume of notes and data gathering. It's not until I was stringing it all together to start the design process when it started making sense and the story or the journey came to be. My preconceived notions vs what the research say that the users want is night and day. I just had to trust the research process and it will guide me to a user-centric solution.

I also learned that notetaking and annotations for images and data gathered are essential. I always thought the images will speak for itself. I learned that in the UX research of this project that the write up is as important or sometimes even more important that the images themselves. It is not always self-explanatory. Putting this case study together to put the narrative on the journey of this app thus far proved that. It's definitely something I want to practice and improve upon in my UX/UI process.

THANK YOU

About PlutoPay

PlutoPay is a UX/UI Project for CareerFoundry while completing the UX Immersion Certification Program.

Attribution
Let's Chat!

I'd would love to hear from you hello.kristinejoy@gmail.com

kristinejoy

Copyright © 2023 Kristine Joy