During Week 8’s lecture we were given a tutorial on how to create component libraries and how to create asset folders on Figma, So I thought I’d spend sometime designing the components for the UI before designing the UI, I will evidence all components here and talk about them if needs be.
My main source of inspiration for the XP user interface will be Monzo and Plum due to their typefaces and use of Icons
I decided that I will make a sign up page for the banks user interface to showcase tone of voice and to have a nice introduction. I decided to use the purple and green colours from my brand as they are the main colours for it. I also wanted a personal tone to it, as if you yourself are answering the question.
Here are some of the assets for the Landing page, I took inspiration from Monzo mainly here, What bothers me a bit is the colour contrast issue I am facing with the white on green and blue, But I suppose legibility is more important to focus on. For the activity component, It’s going to be a button that goes onto the Activity page. I also decided to create a in-app notification to welcome the user as well.
This is just a typical add and send money asset. only thing to note here is the use of the purple colours when the asset is clicked really. But I will say I am so glad I chose Futura Md BT as it just works so well for a modern bank In my opinion.
There is a lot going on here, So I’ll go through it one by one. The card details will allow you to see your details if the reveal button is pressed. I decided to create two plain press boxes. one with arrows and one without, this is because I wanted to reuse components to not only save time but to have a sense of brand cohesion. I then put the debit and credit cards in, only the tier one cards as I did state in the brand guidelines that the other tiers were to be hidden in all promotional assets and UI to give a sense of elite-ness and rarity. And finally for the reveal and freeze card they’re just your standard buttons, I did recreate the Icons which I think look good, but for the reveal pin button it’ll take you to the card details screen, I’m wondering if there is a way to incorporate a Face ID animation once pressed to give more security to the app and interactivity.
Simple again, I decided to use the button from the Apple iOS 18 component pack, and I changed the green to purple and added a variant where it is unpressed as well, on week 8 Wednesdays lecture we learned how to use mathematics in Figma so I’m wondering if there is a way to translate that over to the transactional statistic.
