•●• 2019 •●•

atomic design to design system

•●• UX, UI, team cooperation, components

the company + the project

corporation learning what design means and what it can do

team structure

development scrum team dedicated to one task

my role in the project

sole designer for a the team

timeline

start 2019 - continuing

what did i learn

atomic design, the importance of structure and a good start

what could have i done DIFFERENTLY

switch from sketch + invision + zeplin to figma

user interface

Company branding audit

The difficulty arose from the fact that the base setup needed to change, elements like fonts with all their variants required changing. Secondly, the color pallet for the project had to be switched, as well as small details of rounded corners, backgrounds, footer, etc.

the process

Introducing design into a scrum team

The first big hurdle was establishing the base for UI. Atomic design approach helped me get started quickly; our collection of rules and elements grew with us as a team. Involving programmers at the beginning, let me build reusable components, proper headings, and paragraphs from day one. We chose a system that combined Angular components with enough flexibility to mix with the brand requirements.

the process

Creating the atoms

Starting with essential elements like forms, inputs, text layers, and hierarchy, we built a shared understanding between design and implementation. Reusing and iterating on established ingredients let us keep consistency as well as the freedom to adjust when needed accordingly.

detour

Brand guidelines clash

This fundamental work we put in at the beginning of our project saved us a lot of time later on. Halfway through the project (unfortunately slightly late at that point), we received a directive to adjust to the corporate identity guidelines. Thanks to our base setup, changing all the details of UI was a medium task easily fitted into the sprint and corrected quickly.