ZINIER 2.0 Iconfolio
ui design × Creative direction
Deployed into production, Zinier’s visual design system suffered from poor affordance, and usability problems that hinder efficient app performance. Prior to the revamp, its design library utilised icon sets found online—adequate (then) but posed huge legibility issues and a strong lack of brand coherence.
Key objectives
Rendered at smaller scale, the previous icons looked visually alike. Also, screens appeared incoherent due to stylistic inconsistencies resulting from varying geometry, curvature and stroke widths.
This exercise aimed to audit all existing icon assets, and to build a ro
bust UI component library—original and distinctive 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 & readability of UI design library
Minimise cognitive load for all product interfaces— by leveraging familiar design patterns while building on established mental models of the app
Reduce onboarding time × in-app semiotics
Solutions
Define a design style in synergy with the rebrand direction of Zinier. Apt use of geometry and boldness, but still easy on the eyes. One that works optimally with both the current interface text styles (ie Open Sans), and corporate logotype.
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.
