Content Creation
Iconography for Jupiter
Jupiter Money is a digital banking app with a diverse range of verticals spanning loans, investments, and payments. Jupiter prioritises financial literacy by simplifying complex financial terminology and offering users insightful guidance.
I worked at Jupiter as a Senior Illustrator, as part of the product design team.
The challenge
Jupiter Money has a number of different verticals within the realm of fintech. Different features were often highlighted through a unique visual language.
Jupiter needed a cohesive visual element that unified the different verticals and features as one overarching product.
Reviewing the scope of iconography
across the product
All the icons across the product were categorised into one of four buckets;
Unique icons:
Icons that represent Jupiter specific offerings or features.
Example: Icon representing ‘Pots’, a Jupiter offering.
Universal icons:
Icons that are universal within digital interfaces.
Example: The search icon, represented by a magnifying glass.
Navigational icons:
Icons that allow users to navigate the app.
Example: The magnifying glass leads to the search function.
System icons:
Icons that serve as a supporting element. Example: An lightbulb representing insights.
Defining the fundamental principles of the new iconography
The fundamental principles acted as a guide and a metric for success.
Our icons strive to be:
1. Universal and understandable
2. To encourage interaction
3. In line with our personality
Concept behind the visual design
To visually indicate movement through shape, lines and decorative elements.
The navigational nature of many of the icons is implied by visually indicating movement. It was also in keeping with the motion of celestial bodies in space, typing into Jupiter's overarching space theme.
We made the decision to add a single simple highlight line for icons that were optically lighter than the set they were a part of. This contributed to the underlying theme of motion.
Creating Guidelines for the icon design
We created a keyframe for a grid that was used to create every icon in the system. After this, we created specifications around the size, stroke weight and curvature that could be used.
Implementing new iconography in the product
After defining the style and creating the icons, it was important to:
-
Implement them across the app.
-
Create a library that was easily accessible to designers working on the product.
-
Create a system through which new icons could be created in the style.
Building an accessible icon library
We defined the icon guidelines for style and usage in the product design system.
This was documented in a Figma file, with a dedicated page for the iconography.
Each icon is linked to the larger library. The designer can view the source from Figma’s asset panel
The individual icons were made into Figma components, so they could be accessed on any file created by the Jupiter design team via an easy-to-use drop down function.
The variations possible in size and colour were also visible via a drop down function, ensuring none of the icons were used incorrectly.
Facilitating use of the icon library
We had two sessions with the design team where we went over appropriate usage of icons.
In instances where there was a requirement for an unconventional icon, each case was studied and addressed by the team working on the iconography.
When the new library was first put in place, I allotted two hours of the day for designers to come to me for custom icon design requests.
Over the course of two months the number of requests petered and the system put in place began to function smoothly.
Photo by John Schnobrich on Unsplash
Success of project
It is difficult to measure the performance of an icon or set of icons on a larger page.
We do notice beautiful iconography, but when it is effective and functional user interaction with them should require minimal thought.
The iconography did make the visual language of the product significantly more cohesive and unified. It also enabled a more systemic workflow, and helped influence decision making for other visual design choices across the app.
Photo by bruce mars on Unsplash