Сorporate platform · About project
Hello! ⚡
Sharing a glimpse from one of my latest work collaborations with the Moscow Automobile Plant, commonly known as "Moskvich," a Soviet and later Russian automobile manufacturer.
It is a corporate platform where company employees can keep track of company news, events, store documents, submit ideas and much more.
Each screen of the platform was developed from scratch on the basis of the collected design system.
I have divided the creation of a design system for Moskvich into the following stages:
🔴 Creating a design concept, if there is none or it is unclear (Design of basic leyouts). I defined what leyouts will be in the product, determined their sizes in relation to breakpoints, took the most complex and important screens and aligned their design.
🔴 Determination of text styles and colours based on concepts. Made several variations of layouts with different fonts and different pollets and aligned them
🔴 Designing tokens and key design components. Created tokens, based on them components and states for them.
🔴 Component testing. Threw a couple of layouts with these components and checked that everywhere auto-layouts and propertis for them were correctly stretched and worked, everywhere were correct margins, curved and so on.
🔴 Documenting and creating library components for Storybook. Described all the rules, specifics, sizes, behaviours, indents and so on for each element in the created library. After that, prepared special layouts for porting the elements to Storybook by developers.
🔴 Training for developers and giving them the design system to create components. Distributed mockups to the developers, gave them details, answered their questions, gave them a quick tutorial on how to use Figma, and how to connect extensions for Storybook, export code or export pictures directly with compression.
🔴 Getting feedback and finalising. After the start of development there were some issues that needed to be finalised quickly.
🔴 Finalisation and support. I summarised the results, checked the work, outlined plans for future support of the system.
🔴Creation of screens on the basis of new components. Developed product screens based on the new design system.
