As part of the creation of the banking app, we were recommended to create an interface inventory of an already existing banking app in order to ensure that we were creating interfaces that covered all aspects and also felt familiar to a user. I took screen grabs of a Monzo account I have which admittedly I don’t use.
I then copy and pasted all of the interactive elements into a frame which I felt could be relevant to my app. This will ensure the size of buttons and components I create are usable and the right size for pressing etc.
As a result of creating an interface inventory, I was able to design components for my own app with confidence that they were indeed usable and perhaps familiar components. I adapted these two my own brand as there are aspects of my interface which differ significantly to that of Monzo’s. I also had to create many original buttons and components for my design, however I referred to aspects like dimensions and size of text to ensure usability.
I generally created 3 different states where relevant: default, while pressing/selected and disabled. I focused on choosing appropriate colours based on my brand guidelines document.
Component Library:
