Payment Categories Icon set

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. We were going for a clean, bold and sharp visual style.

There were 40 categories that existed and had to be 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 ways:

Categorising action by the user, which happened after the payment was made

Glancing and tracking expenses for the month.

In 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

When we shipped the first version, we did the mistake of styling them just like our L1 icons (which were used for actionable flows, like paying a bill) with a consistent green look.

This was problematic, as these icons appeared all together when categorising a payment.

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.

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.