Редизайн Каталога и Главной

Проект, предназначенный для представления другой версии Каталога и Главной вебсайта Flowwow. Концепт нацелен на цели бизнеса и покупателей

Макеты
Цели
Исследования
Детали
Выводы

The most brutalist and efficient library by Sidebay Studio

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

A Webflow library infused with the brutalist way.

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

Launch your portfolio, agency, startup faster than ever

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

Just drag, drop and make your first MRR faster

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

Вид "ДО" Главная

В ходе работы над концептом я работала как над страницей Главная, так и над Каталогом. Пример страницы Главная в форматах десктоп и моб

Вид "ДО" Каталог

В ходе работы над концептом я работала как над страницей Главная, так и над Каталогом. Пример страницы Каталог в форматах десктоп и моб

Вид "ПОСЛЕ" Главная

Справа можно посмотреть вариант интерфейса после проведения тестирования и переработки дизайна

Изменения страницы «Главная»

  • Переработала весь хедер в десктопе и мобе, кнопка "Каталог" теперь более заметна, добавился раздел "Подборки", переработана структура
  • В заголовке теперь понятно, доставка чего именно
  • В новом разделе историй мы можем отвечать на интересующие покупателей вопросы, рассказывать о новинках и фичах
  • Переработала главные баннеры на странице и вывела весь ассортимент сервиса доставки, при этом мы также показываем рекомендации и блоки с карточками товаров
  • Показываем уведомление о том, что необходимо ввести адрес, чтобы просматривать актуальный каталог
  • Подборки упростят поиск подарка на все случаи жизни
  • Добавила блок с готовыми товарами и быстрой доставкой
  • Добавила баннер для разнообразия ленты и для продвижения определенных фичей / товаров
  • Отзывы вынесла выше, так была проблема того, что до них не долистывали и нагружали тех поддержку
  • Блок с менее популярными категориями стоит разместить в конце страницы, чтобы пользователь мог перети на категории, которые не нашел на главной

Вид "ПОСЛЕ" Каталог

Справа можно посмотреть вариант интерфейса после проведения тестирования и переработки дизайна

Изменения страницы «Каталог»

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

Для А/Б теста спроектировала вариант фильтра с мультивыбором и без фото, так как тестирование показало, что оба варианта имеют место быть

Виды поп-апа «ДО» и «ПОСЛЕ»

  • Поп-ап при добавлении товаров из разных магазинов появляется в том случае, если в корзине уже есть товар и пользователь добавляет товар из другого магазина в корзину
  • Так как в поп-апе не объясняется, почему один товар заменяется другим в корзине, необходимо было поработать над поп-апом, чтобы уменьшить количество отказов

Figma макеты проекта

С макетами в Figma можно ознакомиться по ссылке:
Figma Designs Link

С презентацией защиты проекта можно ознакомиться по ссылке:
Figma Presentation Link

Для тестирования и удобной демонстрации интерфейса был создан прототип на маленькое разрешение на андроид девайс.
С прототипом можно ознакомиться по ссылке:

Figma Prototype Mob Link

Figma Prototype Desktop Link

🎯 Цели на команду

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

1. Пройти этап дискавери
2. Увеличить Conversion Rate в первую покупку на 15%
3. Уменьшить Churn rate на 10%

Улучшить процесс поиска товаров

1. Пройти этап дискавери
2. Увеличить Life value на 10%
3. Увеличить выручку товаров из категорий Цветы и Кондитерские изделия на 20%

Доработать дизайн-систему

1. Прописать паттерны поведения компонентов
2. Кнопки перевести в переменные для облегчения работы с компонентами
3. Изменить синхронизацию с разработкой

☝️ Личные цели

Повышение эффективности покупок пользователей

1. Улучшить точности и информативности отображения категорий, что ведет к повышению удовлетворенности покупателей
2. Систематизировать отображения подборок в проде, затронутые метрики улучшены

Синхронизировать процессы между всеми командами

1. Прописать единые дизайн-процессы для всех дизайн-команд
2. Дизайн-процессы внедрить в работу

Системно проводить
исследования

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

Анализ конкурентов ♔ ♕

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

🎯 Целевая аудитория

Пользователи, которые заказывали когда-либо подарки

  • на Flowwow
  • на других сервисах
  • на Flowwow и ничего не купили
  • на Flowwow и продолжают пользоваться сервисом

Формулировка гипотез

После определения ЦА было проведено 8 интервью с пользователями и выявлены наиболее встречающиеся паттерны, на которые указывали юзеры. Данные паттерны я переформулировала в гипотезы и с помощью разработчиков они были разделены на 4 группы.

Метрики

На какие показатели я смотрела в ходе А/Б тестирования. Более подробно разбор метрик можно посмотреть по ссылке

Последний этап исследования

  • Необходимо запустить А/Б тест для подтверждения гипотез относительно фильтров и подробок
  • Провести повторное UX-тестирование и подготовить окончательные макеты на основе тестов и исследований

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

  • Проведение глубинных интервью
  • Составление опросников для проведения количественных исследований
  • Проведение тестирований системы на прототипах
  • Проведение А/Б тестирований

Рабочий процесс в деталях

👔 Взаимодействие с продакт менеджером

Задачи обсуждались с продакт менеджером. Спринт планниг также проводились с продакт менеджером.

Часто бывало, что менялись приоритеты и выставленные на задачи майки. Поэтому неотъемлемой частью работы было подстраиваться под обстоятельства.

Исследования проводились в паре с исследователем

🎨 Взаимодействие с дизайн-командой

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

👩 Моя роль на проекте

Я выступала в роли Продуктового Дизайнера. Работала над проектом единственным дизайнером

🛠️ Инструменты

В работе использовала:

  • Figma как основной инструмент
  • Localise для адаптации сайта в разных странах
  • Miro для работы с продактами, брейншторма и сбора идей

Итог

Данный проект научил меня ставить цели ОКР перед собой и командой, рассчитывать KPI, готовить макеты с А/Б тестированию и к UX-исследованиям, собирать метрики и делать выводы на основе собранных данных

Следующий проект Angel Внутренний портал