ZINIER 2.0 Iconfolio

ui design × Creative direction

Zinier’s current set of icons, applied to production, is weak, indistinct, and not fully optimised for efficient performance. Prior to the revamp, the design library utilised icon sets found online—adequate (then) but posed problems on legibility and clarity.

 

Key objectives

Especially at smaller scale, the icons started looking too visually-alike. App screens appeared incoherent due to stylistic inconsistencies—caused by geometry, curvature, and varying stroke widths. This ongoing exercise aimed to consolidate and audit all existing icon assets, and develop a robust & distinctive UI component library—original and fully aligned to the Zinier brand.

 

Segments targeted

This new and improved UI component library will target all app users across all platforms. User-visible elements that will be changed: ➊ In-app iconography, and ➋ In-app style guide(s).

 

Problems being solved

Improve clarity & legibility of UI design library

Minimise cognitive load in all product interfaces— by utilising familiar design elements while adhering to existing user mental models on app usage

Reduce onboarding time × in-app semiotics

 

Solutions

Define a design style in synergy with the improved brand direction of Zinier. Proper use of geometry and boldness, but still easy on the eyes. One that works well with the current interface text styles (Open Sans), as well as corporate typeface in the logo.

Build a new and consistent library to use across Zinier’s product ecosystem—distinct and recognisable as a family.

 

Choice of icon formats

Icons + Text = Builds connection with visual + function. Forms a unity, distinguishing the different elements located on the left side panel of the Zinier platform. Abstract ideas may need visual signifiers (eg nodes, service insights and AI recommendations).

Icons only (Text removed) = Meaning can be obscure. Users may not know what the functions are, or how to navigate thru various tabs when using the Zinier mobile app.

 

Defining icon attributes & parameters

Icon families can have the same impact as fonts/typefaces in the interface design — and when applied successfully, they can make a bold statement towards creating a brand’s personality.

Studying the current icon sets, you can pinpoint the attributes that were derived from the brand logo, such as the counter strokes and rounded forms. The selected online library of icons embodied these visual characteristics well. However, when applied at small scales, the delicate stroke weights get lost and blurred in the process. These result in indistinguishable icons throughout the interface.

 

The Z-factor

To make the new icon set feel cohesive as a family, they need to have consistent characteristics and similarities carried throughout each one. Casting a wider net on the brand logo, I’ve shortlisted a few design characteristics to use and explore as icon visual treatments.

These consistent design treatments will become the visual rules to shape the actual icon designs. Attributes such as line weight (minimum of 2p stroke width), corner radius, and negative space in each glyph were carried across the icons to make them uniquely Zinier’s.

 

Icon parameters and usage

Standard UI components like icons will have defined rules and parameters — which will include, dimensions, live area, minimum touch target sizes, and colour palette.

Defining and employing a grid system is useful in achieving proper dimensions & proportions of our icons.

 

Tools

  • Sketch
  • Marvel
  • Crystal
  • Adobe Illustrator
  • Pen
  • Paper
  • Adobe XD

Year

  • 2019-2020