Кейс: как внедрить соцсеть в приложение Ozon?

Кейс: как внедрить соцсеть в приложение Ozon?

Наши студенты работают с известными брендами. Это тренирует насмотренность и помогает положить в портфолио крутой кейс. Например, на курсе «UX/UI-дизайнер» можно поработать над созданием соцсети для Ozon. Ирина Стражевич рассказала, как анализ конкурентов и исследования целевой аудитории помогли продумать точки соприкосновения маркетплейса и соцсети. Студентке удалось создать удобный и красивый интерфейс, а также получить фидбек от клиента.

Ирина Стражевич
Презентация студентки

В чем суть задачи

Сервис: Ozon предоставляет широкий выбор товаров с доставкой до двери во всех часовых поясах России. По версии Forbes, это одна из самых дорогих российских интернет-компаний.

Задача: внедрить социальную сеть в приложение Ozon и связать ее напрямую с маркетплейсом, при этом не обязательно соблюдать дизайн Ozon — возможна свобода творчества.

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

Над какими задачами предстояло поработать:

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

«UX/UI-дизайнер
с нуля до PRO»

Создавайте пользовательский опыт мирового уровня

Кейс: как сделать так, чтобы пользователь больше покупал в соцсети Ozon 

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

Работа над дизайном предполагает полноценное исследование ЦА

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

Еще для увеличения количества покупок я добавила раздел «Видеообзоры» на каждую карточку товара — они повышают доверие пользователя, и он принимает решение о покупке быстрее. 

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

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

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

Исследование включало: 

  • анализ конкурентов;
  • интервью с пользователями;
  • метод персон;
  • исследование пользовательских сценариев;
  • создание CJM (пути клиента).
Читайте также

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

Анализ конкурентов. Я проанализировала десять приложений прямых и непрямых конкурентов Ozon. Выявила преимущества и недостатки каждого. Критерии, по которым оценивались приложения:

  • цветовая схема;
  • tab bar;
  • социальная сеть — есть или нет, какие особенности, если есть;
  • читаемость шрифтов;
  • качество фотографий;
  • шаги до цели;
  • поиск;
  • количество товара по запросу;
  • кнопка «Купить» или «Добавить в корзину» на карточке с товаром;
  • фильтрация и сортировка в поиске;
  • система рейтинга и отзывов;
  • выгода и бонусы;
  • каталог;
  • предложения для новых посетителей.

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

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

Метод персон помогает проанализировать поведение пользователей и сделать выводы

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

Пользовательские сценарии дают понимание о мотивации пользователей

Customer Journey Map — это визуализация пути пользователя, которая помогает проследить, как человек начинает работу с приложением и к чему приходит в итоге.

Прототипирование

Читайте также

Этот этап включал генерацию идей, создание User Flow, разработку вайрфреймов и кликабельного прототипа.

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

Прототипы нужны для понимания, как решена проблема

Дизайн

Для разработки дизайна на основе полученной информации я создала мудборд, UI Kit, подготовила дизайн-макеты и разработала интерактивный прототип.

Я решила соблюдать стиль Ozon, чтобы получилось максимально реалистично и заказчик смог посмотреть, как бы это выглядело в реальном времени. Использовала нативные цвета по брендбуку.

Дизайн с нативными цветами позволяет реализовать концепцию

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

Зарегистрироваться в соцсети удобно

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

Перейти в социальную сеть можно с главной страницы приложения Ozon

Профессия
«UX/UI-дизайнер
с нуля до PRO»

Научитесь создавать продуманные и эстетичные интерфейсы на основе пользовательских исследований с нуля за 15 месяцев

Подробнее

Решения

Для создания соцсети, которая сопряжена с маркетплейсом, я пошла тремя путями:

  1. Обзоры — пользователь смотрит обзоры в бесконечной ленте, при желании переходит на заинтересовавший его товар.
  2. Видеообзоры — пользователь находит их в специальной вкладке в карточке товара.
  3. Истории — пользователь может переходить с них на товар, чтобы получше рассмотреть и купить.

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

Истории помогают узнавать о товаре и покупать его

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

Поиск в каталоге простой и удобный

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

Видеообзоры повышают вовлеченность пользователей

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

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

Фидбек от клиента

«Студент хорошо проработал User Flow и изучил конкурентов. Много решений, которые применил студент, мы также применили и в нашем проекте. Отличным решением стало внедрение обзоров на карточке товара, где пользователь может сразу посмотреть подробное видео. 

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

В остальном студент отлично справился с задачей, поддержав консистентность бренда Ozon; в качестве бонуса хочу показать то, что у нас получилось, и это очень похоже на то, что сделал студент.»

 

Михаил, ведущий дизайнер Ozon

Итоговый вариант дизайна Ozon
Профессия

UX/UI-дизайнер с нуля до PRO

Научитесь создавать пользовательские интерфейсы
с нуля за 15 месяцев

15 работ в портфолио

200+ часов практики

cтажировка в крупной компании

опыт экспертов из Cuberto, Ozon и VK Group

Подробнее о курсе

15 работ в портфолио

200+ часов практики

cтажировка в крупной компании

опыт экспертов из Cuberto, Ozon и VK Group

Медиа Contented