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