https://embeds.beehiiv.com/347938a9-c21b-4b92-a85c-da517db028cf
top of page
header smartsy copy3.jpg
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:

Product Designer
User Research, Interaction, Visual design, Prototyping & Testing

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.

mockup-iphone-thin.png
mockup-iphone-thin-1.png
mockup-iphone-thin-2.png
mockup-iphone-thin-1.png
Rectangle 707.png
Group 69.png

Style Guide

Persona

Empathy Map

Wireframes

HiFi Mockups

Journey Map

Prototype

Frame 59.jpg

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:

  1. Tech-savvy individuals: Users who are comfortable with using technology and mobile apps are likely to be early adopters of digital wallet apps.

  2. Young adults: Young adults who are more likely to use mobile devices for banking and transactions may be a significant demographic for the app.

  3. Small business owners: Small business owners who need to manage finances and make transactions on the go may find the app useful.

  4. International travellers: Users who frequently travel internationally may appreciate the convenience of using a digital wallet to make payments in different currencies.

  5. 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

Frame 60.png

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. 

  • 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. 

  • 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.

The results from the survey:

Smartsy.png

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

2124054.jpg

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. 

Meet Sarah and Shane.

User Personas 2 final.png
User Personas Mark.png

EMPATHY MAP

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.

Empathy Map Sarah.png
Empathy Map Mark.png

JOURNEY MAP

With a customer journey map, I can empathize with the user's emotions, thoughts, and actions at each touchpoint in the app. 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.

User Journey Map SARAH.png
User Journey Map MARK.png

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

  1. Multi-Currency Accounts: — Allows users to hold and manage multiple currencies in one account.

  2. Schedule Payments: — Users can schedule and automate their recurring payments.

  3. 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.

IA.png

PAPER WIREFRAMES

Because I'm still in the early stage of the project and because it is cost-effective, I have started creating paper wireframes. My primary focus is on gathering input from users, conducting usability testing, and the flow of design.

If I were to work in a company and stakeholders require a tangible representation of the design early on to provide meaningful feedback and make informed decisions, high-fidelity designs may be necessary.

20220327_163818.png

( 1. Home Screen, 2. Selecting the account From and To for a transfer, 3. Selecting from Payees)

20220327_163833.png
20220327_164018.png

( 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

Lofi Wireframes – 2.png

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, see the flow of the design, saving time and resources in the long run.

lofi proto.png

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

mockup-iphone-thin.png

HOME PAGE

Refining the Design 1 – 2.png

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

Refining the Design 2 – 1.png

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

Refining the Design 1 – 1.png

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

Artboard – 3.png

1. Personal Budget, 2. Home Screen, 3. Creating a new budget

Artboard – 6.png

1. Transfer Page, 2. Welcome Page, 3. Settings Page

Artboard – 4.png

1. Transaction Page, 2. Schedule Page, 3. Analytics Page

Artboard – 5.png

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

style guide Smartsy.png

Accessibility considerations

  1. 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.

  2. 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.

  3. 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.

  4. Keyboard navigation: The app should be designed to be navigated using a keyboard, as some users may have difficulty using a mouse or touchscreen.

  5. Ensure that form elements include clearly associated labels.

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:

  1. Conduct user testing with a diverse group of users to identify pain points and areas for improvement in the app's design and functionality.

  2. 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.

  3. 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.

  4. Continue to innovate and improve the app's design and functionality based on user feedback and market trends.

  5. 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

logo ok.png

A responsive website for pet adoption

logo.png

An app to help communities in extreme heat.

zeet logo ok2.png

A booking app for a restaurant

bottom of page