{"id":14275,"url":"\/distributions\/14275\/click?bit=1&hash=bccbaeb320d3784aa2d1badbee38ca8d11406e8938daaca7e74be177682eb28b","title":"\u041d\u0430 \u0447\u0451\u043c \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u0430\u0432\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f72066c6-8459-501b-aea6-770cd3ac60a6"}

Дизайн-воркшоп своими силами: как и зачем проводить его внутри компании

Дано: в Ronas IT за последние три месяца выросла дизайн-команда. Как познакомить и сплотить новых сотрудников? А если нельзя провести обычный корпоратив, потому что команда разделена на два офиса? Мы попробовали формат воркшопа - без приглашения коучей или экспертов. За 8 часов дизайнеры разработали концепт Uber Super App, объединяющий сервис такси и курьерской доставки. Делимся с вами формулой успешного воркшопа внутри компании.

Подготовка к воркшопу

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

Цель. За последние несколько месяцев наша дизайн-команда выросла - теперь в ней шесть человек, которые работают в двух офисах в разных городах - Омске и Краснодаре. Мы хотели найти способ наладить контакт между всеми участниками. Стандартные корпоративы нам не подходят из-за разделения команды на два города, а на реальных проектах возможность задействовать всех дизайнеров появляется редко из-за небольших объемов работы. В формате воркшопа все дизайнеры смогли участвовать одновременно.

Задача. В течение 8 часов команда разрабатывала концепт приложения Uber Super App - сервиса Uber с расширенным функционалом, включающим заказ и доставку еды и продуктов. Идея для Uber Super App пришла после новости о том, что компания Uber купила стартап по доставке еды Postmates.

Роли. Для организации рабочего процесса между участниками были распределены роли:

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

Ограничения. Так как мы создавали концепт расширенного функционала для уже существующего приложения, то главным условием воркшопа стало разработать интерфейс в рамках дизайн-системы Uber. Для этого мы использовали инструмент для поиска экранов Mobbin и гайдлайн от Uber в фигме.

Рабочий процесс

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

Как Uber Super App может помочь в этом пользователю?

Все дизайнерские решения должны в какой-то мере отвечать на этот вопрос.

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

Прямые и косвенные конкуренты Uber Super App

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

Брейншторм. В ходе 40 минутного брейншторма команда записала основные идеи для будущего концепта и собрала гипотезы для проверки. Кроме добавления в приложение курьерской доставки и доставки еды, мы решили внедрить доставку грузов с AR рулеткой, совместный заказ еды на несколько человек, голосового помощника, истории с кулинарными рецептами.

Аналитика. Все идеи, которые появились у команды в процессе брейншторма, нужно было протестировать через опрос аудитории. Прежде, чем реализовывать какую-то идею, дизайнер должен быть уверен, что его ожидания и ожидания пользователя сходятся. Для проверки гипотез мы провели опрос аудитории и выделили приоритетные направления для работы. В качестве инструмента для проведения исследований мы выбрали Google Формы. Выборка составила 60 человек - сотрудники нашей компании, входящие в целевую аудиторию приложения.

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

Продвижение. Маркетинговая составляющая дизайна заключалась в добавлении голосового ассистента (Voice User Interface) и онбординга. С помощью них мы знакомим пользователя с новым функционалом. Онбординг - это рассказ о доступных функциях приложения и одновременно инструкция по применению.

Голосовой ассистент в начале поездки приветствует пассажира с телефона водителя, просит его пристегнуться, сообщает время в пути и рассказывает о новом функционале. Мы использовали ассистента как точку входа в приложение. Если пассажир не является клиентом Uber, а такси заказал другой человек, то такой онбординг будет служить призывом для пассажира установить приложение Uber. Такой тип взаимодействия называется Zero UI Design.

Голосовой ассистент приветствует пассажира с телефона водителя

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

Онбординг - приветствие пользователя

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

Истории с рецептами

Функционал. Заказ такси и переход в мини-приложения. Домашний экран должен показывать пользователю, что в супер-приложении есть мини-приложения (доставка еды, вызов курьера и пр.). Одновременно нельзя было потерять основной функционал. Uber - это прежде всего приложение для вызова такси, поэтому мы оставили карту, подсказки и большое поле для ввода конечного адреса, а потом добавили кнопки для перехода в мини-приложения.

Варианты представления мини-приложений - без подложки (экран 1), с подложкой (экран 2) и бэкдроп (3)

Проблемы в работе с интерфейсом начались с визуального представления мини-приложений. Чтобы перейти в выбранное мини-приложения, необходимо нажать на его иконку. Первый вариант (экран 1) сделан плитками без белой подложки. От него пришлось отказаться после тестирования, так как пользователям было непонятно, что плитки можно потянуть наверх для открытия бекдропа (экран 3) с другими мини-приложениями и умной лентой. Мы добавили белую подложку под плитки, и это помогло сориентировать пользователя. С добавлением нового функционала мы столкнулись с тем, что некоторые старые функции - аренда велосипедов и самокатов - стало неудобно использовать, поэтому мы вынесли их на главный экран с краткой информацией о доступности.

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

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

Процесс совместного заказа

Так как концепт приложения должен был объединить сервисы компании Uber, то мы перенесли часть элементов и паттернов из приложений Uber Eats и Postmates, обозначив их преемственность.

Функционал. Доставка грузов. Uber уже использует партнеров-курьеров для доставки еды, и мы решили добавить курьерскую доставку личных грузов. На выбор есть несколько тарифов: дрон для мелких предметов, документов, бумаг, курьер для легких грузов и машина для крупногабаритных грузов и посылок на дальние дистанции. Логика заказа доставки та же, что и у заказа такси. Пользователь выбирает точки, где забрать и куда доставить груз, можно отследить статус доставки, ожидаемое время прибытия курьера и связаться с курьером.

Мы добавили AR линейку для измерения габаритов груза. Работает это так: нажимаем на кнопку линейки, и открывается камера. В область камеры располагаем груз, который хотим отправить, и с помощью дополненной реальности нам показывают габариты груза, на основе которых выбирается подходящий тариф.

AR рулетка для доставки

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

Итоги воркшопа

За 8 часов работы наши дизайнеры создали концепт приложения Uber Super App, придумали, как расширить функционал сервиса и проработали интерфейсные решения. После воркшопа у нас остались экраны в фигме и пара практических выводов:

  • Формат воркшопа - хорошая альтернатива тимбилдинговым мероприятиям для команд, у которых нет возможности задействовать всех участников на реальных проектах и для тех, кто работает дистанционно;
  • В процессе воркшопа мы увидели слабые и сильные стороны каждого из участников и команды в целом;
  • Мы активно использовали опросы и исследования, что помогло посмотреть на дизайн глазами пользователя, а не творца;
  • Мы попробовали использовать сторонние дизайн-системы - и не смогли изучить их за 8 часов воркшопа, чтобы применить в полной мере;
  • Воркшоп - это гибкий формат, который может служить разным целям - познакомить команду, показать новым сотрудникам внутренние стандарты, предложить членам команды новые роли, отдохнуть от рутинных задач.
0
4 комментария
Илья Саблин

Еще собрали большой кейс с более детальной информацией о концепте:) 

https://www.behance.net/gallery/109585073/Uber-Super-App-Concept-Case-Study

Ответить
Развернуть ветку
Дмитрий Греков

А зачем вы скопировали дизайн Яндекс.Go ? 

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

Дмитрий, спасибо за провокационный комментарий:) 

В начале статьи мы описывали этап конкурентного анализа, где рассматривали существующие на тот момент супер-апы. Большинство из них использует этот паттерн и после интервьюирования мы решили тоже использовать его как самое эффективное решение. 

Единственное мы очень долго тянули со статьей:( Кейс мы опубликовали еще в январе 2021 года и на момент проведения воркшопа интерфейс Яндекса выглядел так: 

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

Боже, Яндекс полностью скопировал дизайн у Убера.

Ответить
Развернуть ветку
1 комментарий
Раскрывать всегда