{"id":7297,"title":"\u0417\u0430\u043a\u0430\u0442\u0438\u043b\u0438 \u0432\u0435\u0447\u0435\u0440\u0438\u043d\u043a\u0443 vc.ru. \u0420\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u044b\u043b\u043e","url":"\/redirect?component=advertising&id=7297&url=https:\/\/vc.ru\/promo\/300923-proveli-vecherinku-vc-ru-i-sdelali-ofis-uyutney-s-pomoshchyu-novogo-servisa-ot-ozon&placeBit=1&hash=1786c9dcf11a3b054c8e53004e27074664313ed4055e24064ede059ebc186db8","isPaidAndBannersEnabled":false}
Дизайн
Maria Verkhunova

Разработка своей дизайн-системы. Опыт «БАРС Груп»

Нехватка ресурсов – это когда пожар, вся вода идёт на тушение огня, а цветы поливать некогда.

Из твиттера сотрудников

На сегодняшний день наличие дизайн-системы в крупной ИТ-компании является практически правилом гигиены разработки. Все преимущества наличия готовых библиотек компонентов уже описаны не один раз и обсуждены на множестве конференций. Но здесь не обойтись без ремарки. В основном речь идет о b2c компаниях, где борьба за пользователя и его лояльность стоит на первом месте. Что же происходит в крупных ИТ-компаниях, где в основном разрабатываются сервисы, призванные автоматизировать государственные процессы?

"БАРС Груп" – вендор с 26-летней историей, целью которого много лет был перевод десктопного пользователя в облако. Компания старалась делать это безболезненно, т.к. заказчик "привык" видеть таблицы экселя и хотел перейти в облако максимально безболезненно, тщательно фиксируя это пожелание в ТЗ.

В последние годы фокус разработки в компании сменился на создание удобных цифровых сервисов и поэтому появилось повышенное внимание к дизайну интерфейсов: около 2-х лет назад сформирована полноценная UX/UI команда. Целью создания отдела изначально было решение оперативных задач, но со временем мы уперлись в нехватку собственных ресурсов, негибкий подход и отсутствие возможности контролировать и масштабировать дизайн в компании. Макеты разрабатывались в отделе фактически в вакууме, а производство реализовывало интерфейс на свое усмотрение.

Почему не раньше?

Зачастую, на разработку влияет не сколько сама компания, сколько специфика заказчика. И пока этот рынок не признает важность того или иного аспекта разработки – это не будет внедрено в принципе, если ты сам не докажешь обратное. Поэтому мы, осознавая свою ответственность перед пользователями, работаем над изменением процессов взаимодействия как с заказчиком, так и с производством. Сегодня мы расскажем свою небольшую историю подхода к созданию и внедрению дизайн-системы BIUX (бьюикс), которая является продуктом инициативы и собственного опыта. Текущая beta версия компонентов находится в процессе обкатки на крупном федеральном проекте и в ближайшем будущем мы сможем рассказать историю применения уже на практике.

История

Много лет enterprise рынок позволял разработке исключить прототипирование взаимодействия и дизайн в принципе. Все стороны были удовлетворены базовыми компонентами фреймворков из коробки и мало кто думал об удобстве: процесс должен был просто максимально привычно повторять текущий физический, а визуальная эстетика отвечала исключительно вкусовым предпочтениям лица принимающего решения. "Дизайном" называли разработку страницы авторизации, рабочего стола и, например, иконок. Аргументом данного подхода всегда был один тезис: сложный продукт для компетентных и обученных людей. Предполагалось, что только пользователь с определенными знаниями и прошедший обучение по работе с системой может ей пользоваться. Парадигма: "система диктует правила, а не пользователь" жила до наших дней. Сейчас ситуация меняется в лучшую сторону: стало проще доказать на цифрах затраты на обучение сотрудников и стоимость поддержки. Цифры убедительны.

В "БАРС Груп" есть продукты, которые призваны заменить импортные. Одной из них является платформа бизнес-аналитики Alpha BI (Альфа), которая работает по всех стране в корпорациях и госсистемах. C момента создания интерфейс разрабатывался на базовых компонентах фреймворка ExtJS, немного измененных на уровне CSS. Логика процессов в Альфе достаточно сложная, порог обучаемости высок, со временем накопились и производственные проблемы. В 2018 году производственная команда принялась работать над глобальными изменениями в архитектуре продукта и логикой процессов, в компании также появилось подразделение AI (т.к. в информационных системах на данный момент накоплены петабайты структурированных и неструктурированных данных) – всё это требует кардинальных изменений в подходах к производству. Для нас это стало мотивацией к тому, чтобы создать внутри компании инструмент, благодаря которому мы могли бы не только ускорять работу над дизайном и повысить качество UX, но и контролировать процесс разработки интерфейса в сложных продуктах. Упростить заведомо сложные бизнес-процессы - это всегда челлендж.

Прототип UI

Как мы к этому шли

Мы рады, что в гос проектах наконец появилась потребность в дизайне не только с точки зрения шрифт/цвет, но и удобства и скорости работы. Но традиция не закладывать на разработку дизайна достаточно времени сохранилась до сих пор. Это вынудило отдел думать о своей внутренней автоматизации для максимального ускорения работы. Поэтому вначале родилась идея создания внутренних библиотек, так называемого UI-kit.

На старте работы над BIUX мы изучали все существующие отечественные дизайн-системы, представленные в открытом доступе, исходники и подходы к разработке. Поработали с системой gov.design на одном федеральном проекте и буквально "прочувствовали" на себе что мы можем применить к своему опыту, а что не возьмем в силу специфики.

Первой сложностью, возникшей в процессе, стал сбор всей существующей базы компонентов, которые используются в продуктах компании. Системы большие, с большим жизненным циклом, и поэтому основную часть времени занял процесс систематизации, сбора и отбора "навороченных" компонентов. То есть там, где это реально было упростить – упрощали, где нет – закидывали в бэклог.

Следующий большой подготовительный этап – работа с размерами. В дизайн-системах для b2c продуктов с размерами дела обстоят несколько проще, т.к. в самих решениях нет сложных составных компонентов, которые могут включать в себя до 10 базовых. Наш пользователь заведомо следует по определенному заложенному сложному бизнес-процессу, где иногда упростить либо невозможно (это заложено в требованиях), либо потребуется полная переработка модуля, что может задействовать очень большое время.

Прототип функционального грида

Размеры

Для того, чтобы разработать понятную сетку размеров элементов, необходимо было проанализировать максимально нагруженные компоненты и посмотреть, что из этого можно оптимизировать, а что в ближайшем будущем невозможно. Пройдя этот этап, мы определили для себя список MVP базовых компонентов, их существующие размеры и начали работу над шаблонами. Со стороны это было похоже на игру в Лего, или матрешки.

На текущий момент в beta версии системы для каждого базового компонента существует три размера: S, M, L, где S – минимальный размер элемента, рассчитанный для использования в родительском компоненте, M – стандартный размер элемента, L – самый крупный, рассчитанный для единичного использования на обучающих, презентационных страницах, или же родительский составной компонент.

Такой подход облегчает коммуникацию с отделами аналитики и разработки, т.к. один раз объяснив суть подхода, в дальнейшем не нужно углубляться в нюансы каждого элемента.

Структура библиотек

Для себя мы определили удобную систему из нескольких подключаемых библиотек. Сами контролы (базовые компоненты системы), подключаемые иконки, файл цветов, файл с собранными компонентами для быстрой выгрузки для разработчиков и понятное превью. Все библиотеки связаны между собой и соответственно, изменения в одной влекут изменения в другой, что можно сразу отследить и оценить в комбинациях.

На текущий момент для нас остается нерешенной задача версионности. Мы изучали опыт команд из Рамблера и Mail.Ru, но пока для нас остается удобнее связка облако + бэкап, т.к. команда каждый день работает бок-о-бок и у каждого есть своя зона отвественности в системе. Но, я думаю, в ближайшее время мы будем пересматривать этот подход.

Цвета

"БАРС Груп" не выпускает продукты под своим брендом и фирменным стилем, все решения и кейсы "оборачиваются" под заказчика. Соответственно, базовая тема системы рассчитана на нейтральное использование и дальнейшую доработку под клиента. Для нас было важно обозначить суть компонента цветом (primary, positive, negative). Поэтому мы выделили в файл библиотеку цветов в которой UI-дизайнер может создать необходимую тему под заказчика и бесшовно прикрутить к файлу прототипа, в которой в данный момент работает UX-дизайнер. Все это ускоряет нашу работу минимум в два раза, в отличие от последовательного подхода разработки макетов.

Иконки

Одной из ярких визуальных проблем текущих решений является "карусель" из различных иконок. Можно на один и тот же процесс обнаружить совершенно разные иконки, которые применили разные дизайнеры на разных жизненных циклах решения (модули могут разрабатываться в течении лет). Помимо фиксирования правил использования иконок, мы решили стандартизировать описание и необходимые размеры (все в той же системе S M L). За правильностью использования иконок на текущий момент следят аналитики, поэтому обучение данных специалистов внутри компании для нас приоритетно. Иконки связаны с библиотекой цветов, для быстрой кастомизации. Пока есть моно версия, в процессе разработки комбинированные иконки с возможностью настройки нескольких цветов прямо в коде.

Компоненты в коде

Как говорит Юрий Ветров (директор по дизайну Mail.Ru): "Дизайн-система не может быть таковой, пока визуальный язык не реализован в коде."

Для нас очень остро стоит вопрос контроля дизайна в компании. Если учесть, что продуктовых подразделений в БАРС Груп больше 12 (примечание: бизнес-центров по каждому направлению, внутри которого может быть от одного до нескольких продуктов), то решение необходимо было найти максимально быстро. Так в нашей команде появился React-разработчик, который и реализовал текущую версию.

Данный фреймворк имеет большое комьюнити, хорошо развивается, и при разработке можно использовать тот подход, который больше нравится команде.

Святослав
Frontend-разработчик

В компании уже есть реализованные на нем решения и для нас было проще использовать React JS для того, чтобы показать "как это работает". Даже если бизнес-центр на текущий момент не может взять наши разработки в силу разницы в технологиях – можно проконтролировать функциональность и визуал.

В развитии реализация компонентов на Polymer, Vue и ExtJs силами инициативных разработчиков компании.

Если рассуждать реалистично – мы находимся в начале пути интеграции системы в производственные процессы компании. На текущий момент beta версия BIUX используется в одном крупном и в нескольких небольших проектах компании. Также все прототипы мы создаем сразу в системе, чтобы видеть "прообраз" системы на этапе прототипирования и не тратить время на пересогласование с заказчиком, а также высвобождаем время для интересных решений в UI. В этом году мы пишем документацию для сложных UX компонентов (которые будут доступны для внутреннего использования), будем продолжать работать над производственными процессами и обучением аналитиков и продуктовых команд.

Мы очень хотим масштабировать наш продукт на государственные проекты, показать на своем примере, что можно и нужно менять подход к разработке с учётом специфики заказчика и интересов пользователей.

Как региональной компании федерального уровня, нам было очень приятно попасть в каталог дизайн-систем DESIGN SYSTEMS CLUB. Самое главное, что мы поняли за прошлый год – инициатива даже в крупной компании, подкрепленная поддержкой и вдохновением коллег способна привести к настоящим изменениям, которые, казалось бы ничто не может сдвинуть с места.

{ "author_name": "Maria Verkhunova", "author_type": "self", "tags": [], "comments": 8, "likes": 24, "favorites": 56, "is_advertisement": false, "subsite_label": "design", "id": 58924, "is_wide": true, "is_ugc": true, "date": "Thu, 21 Feb 2019 14:57:42 +0300", "is_special": false }
0
8 комментариев
Популярные
По порядку
Написать комментарий...

А вы думали над переходом на Фигму?

1

Да, скетч для нас удобнее наличием большого количества плагинов, Principle и скоростью работы. Пока над системой работает небольшая команда — скетч в приоритете. Если потребуется расширение — будем думать, фигму как инструмент не отметаем :)

0

Плагины закрывают дыры Скетча, Фигме они не нужны. Даже для показывания макетов разрабам Скетчу нужен костыль в виде Zeplin. Principle поддерживает Фигму: https://www.figma.com/blog/animate-your-figma-designs-with-our-new-principle-integration/ У Фигмы лучшая поддержка дизайн-систем, версионность из коробки, ей не нужны пляски с облачными файловыми хранилищами, есть реалтайм коллаборация и гибкая настройка прав. Защитники Скетча обычно просто поленились разобраться. Скетч - динозавр. И они сами это знают. Новые инвестиции планируют направить на догон Фигмы.

1

А кнопочки в новом дизайн-системном интерфейсе так же теряются как в старом?

0

Понимаю вашу иронию. Именно это и мотивирует работать. Но прошу учитывать, что система на скрине (МИС) – это не просто приложение на андроид или IOS. Она разрабатывалась годами. И мы осознаем наш интерфейсный долг на текущий момент. Помимо дизайна, есть еще и архитектура, сложный бэк. Москва не сразу строилась :)

0

вот еще пример удачного системного решения, которое на практике оказалось не всегда удачным. Мне везет, снова 11й этаж: https://www.youtube.com/watch?v=G2Y0oqZOyl0

0

разве система не подразумевает что решение стало системным? Ребенок знает число 11, потому что живет на 11м этаже. Это частное решение. Но считать ребенок умеет пока только до 7, дальше путается. Alpha BI стала клевой, модной, современной - круто! Но это пока частное решение, пусть и построенное на некой системе. Его наличие не гарантирует что система подходит как решение для всего спектра продуктов БАРС Груп. Мы знаем. что можем нажать на 11, но пока не уверены - можем ли мы досчитать хотя бы до 10. Гёдель, конечно, скажет, что рано или поздно не сможем, но с одним частным решением до Курта нашего мы еще не дошли. А вдруг кнопочки станут красивыми, но снова сбегут? :-)

0

Хорошее начало:)

0
Читать все 8 комментариев
Бизнес на опечатках: в 50-х секретарше надоело ошибаться в документах, она взбила краску в блендере и создала корректор Статьи редакции

Бетт Несмит Грэм хотела сохранить в тайне изобретение, но о нём узнали коллеги, и она стала продавать им по 100 флаконов в месяц. О создании первых партий корректора в гараже, продажах на миллионы долларов и борьбу за управление собственной компанией — в пересказе The Hustle.

Машинистки в 1950-х. За печатной машинкой работала и сама Грэм, которая создала корректор, чтобы исправлять ошибки CNBC
ПСБ запустил личный кабинет для предпринимателей. Там можно следить онлайн за каждым своим терминалом

Сервис предоставляется бесплатно.

Инвесторы подняли на 1000% стоимость акций компании Phunware — разработчика приложения для президентской кампании Трампа Статьи редакции

Бывший президент объявил о запуске собственной соцсети и её выходе на биржу.

«Яндекс.Маркет»: в моем заказе вместо наушников оказалась бутылка из-под водки

Я давно хотела беспроводные наушники и наконец заказала себе Apple AirPods. Оформила заказ 15.10.2021 через Яндекс.Маркет в магазине Superbia.ru

Почему «без ТЗ результат ХЗ». Разбираем на примере CRM-систем

К нам пришел клиент, который уже пробовал внедрять CRM-систему, и принес наработки предыдущих интеграторов. У него была вроде бы работающая система, но никто ей не пользовался. В статье разберемся, почему так получается, и как делать так, чтобы такого не было.

Пример нотации согласовательного уровня Библиотека примеров BPMN
Как не попасть в карьерную ловушку тимлида: личный опыт

Кажется, что тимлиду просто некуда расти: дальше надо либо идти в менеджмент, либо наоборот, становиться узконаправленным разработчиком. По просьбе «Лаборатории Касперского» Евгений Мацюк, который прошел в компании неординарный путь, рассказал о своих карьерных развилках во время и после тимлидства, а также поделился опытом горизонтального роста.

Что сделать с таргетированной рекламой, чтобы получать больше охвата и конверсий. Часть вторая

Инсайты с конференции AdTalks Target

Travers – поиск инструкторов по активным видам спорта

Мы сделали второе приложение, раскатили сервис на всю Россию и изменили бизнес-модель. Многое благодаря пользователям vc.ru!

Исследование: сотрудники хотели бы иметь комнату отдыха, бесплатный сок, а работодатели уже готовы покупать ЗОЖ-снеки

Онлайн-сервис доставки продуктов и товаров СберМаркет и исследовательское агентство Research Me спросили сотрудников, как они хотели бы питаться в офисе и что в нем видеть. В опросе приняли участие более 1500 работающих людей по всей России. Сервис также спросил работодателей – В2В-клиентов СберМаркета: что они покупают в офис, что точно никогда…

Cloud CDN: что это такое, как устроено и кому нужно. Разбираем на примере бургеров

Cloud CDN — это сеть быстрой доставки статического контента в формате услуги облачного провайдера. Объяснить, как работает технология, проще всего на примере — сравнить Cloud CDN с популярным продуктом, который выглядит плюс-минус одинаково вне зависимости от того, заказали вы его в Москве, Питере или Нью-Йорке. Знакомьтесь: классический бургер.…

Главные новости недели: Apple MacBook Pro, новое название Facebook, запрет Samsung Pay

Говорим о главных новостях недели в подкасте Telegram-канала ForGeeks. Сегодня в гостях Павел Беседин, ведущий на Европе Плюс и гик. Мы обсудили, почему новые MacBook Pro такие крутые, зачем Facebook решил поменять название, запретят ли в России Samsung Pay и когда уже выпустят Cyberpunk 2077 для PlayStation 5. Слушайте, читайте и подписывайтесь.

null