To begin designing the user interface for my banks mobile app, I first should consult with some successful examples. As covered previously, Monzo and Revolut, the most notable digital banks, come up time and time again when UX and banking are mentioned in the same sentence.
I plan to recreate some screens from Monzo in order to gain an understanding of not only the process but the thinking behind it. This is something we learnt in UXD104. I have found these master apprentice tasks to be super helpful so I plan to implement it here.
I found recreating these screens to be quite therapeutic, there is so much more that goes into a simple UI screen that what you may initially think, I found aspects such as the graph on the left and the more complex icons like the flag to be a little challenging conceptually, it was about finding the right approach. Here are my recreations.
I thought it would be a good idea if I took these recreation screens and attempted to apply some of the aspects of my own brand to them. This will help me understand how the different components of my brand work together and where they excel. I started by making both a light version and a dark version using my brands colours. Here they are.
I think these turned out way better than I could have expected. They have given me a new found confidence in my brands identity. I think they look really cool and i would genuinely use these. Unfortunately that may be in part due to monzo’s good design. I think I prefer the light version, it feels cleaner and more on brand. The dark version is nice but it conveys more of a investing/crypto/digital feel which isn’t exactly what I’m aiming for. I think a highlight of the dark mode is that it really plays into the main mint colour and makes it pop nicely. The light mode just feels right I think, it’s serious, it’s a bank.
To begin designing the UI for my own brand, I will need to create some icons. These icons will be used very similarly to those featured in monzo’s UI as seen above. These little icons will help users navigate the app whilst adding character and presenting spire’s personality through it’s interface. Time is a little bit of an issue at the moment as we are nearing the end of the semester, with this in mind I didn’t sketch out any icons but rather created them in figma. I gathered inspiration by looking at other banks and what kind of icons they use. Here is what I came up with.
