Проектирование MVP онлайн-магазина премиальных сыров СЫР

Статья спустя ~5 месяцев после окончания работы…

Artyom Sagitov
9 min readJan 6, 2022

--

Лучший момент начать — сейчас

Именно эта фраза, о которой мне напомнила только что прочитанная книга “В этом году я…”, сподвигла меня на описание крутого командного кейса по UX/UI дизайну онлайн-магазина премиальных сыров СЫР.

Да, название может показаться простым, как и кейс с сервисом по подбору фитнес тренеров ТРЕНЕР, но поток креатива я решил направить на дизайн-макет :)

Вот и первая ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ(так я буду обозначать выводы и пользу, которую я открыл для себя в моменте работы, либо написании статьи): сделал кейс — сразу расскажи о нем, пока помнишь, иначе придется повторно все открывать и изучать. Не будь, как я!

Создание dream-team

Год назад, после окончания курса по UX дизайну, наш куратор Ден рассказывал о кейсе, которыйиз-за КОВИД, был отменен. Целью проекта был редизайн сайта по продаже премиальных сыров.

После этого он предложил нам, в качестве отработки навыков, собрать UX team и провести все необходимые исследования для проектирования MVP(первой “черновой” версии продукта).

Мы создали группу, куда все желающие могли подключиться, собраться и начать hard work.
СПОЙЛЕР: в итоге энтузиастов оказалось 5 человек.

Наша команда:
1. Ксюша
2. Вика
3. Я
4. Татьяна
5. Лера

фото команды в действии

ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ: если ты получил знания, то сразу ищи движ и залетай в него. Поверь, это очень крутая отработка твоих skillz

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

Наш командный чат в Телеграм.

1. Вижу цель, иду к ней

Чтобы понять куда идти и, самое важно, куда придти, нужно определить для себя Цель проекта и действия.

Цель проекта и задача

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

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

Задачей проекта являлось проведение UX исследований для разработки прототипа и MVP

ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ: важно различать Цель и Задачу. Если Цель — конечный результат, то Задача — действия, которые приведут тебя к результату.

Далее продумали бизнес-требования, которые в будущем могли бы подтвердить или убрать и перешли к одному из самых важных этапов в UX дизайне — исследования

2. Выходим “в поле” и спрашиваем

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

ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ: Секрет хороших исследований — выйти из дома

Анализ конкурентов и их решений

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

Я просто вбил в поисковике “продажа сыров” и изучил варианты, которые находились в топе Гугл .

В фигме делать анализ оказалось удобнее чем в G Docs

В процессе я искал то, что, на мой взгляд, отвечало нашей Цели и Требованиям, а также хорошие идеи.

ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ: если делаешь анализ конкурентов, обязательно прикладывай скриншот. Это помогло мне при повторном анализе сгенерировать идеи, которые мы в дальнейшем использовали в MVP

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

Offtop: помню, как я при анализе компании Beluga увидел перспективы в виду Ковида и купил несколько акций. В итоге я поддался эмоциям и продал бумаги с+30% прибыли. Через пару дней они выросли с ~1700₽ до ~3600₽ .
Вывод: слушай рационального типа в своей голове и пытайся осознать сиюминутные эмоции и желания своей лимбической системы(отвечает за эмоции, хотелки и удовольствия).

В жизни всегда нужно стараться мыслить рационально и не поддаваться эмоциям.

ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ: В UX лимбическая система очень важна, так как мы, особенно когда устали и топлива в голове нет, выбираем желанием. Подумай, почему перед кассой всегда так много вкусностей.
Наша задача, как дизайнера продукта — повлиять на эмоциональную часть мозга.

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

Выводы и идеи после анализа:

  1. Давать возможность продегустировать сыр, например, внедрить дегустационный набор
  2. Добавить сырные тарелки и подарочные корзины
  3. Добавить описание сочетания алкоголя и сыра
  4. Добавить личный кабинет, но называть его Сырный клуб, который бы давал различные полезности и приятности клиентам.

Исследование целевой аудитории

Была выдвинута гипотеза о ЦА, которую нам предстояло подтвердить или опровергнуть.

Гипотеза не является истинной, сначала ты должен ее доказать.

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

Важным его фактором было наличие своеобразного подарка в конце(спасибо за идею, Ксюша!)

Ого-го какая большая таблица с информацией

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

Мне повезло с teammates, потому что они находились в городах, где были не только магазины, но и сыроварни.

ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ: нет возможности вживую расспросить — используй возможности беспроводной связи и спрашивай ЦА через телефон. Да, это немного сложнее, но зато картина прояснится, нежели ты будешь полагаться на свои догадки

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

Работник бутика “Четыре сыра”

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

  1. Интервью с клиентами сырных бутиков
  2. Интервью с персоналом сырных бутиков
  3. Интервью с владельцем сыроварни

После проведения живых опросов девочки написали краткое резюме к каждому интервью и подкрепили их выводами:

Интервью с одним из респодентов

Выводы и идеи после анализа:

  1. Необходимость в профессиональном консультанте, который будет подсказывать тогда, когда захочет клиент. То есть сервис очень важен
  2. Гипотеза о том, что дегустация это плюс — подтвердилась. Клиент хотел бы иметь возможность доставки небольших порций.
    Это поможет ему постепенно становиться постоянным клиентом магазина.
  3. Важно, чтобы продукт был корректно упакован и находился под корректным хранением.
  4. Доставленный продукт обязан быть свежим
  5. Некоторые клиенты смотрят на информацию по составу и стране
  6. Плюс, когда сыр упакован в спец. бумагу

Суммируем результаты

Создание портрета пользователя — Persona Framework

Портрет пользователя — это собирательный образ самых ярких особенностей ЦА. Она концентрирует полученную информацию из исследований и олицетворяет собой образ определенного сегмента(группы).

В результате полевых исследований мы разбили пользователей на 4 группы:

  1. Любители новинок
  2. Любители классики
  3. Стабильные в запросах покупатели
  4. Экоактивисты и люди с особыми потребностями

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

ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ: важно понять не только причины выбора конкретного продукта, но и какие конкретные свойства позволяют пользователю чувствовать себя лучше

Создание CJM

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

Команда также составила свои версии CJM для их сегмента

Разделение этапов цветом очень удобно в чтении таблицы

Анализ решений и генерация идей

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

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

ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ: просто записывай все, что придет в голову. Обдумать ты всегда успеешь, а вот записать…

User flow и пользовательские сценарии

Мы продолжили работать с выбранными сегментами и следующей задачей было описание взаимодействия пользователя с сервисом с помощью схемы

userflow для стабильных пользователей

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

Во время создания сценария мне в голову пришла отличная идея, с помощью которой мы можем побудить пользователя к регистрации в Сырном клубе — создать письмо с поздравлением пользователя с получением членства в клубе и добавить различные приятности (простите за сленг)

ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ: идеи будут приходить к тебе всегда, на любом этапе, поэтому обязательно записывай их, иначе потеряешь

Структура и проектирование

С начала работы прошло много времени… результаты исследований были у нас на руках. Оставался заключительный шаг — составить структуру и на основе структуры сделать вайрфрейм.

В работе я всегда стараюсь сделать структуру, так как это помогает увидеть составляющие сайта, составить навигацию и упростить себе жизнь :)

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

Здесь нас ждал финальный босс, с которым мы справлялись очень долго — работа над “своим” проектом, когда у тебя есть другие дела и, тем более, коммерческие проекты.

Но мы справились с ним!

Побеждаем босса

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

Наброски страниц

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

Самая важная ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ:

ПРОСТО СЯДЬ И РАБОТАЙ!

Если ты хочешь оставаться там, где ты сейчас есть, продолжай думать о том “надо бы поработать” в то время, как ты сидишь и ничего не делаешь.

Финалиссима

Вставлю итог Ксюши из ее статьи:

Получили готовый к реализации, детально проработанный MVP для онлайн-магазина сыров от классических до самых редких, отличающийся глубокой проработкой аудитории проекта через:

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

Le выводы

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

  1. Работа в команде — круто, но нужно четко распределять задачи. Если задача не предполгает распределение обязанностей, то дайте одному человеку ее выполнить, а потом вместе думайте и исправляйте.
  2. Ты теряешь больше времени на раздумья о работе, нежели на саму работу
  3. В UX исследованиях нет необходимости выполнять все этапы. Что-то можно опустить, что-то можно частично выполнить, чтобы дополнить другой этап
  4. Всегда записывай идеи, которые пришли в голову, даже если это только начало проекта
  5. Сделал кейс — опиши его. Вот сейчас у меня будет под рукой статья с моими мыслями и описаниями работы, а это поможет описать кейс на, например, Behance.
    Тебе не придется лазить по документам и проектам в фигме, ведь достаточно будет еще раз прочитать статью и ты уже будешь знать, что делать
  6. Я понял, что мне очень нравится придумывать всякие предложения при описании кейсов, поэтому теперь буду стараться описывать каждый свой +- сложный кейс
  7. И на последок мотивация:
А ведь действительно :)

З.Ы.

Еще раз хочу поблагодарить свою команду.

  1. Ксюша
  2. Вика
  3. Татьяна
  4. Лера

Теперь осталось данный кейс и кейс по сервису ТРЕНЕР добавить на Behance. Как только я все сделаю, здесь будет ссылка :)

Всем спасибо за внимание :)

Мой инстаграм

--

--