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.

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.

 

 

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-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