Designer Debit Card

(UI + UX Case study)

Bombay Design Centre
Client: Kotak Mahindra Bank

A website redesigned for the customisation journey of debit cards.

I was the sole designer working on this project, I was responsible for the product planning, strategy discussions, design brainstorming, conceptualisation. My role was to develop product requirements with the product managers, prescribe design solutions, design wireframes, and work on the visual design (UI) for the product and worked closely with the development team to ensure desired implementation of the proposed design solutions. .

Problem statement- Low conversion rate and sales visitors would drop out after spending about 30 seconds on the previous website. A heuristic evaluation conducted showed that the previous website overwhelmed the users, and they couldn’t make a decision and thus had such a high drop out rate.

A user could get overwhelmed by the amount of cards but I solved this by the integration of nudges in the design, which would help a user make a decision and pick a card. The cards were put into different categories, allowing the user to select a category of their interest and filter the cards out. The nudges introduced were based on ‘trending cards’, ‘staff favourites’ and on ‘cost’. These would narrow down the results and help the user make a decision without being overwhelmed.

A cards viewed section was introduced for the user to go back and visit the cards they have gone through and make a decision out of their short-listed cards.

Designer Card UI.png
Mobile UI.gif
 

To increase sales, three price variants were introduced. The highest costing one was a new premium feature of ‘Mono Cards’ was added where the user could select a colour of their choice and were allowed complete customisation.

Gif.gif
Mono card.gif
 
Checkout.gif

Cards were tagged and categorised and a Find your match feature was introduced, this helped users in doubt by asking them to select a few images based on their interests after which tailored results were suggested to them making it easy for them to view cards of their liking and make a decision.

Wireframes Designer Card- Desktop.jpg
wireframe-mobile@3x.png