Меня зовут Лёша, я дизайн-лид канала Альфа-Бизнес, курирую создание лучшей дизайн-системы для бизнеса. Сегодня расскажу вам, как дизайн-система работает на этапе Discovery. Будем разбираться на простой аналогии с фастфудом.
Любите фастфуд?
Я не отказываю себе в удовольствии заглянуть в фастфуд, такое вот guilty pleasure. На самом деле у продуктовой разработки и у ресторанов быстрого питания много общего.
Мы следуем заранее выстроенному процессу, соблюдаем стандарты, чтобы удовлетворять потребности клиента и приносить прибыль бизнесу. Звучит очень знакомо, потому что фактически это цель любой продуктовой команды.
Я, знаете, и сам своего рода повар
В свободное время я люблю готовить для себя и супруги. Приходят гости — готовлю для них по настроению из того, что есть в холодильнике. Исходя из количества гостей, готовка может пойти по двум сценариям.
Первый — я заранее знаю, по какому рецепту готовлю, чётко его соблюдаю и получаю ожидаемый результат. Во втором варианте я отбрасывают все страхи, начинаю экспериментировать, и будь что будет.
Даже во втором варианте я особо ничем не рискую. Самое страшное, что может случиться — мой кулинарный шедевр отправится в мусорку, с кем не бывает. Тогда я просто достану пельмени из морозилки и всё равно что-нибудь поем.
Любые изменения и эксперименты всегда связаны с риском. Чем крупнее компания, тем больше у неё репутационных, финансовых рисков, рисков потерять места в рейтингах — вот это вот всё. Но без экспериментов мы бы топтались на месте, а клиенты разбежались бы к более смелым и расторопным конкурентам по цеху.
Эксперимент — это шаг в будущее
Эксперименты двигают нас вперёд. Discovery — тот самый этап производственного процесса, где рождаются новые решения, влияющие на все цифровые каналы. В Альфа-Бизнесе их целых три: Web, MobileWeb и приложения для iOS / Android.
В рамках Discovery мы опираемся на знания и умения самых разных экспертиз, на актуальные тренды, аналитику рынка, обратную связь от пользователей и бизнеса, а также дополнительные исследования.
Чтобы совсем не улететь в космос, во время экспериментов нужно плотно стоять на ногах и иметь фундамент. Для нас таким фундаментом выступают сразу несколько сущностей: редполитика, техстек, фирменный стиль, политика безопасности, дизайн-система. Эти элементы служат точкой опоры и основой будущих инноваций.
В моей метафоре с фастфудом дизайн-система — это книга удачных рецептов и кулинарных техник. Мы ежедневно используем её в продуктовых командах и получаем в качестве бонусов качество и консистентность.
В дизайн-системе я вижу три главных преимуществах, которые роднят её с концепцией фастфуда:
- Приходя в любой ресторан сети, заказывая один и тот же бургер, вы ожидаете получить привычный вкус и обслуживание. Так же пользователь перемещается по вашему сервису, заходит из продукта в продукт и ожидает получить один и тот же цифровой опыт.
- В ресторанах чётко следуют рецептуре и техникам приготовления, поэтому клиенты быстрее получают заказы, а прибыль растёт. Дизайн-система предоставляет набор готовых решений, которые помогают командам не тратить время на перепридумывание и сосредоточиться на развитии клиентского опыта.
- Ресурсы не жгутся понапрасну. С фундаментом — отлаженными процессами и стандартизированным меню, запуск нового ресторана — это вопрос онбординга и обучения сотрудников.
По аналогии, в продукте нам проще масштабироваться и развивать бережливое производство. Не надо жечь ресурсы несколько раз: все ошибки совершены, всё происследовано, записано и учтено. Дизайн-система вбирает в себя лучшие практики, и благодаря использованию единой компонентной базы и паттернов запускать и масштабировать продукты гораздо проще.
От аналогий к рецептам и практике
Представим ситуацию: к нам пришла задача — добавить новое блюдо из говядины в меню ресторана — всё достаточно понятно.
У нас есть потенциальный контракт на поставку мяса на выгодных условиях. Тренды рынка показывают, что спрос на блюда из говядины будет только расти — огонь! Исследование потребности подтверждает, что клиентам хотелось бы видеть больше блюд из говядины — класс, карты сошлись.
Собирается рабочая группа, назначаются встречи, на которых определяются рамки проекта и образ результата. Через какое-то время наша команда дизайн-поваров возвращается с тремя разными решениями, у каждого из которых своя стоимость внедрения и скорость масштабирования.
В первом варианте хитрые дизайнеры взяли существующий компонент и придумали, как его использовать по-новому. Стоимость разработки такого решения будет минимальной, а скорость внедрения — практически мгновенной.
Всё, что нужно сделать со стороны дизайн-системы — актуализировать документацию. Сразу после этого любая команда может применять решение у себя в продукте.
Во втором варианте нас ждут лёгкие изменения: предположим, для нового блюда нужен другой хлеб — модификация компонента. Заменяем булочку на чиабатту. Это решение будет стоить чуть-чуть больше, а срок его внедрения увеличится. С точки зрения дизайн-системы необходимо доработать существующий компонент, не поломав логику, и обновить документацию.
Команда, которая захочет применить лёгкие изменения у себя в продукте, должна обновить версию дизайн-системы до актуальной, и дорога открыта, можно подавать продукт в меню.
Ну, и третий вариант — прорывной дизайн. Повара выходят с оригинальной идеей: допустим, это будет суп фо-бо из говядины. Проблема таких решений в том, что они не всегда учитывают требования всех продуктовых команд, которые используют компоненты дизайн-системы. Отсюда может возникнуть неконсистентность решений.
Представьте, что вы привыкли к определённому меню, у вас сформировано отношение к бренду или сети, и тут в ней появляется инородный элемент. Он может сработать как в негативную, так и в позитивную сторону. Это рискованно, поэтому сразу загружать новое решение в дизайн-систему не стоит.
Самое логичное здесь — позволить команде разработать и пропилотировать решение на своей стороне, обвесить метриками, собрать показатели эффективности и только потом думать о дальнейшей разработке и добавлении в дизайн-систему.
Итак, наши дизайн-повара поработали отлично. У нас есть три решения с сильными и слабыми сторонами. Рабочая группа, вооружившись метриками исследованиями и макетами, может решать, какое из них пустить дальше в разработку.
Пример Discovery в Альфа-Бизнесе
В одной из предыдущих статей я рассказывал про процесс обновления боковой навигации, уникального компонента, за поддержку и разработку которого отвечает продуктовая команда.
Старая версия меню была создана несколько лет назад. За это время в дизайн-системе произошли достаточно серьёзные изменения, влияющие на UI интерфейсов. Разобрав старую версию до уровня компонентов и токенов, обнаружится большое количество кастомов и устаревших элементов — цвет, контейнеры и т.д.
Помимо продуктовых гипотез, которые проверялись в ходе исследования, светлая версия меню переехала на актуальные компоненты и токены, что повлияло на консистентность интерфейса в целом.
Несмотря на то, что боковое меню фактически принадлежит конкретной продуктовой команде, оно используется во всех продуктах Альфа-Бизнес, что подводит нас к одному из главных преимуществ Discovery:
На Discovery выходит одна команда, а лучшие решения, которые на нём рождаются, получают все продукты.
Кстати, обновление в дизайн-системе происходит не только в формате Discovery, но и в стандартной продуктовой run-деятельности. Книга рецептов постоянно пополняется, а рецепты становятся более точными и вкусными.
Плюсы и ограничения дизайн-систем
В случае Альфа-Банка дизайн-система является полноценным участником каждого этапа производственного процесса, от проектирования до поддержки и устранения багов. Набор готовых общедоступных компонентов и документации служат фундаментом для экспериментов и инновационных решений.
У дизайн-системы есть и вторая функция — наблюдательная или даже надзорная. Она стоит на страже консистентности и единого пользовательского опыта, фиксируя и документируя как паттерны применения отдельных компонентов, так и проектирования типовых страниц или даже фрагментов сценариев.
Многие считают, что дизайн-система — это дополнительное ограничение, ведь её нужно соблюдать и поддерживать, да и вообще, как минимум сначала создать и внедрить.
Всё так, но когда речь идёт о небольших компаниях, где трудится парочка продуктовых команд, следить за консистентностью и единством цифрового опыта несложно. Паттерны и сценарии буквально передаются из уст в уста. Можно подойти к дизайнеру и спросить: «А как у тебя?», он ответит, вы переопылитесь, и будет здорово.
Я искренне считаю, что для крупной компании дизайн-система — это must have. В Альфа-Бизнесе более 100 команд, и дизайн-система позволяет нам изобретать и улучшать цифровые продукты с единым пользовательским опытом.
На этом всё. Делитесь, есть ли в вашей компании дизайн-система и Design Discovery.
Автор:
Алексей Кухта, ведущий дизайнер цифровых продуктов в Альфа-Банке
