Всем привет! Меня зовут Воляница Елизавета, я магистрант ИТМО по программе Искусственного интеллекта AI Talent Hub и по совместительству backend-разработчик на маркетплейсе. В основном я занимаюсь проектированием архитектуры, декомпозированием задач и написанием кода для различных систем. Но причём здесь графический дизайн?

Недавно, когда у меня появилась та самая гениальная идея для того самого стартапа, который «ну 100% выстрелит», я столкнулась с тем, что нужно не только проектировать архитектуру и писать код. Тогда мой дизайн выглядел как-то так:

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

Курс «Графические интерфейсы» Матвея Брыскина несколько лет читается на базе ИТМО, ВШЭ и некоторых других вузов. Он покрывает исследования рынка, конкурентов, интервью пользователей, подготовку пользовательских сценариев и создание итогового дизайна. Мы работали в небольших командах: кто-то прорабатывал свои личные проекты, а мы решили взять несуществующий сервис путешествий, чтобы отточить свои навыки. Обучение длилось полтора месяца, в течение которого необходимо было выполнить все задания.

Исследование рынка

Первый этап — анализ рынка: необходимо было посмотреть конкурентов с похожим функционалом, какие есть аналоги, в чем их плюсы и минусы. В итоге наше исследование было недостаточно глубоким: мы не рассмотрели сравнение функциональных и нефункциональных возможностей сервисов. Зато удалось найти пару интересных приложений — начиная от американских стартапов, заканчивая возможностями TripAdvisor, с которыми я раньше не была знакома. Получилась небольшая таблица с описанием возможностей и идей. Также в этом шаге мы анализировали прибыль, KPIs, а также пробовали оценить объемы рынка через метрики TAM/SAM/SOM.

Небольшая часть исследования конкурентов

Что я для себя открыла:

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

Проверка гипотез через интервью

Хорошо, мы поняли, что подобные сервисы есть, и они пользуются популярностью. Выяснили, какую часть рынка мы могли бы покрыть, на кого ориентироваться и чьи проблемы решать. С этими знаниями уже можно составлять гипотезы и общаться с потенциальными пользователями. Нам удалось выдвинуть следующие предположения:

Планировать путешествия — сложно и неудобно
Трудно найти попутчиков для путешествия
Не хватает наглядных карт и удобных дашбордов для планирования
Сложно найти удобную базу знаний об интересных местах и достопримечательностях

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

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

Нашей команде удалось проинтервьюировать около 8 людей, каждое интервью занимало от 30 до 50 минут. Поскольку тематика нашего сервиса была достаточно распространенной, то в качестве интервьюируемых мы привлекли путешественников различных типов, бюджетов и подходов — в основном это были друзья и родственники. В результате удалось собрать множество различных мнений, историй — их мы записывали прямо во время интервью в табличку, а потом провели тщательный анализ с помощью транскрибаций записей.

Некоторые инсайты с интервью:

Дашборды мало кому нужны — это неудобно. Ставить целое приложение ради одной поездки сложно, а если ещё и данные нужно загружать вручную, то использовать его и вовсе не хочется.
Пользователи хотят делиться своими маршрутами с друзьями, чтобы рекомендовать активности и рестораны, а также смотреть маршруты других.
Несколько человек упомянули, что было бы супер получать real-time информацию о событиях, которые происходят сейчас (или будут происходить в ближайшее время) в окрестностяхи.
Многие используют Яндекс Карты для планирования путешествий и маршрутов, а «Избранное» в Telegram — лучший блокнот и файлообменник.

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

Что я нового узнала:

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

Вдохновение и USM

User Story Mapping (USM) и Customer Journey Map (CJM) уже стали стандартными методами проработки продукта, но на всякий случай опишу.

User Story Mapping — это метод сбора требований и планирования релизов программного продукта, метод проектирования продукта, который позволяет визуально отображать пользовательские истории.

Customer Journey Map — это визуализация пути клиента. Отображение того, как пользователь взаимодействует с сервисом, двигаясь по определенному сценарию. В моём понимании это нужно, чтобы декомпозировать большую и сложную идею, разделив её на:

Minimum viable product (MVP) — минимальная функциональность продукта, чтобы запуститься и протестировать гипотезы.
Minimum marketable product (MMP) — минимальная продаваемая функциональность продукта.
Minimum lovable product (MLP) — минимальный функционал, чтобы достичь вау-эффекта.

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

User Story Mapping для сервиса планирования путешествий

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

В чем ценность для меня:

Явное разделение задач на MVP, MMP, MLP помогает навести порядок в процессах разработки, наладить приоритеты и не прикручивать супер-крутую и сложную функциональность к неработающему продукту.
Кради как художник. Чтобы разработать хороший дизайн, нужно развивать насмотренность — изучить большое количество успешных решений. Такой же метод работает и с clean код.

Наброски, вайрфрейм, брендбук и дизайн

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

Как мы наши наброски переносили в вайрфрейм

Итоговый дизайн сервиса планирования путешествий

Итоги

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

Отдельная благодарность магистратуре AI Talent Hub за качественный подход к образованию и Матвею Брыксину за интересный подбор материалов, новые идеи и вдохновение. Удалось посмотреть на прежде далекую и загадочную область с новой стороны.

Осваивая новые направления: что получила backend-разработчица от изучения продуктовой проработки и дизайна