Penguin PlutoPay Web Responsive app
Objective:
Penguin is a web responsive app that serves as an online payment and budgeting solution. The app main features are sending money and creating saving plans.
​
Overview:
It was my end-to-end design case study project as I did the immersion course for UX design in CareerFoundry under the supervision of my tutor and mentor. In this course I learned the meaning of lean & agile UX, information architecture principles & frameworks, usability heuristics & interaction design, visual design principles, emotional design for user engagement, responsive design, designing for accessibility & iterative design.
​
While working on this project I gained the following skills:
-
User centered design process & design thinking
-
Problem statment & double diamond strategy
-
Competitive analysis
-
Business requirment document
-
User stories
-
Research methods: user interviews & surveys.
-
User research analysis: affinity map
-
User Personas
-
Mental model & user journeys
-
Task analysis & user flows
-
Mobile first design
-
Content auditing
-
Sitemap
-
Card sorting
-
Navigation & design patterns for mobile & desktop
-
Low-Fidelity prototyping: Paper & Sketches
-
Rapid prototyping
-
Mid & high-fidelity wireframes & Prototyping
-
Usability test plan & script
-
Conducting usability tests, reporting findings & making recommendations
-
A/B & preference testing
-
HTML basics
-
Grids & spacing fundemental
-
Creating style guides
-
Organize & handoff deliverables
Content
Source CareerFoundary
01
Problem statement
The first step was to do some brainstorming with the aim of listing the possible problems & solutions. This would be the first step in conducting the research with the aim of understanding the potential problems, as the first part of the double diamond strategy.
So, I listed the following potential problems:
-
Some users lack the control over their online spendings, and the ability to make a budget for the online spendings.
-
Lack of information about the overall habits of online spendings, especially that there are many kinds of charges, starting from a one simple payment, daily payments, monthly and down to yearly payments.
This led me to formulate the problem statement as following:
"The User needs a way to control his online spendings and a way to get detailed information about them, because he would like to save money and make his spendings more efficient.
We will know this to be true when we see the user able to make a budget and a ceiling for his online payments, while being informed about all his spending habits."
I also listed some possible solutions as following:
-
Giving the user the space to manage his spendings according to limitations that he can implement and customize, like adding a figure to be the limit of monthly spendings.
-
Supplying the user with detailed statistics and diagrams to make it easier for him to observe his spending habits, accompanied with informative notifications.
02
Competitive Analysis
The second step was to research the market to find the needs of the users that are not met and/or the users complains. So I picked 2 competitors; Skrill & Paypal. Then started to create a competitor profile for each of them with the following structure: overview, key objectives, overall strategy, market advantage, marketing profile & finally a SWOT profile for each of them.
​
I'll concentrate here on the SWOT profile of both of the competitors. As you may know SWOT stands for: strengths, weaknesses, opportunities and threats, and these aspects summarize the findings of the whole study.
​
So let's start with Skrill's SWOT profile:
As for PayPal's SWOT profile:
I then included a UX analysis for PayPal, because PayPal has a bigger share in the market, and they released a new version of their web responsive app. The analysis included a summary about the usability, layout, navigation structure, compatibility, differentiation & calls to action.
03
Business requirements document
Although Penguin PlutoPay was a case study, I created a BRD as a part of the practice. The document normally aims to align all stakeholders on what this app does, who it is for, and what it will take to build it. It is then clear that at this stage it was important to decide who my audience and target user was as a designer. This stated the following:
-
The minimum age demographic for this app is 21 as younger people will not be concerned about managing accounts or saving. The upper age range is 45 as anyone older than this will be used to traditional banking and will not be interested that much in online transactions.
-
The mindset of our target user is someone who does a lot of transactions online; either buying or selling. He may be willing to have a digital wallet, where he will be able to set budgets for his purchases monthly and use some other tools to help him save money and analyzes his spending habits.
Beside the target audience the document included also a summary about the competition, risks & opportunities, & a conclusion which stated the following:
​
-
It’s possible to offer a competitive application that offers a digital wallet, online transactions facilities and a digital credit card, while concentrating on offering budgeting tools.
-
Also when the user is unwilling to deposit money in his digital wallet. We will also deliver statistics about the user’s spending habits and the payments he receives online, supported with visuals like detailed diagrams.
-
A user loyalty system should also be included to motivate the users to use the app more frequently.
-
The key will be a streamlined user experience that puts middle income users front and center.
-
Marketing and establishing cooperation with some of the existing giants in the online shopping business (like Amazon) will be extremely important as possible methods for getting the app in front of customers and ahead of the competition.
​
Then the S.M.A.R.T. Business Objectives as following:
-
Create an application that can stand the competition in the market, and attract users who are willing to take control over their online transactions. Measured by: Initial user tests and market size estimates. Deliverable by: 2-3 months from start date.
-
All the main features should be functioning with no problem by release. Measured by: Developers and specialists. Delivered by: a week before the product release.
-
Creating an application that can substitute the ordinary bank. Measured by: The user’s activity. Delivered by: product release.
The document also included a scope, functional requirements & delivery schedule.
04
Formulating user stories
I then started to formulate user stories according to the features that the app should offer as following:
The Onboarding
-
As a new user of PlutoPay, I want to have an overview of what this app can offer, so that I’ll be assured that I made the right decision using it.
-
As a new user of PlutoPay, who will use the app for receiving online payments, I want to know how to get started with the app, so that I’ll spare the confusion in the beginning of using it.
Sign in/ Sign up
-
As a new user of PlutoPay, I don’t want to go through a lot of forms to fill, so that I can save my time and energy for achieving my main goals in using the app.
-
As a new user of PlutoPay, I want to be informed exactly about the required official documents, so that I’ll make sure that my account won’t freeze in the near future.
-
As a new user of PlutoPay, I want to be notified about any document that I need to upload in the future and the time interval needed to do this, so that I’ll not miss a deadline.
-
As a frequent user of PlutoPay, I want to be able to sign in into the app in a fast way, so that I’ll be able to access the app on the go.
-
As a frequent user of PlutoPay, I want to sign in to the app with the least amount of input, so that I’ll feel safe even when I’m accessing the app on the go.
Dashboard:
-
As a frequent user of PlutoPay, I want to have an overview about the main figures (deposited amount, amount spent in the last day or week and payments received) in a neat way, so that I can figure out my balance.
-
As a frequent user of PlutoPay who is more concerned about saving, I want to see some diagrams that display my spending in a clear way, so that I can understand my spending habits in the simplest way.
Navigation:
-
As a frequent user of PlutoPay, I want to have a navigation bar that includes all the feature’s pages of the app, so that I will not spend too much time searching for a feature.
Authentication:
-
As a frequent user of PlutoPay, I want a simple method with minimum input to authenticate my transactions, so that I can do my transactions also when I’m using the app on the go, and to feel more secure.
Search & Filters:
-
As a user of PlutoPay, I want to be able to look through the transaction’s history anytime, so that I can revise and control my spending and payments.
-
As a user of PlutoPay, I want to be able to search my transaction’s history according to some criteria or/and in specific time intervals, so that I will be able to clearly see through my habits, how these habits change through time and gain more control over my transactions.
Send & Move Money:
-
As a user of PlutoPay, I want to be able to send money to friends or family members without complications, so that I’ll not depend anymore on any of the ordinary ways like paper checks or bank transfers.
-
As a user of PlutoPay, I want to be able to move my money from my digital wallet to my debit bank account and vice versa without any complications, so that I’ll be able to manage and control my accounts.
-
As a frequent user of PlutoPay that deposited money in its digital wallet, I would like to have the credit card owner’s advantages, so that I’ll not depend on any other methods of payments whatever the situation I’m dealing with.
Budgeting and Goal setting:
-
As a user of PlutoPay who is more concerned about saving, I want to be able to set a plan for my spending ahead, so that I can manage and control my purchasing habits.
-
As a user of PlutoPay who is more concerned about changing his purchasing habits, I want to be able to set some short and long term goals supported by some informative statistics and diagrams, so that I can figure out the habits I need to work on the most, and see clearly the trend in which this habits are changing.
05
User research
I was then ready to start the user research with the following objectives:
-
To know more about the user’s spending habits.
-
To find out how the users plan for saving, what kind of plans they make and what aim they have.
-
To see how the user may respond to a tool that helps him in budgeting and monitoring his spending habits.
I launched a survey then using google forms to collect quantitative data:
You may notice here that all the questions were direct ones aiming to collect data, and the user should spend around 5 mins to complete answering the survey's questions. The conclusion of the survey results was as following:
-
The users are spending online on different kinds of products, but most of them rely on online banking when it comes to payment.
-
Sending money is the most used feature in an online payment application. Although users are motivated to use tools to help them with their savings or monitor their spending habits, this function is not commonly used in such applications.
-
Most of the users will make short and long run plans, and they will serve mostly their aims in investment.
I conducted simultaneously 5 user interviews with the following participantes:
-
Hyoseuny Lee (32, banker, MBA Student)
-
Hyoungmook Choi (32, has his own business, MBA Student)
-
Lee Jaecheol (28, MBA Student)
-
Abanob Boles (28, Mobile application developer)
-
Meikel Youssef (38, IT specialist)
4 of these interviews were in person and only one of them was remote.
​
The interview questions were as following:
-
Can you tell me about your spending habits online?
-
Can you tell me more about how you manage your online payments?
-
What are the features you use the most in an online payment application?
-
Can you tell me about the problems you face with these apps and/or online payment in general?
-
How often do you plan to save? And how often did your plans succeed?
-
Can you give me more details about some of your saving plans in the past and the problems that you faced?
-
How did you overcome these problems?
-
Can you tell me if you were interested in the past to change your spending habits? And if yes, then how did you manage to change them?
-
What are the challenges you face in the process of changing your spending habits?
​
As for the interviews findings I'm going to share with you here the very different one:
​
For Hyoseuny, Hyoungmook and Lee who arrived in Vienna to complete their studies. They are from South Korea and they inherited their parent's companies. They gave me a hint about the culture and region differences;
-
They depend on an application called „Kakao“, an alternative for Paypal, which is commonly used in Korea. This app is also for text messages, online payments and even food delivery and Taxi services. This online payment app is used mainly for sending and receiving money, while mostly small deposits are made on such apps, because of security concerns.
-
On the other hand, they depend on the banks and their consultants to manage their savings and their accounts. In these accounts they may feel more secure to deposit more money. They are very concerned about saving, but they try to minimize the taxes they have to pay. Credit card is the main payment method in the case of regular payments and they synchronize it with their online payment app.
They spend money online in different manners, but the most common spending is in the subscriptions for Youtube and Netflix.
06
User research analysis
To analyze the findings of the user research I started to do affinity mapping, which I did on a whiteboard with sticky notes and also digital on Conceptboard.
This led to the following insights & recommendations:
-
Cooperation with giants like Amazon to be included in the check out options.
-
Extras to facilitate payments on different kinds of platforms.
-
Creating a new kind of customer service, where the user can get consulted about his finance.
-
The ability to synchronize existing credit cards and bank accounts.
-
The ability to create a credit card through the app.
-
Option to chat with others.
-
The authorization process for payments should be as simple as possible.
-
The ability to create different saving plans simultaneously, giving them different names, priorities and time intervals.
-
The option in a saving plan to constantly deposit a certain amount to the saving account.
-
Investment tools like crypto or stocks trade.
-
A feature for managing bank credits.
-
Highlighting in the activities the payments that are constantly made (eg. subscription fees) with an option to see the amount paid in total.
-
Making it possible to adjust and customize the notifications in different manners and according to different aspects.
-
If the consulting service is available, consulting about taxes should be also available.
-
Inputs needed for signing in should be minimum and secure.
-
The user should feel confident and secure using the app.
-
Some of the main features like sending money should not be restricted to the app's users.
07
Personas
The user research and its analysis led to the creation of 3 main personas. These personas reflected the 3 main target user groups: the moderate, the saver & the investor.
08
User journeys
I then formulated 3 user jouneys based on the personas as following:
09
User flows
According to the user journeys, I made a task analysis and created the following user flows using Google drawing:
10
Sitemap
I conducted then some remote card sorting sessions to create the sitemap as following:
11
Low fidelity wireframes
I then created the first low fidelity wireframes for both mobile & desktop using a tablet with a pen, Samsung notes and pdf templates:
Homepage
Banking features screen
Hamburger Navigation Menu
The Activities in desktop
12
Mid fidelity wireframes
Using AdobeXD with some imported libraries with UI components, for example icons I started then to create the first mid fidelity wireframes:
Creating new saving plan
Search activities
Send money screen
13
low fidelity prototyping
I then returned to the user flows shown above, and started to sketch every screen on a sticky note with a marker to create the first low fidelity wireframes.
14
Rapid prototyping: Onboarding & Intro
I then started to use Balsamiq to rapidly prototype the onboarding and the intro for both mobile & desktop:
Mobile onboarding
Desktop onboarding
Mobile Intro
Desktop Intro
15
Mid fidelity wireframes
Back to AdobeXD, and my mission then was to turn all the screens mentioned above into a mid fidelity wireframes. Here is a sample of the wireframes created at the time:
Onboarding
Sign up
Create new saving plan
Sign in
Send money
16
High fidelity wireframes
Then I iterated the above mid fidelity wireframes into higher fidelity with the aim of creating a clickable prototype to use in the usability testing. A sample of these wire frames is as following:
Sign in
Create new saving plan
Confirm new saving plan
Intro 1
Activities
Add new contact
Intro 2
Send money
Payment details
17
Usability testing
I was then ready to take the design to the users to find as many problems with the design. The process started with preparing the usability plan, usability test & informed consent forms. The usability test script included an introduction, background questions, open-ended questions & tasks.
​
Background questions
So, as I told you that I’ll be asking some questions before we start checking Penguin’s prototype. Let me first ask you:
-
How often do you shop online? And why may you prefer it?
-
Which payment methods do you prefer when you shop online? And why?
-
(In case you use an online payment app) Which features are you interested in besides the online payment?
-
(In case you don’t prefer using an online app) Why do you avoid using an online payment app?
​
Open-ended questions
Now let’s start checking the prototype; I’m going to show you the homepage, check its components, and please speak out loud about what you think and the details you are noticing on the screen itself.
Well, now can you please take a deeper look on the screen and tell me what you don’t like, what you like, and if you would like to add any comment.
Is there anything you feel uncomfortable with on the screen? Why?
Do you have any questions till now?
​
Tasks
Now, I’ll give you two tasks to finish with the app in a scenario form and a direct task related to the scenario,
-
First, You want to send money to a friend, and your friend is not on the contacts list of the app, but you know that he uses it, and you got his email. How can you use Penguin to send him the amount of money you would like to send?
-
Second, You are planning to save some money. Let’s say you would like to buy a new car and you would like to try a Penguin’s saving plan. How can you use Penguin to create a new saving plan?
(On the add new saving plan screen I may ask more questions to make sure that I get the whole idea about how they think and feel about the page)
I then conducted 6 usability tests; The first test took place on 5, december 2021 and the last on 8, december 2021. Three of the tests were moderated in-person, and I used a tablet to show the participants the prototype and they were also able to test the prototype on it. An app for on-screen video and audio recording was used on the tablet.
I also used my smartphone to check the script. The other three were moderately remote, and I used my laptop to finish the tests. Skype was enough to share the screen and record the sessions.
​
Participant no 1: Lena
She is an amazingly confident lady, with answers to the point. She was a little disappointed because of the lack of visuals in the prototype, but then again she understood the concept of a prototype. The test took about 20 mins and was easy going with no troubles. I think she enjoyed the test too and even showed me after the test the apps she uses to manage her finances, and told me what she likes the most about them. Although through the test I felt sometimes that she avoided eye contact and she was looking to the ceiling.
Participant no 2: Johann
He was the kind of a guy who looked into the fine details, which was really helpful but the test took more than 35 mins. I always asked follow-up questions, because I wanted to use the opportunity as best as possible, but I forgot about the time. I think he enjoyed the test as much as I did. He was using his hand the whole time while telling his opinion, and the thing that bothered him the most was that not all the buttons were working in the prototype, but again he understands the concept of the prototype.
Participant no 3: Zan
He is the oldest of all the participants, He is 39 and he even mentioned many times that a certain function or placement could be confusing for older users. The test went smoothly, but he was silent many times, although I mentioned in the introduction and afterward in the test to think loud and to speak his mind. I tried to ask as many follow up questions as possible and the test ended with no problem at all.
Participant no 4: Iva
She used her mobile phone to test the prototype, and this made it difficult for her to see the whole screen. She started to zoom in the screens so that she would be able to read. Other than this the test went well and she was able to give me great insights.
Participant no 5: Sonja
She is the youngest participant, she is 22. She is not used to the online payment applications but uses her online banking app often. That’s why she felt surprised a little with the simplicity of the send money process. I tried to ask as many follow up questions as possible, but most of her comments and answers were complimenting the prototype. She had also difficulty in reading some of the texts on the screens, and she was using her laptop too.
Participant no 6: Dominic
He is Revolut user, and that made him think while doing the tasks in the same way he uses Revolut. He has some problems with his internet connection, so it took us some time to be able to share the screen.
​
Conclusion
The whole process was so rewarding, and I think I was able through the tests to get some great insights. Using the tablet in the test of a web responsive app design was not the best decision as I noticed that some didn’t notice the navigation bar. Nobody refused the recording, and now I have some valuable ones.
I then analyzed and sorted the results in an affinity map.
Then put all the findings in a rainbow spread sheet. click here to see more details.
I then prepared a usability test report with the following findings & recommendations:
​
-
Issue 1: Misunderstanding for the purpose of some of the fields on the creating new saving plan screen. Severity of this problem is high as the user will not be able to use the feature in the way meant.
-
Suggestion: Reformulating the names of the fields to reflect the purpose more clearly and applying hints wherever is needed.
-
Evidence: 2 users misunderstood the purpose behind the field (Name), and thought about entering their name instead. 2 other users didn’t understand the fields (Save from) and (Save to).
-
Issue 2: The field (Kind of plan) on the creating new saving plan screen has no purpose behind it and most of the users don’t understand it. Severity of the problem is high as the users feel misled.
-
Suggestion: Removing this field totally from the form as long as it doesn’t serve any purpose.
-
Evidence: 4 users didn’t understand the meaning or the purpose behind this field.
-
Issue 3: The (+) button for adding a contact on the send money screen has no description, which can lead to user’s confusion. Severity of the problem is high as the confusion may lead users to abandon the task.
-
Suggestion: Add a description for the button and change its position and shape.
-
Evidence: 3 users were confused and thought about using other fields or buttons instead of the (+) button.
-
Issue 4: There is no direct link from the new saving plan page to the homepage. Severity of the problem is medium as the logo on the top left of the page should always lead to the homepage.
-
Suggestion: Add a direct link to the homepage in the form of a familiar icon (home shape) on this page.
-
Evidence: 2 users couldn’t return to the homepage from the new saving plan page.
-
-
Issue 5: The help option on the footer is not easy for the users to find. Severity of the problem is medium as an icon is accompanied with (help).
-
Suggestion: Change the position of the help option from the footer to the navigation bar.
-
Evidence: 2 users couldn’t find the help option on the homepage.
​
Conclusion
The mentioned errors should be fixed as suggested to avoid the confusion of the users and make sure of the ease of use of the app and its features.
18
A/B testing
I also then conducted an A/B testing for the intro screens. I used Usabilityhub to conduct the test, and the screens I tested were as following:
&
VS
VS
& the results were as following:
19
Applying visual design principles
I started then to apply some of the following visual principles on some of the mobile design screens:
-
Principle of hierarchy
-
Principle of unity
-
Principle of good form
-
Principle of emphasis
-
Principle of proportion
-
Law of good continuation
20
Applying the grid
I then started to apply a 4 columns grid for mobile & 12 columns grid for desktop.
21
Collecting feedbacks from collegues
I then shared the design with my collegues to collect as much feedbacks as possible:
22
Designing for accessibility
I then started to find issues to design for accessibility:
​
-
The borders of the fields had a very light color (grey), which could be a problem for users with visual impairment in distinguishing the fields. Then changed to have a light blue for selected and dark blue for unselected fields. The same improvement took place for sign in screen.
-
Due to the many fields on this form and thou the cognitive load I decided to make the fields under their titles that the user will not get confused in which field he should be filling.
23
Redesign of Penguin PlutoPay & mid fidelity wireframes
As it may be clear that in the above-shown wireframes I didn’t see much in the UI field. And as I practiced more, I was convinced I had to re-design the app. The main aim was to contain the app in a modern dashboard, and not to stick to the traditional navigation anymore. I chose the fonts: Poppins mainly for headers, Montserrat mainly for the body, and Lato for the CTA primary and secondary. These main fonts for the app in different styles as shown in the below figure:​
And the following is a complete catalog of all the wireframes:
Onboarding
Sign up
Sign up confirmation
Sign in
Sign in confirmation
Homepage
Activities
Confirm changes
Banking navigation
Add new contact
Search result
Notifications on
Send money
Confirm sending money
Transaction confirmation
​
Budgeting navigation
Create new saving plan step 2
Plan details
Saving plans
Create new saving plan step 1
Create new saving plan step 3
New plan confirmation
New plan
24
Color palettes & high fidelity wireframes
The color palettes and gradients used for the background are as follows:
And the following is a complete catalog of all the wireframes:
Onboarding
Sign up
Sign up confirmation
Sign in
Sign in confirmation
Homepage
Activities
Confirm changes
Banking navigation
Add new contact
Search result
Notifications on
Send money
Confirm sending money
Transaction confirmation
​
Budgeting navigation
Create new saving plan step 2
Plan details
Saving plans
Create new saving plan step 1
Create new saving plan step 3
New plan confirmation
New plan
Conclusion
Penguin PlutoPay is considered my first experience with an end-to-end design process from a UX design perspective. Through the whole process I learned numberful skills like:
-
To research the market, analyze the competition and create SWOT profiles.
-
To make a user research both quantitative & qualitative, using both surveys & user interviews.
-
To prepare for surveys and user interviews by creating plans and scripts.
-
To analyze the findings of the user research and affinity mapping on a whiteboard or digitally.
-
To create user personas, user journeys & user flows.
-
To sketch low fidelity wireframes.
-
rapid prototyping.
-
To create mid & low fidelity wireframes using AdobeXD & Balsamiq.
-
To plan for & conduct usability tests.
-
To analyze the findings for usability tests.
-
To apply visual design principles & the grid.
-
To iterate the design constantly and create final mockups.
I'm looking forward to see Penguin PlutoPay in the app stores, as the final steps would be:
-
To finish the MVP for the app.
-
Testing the MVP with users.
-
Iteration of the MVP accordingly.
-
Creating a brand & marketing strategy.
Thanks a lot for your interest, and I'm looking forward to your feedback.
