CONCEPT PROJECT: Smartly
DURATION: December 2021 - March 2022
PROJECT OVERVIEW
Smartsy is a digital bank that will simplify the way people will manage all aspects of their personal and business finances in one place.
My role:
I led the Product Design - User Experience (UX) and User Interface (UI) - of this project. I also receive constructive feedback from other designers in order to improve and get other perspectives about what I was designing.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The problem:
Users have to download too many apps to perform different tasks or transactions of their personal or business activities.
The product goal:
To create a unified platform/app that reduces the need for users to download multiple apps by consolidating various tasks and transactions into a single, convenient solution.
Style Guide
Persona
Empathy Map
Wireframes
HiFi Mockups
Journey Map
Prototype
Competitive Analysis
Idea Brainstorming
Usability Testing
Feature Analysis
Survey
Sketch
Information Architecture
Feedback Incorporation
Continous Iteration
Interview
Lo-Fi Wireframes
Competitive Analysis
Empathise
First I started with some initial questions and assumptions that I had. Then I conducted a competitive and feature analysis of the competition that is in the market. Finally, I did user research to gain insight into their motivation and pain points.
Initial questions.
I started to ask myself a few questions regarding the product and its users. How much do I know about the product and the user experience that it intends to provide?
Whom do I see as the "typical" users of your product? What goals are
users trying to achieve?
How do they currently do it? What parts do they love or hate? What difficulties do they experience along the way?
My initial assumptions:
-
Tech-savvy individuals: Users who are comfortable with using technology and mobile apps are likely to be early adopters of digital wallet apps.
-
Young adults: Young adults who are more likely to use mobile devices for banking and transactions may be a significant demographic for the app.
-
Small business owners: Small business owners who need to manage finances and make transactions on the go may find the app useful.
-
International travellers: Users who frequently travel internationally may appreciate the convenience of using a digital wallet to make payments in different currencies.
-
Low-income individuals: Users who do not have access to traditional banking services or have limited financial resources may find the app beneficial.
COMPETITIVE ANALYSIS
I did a competitive analysis to understand what the prominent bank applications were already doing and what user goals they were not reaching
Direct:
Strengths:
-
Multi-currency accounts with no hidden fees
-
Contactless payments and withdrawals
-
Budgeting tools and spending analytics
-
Crypto trading
-
Virtual cards and disposable cards for added security
Weaknesses:
-
Limited physical presence and customer support
-
High fees for some features and services
-
Limited savings options
Revolut:
Strengths:
-
Designed for small businesses
-
A free business account with no monthly fees
-
Quick and easy account set-up
-
In-app invoicing and accounting features
-
Integration with popular accounting software
Weaknesses:
-
Limited to small businesses only
-
No personal account options
-
Limited features for larger businesses
Mettle:
Strengths:
-
Free bank account with no maintenance fees
-
Easy-to-use mobile app with real-time banking notifications
-
In-app budgeting and spending analytics
-
Savings accounts and investment options
-
Contactless payments with Google Pay and Apple Pay
Weaknesses:
-
Limited physical presence and customer support
-
Limited customer service hours
-
Limited availability in certain countries
N26:
Strengths:
-
Instant notifications and spending insights
-
No fees for overseas spending and ATM withdrawals
-
Customizable budgeting tools and savings pots
-
Pots to save money for specific goals
-
Contactless payments with Google Pay and Apple Pay
Weaknesses:
-
Limited physical presence and customer support
-
Limited savings options
-
No interest on account balances
Monzo:
Indirect:
Strengths:
-
Commission-free stock and ETF trading
-
Ability to buy fractional shares
-
Real-time market data and news
-
In-app investment tools and research
-
Integration with other financial services
Weaknesses:
-
Limited investment options beyond stocks and ETFs
-
Limited customer service options
-
Limited savings and banking features
Strengths:
-
Secure online payments and money transfers
-
Ability to link multiple bank accounts and cards
-
PayPal Credit for financing purchases
-
Buyer and seller protection
-
Integration with e-commerce platforms and online marketplaces
Weaknesses:
-
High fees for international transactions
-
Limited physical presence and customer support
-
Limited savings and investment options
Robinhood:
Paypal:
FEATURE ANALYSIS
Based on the feature analysis, I saw the opportunity in these 3 features, but I will need to test my assumption after I will do a user research.
-
Multi-Currency Accounts: This feature is offered by Revolut and N26, and can be a major draw for customers who travel frequently or have international financial needs. Offering this feature can give my app a competitive edge over other digital banking apps that don't have it.
-
Cryptocurrency Trading: This is a relatively new feature offered by Revolut, PayPal, and Robinhood, and could be a popular feature for customers who are interested in investing in cryptocurrencies. I'm thinking that if I add this feature in a user-friendly and secure way, it could attract a lot of customers.
-
Disposable Virtual Cards: This feature is offered by Revolut and can be a big draw for customers who are concerned about security and privacy. This feature allows users to create virtual cards for one-time use, which helps prevent fraud and unauthorized transactions.
In terms of the onboarding model, I was considering the approach taken by Revolut, Monzo, and N26, which offer a streamlined onboarding process that can be completed entirely through the app.
From the competitive analysis, the main competitor to stand out for me was Revolut.
USER RESEARCH
I started my user research by first looking into 3rd party surveys to understand more about users' needs and problems.
That lead me to Playstore and AppStore where I have read the reviews of people complaining about the pain points of their current app.
Second, I conducted my own research. I went for the survey as quantitative research and then with a qualitative research approach by conducting one-on-one interviews with 5 people to understand users' banking behaviours, motivations, work/life balance, what apps are they currently using and what they like and don't like about the app.
During the interviews, I was focused on their problems, and less on the solutions.
-
Do you currently use a digital banking app?
-
Which digital banking app(s) do you currently use? (select all that apply)
-
How satisfied are you with the digital banking app(s) you use?
-
How often do you use your digital banking app?
-
Which of the following features do you find most important in a digital banking app? (select up to three)
-
On a scale of 1-5, with 1 being very difficult and 5 being very easy, how easy is it to use the digital banking app(s) you currently use?
-
What features do you think are missing from your current digital banking app(s)?
-
Would you consider switching to a new digital banking app if it had better features?
-
How likely are you to recommend your current digital banking app(s) to a friend or family member?
-
Do you have any additional comments or suggestions for improving digital banking apps?
-
Out of the survey, I found out that:
Then I used qualitative research, by conducting a one-on-one interview with 5 people to understand their behaviour and motivations, identify their pain points, validate my assumptions, and uncover opportunities for innovation.
These were the main pain points the users had:
-
Users find that being unable to see the face of the person they want to pay in a picture is very frustrating
-
Their banking system is not intuitive and easy to use
-
Users find it hard with their current app to manage their sales, clients or expenses
-
They want to be able to pay their suppliers in multiple currencies for overseas transactions
-
Some of the apps don't have a simple and straightforward onboarding process
DEFINE
In the second step of the design process, I will be creating a persona, an empathy map, a customer journey map, and finally coming up with a problem statement.
USER PERSONAS
After conducting thorough research, I've come to realize that creating a persona is a vital step in the design process. I created 2 Personas because it helps to transform the raw data collected during research into a relatable and actionable tool that guides the design process and I can gain a better understanding of my user's needs, goals, and pain points. This understanding will enable me to design a product that meets their expectations and provides an excellent user experience. Personas also serve as a communication tool if I work with a team to align our design decisions with the user's needs. It's important to remember that a well-developed persona is not a one-time exercise, but rather an ongoing process that helps me stay connected to my users' evolving needs.
Meet Sarah and Shane.
EMPATHY MAP
A typical day in the life of Sarah and Mark, their values, thoughts, and actions can provide valuable insights into their experience when using a banking app. Creating an empathy map allows me to understand their emotions, behaviors, and needs, and helps me develop a product that is intuitive, user-friendly, and meets their expectations. By gaining a deeper understanding of my users, I can design a banking app that caters to their unique needs, ultimately improving their user experience and increasing their satisfaction with the product.
JOURNEY MAP
Creating a customer journey map is a crucial step in the design process for a banking app. It allows me to gain a deep understanding of how users like Sarah and Mark interact with the product, service, or brand from start to finish. By visualizing the user's journey, I can identify pain points and areas of improvement, which I can address in the design process.
With a customer journey map, I can empathize with the user's emotions, thoughts, and actions at each touchpoint in the app. This understanding enables me to create a product that not only meets their needs but also provides an outstanding user experience. If Sarah and Mark were to come across Smartsy, the customer journey map would help me identify ways to fulfil their goals while addressing their pains and creating a seamless experience for them.
Problem statement:
After the research phase, I can deduce that the users need a banking app that simplifies their financial management process, reduces the number of apps needed, and provides fast P2P payments, easy budgeting, and currency conversion.
How might we simplify and streamline the financial management process for users, reducing the frustration and inconvenience of using multiple apps for different transactions?
How might we create a comprehensive financial management solution that allows users to easily track all income and expenses from different cards and accounts in one place?
How might we develop a fast and accurate currency conversion feature that enables users to exchange currencies without worrying about exchange rates or fees?
How might we empower users to gain more control over their finances and cash flow, reducing financial stress and increasing financial stability?
IDEATE
In the most creative step of the design process, I came up with solutions and created an information architecture. Followed by sketches, mid-fidelity wireframes, usability testing, and a UI kit.
Solution
-
Multi-Currency Accounts: — Allows users to hold and manage multiple currencies in one account.
-
Schedule Payments: — Users can schedule and automate their recurring payments.
-
Budgeting: — Provides tools for users to track their spending and create budgets.
'Good to have' features like Cryptocurrency Trading, Disposable Virtual Cards I will consider if the time will allow me.
INFORMATION ARCHITECTURE
As a designer, creating an Information Architecture is a critical step in ensuring the success of my project. By organizing and structuring the content of the app in an intuitive and efficient way, I can create a user-friendly interface that meets the project's goals and objectives.
The purpose of an IA is to create a blueprint for the app's content, which ensures that the information is presented in a logical and coherent manner. By doing so, I can help users navigate the app, find what they need, and complete their tasks efficiently.
PAPER WIREFRAMES
Creating paper wireframes is a cost-effective and efficient way to explore different design solutions. As a designer, I find that sketching out ideas on paper helps me visualize and refine designs in a low-fidelity format before investing in high-fidelity prototypes.
If I were to work in a company, I could use this tool to communicate my design ideas with stakeholders, as they allow for easy collaboration, iteration and I could gather feedback early in the design process to ensure that everyone is aligned on the design direction before moving on to more detailed designs.
( 1. Home Screen, 2. Selecting the account From and To for a transfer, 3. Selecting from Payees)
( 1. Analytics and Transactions, 2. Selecting the account and the amount to transfer, 3. Cards and their settings, 4. Transactions by dates)
( 1. First contact with the app, 2. General settings, 3. Confirmation for completed transfer, 4. Profile)
DIGITAL WIREFRAMES
Home Page
Card Page
Transactions
Profile
Transfer Page
Recent payees, often 'pay mobile contact'
Confirmation Page
Different type of payments
LO-FI PROTOTYPE
Creating a lo-fi prototype is an essential step in the design process as it enables me to quickly test and iterate on my design ideas. By using a low-fidelity prototype, I can identify and resolve usability issues early on, saving time and resources in the long run.
USABILITY STUDIES
Then I created the first version and tested it to get some feedback. During the usability testing phase, a comprehensive evaluation of our app revealed several areas that required attention and improvement.
Lack of Hierarchy
Multi-Payment
The Home page looked overcrowded and hard to read all that information
Sending money to multi-payees were too tiring being back and forth for every payee
No search bar
Users wanted a search option on first page and on top of payment page
Analytics
Users wanted a quick look for analytics, not having to press the button to see the information
HOME PAGE
Before
After
Accounts
Initially I intended to add both personal and business accounts on the home screen but it look too messy and the user didn't knew where to start
Quick links
I included 6 action buttons for a quick access
Accounts
The users can switch between the accounts. They can check their current balance together with its income and expenses for that account
Quick links
I found out that the 4 most quick actions users preffered, were 'Send', 'Request', 'Top Up', and 'Schedule'
PAYMENT PAGE
Before
After
Search
I moved the search option on top of the page, instead to be tide to mobile contact only
Options
More payment options and cleaner design
Simple
No need for extra buttons, just a tap on the mobile contact, to proceed to pay
MULTI-PAYMENT
Before
After
Now we add the option to remove fast someone with one click, or if they wanted to edit they money or the reference, they were able to do that individualy
Sending money
Before, users couldn't modify the money they sent for each individual. They could only add or remove how many would be paid.
HI-FI SCREENS
1. Personal Budget, 2. Home Screen, 3. Creating a new budget
1. Transfer Page, 2. Welcome Page, 3. Settings Page
1. Transaction Page, 2. Schedule Page, 3. Analytics Page
1. Help & Support, 2. Exchange, 3. Topping up and account
HI-FI PROTOTYPE
Transfer between accounts
Schedule
payment
Multiple
payments
Request
payment
Currency
Exchange
STYLE GUIDE
Accessibility considerations
-
Screen reader compatibility: The app should be designed to be compatible with screen readers, which are assistive technology tools used by visually impaired users to navigate and interact with digital content.
-
Colour contrast: Ensure that the app uses high contrast between text and background colours to make it easier for users with visual impairments to read and navigate the app.
-
Text size and font: Allow users to customize the size and font of the text to make it easier for users with visual impairments to read the app.
-
Keyboard navigation: The app should be designed to be navigated using a keyboard, as some users may have difficulty using a mouse or touchscreen.
-
Overall, by considering accessibility considerations like these, we can ensure that the digital wallet app is inclusive and accessible for all users, regardless of their abilities or disabilities.
Key Takeaways and what I learned
I understood how important the design process was to UX but this case study taught me exactly how. I subconsciously thought of what the final design of Smartsy would be like even before I started, however, after the research and defining phase, that completely changed. Through research and analysis, I learned aspects of the learning process I wouldn’t have known otherwise. As I conducted research for Smartsy, I uncovered valuable insights about the preferences of banking customers. Prior to the research phase, I had assumed that customers knew how to budget and manage their expenses and that they were using the app just for basic features such as paying, transferring or asking for money. Through this process, I learned that assumptions can be misleading and that I shouldn’t come to a conclusion based on what I think.
Next steps
If this would be a real project I would use these steps:
-
Conduct user testing with a diverse group of users to identify pain points and areas for improvement in the app's design and functionality.
-
Use the feedback gathered from user testing to make changes to the app's design and functionality. Continue to iterate and test until the app meets the needs of users and is intuitive and easy to use.
-
Monitor the app's performance and user feedback to identify any bugs or issues that need to be addressed, and gather insights on how to further improve the app's design and functionality.
-
Continue to innovate and improve the app's design and functionality based on user feedback and market trends.
-
If time and budget permit, I would like to introduce features one at a time after thorough testing. I would explore the implementation of features such as Cryptocurrency Trading and Disposable Virtual Cards.
Other Projects
A responsive website for pet adoption
An app to help communities in extreme heat.
