mybank.
Mobile App
Short Case Study
'How can traditional banks cater their services to attract the online banking generation?'
Discover
Background
Online banking has become ever more popular over the past 10 years. We are in an age where the need to move money around with ease is ever-present; providing those who use your bank with the option to do so online has become imperative.
The need to use your landline to pay bills in the 1980s are long gone. With the touch of a button, you're able to reimburse friends, access refunds and pay off large bills with ease. The interface for these platforms boasts noticeable differences, however. Newer internet banking providers like your Monzo and Revolut, showcase modern interfaces that cater to a more dynamic generation.
This mini case study will look at how a bank like Barclays can update its UI to attract more users within the online banking generation.
Barclays
As the UK's most used bank, Barclays has consistently updated the services that they provide. Providing a service that caters to all generations has become a must for them, meaning that having features that are compatible with mobile as well as the web is a necessity.
As the nations most popular bank, it's important to stay ahead of the curve and provide a service that isn't only reliable, but innovative and accessible as well
I have used Barclays as my main bank for the past 10 years and the growth of the app's interface has had a steep incline. The UI could however always be improved. Scanning the screens, there are definitely changes I would make for the app to cater to a younger and more tech-savvy generation. I, therefore, chose 4 screens to make changes to and carried out research to strengthen my reasoning behind my design choices.
The Problem
"The app is usable but a bit stagnant. What can we play around with to change that?"
Hypothesis
For this short case study, I used colour theory, looked at aesthetic usability and information hierarchy, typography and illustration/imagery. I also looked at the apps intended target market in order to make informed decisions about a chosen persona and some design decisions.
Define
Competitor Analysis
I carried out a small competitor analysis. Monzo and Revolut are the industry leaders when it comes to innovative banking design and functionality. Both banks appeal to a younger generation due to their smooth functionality, successful marketing and modern UI. Even though both would be seen as indirect competitors, design-wise I feel that they are industry leaders and good examples of simple yet effective banking design.
Below, I have annotated some screens of Revolut and Monzo, and have broken down a few important takeaways from user research I conducted.
Interesting use of colour and linear colours creating a vivid backdrop against white boxes and dark text.
Monzo uses colourful illustrations to categorise offerings and your own menu.
Buttons are clear and drop-shadowed/utilise gradient colours.
Clear sign posts of balance with green indicating money in, and red meaning money out.
Carousel motion imagery of different cards. Information at the bottom of the screen corresponds with the card in question.
Personalized touch with imagery of the person you're transferring money to and imagery of brands you have bought from.
Revolut have a friendly interface. The screens have little detailing on the backgrounds and rounded off corners on CTA's.
Simple to use budgeting feature for the intended audience, millennials, who are earning and wanting to save in a simple way.
Fun illustrations have been used to showcase what the user has spent.
They have utilised colour well and incorporated it with otherwise mundane things such as shopping and restaurants.
Carrying out a small competitor analysis showed me that features are more readily available to the user. They don't have to physically visit the bank to request loans or move large sums of money, the ability to do so is at their fingertips. The UI is also simpler and to the point. Both apps have stripped back the information available on their pages and signposted important transactions with logos and colours, making the UI a lot more accessible for the users.
Traditionally, banking and insurance platforms utilise the colour blue. Some may even say to their detriment, as this has a homogenous effect. Revolut and Monzo have incorporated a lot more colours into their UI meaning that the first impression the user gets isn't that of a bank, but of a new app. These colours spark curiosity and are a great way to reel in the attention of Millennials.
What I did however pick up on was the frustration users had with bad customer service. Is this the price to pay for an app that is easy to use and readily available/attractive to the up and coming generation?
Persona
I then went into creating a persona. Theoretically having someone to design for made it simpler to make UI choices based on importance to the user - the competitor analysis and having insight into target markets and user bugbears made this possible.
Michael
Age: 20 - 27
Goals:
Michael wants fast and simple banking with good customer service. He wants to be able to quickly rectify possible errors with account information, make fast transfers to friends and pay bills/check his overdraft. He is a young, tech-savvy millennial with disposable income that he uses on himself and needs somewhere secure to store it.
Frustrations:
Michael has tried apps such as Natwest and Barclays but the functionality can be clunky and the UI is dated. He wants the user journey simplified and would appreciated clear sign posts and easier ways to transfer money.
Ideate
For this stage, I quickly put together some low fidelity wireframes by taking the Crazy 8's approach. I gave myself 2 minutes to draw screens for the pages I wished to re-design. Below are some of my very rough sketches that I wanted to follow up with some low-fidelity screens.
Log In
My Cards
My Balance
My Spending
Low-fidelity
For the low-fidelity wireframes, I based my choices on bugbears I'd imagine users running into.
Log In
My Cards
My Balance
My Spending
-
Making space for a graph graphic so users are able to see clearly how their spending has been over the past week or month.
-
Clear buttons for logging in and detailed areas showing how much the user has spent and on what.
-
The imagery of users cards in portrait mode. They're able to swipe across in a carousel motion meaning more can fit on the page without it seeming crowded.
Mid-fidelity
I then moved on to create some mid-fidelity wireframes. I added more detail, played with IA (Information Architecture) and the hierarchy of information on each screen.
Log In
My Cards
My Balance
My Spending
-
Adding curvature to features in order to have the UI read more friendly and inviting.
-
I wanted to play with shapes with the mid-fidelity screens. Dials and rounded off rectangles to display information in a more user-friendly way.
-
Profile icon to stay on the top right and burger bar on the top left.
-
Vital information such as balance and private cards located at the top of the screen. Text heavy information like Transactions stay at the bottom of the screen.
High-fidelity
Finally, I was able to put together my high-fidelity screens. I made sure to choose my typography and apply it to these screens, draw my own icons, illustrations and play around with linear colours that I would then manipulate with some Glassmorphism. I was happy with the structure I had chosen for most of my screens and decided to remain with the choices I had made and expand on them.
Log In
My Cards
My Balance
My Spending
Prototype
With the help of my research and looking into the fundamentals and background of banking, I was able to put together 4 screens for my banking app.
-
Log In
-
My Cards
-
My Spending
-
My Balance
I wanted to encompass the traditional colours and aesthetic of a bank such as Barclays, but also home in on the modern nature that is Monzo and Revolut.
Aesthetic-usability effect
Based on the persona I was able to create, I wanted to make an app that was not only user-friendly but looked user-friendly too. I incorporated illustrations I drew, my own icons and played with colour, Glassmorphism and linear colours in order to give the app a modern twist.
Goal-gradient effect
I wanted to also have a look at colour and not make the app completely flat. I added bubbles of gradient colours underneath the cards and within places with a lot of blank space. I also added the effect underneath the graph in order to help the user see where they are with their spending.
The closer the user gets to their spending limit, the more visible the gradient effect becomes (especially on the table effect seen on the spending page).
Miller's Law
I then looked at Miller's law and ways that I could apply it to my work. I wanted to strip away information from the page and contain it with digestible graphics. For example, the dial on the spending screen that shows how much you have roughly spent on different elements is easier to digest than a list, and more memorable.
The Zeignarnik Effect
To help drive customer retention, I took advantage of this effect. Unfinished visuals of tasks such as you not hitting your spending budgets will be remembered by users, an effect that is valued by those looking to be more conscious of their spending.
Picture Superiority Effect
I also chose to add imagery and illustrations that clearly signposts areas of spending. I felt it was important to have users remember the structure of the platform and wanted to add vivid colours to aid me in this.
Conclusion & Reflection
Within this short case study, I wanted to explore different ways in which I could incorporate modern design to a traditional banking app. I wanted to put together a design that would possibly cater to a younger,
more tech-savvy generation.
The next steps that I would like to take would be prototyping this design and testing it out on millennials. I would want to get unbiased opinions on the design choices I have made and make critical decisions on revamping possible problem areas. I would also want to bulk out my research and conduct interviews and surveys to solidify my findings from my competitor analysis.
All in all, the business research proved very useful when nailing down important features for the screens I chose to design. Having the autonomy over colour and additional illustrations and graphics enabled me to double down on what I previously suspected.