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

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

Что за проект?

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

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

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

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

Задача концепции

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

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

Руки на стол, ещё рано рисовать

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

  • получить максимум информации на старте
  • подсветить несоответствия в ответах разных отделов и топов
  • синхронизировать видение и требования всех сторон

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

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

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

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

При чём здесь Дабл даймонд?

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

Наш вольный перевод схемы «Double Diamond»

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

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

Совпадение? Не думаю

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

Чуть более вольный перевод схемы «Framework for Innovation»

Как мы используем дабл даймонд для дизайн-концепции

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

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

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

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

Пример начала для этапа дизайн-концепции

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

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

Не подбирайте направления «лишь бы были». Именно по ним дальше разрабатывается дизайн-концепция.

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

Пример оформленного направления

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

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

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

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

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

Евгений Князев, CEO Antro

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

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

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

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

Первая версия дизайн-концепции

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

Да, мы много коммуницируем с заказчиком и, обычно, не работаем с теми, кто не хочет участвовать в собственном проекте. Это просто невыгодно — вероятность негативного фидбека и требования всё переделать слишком высока.

Евгений Князев, СЕО Antro

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

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

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

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

Теперь коротко

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

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

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

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

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

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

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

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

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

Ну каковы процессы!

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

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

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

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

Евгений Князев, СЕО Antro

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

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

0
26 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Serge Demichev

Люто плюсую, вот эта псевдо экспертиза поднадоела. Простые вещи пытаются усложнить и подать по соусом май концепшн из вери грейт. Мы криейт вери экспенсив кейсы виз аудишн конкурентс. Только на макет посмотрел: слой 67, 68… об этом многое говорит)

Ответить
Развернуть ветку
Antro
Автор

Давайте по очереди:
1. «всё конечно прикольно, собрать картинки из всяких фреймворков - перевести и рассказывать простые вещи о пользовательском опыте и интерфейсе заумными выражениями на три листа)» — вы явно плохо и невнимательно читали статью. Мы выкристаллизовали свой подход, о котором и рассказываем

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

В общем, спасибо вам тоже за бессмысленный комментарий, DIVO! Это помогает статье продвигаться вверх по ленте ❤️

3. Serge Demichev, сейчас бы слои фреймов для референсов называть специально — нам ведь больше нечем заняться :)

Ответить
Развернуть ветку
Упоротый кролик

Вам дали понять, что нужно писать на человеческом языке. А вы несёте чушь уважаемый) Так что идите выкристаллизовывать свой подход в свой двор.

Ответить
Развернуть ветку
Antro
Автор

Это наш блог и наш двор, по вашей аналогии :) Если не за что покритиковать, то можно всегда докопаться до англицизмов — уже надоело, если честно

Пишите по фактам, а субъективщину и вкусовщину защищайте в своём дворе

Ответить
Развернуть ветку
Упоротый кролик

А я и пишу по факту и комментатор свыше и другие о том же написали. Вот честно, критиковать есть за что. Глаза кровоточат не от англицизма, а от понимания того, что у вас нулевой словарный запас и вы восполняет его англицизмом. И ладно бы только в блоге, но на сайте агенства, и на сайтах клиентов, особенно те, которые вы позиционируете как простой и понятный для любой аудитории. Даже там ощущается отсутствие у пишущего словарного запаса, который впринципе должен быть побогаче чем у обывателя. И при этом демонстрирует свое пренебрежение.
Это признак явно необразованного человека, который не ходил дальше стен современных курсов.
Если вы не умеете воспринимать критику, это только ваши проблемы.

Ответить
Развернуть ветку
Antro
Автор

Евгений, хорошо, давайте мы потратим время и ещё раз ответим серьёзно.

Это не факты. Вы не привели ни одного конкретного кейса. Особенно интересно вот это «на сайтах клиентов, особенно те, которые вы позиционируете как простой и понятный для любой аудитории». В остальном еще раз распишем каждую фразу, что так взволновала вас и других комментаторов:
1. Перевести название подхода «experience driven», которое пришло из английского? В русском есть понятие «опытоцентричность», но оно не передаёт в полной мере сути этого подхода. На наш взгляд, приходить к нам и требовать переводить эту часть также нелепо, как требовать от «data driven» переводить его как «информационноцентричный», «данныецентричный» или «основывающийся на данных».
2. «UX» — пользовательский опыт. Серьезно предлагаете не использовать распространенное сокращение, которое пишут в каждой компании в вакансии? Откройте hh, проверьте.
3. «Бест практиз» — абсолютно то же самое, что и выше. Во-первых, перевод очевиден, если у вас был английский хотя бы в начальной школе. Во-вторых, для людей, знакомых с термином «бест практиз», он значит чуть больше, чем просто «лучшие практики».
4. Дабл даймонд — это вообще название. Его, конечно, переводят как «двойной алмаз», но снова, на наш взгляд, это кринж.
5. «Референсборд» также прекрасно расшифровывается в контексте статьи и с оконченной начальной школой. Не говоря уже о том, что мы используем и словосочетание «доска референсов» в рамках статьи.

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

Так и где же здесь конструктивная критика? Нам не обидно, но нам искренне это надоело — самоутверждаться идите в другое место. Даже если вы можете оценить только форму, то окей, раскритикуйте нас конкретно. Так, чтобы мы отвертеться не могли. Ведь вы явно больший эксперт, чем мы, раз позволяете себе подобные оценки.

К конструктивной критике мы прислушаемся, как и всегда делаем :)

Ответить
Развернуть ветку
Упоротый кролик

У вас все так легко, потому что вы не видите проблем. По такой логике многие необразованные живут.
Если вы не умеете адаптировать понятия с английского это только ваши проблемы, и не надо сваливать это все на плечи читающих ваши вырвиглазные тексты. С experience driven все гораздо легче, смотри скрин, даже в школе не нужно учить английский. А в отношении агенства это понятие можно написать как опытное агенство, профессиональное агенство.
Но даже в контексте статьи и вашей неадекватной реакции и неспособности писать для людей вас сложно назвать профессионалами, о чем также говорят кейсы и сайт агентства.

Ответить
Развернуть ветку
Antro
Автор

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

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

Ну а наш запрос вы проигнорировали, само собой. Скриншот, к сожалению, ничего, кроме смеха вызвать не может. Вас не смутило, что переводили вы два слова, а получилось одно? В том числе это показывает, что и сайт вы наш не читали — у нас там целый блок на весь экран, который объясняет, в чем суть подхода. И поверьте, это не о том, что мы «опытные» или «профессиональные». Наш опыт и профессионализм мы доверяем оценивать клиентам и коллегам по рынку, причем конкретно и прозрачно, без оценочных суждений

Ответить
Развернуть ветку
Упоротый кролик

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

Ответить
Развернуть ветку
Eazy Haze
профессиональное агенство

Это больший кринж, чем англицизмы, лол.

Ответить
Развернуть ветку
Dmitriy Filippov

учись работать с возражениями, а не оценивать ценность комментариев

Ответить
Развернуть ветку
Antro
Автор

Мы, конечно, дико извиняемся, но 🤦

Ответить
Развернуть ветку
Александр Дизайнер

Могу охарактеризовать двумя буквами УГ. Это без хейтерства. Спросите почему у тех, к кому прислушиваетесь.

Ответить
Развернуть ветку
Antro переехало

Ох, Александр, понимаю, это ведь не статья о мобильной и адаптивной версии сайта в 2021 :)

Ответить
Развернуть ветку
Eazy Haze
Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Eazy Haze

Самореализуйся, я не знаю, успехов там добейся, а не сублимируй свою неполноценность сюда)0

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Not Now

Я product design lead первого в россии experience driven агентства…
Дабл даймонд энд ко креэйшн для гибкого подхода и прогрессив джипега…

Ну как перестать орать

Ответить
Развернуть ветку
Antro
Автор

Спасибо, что оставляете эти бессмысленные комментарии с мемами из нулевых. Это помогает статье продвигаться вверх по ленте ❤️

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

Ответить
Развернуть ветку
Not Now

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

Ответить
Развернуть ветку
Максим Отмахов из Antro.cx

Всем привет)

Ответить
Развернуть ветку
Dmitriy Filippov

Это невероятно плохо

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

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

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

и в статье невероятно много уделено описанию че и как вы там делаете, что мягко говоря никому не интересно (отдельный шик что это типа агентство пишет) но практически ничего нет про выгоды заказчика

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

Ответить
Развернуть ветку
Antro
Автор

Вы невнимательно читали статью, там множество раз подчеркивалось, какую выгоду для заказчика несёт такой подход:
1. Предсказуемый по качеству результат.
2. Скорость.
3. Вовлеченность в процесс, прозрачность.
4. Стоимость.

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

«в статье невероятно много уделено описанию че и как вы там делаете, что мягко говоря никому не интересно» — вам бы сюда пруфов как-то завезти. А то вот у нас клиенты спрашивают, другие дизайнеры спрашивают, а вы пришли и решили, что они никто :)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
23 комментария
Раскрывать всегда