I used the screenshots from Revolut to trace over the icons and shapes, and adapted certain areas to suit my banking brand. I dragged in all the components previously made, making sure to resize them to fit into the screen properly.
For the home and spending screens I didn’t really change much from the original screens, I just removed certain buttons that weren’t needed in my banking app.
For the budget screen, my lecturer suggested to change the budget donut to a bar chart as it would be easier to see the amount spend in days throughout the month. I rounded the edges of the bar to resemble a turtle. I agree that this works better and you can differentiate the screen from the spending toggle.
To make the card details screen more useful, I decided to add in some buttons that I thought would be beneficial for the user. I added in report, view card pin and set up Apple Pay. Now, I think this screen is set up, so you can find everything you need in relation to your card in one place, making it convenient and easy to find.
I decided to add in another screen, since Revolut has certain aspects I couldn’t use and I thought my app was lacking a screen where you could find the different services it can offer. I designed the icons to be cohesive and match my banking brand. For example, I made sure the line icons were all the same stroke size and the colours were consistent in the shaped icons.
Overall, I am happy with my screens, from the colours to the typeface work well together, and is effective displaying my brand across the UI.
Since Revolut’s nav bar is very suited to their brand, I decided to design one myself on Illustrator that reflected my brand and as an extra feature within my brand.
I had difficulties creating some of these on here, so I decided to do the euro sign and the arrow icons on Figma instead.
My lecturer suggested to create components for my nav bar to make sure the spacing remained the same throughout each screen. I decided to create various states of each icon using different colours, bright green when clicked, dark green when not selected and light green when your finger moves over a button.
