As a VISA card holder it is my personal experience that the VISA or ICS Cards app has many things left to be desired. Therefore I set out to analyze their current featureset and challenge myself to design a better app.
On top of that, I use personal projects to improve my skills in certain tools. In this case, Framer.
A few evenings in 2020
As a start of this challenge, I laid out all the current screens of the ICS Cards App and analyzed them. This is something I usually do, as it helps understanding all the different features and getting a better grasp of the subject.
Next, I like to make notes on each screen for small and big things that stand out to me. Those can be improvements, questions or ideas. Then, I usually collect those and try to combine them in overarching ideas that could improve the whole experience.
For personal projects, I keep my process as simple as this, because I am lacking data, stakeholders and any other limitations.
An overview of the current ICS Cards App and all its screens.
Comments and ideas
From the previous step, ideas and remarks arise. I always collect them, to summarize and present them and also to combine ideas and problems into one.
Why is the app called ICS cards while they mostly advertise the brand name VISA?
The list of transactions is hard to scan. I want to see what I spent money on and what came in.
Inconsist font sizes and bad readability.
Switching cards is hidden in the hamburger menu.
Dated design with huge buttons and slow UI elements.
UI doesn’t contribute to a premium brand or luxury card.
Native iOS patterns are not utilised.
I want more insight into my spending on this card.
The card (gray, blue or gold) dictates the theme of the screen.
Set the scope
To then set the scope for a small personal project, I chose to merge these ideas into one vision. This vision then triggered many different versions.
A homescreen where I can easily switch through my different cards and have a highly readable overview of cash flow of the credit card.
Different variations for the homescreen.
Different variations for the app icon.
Prototype 1 — Peaking, swiping and tabs
While designing the various ideas in Figma I noticed that they heavily rely on interaction and animation. This made it hard to design these features in just static mockups and be confident they would feel good.
Thus, I made a first prototype in Framer to test the interaction. The first prototype consisted of:
It was pretty difficult to make this work in Framer, but I was confident with this first idea and decided to proceed and design further.
The first prototype serving to test the interactions.
Vector graphics for the credit cards used in the app.
Prototype 2 — Everything coming together
In this second prototype, the visual design for the scannable transaction rows come together with the interaction design.
The transactions are much more scannable than before, but with prices varying in length, the plus and minus squares move position a lot.
Something I was worried about is that the swiping between cards maybe did not communicate well enough that the transactions shown on screen really belong to that card. But now that you can visually see the transactions moving too, so I’m pretty satisfied with that in this prototype.
The full prototype showcasing the different interactions.
In the future, I would love to expand this exploration of the VISA app with more features and ideas:
These prototypes have re-introduced me with Framer and gotten me the confidence to build prototypes more easily than before.
As for this project, I would love to continue it with more iterations and test out different interaction design ideas.
Fun prototypes in Framer
Press M to unmute audio