Project Brief
This project was about developing a banking app that allows anyone to shop, transfer money, and more without a debit or credit card or the need to visit a physical bank or store. The application has to be “fast, simple, and intuitive”, but without well-defined design criteria. As a sole UX/UI designer, it’s important to have criteria and constraints to work with.
Basic App Feature Requirements
• An onboarding page
• A way to sign up and log in that lets users enter and save their personal information
• A home screen or dashboard where users can access their information
• A menu that allows users to navigate through the application
• A form of security to authenticate a transaction
• A feature allowing users to search through and filter their past behavior
• A feature allowing users to send/save/move money
• Optional: A budgeting or goal setting feature
My Role
As a sole UX/UI designer I developed the idea, conducted the competitor analysis, user research, ideation, information architecture, wireframes & prototyping, user testing, interface design and project communication.
Tools
• Adobe XD, Adobe Photoshop, Adobe Illustrator
• UsabilityHub, Whimsical, optimalworkshop
• Pen and Paper
The Design Thinking Process
In this project I used the Design Thinking Process to organize and plan the individual phases of my design. This provided a path to follow and allowed me to iterate based on new findings and feedback. Next, each of the steps in the process is explained in more detail.
01 understand
For PlutoPay I needed to understand what the problem on the market was. Which apps were already available in this sector? The first thing I needed to figure out was the problem. To do that I began with competitive analysis. Through secondary research I came to understand the goals and thus started to write user stories.
Problem Statement
Consumers need a way to shop, transfer moneyand more – without a debit or credit card and without the need to visit a physical bank or store since more and more transactions happen online without the need for a physical credit or debit card. Due to this factor the e-commerce trend has been catalyzed by the global coronavirus pandemic in 2020. We will know this to be true when consumers and sellers use our app, as it covers their needs with its easy usability.
Competitive Analysis
To understand the problem in more detail, I conducted a competitive analysis of two relevant competitors in the market: PayPal and Paysend. I did a SWOT analysis for both competitors to understand and highlight the features of PlutoPay.
Please feel free to check the Competitive Analysis here.
02 Observe
To make informed decisions on how the app would solve certain problems, I conducted user interviews with 3 participants, in order to gather information and develop a broader understanding of the needs of potential users of PlutoPay.
Research Goals
- To find out: How does the user behave in everyday life?
- To analyze: How do users feel about digitization?
- To understand: Which technologies do users enjoy and What frustrates them?
- To proof: What experiences does the user already have with such apps and which functions do they use the most or would they use the most?
Please feel free to check the Interviews in detail here.
03 Point of View
This step was about collecting the data and creating a conceptual guideline for PlutoPay that I can use during planning and development.
User Personas
Using the data from my research, I have created 2 User Personas for PlutoPay, which represent 2 main groups of my target group. This enabled me to structure the profile of potential users and focus my design decisions on actual needs, goals and motivations.
Banking Apps:
Jessica Schuhmacher
„I like an organized and structured everyday life.“
About:
Jessica lives with her husband and children. She takes care of the household and keeps an eye on the family’s finances. She actually uses multiple different apps for finances which results in more time needed to manage everything.
Goals & Needs:
• Notification option to show when money comes in/out
• Face identification to confirm the money transaction
• A common account for the family
Motivations:
• Have quality time with the family
• An hour a day just for herself
• Financial reserves
Everyday Activity:
• Working in an office
• Spent time with the Family
• Reading books
• Plan things well in advance
Frustrations:
• When something doesn’t go according to plan or – worse – doesn‘t have a plan
Device & Internet Usage per day:
Desktop: 8h at work, 1h in freetime.
Mobile: 30min in freetime.
Social Media: 10min.
Tech Know How: Good Skills: checking mails, online shopping etc.
User Journeys
Based on the profiles and needs of the individual user persona their journeys are designed within the app. In order to understand and influence their special properties and their interactions within the app and adapt accordingly.
Expectations:
• Notification option to show money comeing in/out
• Identification to confirm the money transaction • A common account for the family
Scenario:
Jessica lives with her husband and children. She takes care of the household and keeps an eye on the family’s finances. She works part time in an office.
User Flows
Based on the user personas and user journeys, I created user flows to structure the most important interactions and to define the tasks and processes that a potential user should go through in order to meet his needs.
Please feel free to check the User Personas & User Journeys in more detail here.
04 Ideate
The brainstorming phase is an important transition step from getting to know the users and their problems to developing solutions. Now it was a matter of understanding which steps the user personas would take within the app.
Site Map
As part of the information architecture, I created a sitemap to define how the information is distributed within PlutoPay and how the navigation of the design is structured.
Card Sorting
The use of card sorting, which included data from 7 participants, gave me valuable insights to ensure useful navigation for my potential users. Using an open card sorting, participants were asked to classify the content topics into categories that made the most sense to them and then label those categories.
Refined Sitemap
The sitemap was then adapted based on the card sorting.
Wireframes
After I made the sitemap I created prototypes for each user flow. This is a low-fidelity prototype based on the Request money action. After the basic concept was in place I recreated it in Adobe XD.
05 Prototype
Prototypes are used for the testing phase of a design process: to determine how users behave with the prototype, to identify new solutions to problems and to find out whether the implemented solutions were successful or not.
High-fidelity Prototype
After the basic concept was in place, I created an interactive high-fidelity prototype in Adobe XD.Among other things I added little things that I noticed afterwards.
Please feel free to check the Prototypes here.
06 Test
In order to test my prototype I used Usability Testing and Preference Testing which gave me valuable feedback and insights for further iterations.
Usability Testing
After creating the prototypes, I looked for people to do this testing and conducted some interviews. I carried out the usability test with 6 participants to make sure that they resemble the user personas of PlutoPay.The aim was to evaluate the learnability, efficiency and satisfaction of new users who interact with the app.
Affinity Mapping & Rainbow Spreedsheet
To start interpreting the information from my usability tests, I created an affinity map and a rainbow spreadsheet. This enabled me to evaluate as well as group information and finally evaluate the behavior or mood patterns of my participants. The information was sorted into 4 categories: observations, positive quotes, negative quotes and errors.
Visual Design
After I had completed the design thinking process, it was finally a matter of creating a suitable design for the app and compiling my design decisions in a style guide.
Log-in Screens
Some more examples
