The next part of the process for creating a banking brand was to design an app for it. Instead of starting from scratch with this app, we had to research a current banking app of our choice, and use it as a template to re-skin it, adding my own app’s style to it and making some minor adjustments where necessary.
The banking app that I have decided to do a UX teardown of is Monzo. The reason why I chose this brand is because they are the leading online bank, and they have a strong emphasis on user experience. From looking at their app screens on Mobbin, I think that their app looks very functional and also aesthetically pleasing. I think that my brand would work well with my bank which focuses on accessibility.
So I then took screenshots of some of the main screens from Monzo, and put them into Figma to do a UX teardown, analysing them, seeing what they done well and didn’t do well.
UX Teardown
What I gathered from the UX teardown is that the Monzo UI is very strong, so the improvements that I will be making will be very minor. I decided to change the trends page, which I will talk about a bit later. Their app looks great and is also very functional. Doing this task made me appreciate all the different elements that go into creating a UI for an large app, with all the different screens being unique yet cohesive at the same time. I started the UX teardown by saving different Monzo screens from Mobbin, and screenshotting different components that I could see. Here is my interface inventory from what I could find on Monzo. From doing this exercise I found that Monzo use a lot of the same components throughout their app, especially when it comes to buttons, icons, colour and typography. This is effective as the user can navigate around the app very easily, and there is a real sense of familiarity with it. They also use accessible features, showing that they prioritise accessibility. I seen this in things like colour contrast, text hierarchy. They also don’t use too much text in one paragraph, but use illustrations to help visualise data. I think that reskinning this app with my own app will look great and be very accessible.
The next step of designing the banking app was to start creating my own components, and this was done by using Monzo’s components and reskinning them to fit my brand. Since I really liked what Monzo had done with their app, I just had to change some elements of the components, and this included the colours, typography, and also designing new icons that fit with the brand identity. This was quite fun to do, as I was using components for the first time in Figma, which was something that is completely new to me. It took a while to get the hang of what I was doing, but once I understood how they worked it made the design process for the app much quicker and easier, and this is a skill that will definitely be helpful for the future. The main components that I was reskinning were buttons, icons, text, colour, and other interactions on the UI. This was quite a fun process and definitely a great skill to learn for the future.
Next was the best and most enjoyable part of the whole project, which was putting together everything that I have done so far into one cohesive app. I had to design 4-5 screens, and these screens that were taken from Monzo’s banking app. There was only one major change that I would make to the app, so apart from that I simply just recreated Monzo’s user interface with my brand skinned on it.
The first page that I designed was the home page. This page will show the user their bank balance, card transactions, and gives the user some button options to do a couple actions. These actions are: freeze, card details, and the option to add a card. This page also shows the users bank card as a visual aid. The page is supposed to be super visual and only show the information to the user that is necessary. I love how this page turned out and think that the card imagery looks great.
The next page is the payments page. This page serves the purpose of allowing the users to transfer and pay money to their friends and family. There is a section dedicated to paying friends and requesting money off them, a section for splitting bills, and a section for shared tabs with friends for things like holidays and house payments. I think that the text hierarchy on this page makes it very clear to what I am trying to draw the users attention to, and I am very pleased with how this page turned out overall.
