Наш подход к дизайн-концепции, который экономит время и деньги

Меня зовут Максим Отмахов, я Product Design Lead первого в России experience driven агентства Antro. Сегодня я расскажу, как мы работаем над созданием дизайн-концепций в проектах и почему этот процесс выгоден для нас и для заказчика

2021 год, европейский бренд БАДов открывает новый юнит для США —интернет-магазин клубного типа.

Членство в клубе, по сути, платная подписка на особые условия покупки: меньшая стоимость и бесплатная доставка. Что-то вроде Сберпрайма для СберМаркета или Деливери Про.

Бренд позиционирует себя через честность и отсутствие рекламного булщита:

Основную задачу сформулировали так: «Донести суть клубного членства и его преимуществ через контент и стилистику». Мы учитывали планы по разработке мобильного приложения и сэкономили ресурсы заказчика на адаптацию.

Спойлер: не переживайте, у нас всё получилось, хоть и не без факапов.

Каждый наш проект начинается с интервью — дизайнеры общаются со всеми заинтересованными лицами по отдельности. Это позволяет

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

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

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

Наконец, после прототипов мы переходим к дизайну, где первый шаг — дизайн-концепция.

В проектировании мы часто используем усовершенствованную нами модель Дабл даймонд. Вот оригинальный вариант

Что мы добавили

При подготовке кейса мы узнали, что его создатели, Design Council, тоже обновили модель в 2019 году. Угадайте что? Новый «Framework for Innovation» включает все наши усовершенствования.

Открытие: подбор референсов

Референсы — это самая важная часть визуального дизайна. Казалось бы, ладно, в UX всё строится на логике, но тут-то UI! Можно ведь просто пофантазировать, да?

Нет. Мы не «рисуем», а разрабатываем дизайн-концепцию. Первый шаг для разработки чего-либо — проверить, решали ли люди эту задачу раньше, и как они это делали.

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

Определение: формируем визуальные направления

Делим доски по характеру, настроению, направлению дизайна или другим критериям, в зависимости от проекта — обычно, получается 3-5 направлений с собственной доской референсов.

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

Еще мы подбираем «амбассадора» — сайт, который лучше всего визуализирует основную идею доски. Если по референсам клиенту сложно ориентироваться, то «амбассадор» спасает ситуацию.

Развитие: выбор направления

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

Заказчик формирует фидбек, мы созваниваемся и обсуждаем все направления. Обычно, останавливаемся на одном, но иногда совмещаем сразу два.

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

Доставка: разработка дизайн-концепции

В этот раз сыграл человеческий фактор — мы решили, что готовы сделать всю страницу без согласований. Задизайнили главную, отполировали детали. Показали клиенту и… узнали, что «мише нужно делать всё по новой» (ссылка на видео, если вы не поняли мем).

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

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

Потихоньку мы согласовали все блоки и мобильную адаптацию.

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

А уже по итогу разработали сам дизайн.

В тг-канале «Счастье пользователя» мы скоро расскажем детали «опасного» лайфхака, который использовали на этом проекте.

Как мы используем нашу версию дабл даймонда для дизайн-концепции, пошагово.

Погружение (англ. discovery), дивергенция

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

Фокус (англ. define)

Дабл даймонд: обобщение информации.
Мы: кластеризуем, то есть собираем в группы, референсы по направлениям — получается несколько референсбордов. Это, конечно, не «проблема» в понимании методологии, но мир вообще не такой уж радужный и прекрасный

Развитие (англ. develop)

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

Реализация (англ. delivery)

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

Наш подход к работе нацелен на одну простую вещь — предсказуемый результат. Многие не против приятных сюрпризов. Только когда у вас жесткие сроки и понятные цели, сюрпризы вам не нужны. Особенно, неприятные, а их вероятность выше — у людей есть представления и ожидания, в которые нельзя попасть без коммуникации.

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

Такой подход можно применять везде: сервисы, приложения, корпоративные сайты и лендинги. Если вам нужна дизайн-концепция или что-то покрупнее, то оставляйте заявку у нас на сайте — мы отвечаем в течение 12 часов.

Ну а если вам просто было полезно, то ставьте +1, спорьте с нами в комментах и предлагайте способы получше. На связи!

#дизайн