Project Description
Design Challenge
What I worked on:
I did a design challenge to showcase my prototyping skills in Figma. I re-designed my credit card management app to address heuristic & usability pain points I identified with the current state. I wanted to reimagine what the interface could be like and used their existing brand colors to give a more updated & calming look and feel.
Pain Points
Here I list the paint points I found looking at the current state. I identified white space, sizing & layout issues. I also wanted to create a better interaction design for multi-card holders.
Interaction Design
This is a list of Figma interactions I added to the prototype that would address the white, space, legibility and overall look and feel of the current state application.
A) Card Slider With Smart Animate
B) Advanced Accordion with multi-state components
C) Animated number counter on load
D) Sticky header that is revealed on scroll
E) Vector animated slider indicator using smart animate
Usability Choices
To address some of the pain points I had with the credit card manager, I wanted to focus on a few fixes. Namely, creating a credit card slider that allows users to easily move between different cards. I also wanted to keep the entire viewport focused on a single card so there wasn’t confusion about which activity screen you were on. This is especially apparent while scrolling.
It’s easy to forget which card your on so I added a sticky header with brand and card number to help users know where they are. I also wanted to create a more succinct overview so that data would be more easily comprehendible on first glance. I made the payment & rewards buttons have a better hit area away from other links. Overall making the experience much easier to use and view data.
Results
Below are the finished screens & prototype in Figma. My next steps would be adding a payment screen and going into each of the tabs to show how that functionality would work. Overall, this was the most complex prototype I’ve built and I’m excited to face different challenges & learn more advanced prototyping features.
