Sketching, Hifi Wireframes & Prototype

Sketching

I start the design process by preparing screen sketches so I know what I will need to complete the flow and improve it.
First of all, in step 1, the aim is to improve the visualization of the list of companies (currently there are 22 categories and a search can give more than 120 results). In step 2, there is a summary with the data of the selected business and the data to be filled in by the customer to proceed to the payment. Step 3 is currently a validation of the data entered in step 2, I have decided to remove it because these data are also displayed in the payment process that is done externally. Finally, in step 4, I have improved the visualisation of the confirmation data in the voucher, eliminating and simplifying the information displayed.

Wireframes HIFI - desktop

Using a simple UI kit with the colours, and typography from Aval pay, I prepare the hi-fi wireframes of the project.
To see more details click here

Prototype

To see more details click here