Fintech Case Study | UX/UI

Toni Ojo
13 min readSep 22, 2020

--

What is Fintech?

Fintech stands for Financial Technology. It describes any business that uses technology to enhance or automate financial services through consumer-focused applications. Fintech is a rapidly growing and emerging industry, based solely online.

Over the past decade Fintech has considerably evolved. It was initially defined as technology that was applied to the back-end systems of banks and financial institutions. Now, the technology that it utilises has broadened to internet use, mobile devices, applications, software technology, block-chain, artificial intelligence or cloud services.

Financial Wellness Survey, Feb 2016

Around the end of the last decade, start-up banks began introducing tech-based financial structures to amplify their offering. These banks relied on cloud storage to accommodate increased usage of their applications (thefinanser.com). With the growing dependency on technology, many financial businesses followed suit and digitalised their core functions. Since then, investment in Fintech has increased over 13 times in the past decade from $8 billion in 2010 to over $110 billion in 2019 (forbes.com).

Challenger Banks vs Traditional Banks

Is Coronavirus the end of cash? — DP Connect

Since the financial crisis of 2008, consumer trust in traditional banks has depleted. Although face-to-face interaction can be preferable, physical banks have their disadvantages. They lack availability as they are confined to opening and closing times. It results in slow processes, unsatisfactory customer experiences and crowding. This creates an unsuitable environment, especially during the Covid-19 pandemic as overcrowding and the use of physical cash could increase contagion.

Challenger banks are the digital counterparts of physical banks. They aim to compete by specialising in areas under-served by traditional banks. Challenger banks are accessible, with a particular focus on customer satisfaction, inviting branding and promoting financial literacy. Due to their millennial target audience, Challenger Banks are influenced by social media in both their user interface and experience. Features such as real-time notification pop-ups, insights and analytics, emojis, profile pictures, customisation and more. Their optimised in-app processes appeal well to this generation who enjoy instant gratification. They often offer helpful blogs and resources and use their social media accounts to really engage with their user base.

Project Outline

Brief

Design a banking and social media product/experience purchasing platform. It is a boutique physical and digital brand backed by a large established finance and banking company.

Deliverables

  • 3 pages: Dashboard/home screen and 2 other pages of your choosing
  • Mobile app 375 x Auto
  • A written case study explaining the processes and outcome

Problem

The traditional banking process is often tedious and frustrating. In an increasingly tech-savvy generation, we need to change the way that young people view finance. By blending social media and banking functions, I aim to create an enjoyable user-centred experience that encourages Gen-Z and Millennials to improve their financial literacy. The availability of a go-to digital space for money and life experiences will stimulate shareability and continued access.

Hypotheses

  1. Implementing gamification techniques will increase screen-time and engagement

2. Introducing common social media UI features to core banking functions will increase the average use of the function

3. Familiar information architecture will reduce the time spent searching for a feature (Jakob’s Law)

Design Approach

Double Diamond Model 2019 | Design Council

My approach as a UX Researcher and UX/UI Designer will be through the Double Diamond model.

  1. Discover — understanding the user and the brand through market research and user research. This will eradicate any assumptions and identify the real problems facing the users and the goals of the business.
  2. Define — This is where the collected insights go through refinement and selection. Potential solutions are derived from critical and analytical thinking and chosen to be developed.
  3. Develop — Solutions are generated through ideation techniques. They are then prototyped from low to high fidelity wireframes, iterated and further developed.
  4. Deliver — This prototype is fully realised and launched to the target audience for user testing. Followed by reflection on how well the service/product fulfilled the users’ needs.

Research

Business Research

Competitor analysis enables a business to know how they weigh up compared to similar products and services in the industry. From this we can learn from their mistakes and identify the reasons behind their success, identify gaps in the market and our USP, minimise risks and source evidence for design strategies.

Direct Competitors: Revolut, Monzo and Starling

I referred to the Google Play Store for common complaints to understand users’ frustrations with these apps. Based off of these insights I can look at ways to reduce these issues within my own design. Across the board, a number of users complained about the inadequate Help function when they ran into difficulty on the app. Either the navigation of the app made it hard to find the customer service feature or when the feature was located, the process was long-winded or used an impersonal automated service. This establishes the importance of helping a user along in their journey within an app. As some may find finance and banking to be complex, a banking and social media app may benefit from implementing a more personalised customer service where users are able to talk to a remote employee in real time. There would be less chance of frustration and the user will feel more assured speaking about their difficulties with another person.

One feature that stood out to me was the ability to customise your ‘Savings Pot’ with an image in the Monzo app. Using a visual reminder of what you’re saving for is particularly motivating and will likely cause the user to reach their goal quicker than they would without the image. Customisation makes saving — which is often seen as mundane — appear to be more personal and an enjoyable experience.

Screenshot from the Monzo app

Indirect Competitors: Instagram, Twitter and Snapchat

Social media apps are often seen as platforms for consumption. However within these three apps, what stood out to me the most was the different ways that users could upload their own content aside from consuming content. With the option of stories, posts, Reels and IGTV on Instagram alone, users are given the opportunity to choose how they display themselves, their lives and their interactions for others to see. Offering a range of ways to produce content within a banking app will appeal to a wider range of users, increase engagement and increase how much content is shared.

This research method has emphasised the importance of accessibility and logical navigation within an app in order to make the user flow and general user experience as fluent as possible. The aim is to make the app fairly intuitive in design and I believe that this will be possible by implementing Jakob’s Law. By using familiar patterns of social media UI, less time will be wasted on searching for different functions.

User Research

User Research enables a business to understand the problems and needs of their target market, directly from them. The quantitative research collected can be used to prove hypotheses. The qualitative research will be collected from dialogue-provoking questions to empathise with the users and understand the user flow.

Red route Analysis — In a group ideation session, we created a list of core features for a banking app and a list of optional features.

Software: Invision

I created a Red Route Analysis from both lists using five features from each list. I chose these 10 features in bold below because I believe that they reflect the most-used and preferred features of Millennials and Gen-Z, based on the feedback from the survey that I conducted. I chose to conduct a Red Route Analysis to highlight the critical tasks within the app so that I can optimize them and to prevent my own previous assumptions about key tasks from affecting the hierarchy of tasks within the app.

The Invision software was used for this ideation session. Invision is “a digital product design platform used to make the world’s best customer experiences” (www.invisionapp.com). It is particularly useful at the moment as a form of remote collaborative working, since Covid-19 has prevented in-person collaboration.

All Core Features listed: Transaction history, amount in account (check balance), pending balance, pending transactions, sign out feature, money transfers, help, spending, direct debit, payments, digital receipts, current account, savings account, sharing account details to others, security and fraud alert, lost or stolen card, manage overdraft, savings, accounts overview, add payee details, welcome message and walk-through.

Red Route Analysis — Core Features

All Optional Features listed: Stories, invite friends, news feed with latest updates and changes to your account plus product services, share payment location with friend, gamification of spending through a leaderboard or scoreboard to track progress against peers, save with friends tells you who’s paid what and when, international advice destination financial tips, ways to save money when booking a flight, collect data from spending and share with friends via a yearly overview like Spotify, monthly savings challenges, holiday group share, upload receipt feature, finance resources eg blogs and videos, profile customisation, post your saving achievements in social media apps, groupchat for holiday planning and paying, ability to split bills with friends, reward schemes using badges and real life rewards, ATM locater, turn share purchase on and off, private chat with friends, Instagram stories option to annotate transactions.

Red Route Analysis — Optional Features

This research exercise revealed that of all features both core and optional, savings methods and tools should be prioritised as they are one of the most used and valued features. This contradicts my previous assumption that features related to spending would be utilised the most. From these insights I believe that the target market would also benefit from customisation tools that would encourage saving, as mentioned in the competitor analysis. For example a user’s customisable avatar could grow as savings increase.

Survey — I conducted a survey with 11 questions to understand Gen Z and Millennial’s spending habits and how they feel about their banking app. By asking both open and closed questions I was able to collect qualitative and quantitative data. These can be used in conjunction to support or disprove my hypotheses and to help me empathise with the users’ problems which will directly inform my design solutions.

Questions:

  1. What year were you born in? — I wanted to ascertain the demographic and the generation that each participant belonged to so that I could identify the target market of the app.
  2. Which bank do you use? — I asked this question to see which banks are most popular among the demographic.
  3. Do you use a banking app? — although challenger banks are popular with Gen Z and Millennials, it is important to recognise their use of traditional bank products too.
  4. How often do you use the app? — as one of my hypotheses focuses on screen-time and engagement, I wanted to see how often each participant engages with their current app.
  5. Which three functions or features do you use most in the app? — this provides an insight into which features that the user prioritises and also reveals which features they neglect.
  6. Is there anything that you dislike about the app? — to understand the user pain points, Where these apps lack, my design can excel.
  7. What features do you think the app should add with the next update? — with this question I allowed each participant to specify where they think the app could improve, based on their experience using it.
  8. Do you ask for your friend’s opinion before making a big purchase? Why? — I wanted to determine how influential friends are on the participants’ purchases or if purchases are more of an individual choice.
  9. Do friends, family or influencers have the most impact on your spending habits? — as young people are generally influenced by their peers, I wanted to see if that trend was maintained in finances too.
  10. During or after a shopping trip, have you ever uploaded photos of your purchases/bags to social media? — social media encourages over-sharing and there is a constant pressure to be materialistic. I wanted to see if the participants have given in to this way of thinking.
  11. Last year did you spend more money on travel, food or events? — I specified last year because this year the Covid-19 pandemic has changed people’s usual spending habits. Also I wanted to know which industry money is spent on the most, to understand the participants’ lifestyle choices.
Survey Responses — Google Forms

I learnt that the most important features are transferring money, saving money and viewing transactions. Most participants wanted to see the addition of a saving and budgeting tool, showing they would like to be more conscious about how they divide their money. Although 60% of participants do not ask their friend’s opinion before making big purchases, their family are the biggest influencer of their spending habits. Most money last year was spent on food and travel, so it may be ideal to provide information or tools on how to save in these areas.

User Persona — I created this persona to identify the personality, character and pain points of a potential target user. This helps me to understand who I’m designing for and accommodate their needs and motivations while serving the needs of Millennials and Gen Z as a whole.

Ideation

Mind-mapping — I used a mind-map to generate some ideas on how social media can influence banking. I concentrated on Instagram, Twitter and Snapchat because they are popular apps among the young demographic. Mind-maps are a simple way of coming up with ideas and identifying links between them. From this the best ideas can be developed and implemented.

In summary, I gathered that these features can be useful additions to the app by making it more enjoyable. However these features should not overwhelm the core functions of the app, but solely be used to enhance them. I found this technique useful as it signified how entertainment can be repurposed to educate and animate otherwise boring tasks.

Research Summary

I have collated all of the insights that I have gathered into the following bullet points. These will inform my design solutions within the banking app.

  • Customer service offerings should be easy to locate, succinct and straightforward in design
  • Personalisation and customisation creates a more enjoyable digital experience
  • Users should be given the ability to choose content based on their needs and preferences
  • Familiar patterns will reduce user onboarding time
  • Tools that encourage saving money should be prioritised for the target market
  • Millennials and Gen-Z are heavily influenced by those closest to them
  • The opportunity to flaunt materialistically should only be provided if it is accompanied by healthy controls and limits to avoid unnecessary pressure
  • The majority of purchases are related to food and dining
  • Adopting social media features in banking will make finance also seem entertaining by association

Wireframes

I have created three wireframes of the app’s homescreen, from low to mid to high. I created these using Invision rather than drawing freehand because Invision provided me with useful templates to structure the screen and make the process faster. My development from a low to a high fidelity wireframe allows me to refine the design and information architecture.

My final wireframes are of the Homescreen, the Savings Leaderboard and the Learning Hub, each created using Figma.

UI Phase

I used design fundamentals and UX laws to bring order to the design of each screen. The 60:30:10 rule is introduced with approximately 60% dark blue, 30% light blue and 10% white which is primarily used as an accent colour. Since finance and banking can sometimes be overwhelming, I chose to mainly use varying shades of blue due to its calming connotations. I used Jakob’s law by using icons that recognisable from popular social media apps such as the heart shaped like button, the bell for notifications and the profile icon. In addition, I used a similar navigation bar to Instagram so that it would be fairly intuitive to use. Hick’s Law is also used in the navigation bar as I narrowed down the features to only four options, meaning the time it takes for the user to make a decision on what they would like to explore, is reduced. The Law of Common Region is also used in the receipts which are grouped together beneath the card.

Style guide

Conclusion

I think that my research went particularly well. With each technique I learnt a new insight about the target audience that would help me provide solutions to their frustrations through my design. It was also interesting to see where my assumptions were contradicted by the insights I found and this emphasised the importance of accurate and unbiased research to me.

My time management did not go as well as I’d hoped or according to plan. I assigned too much time to the initial stages — introduction and research — which meant that my time to produce the final outcome was quite limited and I was unable to reflect on my hypotheses. As a result I had to simplify some of my ideas to complete the case study in time for the deadline. Next time I will make more use of time management tools such as the Pomodoro Timer and Trello. I look forward to returning to this case study to develop it further as it could also be improved by including interactive prototypes. It would make the transitions within the app more obvious, allow potential stakeholders to understand the navigation and user flow and physically engage with the product.

--

--

Toni Ojo
Toni Ojo

Written by Toni Ojo

Designer + Researcher 👾🧩

Responses (1)