Short project Iconography · Product system

Nonighter

Fifteen icons for the desktop application of a financial reporting platform. The ones they had had become dated and inconsistent: they confused the user and no longer resembled the brand.

Pattern with Nonighter's complete set of financial icons
Client
Nonighter
Financial reporting
Role
Iconography design
With Lucía Domínguez · Al Sur Studio
Scope
15 icons
Redesign of the app's set
Deliverable
Vectors
From 16 to 112 px
01
The brief

The app was already the workplace of its users. What had fallen behind was its visual layer.

Nonighter is a platform for organizing financial reporting processes: from its desktop application, the user generates reports every day. The icons naming each operation had become old and inconsistent with each other, and that has two costs: doubt when navigating and a brand that doesn't recognize itself inside its own product.

The brief was the entire system, not a single piece: redesign the fifteen icons with one criterion. I worked on it with Lucía Domínguez.

02 · The goals

Four rules agreed before drawing the first icon.

01
Modernization

Update the set to the visual standard users expect today from a desktop app.

02
Consistency

One graphic language across all fifteen, so navigating is faster and nothing has to be interpreted.

03
Brand alignment

Nonighter's palette and drawing criteria, inside the product and not only on the web.

04
Scalability

Clarity at any screen size and resolution, from the menu icon to the header one.

The fifteen icons of Nonighter's complete set

Two fill tones, one outline stroke and the violet reserved for the element that gives each icon meaning: the coin, the sign, the gear.

03 · The construction
Two icons on the construction grid
Grid

All icons are built on the same grid, with the same stroke weight and the same optical weight. It's what makes twenty of them together on a screen read as a set.

The same icon tested at 16, 32, 48, 64, 80, 96 and 112 pixels
Scales

Each icon tested at seven sizes, from 16 to 112 px. What rules is the real size of use in the interface, not the one on the presentation sheet.

Icons for DCF, LBO, Financial Statements, Net Working Capital, CAPEX, Debt and WACC Icons for Returns, Precedents, Financial Statements, FF, Comps, Combo Analysis, Accretion/Dilution and Revenues
The repertoire keeps the metaphor of each concept —DCF, LBO, WACC, Comps, Accretion / Dilution—: nobody had to relearn where everything was.
Sheet defining what each icon represents: Discounted Cash Flow, WACC, Net Working Capital, Import Data and Combo Analysis
Part of the deliverable was writing down what each icon represents. In a domain like this, the definition is what keeps the next designer from redrawing it with another criterion.
What it left me

Renewing a set already in use has a constraint that isn't negotiable: learned recognition.

An ERP icon isn't there to decorate: it's the signal the user has already memorized and looks for without reading. You can change the entire drawing, but not the metaphor. Working from the inherited set, instead of starting from zero, was the decision that made it possible to modernize it at no learning cost.

Developed together with Lucía Domínguez — Al Sur Studio.

Let's work together

Do you have a product with an up-to-date interface and a dated visual layer?

Write to me WhatsApp