The main delivery requested by the company was a new UI strategy to position the product to the premium level. In order to achieve that I materialized the visual strategy and re-skinned the pages of the application.

icx4-1icx4-1

DEFINING THE STYLE DIRECTION

The new visual direction was based on the company’s logo as the only available brand asset. Using its colors and shapes I expanded the asset library with complementary components pointing towards a cleaner, more refined overall look and feel.

Since the most common components of the application were charts, bars and other data visualization elements, I started to apply the new theme on these components first.

 

 

icx4-3icx4-3

THE COMPONENT LIBRARY

The preparation for the front-end work started with a static style guide that was expanded later into a dynamic component library which eventually formed a living pattern library.   

ICX4-4ICX4-4
icx4-5icx4-5

CONSISTENCY

In order to ensure a hustle-free task flow for the users I used atomic design method to approach the page compilation phase and put together the components by using the smaller UI elements defined in the style guide.

icx4-7icx4-7