top of page
Case Study: Paylo App
ROLE - UX Designer, DURATION - 6 months
Project Overview
SUMMARY
Paylo is an online payment system that allows its user to manage all their bank accounts from a single platform.
Paylo allows users to move & monitor their money, view statistics & budget their spendings on certain categories.
Paylo also provides users with a separate Paylo account where user can put money aside into money-saving pots.
CHALLENGES
The volume of online shopping has increased with the pandemic in 2020.
Online shopping often requires typing the card details and the user has multiple credit/debit cards to choose from which is time-consuming and discouraging.
Users cannot put their money aside without having to open a separate saving bank account.
.jpg)
.jpg)
Problem Statement
Users cannot manage all their bank accounts and transactions in a single online banking platform.
User Needs
Users need a single platform for shopping and managing their money online, making fast purchases, splitting up costs.
User Scenarios
Based on user personas, the mental models were created for the purpose of reflecting users’ mental journey when achieving their goals.
The mental models of Paylo App are reflecting the shopping experience and the experience of users managing their money.
After determining user goals and mental models, I could finally start creating solutions.
Competitive Analysis
Paylo Site Map
.jpg)
User Flow 1 - Send Money to a Friend
User Flow 1
Sending money to a friend feature relates to the problem by the user being able to send money from any linked bank account to someone from a single platform.
Site Map of Paylo was designed based on the User Needs & Card Sorting results.
After Low-Fidelity wireframes sketching and transferring them into Figma as Mid-Fidelity Wireframes, I have developed a High-Fidelity grey scale prototype that was focused mainly on functionality rather than UI.
User Flow 2 - Setting-Up Spending Budget
User Flow 2
Set-Up a Spending Budget ensures the user can control their spending when the spending of Paylo Accounts is automatically (or by the user) grouped into different categories.
I had to decide where to implement the spending limit (budget) feature. I have decided that the user will be able to set up the budget for the Individual Spending Category of Paylo as it is up to the user, which spending they want to control compared to individual debit cards.
User Flow 3 - Add Money to a Paylo Account Balance
User Flow 3
Add Money to a Paylo Account Balance is important for the users as it enables them to set up spending limits and put money aside into the different money-saving pots created by the users such as Holidays, Car Deposit etc. This way the user can also have a separate Paylo debit card if they choose to have one.
Usability Test Solutions - Home Screen
Observation
Users don't understand bottom navigation icons.
Solution
The bottom navigation will have simple labels for users to better understand the meaning behind these icons.
Observation
Users don't understand the meaning of the Snowflake icon.
Solution
Snowflake icon was replaced for a Lock icon representing topics of card security.
Observation
The button "Spending Stats and Budgets" is overwhelming and confusing.
Solution
This button was replaced for "Budgets" as the main goal of this feature. A separate “Statistics” icon was created and placed next to the card.
Observation
User can’t find Linked Cards.
Solution
Linked Cards were replaced for Saving Pots at the bottom of home Screen
Preference Tests
During preference tests, participants determined which screens they prefer and why.
There was one element tested at the time, in this case, telephone number input and onboarding image.
It was found that participants have a preference for a login screen that indicate country code via “flag emoji” and simple onboarding images of the features for each screen.
Gestalt Principles applied to Paylo
LAW OF CONTINUATION
The current screen has a marked location (the green dot) and to indicate the continuity of the onboarding screens, grey dots follow as the user will progress in onboarding.
LAW OF PROXIMITY
Features of the Home Screen are close together to indicate they are all part of the same feature.
Onboarding
Login Screen
Principles of Design applied to Paylo
UNITY
Purple = Paylo (Login button; Login via Google)
Green = "new" or "start" (Sign-Up button)
PROPORTION
The screen is centred in the middle and shows login details and different buttons to proceed to the Paylo Home Screen.
SYMMETRICAL BALANCE
All the buttons have the same size = the same level of hierarchy
EMPHASIS
Paylo is the most highlighted element in purple to introduce the name of the app and also to indicate that this screen follows is followed by the application itself.
Paylo Desktop Version
Overview
The desktop version of Paylo is extended by a Paylo Spending Statistics Graph with a feature to See All statistics and a Set-Up Budget feature. That way the user can immediately see their spendings and whether they want to set up a budget for certain spending categories.
Before users see their linked cards, they can also put money aside and organise the money into different Money Saving Pots. Money put aside won’t be included in their Current Balance.
New Iteration Based on Feedback
LOGIN SCREEN
HOME SCREEN
TRANSFERS SCREEN
TRANSFER SCREEN
AMOUNT SCREEN
CONFIRMATION SCREEN
-
Buttons were resized to be smaller
-
button contrast changed.
-
Navigation icons that are not selected, reduced size
-
Some icons were made smaller and added into a frame.
-
The cards were changed to plain white with an outline.
-
The button's colours and contrast were also changed.
-
Lloyds bank logo was made bigger
-
The recipient was put in bold
-
The margins were corrected
-
Shadow "-" and "+" removed and the colour changed so it's different from "+" FAB
-
The recipient's name was added.
-
More buttons were added with better contrast
-
The confirmation emoji was changed for an image
-
The wording 24 hours was corrected
Iteration Journey of Home Screen
Mid-Fidelity Prototype
High-Fidelity Prototype
Hight-Fidelity Prototype after User Testing
Prototype after Peer Feedback and Accessibility Check
HOME SCREEN
This screen developed rapidly since the first low-fidelity draft. After getting a great amount of feedback from my test participants during usability testing. I have revisited of the core purpose of the Paylo app, which is linking accounts together. I have replaced the original layout containing "My Pots" by "My linked cards", I have also adjusted the contrast of the colours so the content is more readable and pleasant to the eye.
Iteration Journey of Login Screen
Mid-Fidelity Prototype
High-Fidelity Prototype
Hight-Fidelity Prototype after User Testing
Prototype after Peer Feedback and Accessibility Check
LOGIN SCREEN
Login Screen was a challenge of finding the right sizes, colours and format of the buttons. After Preference tests and learning about Material Design Guidelines, I made the buttons smaller, and rounder, and followed the component guidelines for buttons (filled and outlined). My peers recommended I make the buttons slightly smaller and to increase the accessibility, I have made the typography larger and labelled the text fields.
Iteration Journey of Transfer Screen
Mid-Fidelity Prototype
High-Fidelity Prototype
Hight-Fidelity Prototype after User Testing
Prototype after Peer Feedback and Accessibility Check
TRANSFER SCREEN
After the Usability Tests proved that the screen was well structured, I added colours. Hierarchy however was not apparent to my peers, so I decided to add a lighter card background with distinguished button colours that will help users with orientation on this screen.
User Interface of Paylo App
Overview
The user interface of Paylo was carefully designed to look unified and consistent. I have designed and followed the Pattern Library and Style Guide of Paylo that focused on:
-
Language and Tone
-
Imagery
-
Iconography
-
Colour palette
-
Typography
-
UI Elements and Styles
-
and other Dos & Don'ts
This way, I have enabled the Paylo App Design to be a reusable solution that is easily transferred and continued.
Conclusions & Learnings
Even though Paylo App was a part of my coursework, I have taken my role in this project as seriously as any UX designer in a real project would.
Paylo was my first big project, in which I learned how to manage my time, especially giving me a better understanding of how much time to spend on each section of the User Centred Design Process.
This will save me time in future projects, and allow me to spend more time on usability & preference tests, being able to test a higher volume of possible solutions to the problem and make sure I choose the most intuitive and user-oriented one.
bottom of page