We have done a small but very useful addition to the AB.LV website - a visual payment card selector - you can check it out here http://ab.lv/en/private/cards/. Our goal was to design the user interface and implement the app using AJAX and JS.
The interaction model for the user interface assumes two "personas": a casual customer with no predefined preferences who would like to see all the available card options; and a customer in search of a specific card type which satisfies his needs.
For the casual user the interface offers a simple and unambiguous approach - a visual selector for available bank cards. The customer immediately sees the full range of card types, each of which is represented by a large life-like image. After he has selected a card, the client is presented with a description of the card he has chosen and several action buttons - all this is done without having to reload the page. The smooth transition from card to card is nicely animated to make the interactive experience fun and enjoyable.
Customers who know exactly what they want from their new AB.LV bank card can use a filtering option which is initially hidden but can be accessed as a drop-down window by clicking on the “Find the right one” link. The usually tedious filtering process has been made a little more intuitive and user-friendly by stepping into the customers' shoes. The options are grouped according to customer needs and the visual interface offers immediate feedback once an option is selected. Cards which match the customer's preferences appear and disappear as he changes the requirements.
The finishing touches - the card grid matches the browser's resolution and when you change the size of the browser's window the grid reshuffles to match its new dimensions.
Comments (0)