{"version":3,"sources":["webpack:///./src/pages/avito-colors.js"],"names":["IndexPage","render","title","keywords","Section","style","opacity","href","React","Component","styled","section"],"mappings":"6KAKMA,E,kGACJC,OAAA,WACE,OACE,6BACE,kBAAC,IAAD,CACEC,MAAM,0CACNC,SAAU,CAAC,OAAQ,SAAU,aAAc,WAE7C,uEACA,kBAACC,EAAD,KACE,uBAAGC,MAAO,CAAEC,QAAS,SAArB,6CAGA,iMAKA,oSAMA,0OAIE,uBAAGC,KAAK,+CAAR,oBAJF,0BAUF,kBAACH,EAAD,KACE,oCACA,+DACA,2DACA,gEAEF,kBAACA,EAAD,KACE,uCACA,sSAOF,kBAACA,EAAD,KACE,6DACA,kRAMA,4BACE,+IAIA,6LAKA,oNAMF,ySAOA,mKAIA,0PAMA,iVAOA,yGAKF,kBAACA,EAAD,KACE,kEACA,+HAIA,mbASA,gQAMA,wQAOF,kBAACA,EAAD,KACE,uCACA,wIAIA,wHAIA,+IAIA,+NAKA,mKAIA,sM,GAzJcI,IAAMC,WAoKxBL,EAAUM,IAAOC,QAAV,2EAAGD,CAAH,ivBAiFEV","file":"component---src-pages-avito-colors-js-29d8b79b6ccfcb69737d.js","sourcesContent":["import React from 'react';\nimport { Link } from 'gatsby';\nimport styled from 'styled-components';\nimport SEO from '../components/seo';\n\nclass IndexPage extends React.Component {\n render() {\n return (\n
\n \n

Color Management in Avito Design System

\n
\n

\n product design ・ UX research ・ design ops\n

\n

\n During my first year at Avito, I was responsible for the web part of\n the Avito design system: React components library and UI Kit to be\n used by our product teams.\n

\n

\n We’ve made a lot of iterations and tried to improve the developer\n and designer experience in many ways from migrating from Sketch to\n Figma to introducing a series of design workshops where we worked\n out guidelines for the most common components and UI patterns.\n

\n

\n One of our team’s initiatives was improving the developer experience\n (DX) when working with Avito’s color palette. It went quite well and\n I’ve made a whole talk about this project at Avito Design Meetup (\n \n video in Russian\n \n ) with 180+ audience.\n

\n
\n
\n

Team

\n

Design Manager: Alexander Stogov

\n

Tech Lead: Ekaterina Petrova

\n

Development: Alexandra Shalamova

\n
\n
\n

My Role

\n

\n I was a single designer on the Web Design System (WDS) team\n responsible for desktop components. I worked closely with developers\n inside and outside the DS team. My experience as a developer helped\n me communicate clearer with both user groups: devs and designers.\n

\n
\n
\n

Business Goals and Challenges

\n

\n In this particular case, our main metric was time to market. Avito\n has two dozen teams responsible for multiple parts of the product\n experience, and all of them strive to ship product updates on time\n and with the least possible number of bugs.\n

\n
    \n
  1. \n We wanted to reduce time to market for product teams, thus saving\n a bunch of operational costs for the company;\n
    2. \n
  2. \n This could be done via two main routes: giving the dev teams a\n simple tool to work with production components in a correct way\n and double-check themselves...\n
    3. \n
  3. \n ...and, secondly, allowing designers to communicate with devs\n across the company in a very clear way by giving them design\n guidelines for different parts of Avito’s design system.\n
    4. \n
\n

\n As a relatively old business, Avito’s codebase evolution was not\n always systematic. Hence, we were facing different code styles,\n different code conventions, and technologies all mixed up. This, in\n turn, led to a lot of different ways colors were represented in\n code.\n

\n

\n WDS looked at the data, interviewed several devs from different\n teams, and saw an opportunity to save precious time for all parties.\n

\n

\n Avito has a palette of approximately 40 colors at the time, and yet\n we saw more than 2000 color variations in code, plus, about 8000\n instances of these two thousand colors were scattered historically\n in production code.\n

\n

\n Developers were wasting time trying to figure out what is the right\n way to use Avito colors, which colors were experimental and which\n were just plain obsolete. Designers also needed an opportunity to\n see which colors are common in existing Avito, and which should not\n be used due to their overall scarcity.\n

\n

\n This desperately needed to be fixed. And we’ve made a tool just for\n that.\n

\n
\n
\n

Testing and Making the Adjustments

\n

\n First, we’ve made a web app crawling through all the repos and\n analyzing the colors in the code.\n

\n

\n It showed statistics of color usage, and in case the particular\n color was not in our palette, showed the closest “correct” color\n from the brand palette. The process of figuring out the criteria of\n what is a close color match and what’s not was quite a challenge in\n itself. Finally, we’ve achieved a good result but decided that in\n controversial cases designers can choose the most fitting color\n manually.\n

\n

\n One of the app killer features was that it was able to create code\n patches on the go for the specific part of code. Then, this patch\n could be easily handed over to the product team developer\n responsible for the code directly.\n

\n

\n We’ve understood, that not all colors should be fixed: some of them\n were not matching color palette intensionally, i.e. colors in svg\n illustrations or colors in some promotional webpages. So, we\n excluded those parts of the codebase.\n

\n
\n
\n

Results

\n

\n WDS team made a huge effort and delivered a tool allowing to save\n time for both designers and developers.\n

\n

\n This tool showed the usage stats for all the colors in the Avito\n website production code.\n

\n

\n It also was able to generate code patches to fix “rogue” colors\n semi-automatically by devs in the product teams.\n

\n

\n Designer and developer experiences were improved dramatically, and the\n sheer number of legacy colors was reduced significantly (to\n approximately 400 in promotional materials or illustrations).\n

\n

\n Web Design System team worked out the guides for color usage in\n collaboration with other product designers in a series of workshops.\n

\n

\n An important part of every designer’s professional work is knowledge\n sharing, so we’ve prepared a public talk for the Avito Design Meetup\n about our interim results.\n

\n
\n
\n );\n }\n}\n\nconst Section = styled.section`\n padding: 0;\n p {\n color: #000;\n }\n\n &:first-child {\n margin: 8rem 0 2rem;\n }\n\n &.typeA,\n &.typeB,\n &.typeC {\n border-radius: 0.5rem;\n padding: 1rem;\n }\n\n &.typeA {\n background: #ffd84d;\n }\n\n &.typeA p,\n &.typeB p,\n &.typeC p {\n color: #000;\n }\n\n & > img,\n & > iframe {\n width: 100%;\n margin: 4rem 0;\n }\n\n h2 {\n text-align: left;\n color: #000;\n }\n\n &.secondaryHolder {\n display: flex;\n justify-content: space-between;\n align-items: top;\n }\n\n & .secondary {\n border-radius: 0.5rem;\n padding: 1.5rem;\n background: rgba(232, 233, 239, 1);\n // background: #FFD84D;\n width: 28rem;\n }\n\n @media (max-width: 1024px) {\n &.secondaryHolder {\n flex-direction: column;\n }\n\n & .secondary {\n width: 100%;\n margin: 0 0 3rem;\n }\n }\n\n .secondary h2,\n .secondary p {\n text-align: left;\n color: #000;\n padding: 0;\n }\n\n .secondary a {\n color: #000;\n text-decoration: none;\n border-bottom: 4px solid rgba(0, 0, 0, 0.75);\n }\n\n .secondary a:hover {\n border-bottom: 4px solid #ffd84d;\n }\n`;\n\nexport default IndexPage;\n"],"sourceRoot":""}