Наш подход к дизайн-концепции, который экономит время и деньги
Меня зовут Максим Отмахов, я Product Design Lead первого в России experience driven агентства Antro. Сегодня я расскажу, как мы работаем над созданием дизайн-концепций в проектах и почему этот процесс выгоден для нас и для заказчика
Что за проект?
2021 год, европейский бренд БАДов открывает новый юнит для США —интернет-магазин клубного типа.
Членство в клубе, по сути, платная подписка на особые условия покупки: меньшая стоимость и бесплатная доставка. Что-то вроде Сберпрайма для СберМаркета или Деливери Про.
Бренд позиционирует себя через честность и отсутствие рекламного булщита:
- рассказывает, на чём зарабатывает, и не использует маркетинговые уловки
- строит комьюнити для людей, которые интересуются здоровым образом жизни
- делится с комьюнити полезным контентом и рассказывает о том, как может в этом помочь
Задача концепции
Основную задачу сформулировали так: «Донести суть клубного членства и его преимуществ через контент и стилистику». Мы учитывали планы по разработке мобильного приложения и сэкономили ресурсы заказчика на адаптацию.
Спойлер: не переживайте, у нас всё получилось, хоть и не без факапов.
Руки на стол, ещё рано рисовать
Каждый наш проект начинается с интервью — дизайнеры общаются со всеми заинтересованными лицами по отдельности. Это позволяет
- получить максимум информации на старте
- подсветить несоответствия в ответах разных отделов и топов
- синхронизировать видение и требования всех сторон
Из интервью мы выделяем важные мысли — получается конспект для быстрого согласования. Так мы снижаем риски и для себя, и для заказчика.
Дальше, в зависимости от проекта: формируем бизнес-требования, проводим исследования, анализируем и бенчмарчим конкурентов, составляем техническое задание и множество других вариантов.
На основе результатов этапов исследования и анализа мы разрабатываем прототипы — монохромные страницы, помогающие определить структуру и функции продукта.
Наконец, после прототипов мы переходим к дизайну, где первый шаг — дизайн-концепция.
При чём здесь Дабл даймонд?
В проектировании мы часто используем усовершенствованную нами модель Дабл даймонд. Вот оригинальный вариант
Что мы добавили
- итерации — бриллиантов часто было больше двух. Плюс, мы сторонники lean-подхода, гибкой методологии и прогрессив джипега
- коммуникацию строго через визуал и референсы. Мы пытались иначе, но иначе никак с:
- вовлечение команды заказчика в процесс — это лучший способ совмещать экспертизу, быть синхронизированными и получать нужный результат
Совпадение? Не думаю
При подготовке кейса мы узнали, что его создатели, Design Council, тоже обновили модель в 2019 году. Угадайте что? Новый «Framework for Innovation» включает все наши усовершенствования.
Как мы используем дабл даймонд для дизайн-концепции
Открытие: подбор референсов
Референсы — это самая важная часть визуального дизайна. Казалось бы, ладно, в UX всё строится на логике, но тут-то UI! Можно ведь просто пофантазировать, да?
Нет. Мы не «рисуем», а разрабатываем дизайн-концепцию. Первый шаг для разработки чего-либо — проверить, решали ли люди эту задачу раньше, и как они это делали.
Ищем везде, где можем. Собираем доски из скриншотов подходящих сайтов. Это могут быть, как серии экранов, так и небольшие элементы сайта.
Определение: формируем визуальные направления
Делим доски по характеру, настроению, направлению дизайна или другим критериям, в зависимости от проекта — обычно, получается 3-5 направлений с собственной доской референсов.
Каждую из досок мы кратко описываем и даём ей название. Например, «технологичность», «фокус на иллюстрации» или «для детей».
Еще мы подбираем «амбассадора» — сайт, который лучше всего визуализирует основную идею доски. Если по референсам клиенту сложно ориентироваться, то «амбассадор» спасает ситуацию.
Развитие: выбор направления
Рассказываем о референсбордах через лумы — видео-презентации с трансляцией экрана и маленьким кружочком спикера. На видео подробно рассказываем о референсах: подмечаем детали, которые характерны для направления и говорим о возможных ограничениях.
Заказчик формирует фидбек, мы созваниваемся и обсуждаем все направления. Обычно, останавливаемся на одном, но иногда совмещаем сразу два.
На этом шаге может случиться и новая итерация первого даймонда, если мы нащупаем что-то новое в процессе обсуждения или выделим поднаправления. Итеративный подход изначально мы заимствовали из дизайн-мышления
Доставка: разработка дизайн-концепции
В этот раз сыграл человеческий фактор — мы решили, что готовы сделать всю страницу без согласований. Задизайнили главную, отполировали детали. Показали клиенту и… узнали, что «мише нужно делать всё по новой» (ссылка на видео, если вы не поняли мем).
Из-за самоуверенности потеряли и lean-подход, и прогрессив джипег, и деньги, и время. В общем, ценой всего, как говорил Танос.
Провели ретро и усвоили урок. Теперь мы дизайним блоками с регулярным фидбеком от заказчика.
Потихоньку мы согласовали все блоки и мобильную адаптацию.
Сроки поджимали, поэтому для скорости мы подставляли скриншоты других сайтов, лишь меняя заголовки. Так мы сэкономили время и быстро исправили ошибки своей самоуверенности.
А уже по итогу разработали сам дизайн.
В тг-канале «Счастье пользователя» мы скоро расскажем детали «опасного» лайфхака, который использовали на этом проекте.
Теперь коротко
Как мы используем нашу версию дабл даймонда для дизайн-концепции, пошагово.
Погружение (англ. discovery), дивергенция
Дабл даймонд: глубокое погружение в проблему, которую мы пытаемся решить.
Мы: изучаем существующие решения, собираем кучу референсов, чтобы говорить с командой заказчика на языке визуала.
Фокус (англ. define)
Дабл даймонд: обобщение информации.
Мы: кластеризуем, то есть собираем в группы, референсы по направлениям — получается несколько референсбордов. Это, конечно, не «проблема» в понимании методологии, но мир вообще не такой уж радужный и прекрасный
Развитие (англ. develop)
Дабл даймонд: обдумывание решения проблемы.
Мы: привлекаем команду заказчика, обсуждаем различные направления, их плюсы и минусы. Если в направлении формируется поднаправление или мы нащупываем лучшие решения, то возвращаемся в начало. Этот подход мы взяли скорее из дизайн-мышления.
Реализация (англ. delivery)
Дабл даймонд: выбор лучшего решения и его реализация.
Мы: стилистика выбрана, всё обсуждено, разрабатываем дизайн-концепцию. Здесь подключается и отдел бренд-дизайна, чтобы отрисовать иллюстрации, и разработчики, чтобы оценить реализацию.
Ну каковы процессы!
Наш подход к работе нацелен на одну простую вещь — предсказуемый результат. Многие не против приятных сюрпризов. Только когда у вас жесткие сроки и понятные цели, сюрпризы вам не нужны. Особенно, неприятные, а их вероятность выше — у людей есть представления и ожидания, в которые нельзя попасть без коммуникации.
Второй важный момент — ко-криэйшн, со-творчество и вообще работа не на, а вместе с заказчиком. Совмещая экспертизу в рынке, бизнесе и сфере мы разрабатываем концепцию, которая создаёт сильный UX — не только удобство и понятность, но совокупность всех ощущений при использовании сайта или приложения.
Такой подход можно применять везде: сервисы, приложения, корпоративные сайты и лендинги. Если вам нужна дизайн-концепция или что-то покрупнее, то оставляйте заявку у нас на сайте — мы отвечаем в течение 12 часов.
Ну а если вам просто было полезно, то ставьте +1, спорьте с нами в комментах и предлагайте способы получше. На связи!
Комментарий недоступен
Люто плюсую, вот эта псевдо экспертиза поднадоела. Простые вещи пытаются усложнить и подать по соусом май концепшн из вери грейт. Мы криейт вери экспенсив кейсы виз аудишн конкурентс. Только на макет посмотрел: слой 67, 68… об этом многое говорит)
Давайте по очереди:
1. «всё конечно прикольно, собрать картинки из всяких фреймворков - перевести и рассказывать простые вещи о пользовательском опыте и интерфейсе заумными выражениями на три листа)» — вы явно плохо и невнимательно читали статью. Мы выкристаллизовали свой подход, о котором и рассказываем
2. «референсборд от эксперинс драйвен эдженси по бест практиз по юзер эксперинз...очень интересно, спасибо, вот ваши деньги, просто заберите и идите отсюда» — можем написать «набор референсов от опытоцентричного агентства по лучшим практикам пользовательского опыта» и ничего не изменится.
В общем, спасибо вам тоже за бессмысленный комментарий, DIVO! Это помогает статье продвигаться вверх по ленте ❤️
3. Serge Demichev, сейчас бы слои фреймов для референсов называть специально — нам ведь больше нечем заняться :)
Вам дали понять, что нужно писать на человеческом языке. А вы несёте чушь уважаемый) Так что идите выкристаллизовывать свой подход в свой двор.
Это наш блог и наш двор, по вашей аналогии :) Если не за что покритиковать, то можно всегда докопаться до англицизмов — уже надоело, если честно
Пишите по фактам, а субъективщину и вкусовщину защищайте в своём дворе
А я и пишу по факту и комментатор свыше и другие о том же написали. Вот честно, критиковать есть за что. Глаза кровоточат не от англицизма, а от понимания того, что у вас нулевой словарный запас и вы восполняет его англицизмом. И ладно бы только в блоге, но на сайте агенства, и на сайтах клиентов, особенно те, которые вы позиционируете как простой и понятный для любой аудитории. Даже там ощущается отсутствие у пишущего словарного запаса, который впринципе должен быть побогаче чем у обывателя. И при этом демонстрирует свое пренебрежение.
Это признак явно необразованного человека, который не ходил дальше стен современных курсов.
Если вы не умеете воспринимать критику, это только ваши проблемы.
Евгений, хорошо, давайте мы потратим время и ещё раз ответим серьёзно.
Это не факты. Вы не привели ни одного конкретного кейса. Особенно интересно вот это «на сайтах клиентов, особенно те, которые вы позиционируете как простой и понятный для любой аудитории». В остальном еще раз распишем каждую фразу, что так взволновала вас и других комментаторов:
1. Перевести название подхода «experience driven», которое пришло из английского? В русском есть понятие «опытоцентричность», но оно не передаёт в полной мере сути этого подхода. На наш взгляд, приходить к нам и требовать переводить эту часть также нелепо, как требовать от «data driven» переводить его как «информационноцентричный», «данныецентричный» или «основывающийся на данных».
2. «UX» — пользовательский опыт. Серьезно предлагаете не использовать распространенное сокращение, которое пишут в каждой компании в вакансии? Откройте hh, проверьте.
3. «Бест практиз» — абсолютно то же самое, что и выше. Во-первых, перевод очевиден, если у вас был английский хотя бы в начальной школе. Во-вторых, для людей, знакомых с термином «бест практиз», он значит чуть больше, чем просто «лучшие практики».
4. Дабл даймонд — это вообще название. Его, конечно, переводят как «двойной алмаз», но снова, на наш взгляд, это кринж.
5. «Референсборд» также прекрасно расшифровывается в контексте статьи и с оконченной начальной школой. Не говоря уже о том, что мы используем и словосочетание «доска референсов» в рамках статьи.
Всё остальное — оценочные и даже оскорбительные суждения.
Вы обвинили автора и редактора сразу и в отсутствии словарного запаса, и в том, что мы пытаемся скрыть это англицизмами. «На сладкое» оставили «признак явно необразованного человека».
Так и где же здесь конструктивная критика? Нам не обидно, но нам искренне это надоело — самоутверждаться идите в другое место. Даже если вы можете оценить только форму, то окей, раскритикуйте нас конкретно. Так, чтобы мы отвертеться не могли. Ведь вы явно больший эксперт, чем мы, раз позволяете себе подобные оценки.
К конструктивной критике мы прислушаемся, как и всегда делаем :)
У вас все так легко, потому что вы не видите проблем. По такой логике многие необразованные живут.
Если вы не умеете адаптировать понятия с английского это только ваши проблемы, и не надо сваливать это все на плечи читающих ваши вырвиглазные тексты. С experience driven все гораздо легче, смотри скрин, даже в школе не нужно учить английский. А в отношении агенства это понятие можно написать как опытное агенство, профессиональное агенство.
Но даже в контексте статьи и вашей неадекватной реакции и неспособности писать для людей вас сложно назвать профессионалами, о чем также говорят кейсы и сайт агентства.
Ох, Евгений, как всё мимо, вы бы знали. Во-первых, вы снова оценили нашу реакцию как «неадекватную», хотя всё было объяснено в предыдущем сообщении — критика должна быть конструктивной. Во-вторых, ваша оценка снова оскорбительная и не подкреплена фактами.
Вопрос не в том, что мы не умеем адаптировать английские слова, а в том, что не видим смысла. Это будет либо кринжово, либо бессмысленно. Конкретику мы указали выше.
Ну а наш запрос вы проигнорировали, само собой. Скриншот, к сожалению, ничего, кроме смеха вызвать не может. Вас не смутило, что переводили вы два слова, а получилось одно? В том числе это показывает, что и сайт вы наш не читали — у нас там целый блок на весь экран, который объясняет, в чем суть подхода. И поверьте, это не о том, что мы «опытные» или «профессиональные». Наш опыт и профессионализм мы доверяем оценивать клиентам и коллегам по рынку, причем конкретно и прозрачно, без оценочных суждений
К вашему сожалению, я привык игнорировать негатив) ждём скоро статей от вас, какие все плохие и не понимают вас) удачи)
Это больший кринж, чем англицизмы, лол.
учись работать с возражениями, а не оценивать ценность комментариев
Мы, конечно, дико извиняемся, но 🤦
Могу охарактеризовать двумя буквами УГ. Это без хейтерства. Спросите почему у тех, к кому прислушиваетесь.
Ох, Александр, понимаю, это ведь не статья о мобильной и адаптивной версии сайта в 2021 :)
Комментарий недоступен
Самореализуйся, я не знаю, успехов там добейся, а не сублимируй свою неполноценность сюда)0
Комментарий недоступен
Я product design lead первого в россии experience driven агентства…
Дабл даймонд энд ко креэйшн для гибкого подхода и прогрессив джипега…
Ну как перестать орать
Спасибо, что оставляете эти бессмысленные комментарии с мемами из нулевых. Это помогает статье продвигаться вверх по ленте ❤️
Прикрепим для вас мем хотя бы из десятых — мы так в жизни и разговариваем, если что
Чем выше ваша «статья» продвинется наверх, тем больше людей убедятся в том, что ваша деятельность - полная хрень.
Всем плевать, что за дабл даймонды вы выкристаллизовываете и с каким драйвен экспириенсом вы это делаете.
А представлять, как вы произносите эти нелепые термины голосом реввы из старого камеди - это по прежнему очень смешно, хоть это из нулевых.
Всем привет)
Это невероятно плохо
Сегодня я расскажу, как мы работаем над созданием дизайн-концепций в проектах и почему этот процесс выгоден для нас и для заказчикапроцесс не может быть выгоден - выгоден может быть результат от этого процесса, хотя-бы пытайтесь понять смысл того что вы накреативили
или копирайтера наймите плохого
и в статье невероятно много уделено описанию че и как вы там делаете, что мягко говоря никому не интересно (отдельный шик что это типа агентство пишет) но практически ничего нет про выгоды заказчика
в итоге даже смысл статьи непонятен, если он только не продемонстрировать что мы тотальные дилетанты в своем деле и с нами лучше не связываться
Вы невнимательно читали статью, там множество раз подчеркивалось, какую выгоду для заказчика несёт такой подход:
1. Предсказуемый по качеству результат.
2. Скорость.
3. Вовлеченность в процесс, прозрачность.
4. Стоимость.
Процесс не может быть выгоден, как и результат, если уж по фактам. Выгодным может быть предложение, например. А предложение в нашей сфере во многом определяется процессами компании.
«в статье невероятно много уделено описанию че и как вы там делаете, что мягко говоря никому не интересно» — вам бы сюда пруфов как-то завезти. А то вот у нас клиенты спрашивают, другие дизайнеры спрашивают, а вы пришли и решили, что они никто :)
Комментарий недоступен
Комментарий удален модератором