Challenge 2 Ironhack wireframes
The Challenge
The second challenge presented to us by the educators at Ironhack is all about wireframing and figma.
Here we must choose and app, define the user flow of a specific task and then draw each frame into figma.
The app I have chosen is the banking app Revolute, its UI design is very appealing and the experience pleasant.
It is a good example of an app that manages to provide a plethora of options while remaining free from any useless clutter.
The user flow
Through the app we can, stay up to date on our finances, execute money transfers to friends/contacts, buy stocks and crypto.
The task I decided to analyse today is buying crypto, that is because to some people there might be a shroud of mystery on how to acquire some. Even though today things are changing very quickly, the buying experience on Revolute is very well designed.
Here are the screenshots of each screens of that process:
Please note that I omittedsome information on those screens (the red parts).
Please note that there is a screen before the first screen shot, but due to security reasons the app does not allow for screenshots to be taken.
Step 1:
Right before the first screen shot the user is prompted with a login screen, where he can choose to use his passcode or his fingerprint.
Then the user is prompted with the first screenshot, an overview of his accounts, where the last payment executed are displayed.
Step 2:
In order to reach the crypto wallet, the user needs to click on the 2nd logo in the bar below, this takes him to the second screen.
Please note that this would usually take you to your stock holdings but since I do not have any of those the app has defaulted me to the crypto section.
Once there we are given an overview of all the current holdings and their market value. Then we tap on the coin we wish to buy which takes us to screen 3.
Step 3:
Screen 3 is an overview of the current market value of the coin, and displays a nice graph informing us that you bought your coins for too much money and probably sold some for too little….
There we can click the bright blue “buy” button on the top of the page, and we reach screen 4.
Step 4:
Screen 4 is where the user can enter the amount of currency (euro in my case) he wishes to transfer to bitcoin or the amount of bitcoin he wishes to buy. Once the amount entered, we get the confirmation screen (Screen #5).
The wireframes:
Such user flow can be shown through the wireframes, enabling us to dissect the user experience in detail.
Here are the wireframes with and without arrows:
