Category Icons for Payments
Jupiter | August 2024
Jupiter is a financial wellness app where you could create a savings account, and track your spends. This project is about how I revamped the payment category icons. After the rebrand, we were going for a clean, bold and sharp visual style.
Project Goal
There were 40 categories that existed and had to reworked according to our new visual style. This includes outgoing spends (eg: food, commute, shopping, groceries.) incoming spends (eg: salary, refunds, cashbacks) and investments.
In terms of the usage, the category icons were primarily used in two sense:
Categorising action by the user, which happened after the payment was made
Glancing and tracking expenses for the month.
Naturally, the overall goal of this project was to make the icons look extremely distinct and easy to comprehend.
Visual Challenge
In more visual terms, I had two challenges to deal with:
creating an extended color palette that worked across all the touch-points.
styling the icons with a clean and sharp look using the palette
Major touchpoints: the icons had to optimized for all 3 backgrounds
Iterations
Originally when we shipped the first version, we did the mistake of styling them just like our L1 icons with a consistent green look. This was problematic, as these icons appeared all together when categorising a payment.
First version of category icons
We then took a step back, looked at how we executed these icons in the old branding. This is when we used emojis. Emojis worked really well, primarily because each of them had a variety of details and colors that allowed distinction. Emojis were also familiar to the users as they saw and used them elsewhere too.
The only problem with these emojis were that they didn’t go in line with the new branding. So our goal became to make these icons like custom emojis on made for and used in Jupiter app.
Taking inspiration from old branding style of emojis
Outcome
We used subtle gradients to create icons that looked fresh and popped on the interface
Icons across touchpoints
Learnings
The primary challenge to overcome for these icons was to ensure legibility across different backgrounds in the app. I didn't make one icon before ensuring I had mockup for every screen to test them.
While making the first version, we didn't consider the idea of making them this robust, and just scaled our L1 icon style to ship these icons. Rebranding shouldn't mean you ditch the old visual style completely in the process. You have to take into account of what worked well in the old style, and make that the starting point for the rebrand.
If you enjoyed this, check out:
