Work    Gigs






UI Challenge 2:
Password Reset &
Transaction List


Medium

Sketch & Flinto

Challenge
  1. Design a transaction list and a sorting UI
  2. Design a password reset flow












Flow Overview (Password Reset)

What was it, now?





Entire flow illustrating the process of reseting one’s password






 Email/Phone request


User enters their details and then awaits for verification code









Code Prompt



Once received, user enters the code and is immediately led to the next step where he/she reenters his/her new password









Interaction


You could almost hear it click





GIF showing new password being set





👈🏼
Here’s a flinto animation showing once the password has been entered and confirmed. A two-piece key is then joined – showing the successful creation of his/her new password








Flow Overview (Transaction List)


Sort your spending








Transaction list UI





👈🏼
Here’s a transaction list and a sort function along with it.

The transaction list UI features pending and completed transactions.

The sorting UI allows the user to sort between categories, recent & old, and amount.







Mark
© 2019 Jonathan H. Kho
LinkedIn  //  Email  //  Résumé