CEE Web Design System

Starting from 2018, i proposed to UniCredit CEE the development of a Design System to align all the web-based digital touch-points of the Banks in the 8 Countries of the CEE Region.

I and the design team (two ui designers and a front-end developer) started to analyse a benchmark of the most advanced Design Systems, in terms of structure, elements and level of granularity of rules and principles. Also, we designed the Design System having in mind the long-term maintenance and scalability of the most relevant web asset: the Public Website.

At the beginning we started with structuring the backbone of the DS and we decided to implement a tree of elements based on the Atomic Design approach, with specific changes according to our ecosystem. Then we started to deliver the primaries and all the components in parallel with the daily activities on the Public Website.

At the end of the first phase, our Design System consisted of:

– a UI library file (done with “Sketch”) containing all the components. Most of them designed with “elastic components” logic, to be adapted to different screen sizes.

– an Icons file (done with “Sketch”) containing all the icons, developed as font-icons.

– an Internal website containing principles, rules, examples and guide to use the design system.

– a Front-end repository containing buttons, icons, fonts and other components, already developed in html+css and ready to be used.

Main Achievements

Before: preparation of a new layout  4-6 hours ca.

After: preparation of a new layout  1-2 hours ca.

Project Info