Дизайн-система для корпоративных интерфейсов «АльфаСтрахования» (практический кейс)
Разработали дизайн-систему и насытили её сложносоставными UI-элементами. Создали принцип постановки задач для дизайнера интерфейсов и протестировали процесс производства дизайна.
Задача
Создать дизайн-систему в Figma на основе многочисленных наработок компании «АльфаСтрахование».
Опыт
Раньше мы уже делали редизайн интерфейса рабочего места и корпоративного портала для «АльфаСтрахования».
Вводные
У АльфаСтрахования есть семейство внутренних продуктов, порядка десятка.
Интерфейсы у всех продуктов разные. Какие-то проектировались еще на Axure, что-то нарисовано совсем недавно. Продукты развиваются независимо, но все они объединены на платформе для агента.
Дизайн-системы нет. Это создает проблемы.
Проблемы, которые мы решили
- Отсутствует стандарты и правила постановки задач, проектирования, передачи в разработку. Это усложняет, удлиняет и удорожает процесс создания и поддержки продуктов, а также повышает требования к квалификации дизайнеров и разработчиков.
- Повышается нагрузка на пользователя, которому нужно переключаться между визуально, структурно, иерархически разными интерфейсами. Страховой агент не хочет тратить время на изучение продуктов, которые мог бы предлагать клиентам, компания теряет деньги.
Почему мы?
Заказчик обратился к нам после того, как больше года безуспешно пытался найти на рынке труда штатного дизайнера, чьей квалификации хватило бы для этого проекта.
Что мы сделали — и почему
Создание дизайн-системы в конкретной ситуации конкретной компании отличается от идеализированного плана, описанного в многочисленных статьях. Отдельно хотим поблагодарить всю команду заказчика и менеджера Алексея Тушканова. За что — расскажем по пунктам.
1. Спроектировали общее навигационное решение для платформы, которая объединяет разные продукты
Навигация, поиск, система уведомлений и другие сквозные элементы визуально и интерфейсно объединили разные продукты в единую экосисистему рабочего места страхового агента.
Такая задача требует от дизайнера умения работать на высоком уровне интерфейсной абстракции. Не погружаться в детали всех продуктов (это попросту бесконечно долго), но при этом учесть особенности каждого и, главное, взаимосвязь их между собой.
Мы не рекомендуем начинать с «обвязки», если у команды нет достаточного опыта работы со сложными дизайн-системами.
2. Разработали структуру дизайн-системы в Figma
Даже если элементов системы не слишком много, полезно сразу разделить библиотеки на отдельные фигма-файлы: иконки, логотипы, веб-элементы и т.д.
- Команды дизайнеров смогут подключать только необходимые в определенных проектах библиотеки.
- Удобно разграничивать зоны ответственности между дизайнерами, поддерживающими и обновляющими библиотеки.
- Это оптимизирует работу Фигмы, при разрастании файлов она начинает «тупить».
3. Разработали визуально-иерархическую концепцию UI-элементов
Цвета, оттенки, шрифты, отступы, вложенность элементов — в профессиональных интерфейсах все это подчинено задаче быстрой ориентации пользователем в UI.
Наша экспертиза в том, чтобы разработать сложную и универсальную систему крупноблочных UI-элементов, которая будет «работать» на всех страницах всех продуктов. И при этом учесть видение и пожелания стейкхолдеров к внешнему виду системы.
Если совсем упростить, то на одной странице выбранный оттенок серого и цветовые акценты будут помогать пользователю ориентироваться, а на другой, структура и плотность которой отличается, отвлекать. Мы добились консистентности и универсальности.
Как? Проверяли концепцию на множестве экранов разных продуктов. Она оказалась полной и устойчивой к развитию.
4. Насытили дизайн-систему сложносоставными UI-элементами
Чтобы сложный интерфейс был компактным, но при этом удобным, используются сложносоставные UI-элементы. Их отрисовка – сама по себе задача повышенной сложности. А систематизация под силу только специалистам уровня Senior.
Технически «насыщение» состоит из отрисовки большого количества разнообразных интерфейсных блоков реально существующего продукта в соответствии с концепцией. Разработанные в процессе решения пополняют дизайн-систему.
5. Выработали принцип постановки задач для дизайнера интерфейсов, работающего с дизайн-системой
В отличие от обычного проектирования, когда сразу отрисовываются экраны флоу, а потом идет их насыщение частными случаями и вариантами, системная работа над профессиональным интерфейсом строится наоборот. Сначала прорабатываются состояния каждого блока, и только потом из них собираются готовые экраны.
При этом на детальную проработку уходит 90% времени, и все это время менеджмент не видит понятных результатов.
6. Провели тестирование всего процесса производства дизайна, включая передачу в разработку
Пилотное применение дизайн-системы случилось с нашим участием на примере одного из продуктов. И это тоже важно, потому что автор дизайн-системы должен убедиться, что она пригодна в работе.
7. Обучили и аттестовали штатного дизайнера для самостоятельной работы с ДС
Хотя работа с уже существующей дизайн-системой требует меньшей квалификации, чем ее создание, это не базовый навык любого дизайнера. Мы аттестовали штатного дизайнера «АльфаСтрахования» и убедились, что его квалификации будет достаточно.
8. Поддержали внедрение дизайн-системы. Теперь с ней можно работать без внешних специалистов (нас)
Большинство вопросов по использованию дизайн-системы возникает, только когда с ней начинают работать. Поэтому на протяжении как минимум пары месяцев необходима поддержка..
После такого объема стартовой работы дальнейшая поддержка и развитие дизайн-системы может происходить без нашего участия
Что говорит заказчик
Понравилось работать с «Собакой Павловой». Проработали сложные витиеватые сценарии, сформировали базовый набор компонентов для дизайн-системы, навели порядок в Фигме. Периодически продолжаем обращаться за помощью в проработке сложных мест в юзер-флоу. Рекомендую :)
Слово директору
Когда у компании много интерфейсных наработок, их можно унифицировать. Необязательно нанимать для этого большой штат дизайнеров: достаточно пары опытных специалистов, уже собиравших дизайн-системы, и менеджера. Они возьмут один показательный фрагмент ваших интерфейсов, отрисуют его, соберут элементы, опишут, – и это станет началом вашей дизайн-системы.
У нас можно получить таких дизайнеров в свой проект.
______________________________________________________________________________
Подписывайтесь на Telegram-канал.
Хотите так же? Пишите на we@sobakapav.ru.
Кейс на нашем сайте.
Спасибо за статью!
Подскажите, вы выкладываете свои проекты в Figma Community?
Тоже сейчас участвую в работе над небольшой дизайн-системой, полезно было бы посмотреть на проекты крупных команд изнутри)