«День в стиле Ghibli»
Ручка в виде кредитки

Развитие команды через мини-хакатоны: опыт Noknok Digital

Привет! Я Женя Жуланова, дизайн-директор Noknok Digital. В этой статье поделюсь методом, который используем для развития команды.

Развитие команды через мини-хакатоны: опыт Noknok Digital

Мы проводим мини-хакатоны, на которых выполняем задания в течение 40-60 минут. Какие-то из них мы проводим в эфире в телеграм-канала, и периодически собираемся сами или с командами клиентов.

Задачи бывают разными: от создания концепций AR-приложений до дизайна плакатов для случайных мест на Google Street View. На последнем хакатоне взяли интерфейсную задачу и провели эфир вместе с дизайнером интерфейсов Лёшей Белик.

Задача

В Telegram-каналах с интерфейсными фичами публиковалась визуализация вкусов в приложении Simple Wine. Решение показалось интересным и дискуссионным. У нас появились вопросы: как будут смотреться визуализации вкусов чернозема или нефти? Или как делать их для большого количества наименований в каталоге? Мы хотели погрузиться в тему, разобрать плюсы и минусы и набросать свои варианты.

Развитие команды через мини-хакатоны: опыт Noknok Digital

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

  • Заранее исследовать тему;
  • Разобрать плюсы и минусы реализации;
  • На мини-хакатоне сделать свои варианты визуализации.

Исследование

Согласно исследованию, предпочтения дизайнеров сильно отличаются от пользовательских, поэтому важно проводить ресерч и синхронизироваться с реальностью. Для этого мы подготовили вопросы для экспертов и пользователей. Было предположение, что экспертом не нужны визуализации и чтобы проверить гипотезу, подготовили 3 вопроса и попросили ответить на них людей профессионально занимающихся вином.

Вопросы:

1. Какая информация для вас самая важная при выборе вина в приложении? На что обращаете внимание в первую очередь?

2. Что вы можете сказать по поводу визуализации «вкусов» вина в карточке товара? Насколько такая визуализация понятна и эстетична для вас?

3. Как вы оцениваете полноту информации, представленную на карточке? Хотели бы вы видеть больше информации или ее наоборот слишком много? Чего не хватает или что является лишним, на ваш взгляд?

Развитие команды через мини-хакатоны: опыт Noknok Digital

Несколько человек откликнулись на наш запрос и прислали развернутые ответы:

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

1) про внимание.

Как профессионал, обычно я заранее знаю, какой стиль вина хочу, и ориентируюсь от него. Сорт/страна/регион идут как продолжение этой задачи. И уже потом смотрю, что вписывается в мой бюджет.

Как любитель, я обращаю внимание на цену, потом на этикетку, и если они меня увлекли, то сканирую этикетку в вивино, и смотрю, что пишут люди.

2) про визуализацию

Как профессионал, я это обычно воспринимаю, как белый шум. Раньше обращал больше внимания на это, но сейчас стараюсь ориентироваться на собственные дескрипторы.

Как любитель, я обычно не добираюсь до визуализации, потому что она идёт 3ей фоткой) но если добираюсь, то далеко не всегда понятно, что это за трава/орех/ягода на картинке. Подписи зачастую полезны.

3) про информацию

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

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

Соответственно, как профессионал я смотрю на эти сайты, когда выбираю вино в карту ресторана, а как любитель - когда выбираю для личного потребления.

Анатолий Лобачев
Cомелье

1. Боюсь, что тут мой ответ будет не самый релевантный для исследования, так как я, как правило, уже четко знаю, что мне надо: сорт, страна, производитель. Ну это профдеформация.

Поэтому я смотрю на цену и на наличие/ в какой винотеке могу забрать если мне срочно прям понадобилось именно это вино.

2. Мне очень нравится, мне кажется так намного нагляднее, чем просто иконками или текстом. И хорошо, что подписали ибо мускус - не самая очевидная штука. А так я уже представляю как пью эту малинку в бокале)

3. Мне нравится, как представлена информация, мне все понятно и всего хватает) Но опять таки я хорошо знаю это вино, мне в целом про него все понятно.

Возможно, не хватает описания простого вина: легкое/плотное, какая кислотность, на что похоже, с чем пить (еда). Но там дальше у симпла хорошо это развернуто. Даже и не знаю, что и добавить.
Мария
Taste&Talk

Наша гипотеза подтвердилась. Эксперты смотрят совсем на другие параметры. Эти ответы показали нам, что нужно сосредоточиться на обычных покупателях, для которых визуализация может действительно оказаться полезной. Хотелось узнать, как они в целом оценивают визуализацию и как отнесутся к «несъедобным» объектам в бокале.

Для опросов мы используем pthwy — очень простой и быстрый способ провести исследования.

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

Опрос показал, что в целом визуализации находят симпатичными. Несколько человек заметили, что наличие камня выглядит странно:

  • «Инфографика удобная, но вот "мокрый камень" для неспециалиста (коих большинство) звучит странно»
  • «я не понимаю что за мокрый камень , это очень сбивает , если другие вкусы более менее понятны то не понятно что за камень»

Были интересные комментарии по поводу информативности визуализации:

  • «Состав букета для меня было бы удобнее видеть в виде столбца в порядке от наиболее яркой ноты к менее яркой»

Полный отчет:

Плюсы минусы решения

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

Минусы:

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

Плюсы:

  • Яркая картинка нравится пользователям;
  • Обогащение информации о продукте.

Решения

Просмотр опросов, комментариев специалистов и обсуждение плюсов и минусов заняло у нас около 15 минут. Для себя мы поставили задачу придумать решение, которое:

  • Легко масштабируется на большой каталог продукции;
  • Сохраняет яркое визуальное решение;
  • Более информативное, чем исходное.

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

К нам с Лёшей в Figma присоединились другие дизайнеры и мы за оставшееся время сделали несколько решений:

Вариант с коллажем по слоям<br />
Вариант с коллажем по слоям

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

Без визуализации бокала
Без визуализации бокала

Чтобы не смущать пользователей камнями в посуде, можно просто показывать качественные изображениями с подписями в порядке их раскрытия. На эту мысль нас натолкнули несколько комментариев из опроса про Содержимое бокала. Оно путает пользователей, они ошибочно думают что это состав продукта:

Если инфографика для вас неудобна, то что бы вы изменили в ней?

  • «Оставил содержимое без бокала»
  • «Может бы добавил на всякий случай описание ингредиентов»

На что в карточке вы обратили внимание в первую очередь? Что успели запомнить?

  • «На бокал в котором ассортимент ягод и трав из него сделано вино»
Градиенты и фотки
Градиенты и фотки

Был интересный экспериментальный вариант с градиентами и подробными описаниями вкусов.

Иллюстрация с круговой диаграммой
Иллюстрация с круговой диаграммой

Часто кто-то находит классные референсы, которые потом забирают и другие. Один из участников нашел интересный референс, который можно адаптировать под эту задачу и вписать в айдентику Simple Wine.

Выводы

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

1010
реклама
разместить
1 комментарий

Я человек простой. Вижу годный лонгрид - ставлю лайк

2
10 вещей, которые я хотела бы знать ДО создания UI-кита

Что важно учитывать и с какими неожиданными сложностями вы можете столкнуться при создании и внедрении UI-кита? Делюсь опытом нашей команды: как косячили, ругались и делали выводы.

1616
Как быстро проверить UX-гипотезу: проводим немодерируемый тест в Pathway
<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fpthwy.design%2F&postId=1749082" rel="nofollow noreferrer noopener" target="_blank">Демонстрация возможностей сервиса Pathway</a>

В статье разберу, как протестировать интерактивные прототипы с помощью Pathway. Это относительно новый сервис, который уже внедрили дизайнеры ВкусВилл, Циан и VK.

77
Про кросс-продажи, клиентскую проблему, личные границы и тазик салата

Если ты попал в воронку, все, п#здец, пройдешь по ней любой ценой, ознакомившись со всем ассортиментом блюд, неважно, нужно это или нет.

Про кросс-продажи, клиентскую проблему, личные границы и тазик салата
11
Как мы дважды запустили один сайт: кейс "Медного голема" и уроки перфекционизма

Когда мы завершили сайт для «Медного голема» — скульптурной мастерской с федеральными проектами, всё шло идеально: дизайн утверждён, акты подписаны, сайт в сети. Но уже через пару недель нас не отпускало чувство, что можно сделать ещё лучше. Мы вернулись к проекту, переделали главный экран, усилили визуальную часть и расширили ключевые разделы. Это…

22
Сила бренда: как удалось раскрутить сеть пивных магазинов без рекламы

Привет, это Лигер Алексей и агентство "В точку". В статье рассказываем про практический опыт, используя кейс раскрутки сети пивных магазинов в Перми. Узнайте, как мы достигли впечатляющих результатов, не прибегая к прямой рекламе алкогольной продукции.

Сила бренда: как удалось раскрутить сеть пивных магазинов без рекламы
33
11
Перед стартом разработки цифрового продукта можно повысить шансы на успех

Речь пойдет про предварительную аналитику. Улучшаем качество взаимоотношений, экономим время, снижаем риски. Верхнеуровнево определяемся со стратегией и каналами лидогенерации.

Перед стартом разработки цифрового продукта можно повысить шансы на успех
Как повысить конверсию сайта с помощью психологии: часть 1
Как повысить конверсию сайта с помощью психологии: часть 1

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

Хотите больше заказов? Улучшите инфографику на Wildberries и Ozon

Вы когда-нибудь задумывались, почему одни товары на Wildberries и Ozon привлекают ваше внимание мгновенно, а другие остаются незамеченными? Секрет часто кроется в дизайне инфографики. Давайте вместе разберёмся, как создать такие визуальные материалы, которые не только выделят ваш продукт, но и заставят покупателя нажать заветную кнопку «Купить».

Хотите больше заказов? Улучшите инфографику на Wildberries и Ozon
Провал первой концепции: как исправить ошибки и успешно завершить проект.

Согласовали изначальный дизайн, сверстали, практически завершили первый этап. На созвоне мы получаем обратную связь и понимаем, что результат мягко говоря не соответствует ожиданиям заказчика. Работа сделана, время потрачено, что делать? Уйти в глухую оборону? Попытаться разобраться и спасти ситуацию? Обсудим в статье.

Сайт группы компаний «Медителл».
77
реклама
разместить
От хаоса к структуре. Как организовать взаимодействие дизайнера и фронтов.
Делюсь приемами, которые работают.
Как обновить действующий интерфейс: добавление новых фич, оптимизация экранов, порядок в навигации. 20+ рекомендаций, чтобы облегчить жизнь ваших пользователей

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

2828
33
11
[]