Anish S0ni

Wealth by Groww

Back to Work

Wealth by Groww

Illustration system · Groww

A machined metal device showing a gold chart up 45.6%

Design System for Wealth

Overview

Finance as instrument, instrument as object.

An illustration system for Wealth by Groww: dark surfaces, gold accents and machined isometric objects, from 2D icons to full hero scenes.

01 — System

About Illustrations

Concept

Wealth by Groww's design system has premium dark surfaces, considered typography and a custom isometric illustration register that signals craft, calm and considered finance.

Style

Dark surfaces, gold-toned accents and isometric machined objects: finance as instrument, instrument as object, every detail load-bearing.

Concept

Wealth by Groww's design system has premium dark surfaces, considered typography and a custom isometric illustration register that signals craft, calm and considered finance.

Style

Dark surfaces, gold-toned accents and isometric machined objects: finance as instrument, instrument as object, every detail load-bearing.

Colour palette: gold 15%, paper 35%, stone 35%, shadow 25%

Colour palette

Gold for accent, greys for everything else.

Gold for accent, greys for everything else.

Three illustration types: isometric hero, skeuomorphic spot hero and skeuomorphic spot

Illustration Type

02 — Spot illustrations

Construction of a skeuomorphic spot illustration

Skeuomorphic Spot Illustrations

Spot hero illustrations drop one isometric axis, keeping a sense of dimension without the heaviness of a full hero. Same lighting, same materials, same gold accent register.

Spot hero illustrations drop one isometric axis, keeping a sense of dimension without the heaviness of a full hero. Same lighting, same materials, same gold accent register.

Spot 01, 02 and 03: a signature pad, a nominee dial and a face-scan console

Spot 01

A signature pad with a gold fingerprint sun: identity made tactile.

Spot 02

A dial of gold figures for adding nominees: the people your wealth is for.

Spot 03

A face-scan console for selfie verification: precise, calm, unmistakably secure.

A signature pad with a gold fingerprint sun: identity made tactile.

A dial of gold figures for adding nominees: the people your wealth is for.

A face-scan console for selfie verification: precise, calm, unmistakably secure.

Onboarding screens using the spot illustrations

03 — Isometric heroes

An isometric hero illustration

Isometric Hero Illustrations

Full hero illustrations carry the complete isometric scene (devices, light, gold accents) at the highest level of detail in the system.

Full hero illustrations carry the complete isometric scene (devices, light, gold accents) at the highest level of detail in the system.

The isometric hero illustrations together
Hero 01: a handheld device with a rising gold chart

Hero 01

A pocket instrument with a rising gold line: returns you can hold.

A pocket instrument with a rising gold line: returns you can hold.

Hero 01 details
Hero 02: a mutual fund chip in a glass case on a scale

Hero 02

A mutual fund chip under glass, weighed and measured: investments treated as precious objects.

A mutual fund chip under glass, weighed and measured: investments treated as precious objects.

Hero 02 details
Hero 03: stacked cubes on a phone

Hero 03

Building blocks stacked on a device: a portfolio, assembled piece by piece.

Building blocks stacked on a device: a portfolio, assembled piece by piece.

Hero 03 details

04 — In product

The hero illustrations in the Wealth app: three screens

05 — Hero icons

Construction of a hero icon

Hero Icons

Hero icons flatten the system to 2D: the same metal and light, small enough for a list row.

Hero icons flatten the system to 2D: the same metal and light, small enough for a list row.

Six metal hero icons