Revolut UI Teardown:

I started off this process by logging into my Revolut app and screenshotting my user experience as I went through the different screens. I chose Revolut because it is also an online bank, one that I use regularly alongside my traditional bank, Santander. This is because Revolut has more features and better UI than the Santander app.

landing screen.jpg

home.jpg

adding money.jpg

other useful.jpg

extras.jpg

<aside> 💡 Doing this UI teardown was helpful for me to analyse what I would like to put into my own banking app. It showed me what works and what doesn't, and helped me determine what was the most essential, to align with my brand values.

</aside>

Sketching

These rough sketches allowed me to get a basic idea for how my banking app screens should look before moving onto Figma.

IMG_6098.jpeg

Designing a Nav

When I started designing my nav I originally wanted to have only three icons on it, but I found this worked better in theory than in practice, so I went back and designed another icon for a more balanced look. I got rid of the contacts icon because I though it was much to illustrative for the Just branding. I also scrapped the contacts screen entirely because after some thought I realised all the functions of a contacts screen could be done in a dropdown menu on the transfer screen. For my final iteration of the nav I went for transfer, balance, transactions and settings.

nav 1.png