Как дизайн-система помогает дизайнеру не налажать

Меня зовут Лёша, я дизайн-лид канала Альфа-Бизнес, курирую создание лучшей дизайн-системы для бизнеса. Сегодня расскажу вам, как дизайн-система работает на этапе Discovery. Будем разбираться на простой аналогии с фастфудом.

Любите фастфуд?

Я не отказываю себе в удовольствии заглянуть в фастфуд, такое вот guilty pleasure. На самом деле у продуктовой разработки и у ресторанов быстрого питания много общего.

Мы следуем заранее выстроенному процессу, соблюдаем стандарты, чтобы удовлетворять потребности клиента и приносить прибыль бизнесу. Звучит очень знакомо, потому что фактически это цель любой продуктовой команды.

Я, знаете, и сам своего рода повар

В свободное время я люблю готовить для себя и супруги. Приходят гости — готовлю для них по настроению из того, что есть в холодильнике. Исходя из количества гостей, готовка может пойти по двум сценариям.

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

Даже во втором варианте я особо ничем не рискую. Самое страшное, что может случиться — мой кулинарный шедевр отправится в мусорку, с кем не бывает. Тогда я просто достану пельмени из морозилки и всё равно что-нибудь поем.

Любые изменения и эксперименты всегда связаны с риском. Чем крупнее компания, тем больше у неё репутационных, финансовых рисков, рисков потерять места в рейтингах — вот это вот всё. Но без экспериментов мы бы топтались на месте, а клиенты разбежались бы к более смелым и расторопным конкурентам по цеху.

Эксперимент — это шаг в будущее

Эксперименты двигают нас вперёд. Discovery — тот самый этап производственного процесса, где рождаются новые решения, влияющие на все цифровые каналы. В Альфа-Бизнесе их целых три: Web, MobileWeb и приложения для iOS / Android.

В рамках Discovery мы опираемся на знания и умения самых разных экспертиз, на актуальные тренды, аналитику рынка, обратную связь от пользователей и бизнеса, а также дополнительные исследования.

Чтобы совсем не улететь в космос, во время экспериментов нужно плотно стоять на ногах и иметь фундамент. Для нас таким фундаментом выступают сразу несколько сущностей: редполитика, техстек, фирменный стиль, политика безопасности, дизайн-система. Эти элементы служат точкой опоры и основой будущих инноваций.

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

В дизайн-системе я вижу три главных преимуществах, которые роднят её с концепцией фастфуда:

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

2. В ресторанах чётко следуют рецептуре и техникам приготовления, поэтому клиенты быстрее получают заказы, а прибыль растёт. Дизайн-система предоставляет набор готовых решений, которые помогают командам не тратить время на перепридумывание и сосредоточиться на развитии клиентского опыта.

3. Ресурсы не жгутся понапрасну. С фундаментом — отлаженными процессами и стандартизированным меню, запуск нового ресторана — это вопрос онбординга и обучения сотрудников.

   По аналогии, в продукте нам проще масштабироваться и развивать бережливое производство. Не надо жечь ресурсы несколько раз: все ошибки совершены, всё происследовано, записано и учтено. Дизайн-система вбирает в себя лучшие практики, и благодаря использованию единой компонентной базы и паттернов запускать и масштабировать продукты гораздо проще.

От аналогий к рецептам и практике

Представим ситуацию: к нам пришла задача — добавить новое блюдо из говядины в меню ресторана — всё достаточно понятно.

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

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

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

Всё, что нужно сделать со стороны дизайн-системы — актуализировать документацию. Сразу после этого любая команда может применять решение у себя в продукте.

Во втором варианте нас ждут лёгкие изменения: предположим, для нового блюда нужен другой хлеб — модификация компонента. Заменяем булочку на чиабатту. Это решение будет стоить чуть-чуть больше, а срок его внедрения увеличится. С точки зрения дизайн-системы необходимо доработать существующий компонент, не поломав логику, и обновить документацию.

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

Ну, и третий вариант — прорывной дизайн. Повара выходят с оригинальной идеей: допустим, это будет суп фо-бо из говядины. Проблема таких решений в том, что они не всегда учитывают требования всех продуктовых команд, которые используют компоненты дизайн-системы. Отсюда может возникнуть неконсистентность решений.

Представьте, что вы привыкли к определённому меню, у вас сформировано отношение к бренду или сети, и тут в ней появляется инородный элемент. Он может сработать как в негативную, так и в позитивную сторону. Это рискованно, поэтому сразу загружать новое решение в дизайн-систему не стоит.

Самое логичное здесь — позволить команде разработать и пропилотировать решение на своей стороне, обвесить метриками, собрать показатели эффективности и только потом думать о дальнейшей разработке и добавлении в дизайн-систему.

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

Пример Discovery в Альфа-Бизнесе

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

Старая версия меню была создана несколько лет назад. За это время в дизайн-системе произошли достаточно серьёзные изменения, влияющие на UI интерфейсов. Разобрав старую версию до уровня компонентов и токенов, обнаружится большое количество кастомов и устаревших элементов — цвет, контейнеры и т.д.

Помимо продуктовых гипотез, которые проверялись в ходе исследования, светлая версия меню переехала на актуальные компоненты и токены, что повлияло на консистентность интерфейса в целом.

Несмотря на то, что боковое меню фактически принадлежит конкретной продуктовой команде, оно используется во всех продуктах Альфа-Бизнес, что подводит нас к одному из главных преимуществ Discovery:

На Discovery выходит одна команда, а лучшие решения, которые на нём рождаются, получают все продукты.

Кстати, обновление в дизайн-системе происходит не только в формате Discovery, но и в стандартной продуктовой run-деятельности. Книга рецептов постоянно пополняется, а рецепты становятся более точными и вкусными.

Плюсы и ограничения дизайн-систем

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

У дизайн-системы есть и вторая функция — наблюдательная или даже надзорная. Она стоит на страже консистентности и единого пользовательского опыта, фиксируя и документируя как паттерны применения отдельных компонентов, так и проектирования типовых страниц или даже фрагментов сценариев.

Многие считают, что дизайн-система — это дополнительное ограничение, ведь её нужно соблюдать и поддерживать, да и вообще, как минимум сначала создать и внедрить.

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

Я искренне считаю, что для крупной компании дизайн-система — это must have. В Альфа-Бизнесе более 100 команд, и дизайн-система позволяет нам изобретать и улучшать цифровые продукты с единым пользовательским опытом.

---

На этом всё. Делитесь, есть ли в вашей компании дизайн-система и Design Discovery.