Bank / Finances
User Interface Design and Micro Interactions
I've worked completely focused on user interface, where my proposal was to create simple navigation to see the card receipt and options like purchase history, benefits, payment and others. I created a prototype to be a guide for the developers. They were able to navigate and see the micro-interaction to implement.
There are many layouts for credit cards at CitiBank, but all of them have the same information to display to the users: How much was used, the limit available and the operator (Visa, Master, Amex). I designed an layout where is possible to check this primary information.
I created these models to represent basic, gold and premium cards. They're applied when a personalized card layout isn't available:
I decided to create a vertical scroll to show user's card. They might see primary informations before select a card, and when the user clicks to see more details about a card, I created a micro-interaction where it shows the selected card in front of the others. In this feature, users need to be able to:
I designed this micro-interaction where users can select a card and see their others cards behind the first one. We show at most 2 cards - even if the user has more cards. Users are able to swipe the card to return their default view or just click at the close button, as you can see bellow:
This prototype was created using Adobe XD. Developers got the access to see the result and to compare this animation style during the development.
When the user access the card detail, he might see options available for his card, request a new limit, communicate if the card wast lost and other things. In this options screen, I designed a way to show the card month amount and the limit date for the payment. These are primary informations when users is seeing the details screen.
After user access the card detail and click to check the receipt details, I designed this screen where we've all purchase informations and payment options. Users can return for the previous screen easily using the top buttons or sliding the screen from de edge.
A prototype was created using Adobe XD to validate with users by UX Design team. This prototype works perfectly on iPhone X screen size and was runned by XD for mobile.