Раф, ИИ‑ассистент

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

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

По итогу ревью определили то место, где Раф находится сейчас — в верхнем меню, которое дизайнеры и разработчики заботливо называют «Шапка» или «Header».

С расположением определились. Теперь настало время концепции. Для этого я не только смотрел лучшие практики на рынке, но и активно применял ИИ-инструменты. Это помогло мне сгенерировать 20+ анимированных вариантов, но они были далеки от идеала:

Основные принципы и ассоциации, которые я выделил для ассистента:

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

Идея показалась интересной и я сделал второй подход к ИИ-инструменту.

В этот раз картинка начала складываться. Хоть и выглядел Раф всё ещё сыро, но он ожил, с ним было приятно взаимодействовать. Прогресс был налицо:

Осталось упаковать все в презентацию.

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

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

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

Узнаете, откуда я взял стиль для оформления?

Как итог провели хакатон, на котором продуктовые дизайнеры и дизайнеры бренда искали тот самый образ Рафа. Вот что у них получилось:

Хакатон показал, насколько эффективной может быть коллективная работа. Решения и размышления во время хакатона от обеих команд меня очень порадовали и дали больше пищи для размышления.

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

Посмотрел, что выбранная палитра не противоречит существующим иконкам бренда и вписывается в стилистику:

Коричневый цвет был уже занят, а цитрусовый не самый распространенный и знакомый тип кофе — поэтому я остановился на варианте какао-лавандовой палитры:

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

На основе всей информации собрал презентацию и снова показал результаты доработок по Рафу руководителю, дизайн-менеджеру и дизайнерам бренда.

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

Я получил добро и ушел готовить необходимые материалы.

Так как объем статьи уже достаточно большой, опишу этот блок кратко:

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

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

Описал содержание и идеи для иллюстраций.

Вот какой результат мы получили от агентства: