Скоро будет
Журнал. Вовлечённость и глубина чтения
Web
Media
Компания:
BSTD
Роль:
Дизайнер продукта, UX/UI
Sorry, this page is currently available in Russian only. I'll translate it soon. 🙏
Продукт — маркетплейс с более чем 2 миллионами пользователей и специфичной нишей на рынке электронной коммерции. В этом проекте я работала над экраном товара — ключевой точкой воронки, через которую проходят почти все пользователи перед покупкой. Любые проблемы на этом этапе напрямую влияют на конверсию и выручку.
Я выступала ведущим дизайнером: отвечала за весь дизайн-процесс, принимала финальные решения, была наставником для второго дизайнера и синхронизировала работу с продуктом и разработкой.
Проблема
Текущий экран товара не соответствовал ни пользовательским ожиданиям, ни требованиям продукта, ни стандартам рынка. Основные проблемы:
- Низкая конверсия в корзину
- Медленная загрузка экрана
- Ограниченные возможности для тестирования гипотез
Для конечного пользователя на уровне UX/UI это выражалось в следующем:
- Слабая вариативность размещения товаров разных категорий (для продавцов)
- Перегруженная и нелогичная структура, сложный поиск информации
- Неверные акценты или их отсутствие
- Слабая работа с доверием (особенно для новых пользователей)
Задачи и функции
Проектирование UX/UI
Конкурентный анализ
Анализ сессий
Анализ метрик
PI-планирование
Вайрфрейминг
Наставничество
Hi-fi прототипирование
Hand-off
Дизайн QA
Основной запрос менеджера продукта по реализации: подготовить для разработки постепенный редизайн экрана товара с учётом ограниченных ресурсов и перехода на SDUI технологию.
Исследование и ключевые инсайты
Чтобы глубже понять, как пользователи взаимодействуют с текущим экраном и в чём реальные проблемы, я решила сначала обратиться к накопленному опыту и нашим предыдущим исследованиям. Сформулировала основные потребности пользователей на экране товара для перехода в корзину:
- Увидеть необходимые характеристики товара
- Сформировать доверие
- Понять, как быстро получить товар
- Увидеть выгоду
- Найти альтернативу (если потребности выше не удовлетворены)
Это помогло нам сфокусироваться на самом главном в предстоящих исследованиях.
Ход исследования и методы
Сначала я зафиксировала ключевые метрики, на которые мы планировали повлиять. Постаралась охватить максимум доступных данных из текущей аналитики: конверсию в корзину и в избранное, тапы по кнопке «Сообщения» (написать продавцу), время загрузки экрана.
Затем мы провели анализ текущего решения на iOS и Android: рассматривали интерфейс по смысловым блокам, которые должны отвечать потребностям пользователя. Выявили недостатки и сильные стороны экрана, опираясь на эвристики, а также на внутренние и внешние исследования. Сформулировали первые гипотезы.
Далее проанализировали пользовательские сессии в UserX. Определили, на каких блоках пользователи задерживаются, что игнорируют и как ведут себя при просмотре разных типов товаров. Нам было важно проследить поведение пользователя от перехода из каталога в карточку, чтобы лучше понять его мотивы и соотнести их с действиями на экране товара.
Значительную часть исследования занял конкурентный анализ. Мы изучили экраны товаров восьми прямых конкурентов и сформировали около 40 идей для дальнейших экспериментов.
В рамках этого проекта также было бы полезно провести юзабилити-тестирование, однако у нас не было достаточных ресурсов. Поэтому мы опёрлись на результаты предыдущего исследования онбординга покупателей, которое я организовывала ранее. Оно включало интервью и юзабилити-тестирование и частично затрагивало экран товара. Мы использовали инсайты от 8 респондентов этого исследования, так как данные были актуальными и релевантными для текущей задачи.
Ключевые наблюдения
- Пользователи в первую очередь смотрят фото, но им не хватает удобных способов взаимодействия с ним. Например, наблюдались попытки увеличить фото мультитачем непосредственно на экране товара — ожидаемый, но отсутствующий паттерн.
- Важная информация для принятия решения (отзывы, продавец) находится слишком глубоко и трудно достигается.
- UGC со стороны продавца не помогает принять решение. Качественные исследования показывали, что сплошной текст описания и всего 2 характеристики для всех категорий товаров малоинформативны вызывают у покупателей негативный опыт.
- Пользователи путают типы товаров (в наличии / на заказ), что приводит к отказам
- Единая структура экрана не работает для всех категорий — поведение для определённых категорий сильно отличалось.
В результате мы сформировали приоритизированный пул идей, валидированных через JTBD и матрицу усилий и влияния.
Решение
Работа строилась вокруг итеративного внедрения с учётом ограничений разработки и перехода на SDUI.
Сначала мы сформировали lo-fi концепцию полного редизайна как ориентир. Затем разбили её на итерации через карту пользовательских историй, что позволило быстро согласовать план и понять, как будет выглядеть экран на каждом этапе внедрения.
1. Перестройка структуры экрана
Экран был переразбит на смысловые блоки, каждый из которых отвечает на конкретный пользовательский вопрос:
- Что это за товар? — Первый экран с фото, характеристики.
- Сколько он стоит и из чего складывается цена? — Блок с ценой, бонусами и скидками.
- Можно ли доверять? — Отзывы, блок продавца
- Как и когда я его получу? — Блок доставки
- Какие есть варианты? — Блок выбора вариантов, рекомендации
Это упростило навигацию, сократило время поиска информации. С такой структурой экран стал более привычным и отвечает современным требованиям.
2. Усиление первого экрана
Первый экран стал точкой принятия решения:
- Увеличена зона фото — она занимает бо́льшую часть экрана.
- Добавлена кнопка перехода к видео (в конец слайдера).
- Вынесены рейтинг и добавления в избранное сразу под фото. Теперь при тапе на рейтинг можно переместиться к блоку рейтинга товара — сокращено время до принятия решения. Добавления в избранное создаёт ощущение спроса на товар и подталкивает к покупке — +0,5% к конверсии в корзину.
- Унифицировано отображение типа товара. При этом разница между типами товара сразу видна.
3. Работа с доверием и отзывами
Блок продавца и отзывов полностью переработаны. Неопределённость о добросовестности продавца снижена.
В блок магазина добавлены: рейтинг магазина, стаж на платформе, бейдж проверенного качества (фича уже была в продукте, но не отображалась на экране товара). Добавлена информация об участии в бонусной системе.
Отзывы подняты выше и стали более заметными. Последний положительный отзыв вынесен на экран, а так же переход к фотографиям из отзывов. Проведена работа с экраном отзывов:
- UI и взаимодействия приведены к современным стандартам в e-com. Экран стал привычным, это особенно важно для новых пользователей.
- На экран добавлена цена и CTA для сокращения пути к следующему этапу воронки.
- Фильтры и сортировки компактно представлены в шторке.
- Устранено излишнее погружение в навигацию для прочтения отзыва.
- Исправлен копирайтинг.
4. Адаптивность и гибкость
Структура экрана стала вариативной — порядок блоков и перечень характеристик меняются в отдельных категориях, требующих особой подачи информации. Добавлены варианты товаров (размер, цвет и др.)
Это повлияло на другие участки продукта: поисковые алгоритмы, фильтры, создание товара.
Проработаны и такие интересные кейсы, когда покупателю требуются нестандартные размеры изделия. В таком случае флоу ведёт к уже существующей функции персонального заказа.
5. Работа с критическими ошибками UX
Была устранена одна из ключевых проблем — путаница типов товаров.
У товара «На заказ» всегда есть дополнительное время изготовления товара. Из-за того, что CTA кнопки товаров «В наличии» и товаров «На заказ» были одинаковыми, пользователи часто не понимали разницу между ними и получали негативный опыт из-за неверных ожиданий.
CTA кнопки товара «На заказ» изменился на соответствующий действию — «Заказать».
Результат: Количество ошибок, обращения в саппорт и негативные отзывы сильно сократились.
6. Оптимизация восприятия информации
- Сгруппированы характеристики и описание. В компактном виде отображаются ключевые параметры для выбора, подробности вынесены в шторку.
- Устранён визуальный шум, скорректирована иерархия элементов и акценты.
- Упрощён блок доставки. В компактном виде отображается город доставки с возможностью изменения, а также самый дешёвый и быстрый способ. Остальные варианты доступны в шторке. Для товаров «на заказ» здесь же указан срок изготовления, что снижает количество ошибочных заказов из-за неверного ожидания сроков.
Предварительное тестирование прототипа показало, что пользователи быстрее принимают решение и легче ориентируются в интерфейсе. UI стал современнее и вызывает более позитивное восприятие.
Результат
На момент написания кейс в стадии разработки. Уже сейчас внедрено несколько итераций и видны первые результаты по улучшению показателей:
+1,5%
к конверсии в корзину (YoY)
+1,1%
к добавлению в избранное
Скорость принятия решения
По результатам тестирования прототипа пользователи быстрее находят нужные данные и принимают решение без лишнего скролла. Наблюдалось меньше возвратов к предыдущим блокам.
Читаемость
Пользователи легче ориентировались в интерфейсе и быстрее находили нужные блоки, реже задавали уточняющие вопросы.
Снижение негативного опыта
Снизилось количество ошибок в интерпретации сроков и условий покупки.
Смотреть далее
Скоро будет
Bars. Сайт и дизайн-система производителя шин
B2B
D2C
Multilanguage
Экран товара в е-com. Рост конверсии.
Компания:
BSTD
Роль:
Дизайнер продукта, UX/UI
Sorry, this page is currently available in Russian only. I'll translate it soon. 🙏
Продукт — маркетплейс с более чем 2 миллионами пользователей и специфичной нишей на рынке электронной коммерции. В этом проекте я работала над экраном товара — ключевой точкой воронки, через которую проходят почти все пользователи перед покупкой. Любые проблемы на этом этапе напрямую влияют на конверсию и выручку.
Я выступала ведущим дизайнером: отвечала за весь дизайн-процесс, принимала финальные решения, была наставником для второго дизайнера и синхронизировала работу с продуктом и разработкой.
Проблема
Текущий экран товара не соответствовал ни пользовательским ожиданиям, ни требованиям продукта, ни стандартам рынка. Основные проблемы:
- Низкая конверсия в корзину
- Медленная загрузка экрана
- Ограниченные возможности для тестирования гипотез
Для конечного пользователя на уровне UX/UI это выражалось в следующем:
- Слабая вариативность размещения товаров разных категорий (для продавцов)
- Перегруженная и нелогичная структура, сложный поиск информации
- Неверные акценты или их отсутствие
- Слабая работа с доверием (особенно для новых пользователей)
Задачи и функции
Проектирование UX/UI
Конкурентный анализ
Анализ сессий
Анализ метрик
PI-планирование
Вайрфрейминг
Наставничество
Hi-fi прототипирование
Hand-off
Дизайн QA
Основной запрос менеджера продукта по реализации: подготовить для разработки постепенный редизайн экрана товара с учётом ограниченных ресурсов и перехода на SDUI технологию.
Исследование и ключевые инсайты
Чтобы глубже понять, как пользователи взаимодействуют с текущим экраном и в чём реальные проблемы, я решила сначала обратиться к накопленному опыту и нашим предыдущим исследованиям. Сформулировала основные потребности пользователей на экране товара для перехода в корзину:
- Увидеть необходимые характеристики товара
- Сформировать доверие
- Понять, как быстро получить товар
- Увидеть выгоду
- Найти альтернативу (если потребности выше не удовлетворены)
Это помогло нам сфокусироваться на самом главном в предстоящих исследованиях.
Ход исследования и методы
Сначала я зафиксировала ключевые метрики, на которые мы планировали повлиять. Постаралась охватить максимум доступных данных из текущей аналитики: конверсию в корзину и в избранное, тапы по кнопке «Сообщения» (написать продавцу), время загрузки экрана.
Затем мы провели анализ текущего решения на iOS и Android: рассматривали интерфейс по смысловым блокам, которые должны отвечать потребностям пользователя. Выявили недостатки и сильные стороны экрана, опираясь на эвристики, а также на внутренние и внешние исследования. Сформулировали первые гипотезы.
Далее проанализировали пользовательские сессии в UserX. Определили, на каких блоках пользователи задерживаются, что игнорируют и как ведут себя при просмотре разных типов товаров. Нам было важно проследить поведение пользователя от перехода из каталога в карточку, чтобы лучше понять его мотивы и соотнести их с действиями на экране товара.
Значительную часть исследования занял конкурентный анализ. Мы изучили экраны товаров восьми прямых конкурентов и сформировали около 40 идей для дальнейших экспериментов.
В рамках этого проекта также было бы полезно провести юзабилити-тестирование, однако у нас не было достаточных ресурсов. Поэтому мы опёрлись на результаты предыдущего исследования онбординга покупателей, которое я организовывала ранее. Оно включало интервью и юзабилити-тестирование и частично затрагивало экран товара. Мы использовали инсайты от 8 респондентов этого исследования, так как данные были актуальными и релевантными для текущей задачи.
Ключевые наблюдения
- Пользователи в первую очередь смотрят фото, но им не хватает удобных способов взаимодействия с ним. Например, наблюдались попытки увеличить фото мультитачем непосредственно на экране товара — ожидаемый, но отсутствующий паттерн.
- Важная информация для принятия решения (отзывы, продавец) находится слишком глубоко и трудно достигается.
- UGC со стороны продавца не помогает принять решение. Качественные исследования показывали, что сплошной текст описания и всего 2 характеристики для всех категорий товаров малоинформативны вызывают у покупателей негативный опыт.
- Пользователи путают типы товаров (в наличии / на заказ), что приводит к отказам
- Единая структура экрана не работает для всех категорий — поведение для определённых категорий сильно отличалось.
В результате мы сформировали приоритизированный пул идей, валидированных через JTBD и матрицу усилий и влияния.
Решение
Работа строилась вокруг итеративного внедрения с учётом ограничений разработки и перехода на SDUI.
Сначала мы сформировали lo-fi концепцию полного редизайна как ориентир. Затем разбили её на итерации через карту пользовательских историй, что позволило быстро согласовать план и понять, как будет выглядеть экран на каждом этапе внедрения.
1. Перестройка структуры экрана
Экран был переразбит на смысловые блоки, каждый из которых отвечает на конкретный пользовательский вопрос:
- Что это за товар? — Первый экран с фото, характеристики.
- Сколько он стоит и из чего складывается цена? — Блок с ценой, бонусами и скидками.
- Можно ли доверять? — Отзывы, блок продавца
- Как и когда я его получу? — Блок доставки
- Какие есть варианты? — Блок выбора вариантов, рекомендации
Это упростило навигацию, сократило время поиска информации. С такой структурой экран стал более привычным и отвечает современным требованиям.
2. Усиление первого экрана
Первый экран стал точкой принятия решения:
- Увеличена зона фото — она занимает бо́льшую часть экрана.
- Добавлена кнопка перехода к видео (в конец слайдера).
- Вынесены рейтинг и добавления в избранное сразу под фото. Теперь при тапе на рейтинг можно переместиться к блоку рейтинга товара — сокращено время до принятия решения. Добавления в избранное создаёт ощущение спроса на товар и подталкивает к покупке — +0,5% к конверсии в корзину.
- Унифицировано отображение типа товара. При этом разница между типами товара сразу видна.
3. Работа с доверием и отзывами
Блок продавца и отзывов полностью переработаны. Неопределённость о добросовестности продавца снижена.
В блок магазина добавлены: рейтинг магазина, стаж на платформе, бейдж проверенного качества (фича уже была в продукте, но не отображалась на экране товара). Добавлена информация об участии в бонусной системе.
Отзывы подняты выше и стали более заметными. Последний положительный отзыв вынесен на экран, а так же переход к фотографиям из отзывов. Проведена работа с экраном отзывов:
- UI и взаимодействия приведены к современным стандартам в e-com. Экран стал привычным, это особенно важно для новых пользователей.
- На экран добавлена цена и CTA для сокращения пути к следующему этапу воронки.
- Фильтры и сортировки компактно представлены в шторке.
- Устранено излишнее погружение в навигацию для прочтения отзыва.
- Исправлен копирайтинг.
4. Адаптивность и гибкость
Структура экрана стала вариативной — порядок блоков и перечень характеристик меняются в отдельных категориях, требующих особой подачи информации. Добавлены варианты товаров (размер, цвет и др.)
Это повлияло на другие участки продукта: поисковые алгоритмы, фильтры, создание товара.
Проработаны и такие интересные кейсы, когда покупателю требуются нестандартные размеры изделия. В таком случае флоу ведёт к уже существующей функции персонального заказа.
5. Работа с критическими ошибками UX
Была устранена одна из ключевых проблем — путаница типов товаров.
У товара «На заказ» всегда есть дополнительное время изготовления товара. Из-за того, что CTA кнопки товаров «В наличии» и товаров «На заказ» были одинаковыми, пользователи часто не понимали разницу между ними и получали негативный опыт из-за неверных ожиданий.
CTA кнопки товара «На заказ» изменился на соответствующий действию — «Заказать».
Результат: Количество ошибок, обращения в саппорт и негативные отзывы сильно сократились.
6. Оптимизация восприятия информации
- Сгруппированы характеристики и описание. В компактном виде отображаются ключевые параметры для выбора, подробности вынесены в шторку.
- Устранён визуальный шум, скорректирована иерархия элементов и акценты.
- Упрощён блок доставки. В компактном виде отображается город доставки с возможностью изменения, а также самый дешёвый и быстрый способ. Остальные варианты доступны в шторке. Для товаров «на заказ» здесь же указан срок изготовления, что снижает количество ошибочных заказов из-за неверного ожидания сроков.
Предварительное тестирование прототипа показало, что пользователи быстрее принимают решение и легче ориентируются в интерфейсе. UI стал современнее и вызывает более позитивное восприятие.
Результат
На момент написания кейс в стадии разработки. Уже сейчас внедрено несколько итераций и видны первые результаты по улучшению показателей:
+1,5%
к конверсии в корзину (YoY)
+1,1%
к добавлению в избранное
Скорость принятия решения
По результатам тестирования прототипа пользователи быстрее находят нужные данные и принимают решение без лишнего скролла. Наблюдалось меньше возвратов к предыдущим блокам.
Читаемость
Пользователи легче ориентировались в интерфейсе и быстрее находили нужные блоки, реже задавали уточняющие вопросы.
Снижение негативного опыта
Снизилось количество ошибок в интерпретации сроков и условий покупки.
Смотреть далее
Скоро будет
Журнал. Вовлечённость и глубина чтения
Web
Media
Скоро будет
Bars. Сайт и дизайн-система производителя шин
B2B
D2C
Multilanguage
Компания:
NDA
Роль:
Продуктовый дизайнер, UX/UI
Экран товара в е-com. Рост конверсии.
Sorry, this page is currently available in Russian only. I'll translate it soon. 🙏
Продукт — маркетплейс с более чем 2 миллионами пользователей и специфичной нишей на рынке электронной коммерции. В этом проекте я работала над экраном товара — ключевой точкой воронки, через которую проходят почти все пользователи перед покупкой. Любые проблемы на этом этапе напрямую влияют на конверсию и выручку.
Я выступала ведущим дизайнером: отвечала за весь дизайн-процесс, принимала финальные решения, была наставником для второго дизайнера и синхронизировала работу с продуктом и разработкой.
Проблема
Текущий экран товара не соответствовал ни пользовательским ожиданиям, ни требованиям продукта, ни стандартам рынка. Основные проблемы:
- Низкая конверсия в корзину
- Медленная загрузка экрана
- Ограниченные возможности для тестирования гипотез
Для конечного пользователя на уровне UX/UI это выражалось в следующем:
- Слабая вариативность размещения товаров разных категорий (для продавцов)
- Перегруженная и нелогичная структура, сложный поиск информации
- Неверные акценты или их отсутствие
- Слабая работа с доверием (особенно для новых пользователей)
Задачи и функции
Проектирование UX/UI
Конкурентный анализ
Анализ сессий
Анализ метрик
PI-планирование
Вайрфрейминг
Наставничество
Hi-fi прототипирование
Hand-off
Дизайн QA
Основной запрос менеджера продукта по реализации: подготовить для разработки постепенный редизайн экрана товара с учётом ограниченных ресурсов и перехода на SDUI технологию.
Исследование и ключевые инсайты
Чтобы глубже понять, как пользователи взаимодействуют с текущим экраном и в чём реальные проблемы, я решила сначала обратиться к накопленному опыту и нашим предыдущим исследованиям. Сформулировала основные потребности пользователей на экране товара для перехода в корзину:
- Увидеть необходимые характеристики товара
- Сформировать доверие
- Понять, как быстро получить товар
- Увидеть выгоду
- Найти альтернативу (если потребности выше не удовлетворены)
Это помогло нам сфокусироваться на самом главном в предстоящих исследованиях.
Ход исследования и методы
Сначала я зафиксировала ключевые метрики, на которые мы планировали повлиять. Постаралась охватить максимум доступных данных из текущей аналитики: конверсию в корзину и в избранное, тапы по кнопке «Сообщения» (написать продавцу), время загрузки экрана.
Затем мы провели анализ текущего решения на iOS и Android: рассматривали интерфейс по смысловым блокам, которые должны отвечать потребностям пользователя. Выявили недостатки и сильные стороны экрана, опираясь на эвристики, а также на внутренние и внешние исследования. Сформулировали первые гипотезы.
Далее проанализировали пользовательские сессии в UserX. Определили, на каких блоках пользователи задерживаются, что игнорируют и как ведут себя при просмотре разных типов товаров. Нам было важно проследить поведение пользователя от перехода из каталога в карточку, чтобы лучше понять его мотивы и соотнести их с действиями на экране товара.
Значительную часть исследования занял конкурентный анализ. Мы изучили экраны товаров восьми прямых конкурентов и сформировали около 40 идей для дальнейших экспериментов.
В рамках этого проекта также было бы полезно провести юзабилити-тестирование, однако у нас не было достаточных ресурсов. Поэтому мы опёрлись на результаты предыдущего исследования онбординга покупателей, которое я организовывала ранее. Оно включало интервью и юзабилити-тестирование и частично затрагивало экран товара. Мы использовали инсайты от 8 респондентов этого исследования, так как данные были актуальными и релевантными для текущей задачи.
Ключевые наблюдения
- Пользователи в первую очередь смотрят фото, но им не хватает удобных способов взаимодействия с ним. Например, наблюдались попытки увеличить фото мультитачем непосредственно на экране товара — ожидаемый, но отсутствующий паттерн.
- Важная информация для принятия решения (отзывы, продавец) находится слишком глубоко и трудно достигается.
- UGC со стороны продавца не помогает принять решение. Качественные исследования показывали, что сплошной текст описания и всего 2 характеристики для всех категорий товаров малоинформативны вызывают у покупателей негативный опыт.
- Пользователи путают типы товаров (в наличии / на заказ), что приводит к отказам
- Единая структура экрана не работает для всех категорий — поведение для определённых категорий сильно отличалось.
В результате мы сформировали приоритизированный пул идей, валидированных через JTBD и матрицу усилий и влияния.
Решение
Работа строилась вокруг итеративного внедрения с учётом ограничений разработки и перехода на SDUI.
Сначала мы сформировали lo-fi концепцию полного редизайна как ориентир. Затем разбили её на итерации через карту пользовательских историй, что позволило быстро согласовать план и понять, как будет выглядеть экран на каждом этапе внедрения.
1. Перестройка структуры экрана
Экран был переразбит на смысловые блоки, каждый из которых отвечает на конкретный пользовательский вопрос:
- Что это за товар? — Первый экран с фото, характеристики.
- Сколько он стоит и из чего складывается цена? — Блок с ценой, бонусами и скидками.
- Можно ли доверять? — Отзывы, блок продавца
- Как и когда я его получу? — Блок доставки
- Какие есть варианты? — Блок выбора вариантов, рекомендации
Это упростило навигацию, сократило время поиска информации. С такой структурой экран стал более привычным и отвечает современным требованиям.
2. Усиление первого экрана
Первый экран стал точкой принятия решения:
- Увеличена зона фото — она занимает бо́льшую часть экрана.
- Добавлена кнопка перехода к видео (в конец слайдера).
- Вынесены рейтинг и добавления в избранное сразу под фото. Теперь при тапе на рейтинг можно переместиться к блоку рейтинга товара — сокращено время до принятия решения. Добавления в избранное создаёт ощущение спроса на товар и подталкивает к покупке — +0,5% к конверсии в корзину.
- Унифицировано отображение типа товара. При этом разница между типами товара сразу видна.
3. Работа с доверием и отзывами
Блок продавца и отзывов полностью переработаны. Неопределённость о добросовестности продавца снижена.
В блок магазина добавлены: рейтинг магазина, стаж на платформе, бейдж проверенного качества (фича уже была в продукте, но не отображалась на экране товара). Добавлена информация об участии в бонусной системе.
Отзывы подняты выше и стали более заметными. Последний положительный отзыв вынесен на экран, а так же переход к фотографиям из отзывов. Проведена работа с экраном отзывов:
- UI и взаимодействия приведены к современным стандартам в e-com. Экран стал привычным, это особенно важно для новых пользователей.
- На экран добавлена цена и CTA для сокращения пути к следующему этапу воронки.
- Фильтры и сортировки компактно представлены в шторке.
- Устранено излишнее погружение в навигацию для прочтения отзыва.
- Исправлен копирайтинг.
4. Адаптивность и гибкость
Структура экрана стала вариативной — порядок блоков и перечень характеристик меняются в отдельных категориях, требующих особой подачи информации. Добавлены варианты товаров (размер, цвет и др.)
Это повлияло на другие участки продукта: поисковые алгоритмы, фильтры, создание товара.
Проработаны и такие интересные кейсы, когда покупателю требуются нестандартные размеры изделия. В таком случае флоу ведёт к уже существующей функции персонального заказа.
5. Работа с критическими ошибками UX
Была устранена одна из ключевых проблем — путаница типов товаров.
У товара «На заказ» всегда есть дополнительное время изготовления товара. Из-за того, что CTA кнопки товаров «В наличии» и товаров «На заказ» были одинаковыми, пользователи часто не понимали разницу между ними и получали негативный опыт из-за неверных ожиданий.
CTA кнопки товара «На заказ» изменился на соответствующий действию — «Заказать».
Результат: Количество ошибок, обращения в саппорт и негативные отзывы сильно сократились.
6. Оптимизация восприятия информации
- Сгруппированы характеристики и описание. В компактном виде отображаются ключевые параметры для выбора, подробности вынесены в шторку.
- Устранён визуальный шум, скорректирована иерархия элементов и акценты.
- Упрощён блок доставки. В компактном виде отображается город доставки с возможностью изменения, а также самый дешёвый и быстрый способ. Остальные варианты доступны в шторке. Для товаров «на заказ» здесь же указан срок изготовления, что снижает количество ошибочных заказов из-за неверного ожидания сроков.
Предварительное тестирование прототипа показало, что пользователи быстрее принимают решение и легче ориентируются в интерфейсе. UI стал современнее и вызывает более позитивное восприятие.
Результат
На момент написания кейс в стадии разработки. Уже сейчас внедрено несколько итераций и видны первые результаты по улучшению показателей:
+1,5%
к конверсии в корзину (YoY)
+1,1%
к добавлению в избранное
Скорость принятия решения
По результатам тестирования прототипа пользователи быстрее находят нужные данные и принимают решение без лишнего скролла. Наблюдалось меньше возвратов к предыдущим блокам.
Читаемость
Пользователи легче ориентировались в интерфейсе и быстрее находили нужные блоки, реже задавали уточняющие вопросы.
Снижение негативного опыта
Снизилось количество ошибок в интерпретации сроков и условий покупки.
Смотреть далее
Скоро будет
Журнал. Вовлечённость и глубина чтения
Web
Media
Скоро будет
Bars. Сайт и дизайн-система производителя шин
B2B
D2C
Multilanguage
Компания:
NDA
Роль:
Продуктовый дизайнер, UX/UI
Экран товара в е-com. Рост конверсии.
Sorry, this page is currently available in Russian only. I'll translate it soon. 🙏
Продукт — маркетплейс с более чем 2 миллионами пользователей и специфичной нишей на рынке электронной коммерции. В этом проекте я работала над экраном товара — ключевой точкой воронки, через которую проходят почти все пользователи перед покупкой. Любые проблемы на этом этапе напрямую влияют на конверсию и выручку.
Я выступала ведущим дизайнером: отвечала за весь дизайн-процесс, принимала финальные решения, была наставником для второго дизайнера и синхронизировала работу с продуктом и разработкой.
Проблема
Текущий экран товара не соответствовал ни пользовательским ожиданиям, ни требованиям продукта, ни стандартам рынка. Основные проблемы:
- Низкая конверсия в корзину
- Медленная загрузка экрана
- Ограниченные возможности для тестирования гипотез
Для конечного пользователя на уровне UX/UI это выражалось в следующем:
- Слабая вариативность размещения товаров разных категорий (для продавцов)
- Перегруженная и нелогичная структура, сложный поиск информации
- Неверные акценты или их отсутствие
- Слабая работа с доверием (особенно для новых пользователей)
Задачи и функции
Проектирование UX/UI
Конкурентный анализ
Анализ сессий
Анализ метрик
PI-планирование
Вайрфрейминг
Наставничество
Hi-fi прототипирование
Hand-off
Дизайн QA
Основной запрос менеджера продукта по реализации: подготовить для разработки постепенный редизайн экрана товара с учётом ограниченных ресурсов и перехода на SDUI технологию.
Исследование и ключевые инсайты
Чтобы глубже понять, как пользователи взаимодействуют с текущим экраном и в чём реальные проблемы, я решила сначала обратиться к накопленному опыту и нашим предыдущим исследованиям. Сформулировала основные потребности пользователей на экране товара для перехода в корзину:
- Увидеть необходимые характеристики товара
- Сформировать доверие
- Понять, как быстро получить товар
- Увидеть выгоду
- Найти альтернативу (если потребности выше не удовлетворены)
Это помогло нам сфокусироваться на самом главном в предстоящих исследованиях.
Ход исследования и методы
Сначала я зафиксировала ключевые метрики, на которые мы планировали повлиять. Постаралась охватить максимум доступных данных из текущей аналитики: конверсию в корзину и в избранное, тапы по кнопке «Сообщения» (написать продавцу), время загрузки экрана.
Затем мы провели анализ текущего решения на iOS и Android: рассматривали интерфейс по смысловым блокам, которые должны отвечать потребностям пользователя. Выявили недостатки и сильные стороны экрана, опираясь на эвристики, а также на внутренние и внешние исследования. Сформулировали первые гипотезы.
Далее проанализировали пользовательские сессии в UserX. Определили, на каких блоках пользователи задерживаются, что игнорируют и как ведут себя при просмотре разных типов товаров. Нам было важно проследить поведение пользователя от перехода из каталога в карточку, чтобы лучше понять его мотивы и соотнести их с действиями на экране товара.
Значительную часть исследования занял конкурентный анализ. Мы изучили экраны товаров восьми прямых конкурентов и сформировали около 40 идей для дальнейших экспериментов.
В рамках этого проекта также было бы полезно провести юзабилити-тестирование, однако у нас не было достаточных ресурсов. Поэтому мы опёрлись на результаты предыдущего исследования онбординга покупателей, которое я организовывала ранее. Оно включало интервью и юзабилити-тестирование и частично затрагивало экран товара. Мы использовали инсайты от 8 респондентов этого исследования, так как данные были актуальными и релевантными для текущей задачи.
Ключевые наблюдения
- Пользователи в первую очередь смотрят фото, но им не хватает удобных способов взаимодействия с ним. Например, наблюдались попытки увеличить фото мультитачем непосредственно на экране товара — ожидаемый, но отсутствующий паттерн.
- Важная информация для принятия решения (отзывы, продавец) находится слишком глубоко и трудно достигается.
- UGC со стороны продавца не помогает принять решение. Качественные исследования показывали, что сплошной текст описания и всего 2 характеристики для всех категорий товаров малоинформативны для покупателей и сильно ограничивают продавцов при создании товара.
- Пользователи путают типы товаров (в наличии / на заказ), что приводит к отказам
- Единая структура экрана не работает для всех категорий — поведение для определённых категорий сильно отличалось.
В результате мы сформировали приоритизированный пул идей, валидированных через JTBD и матрицу усилий и влияния.
Решение
Работа строилась вокруг итеративного внедрения с учётом ограничений разработки и перехода на SDUI.
Сначала мы сформировали lo-fi концепцию полного редизайна как ориентир. Затем разбили её на итерации через карту пользовательских историй, что позволило быстро согласовать план и понять, как будет выглядеть экран на каждом этапе внедрения.
1. Перестройка структуры экрана
Экран был переразбит на смысловые блоки, каждый из которых отвечает на конкретный пользовательский вопрос:
- Что это за товар? — Первый экран с фото, характеристики.
- Сколько он стоит и из чего складывается цена? — Блок с ценой, бонусами и скидками.
- Можно ли доверять? — Отзывы, блок продавца
- Как и когда я его получу? — Блок доставки
- Какие есть варианты? — Блок выбора вариантов, рекомендации
Это упростило навигацию, сократило время поиска информации. С такой структурой экран стал более привычным и отвечает современным требованиям.
2. Усиление первого экрана
Первый экран стал точкой принятия решения:
- Увеличена зона фото — она занимает бо́льшую часть экрана.
- Добавлена кнопка перехода к видео (в конец слайдера).
- Вынесены рейтинг и добавления в избранное сразу под фото. Теперь при тапе на рейтинг можно переместиться к блоку рейтинга товара — сокращено время до принятия решения. Добавления в избранное создаёт ощущение спроса на товар и подталкивает к покупке — +0,5% к конверсии в корзину.
- Унифицировано отображение типа товара. При этом разница между типами товара сразу видна.
3. Работа с доверием и отзывами
Блок продавца и отзывов полностью переработаны. Неопределённость о добросовестности продавца снижена.
В блок магазина добавлены: рейтинг магазина, стаж на платформе, бейдж проверенного качества (фича уже была в продукте, но не отображалась на экране товара). Добавлена информация об участии в бонусной системе.
Отзывы подняты выше и стали более заметными. Последний положительный отзыв вынесен на экран, а так же переход к фотографиям из отзывов. Проведена работа с экраном отзывов:
- UI и взаимодействия приведены к современным стандартам в e-com. Экран стал привычным, это особенно важно для новых пользователей.
- На экран добавлена цена и CTA для сокращения пути к следующему этапу воронки.
- Фильтры и сортировки компактно представлены в шторке.
- Устранено излишнее погружение в навигацию для прочтения отзыва.
- Исправлен копирайтинг.
4. Адаптивность и гибкость
Структура экрана стала вариативной — порядок блоков и перечень характеристик меняются в отдельных категориях, требующих особой подачи информации. Добавлены варианты товаров (размер, цвет и др.)
Это повлияло на другие участки продукта: поисковые алгоритмы, фильтры, создание товара.
Проработаны и такие интересные кейсы, когда покупателю требуются нестандартные размеры изделия. В таком случае флоу ведёт к уже существующей функции персонального заказа.
5. Работа с критическими ошибками UX
Была устранена одна из ключевых проблем — путаница типов товаров.
У товара «На заказ» всегда есть дополнительное время изготовления товара. Из-за того, что CTA кнопки товаров «В наличии» и товаров «На заказ» были одинаковыми, пользователи часто не понимали разницу между ними и получали негативный опыт из-за неверных ожиданий.
CTA кнопки товара «На заказ» изменился на соответствующий действию — «Заказать».
Результат: Количество ошибок, обращения в саппорт и негативные отзывы сильно сократились.
6. Оптимизация восприятия информации
- Сгруппированы характеристики и описание. В компактном виде отображаются ключевые параметры для выбора, подробности вынесены в шторку.
- Устранён визуальный шум, скорректирована иерархия элементов и акценты.
- Упрощён блок доставки. В компактном виде отображается город доставки с возможностью изменения, а также самый дешёвый и быстрый способ. Остальные варианты доступны в шторке. Для товаров «на заказ» здесь же указан срок изготовления, что снижает количество ошибочных заказов из-за неверного ожидания сроков.
Предварительное тестирование прототипа показало, что пользователи быстрее принимают решение и легче ориентируются в интерфейсе. UI стал современнее и вызывает более позитивное восприятие.
Результат
На момент написания кейс в стадии разработки. Уже сейчас внедрено несколько итераций и видны первые результаты по улучшению показателей:
+1,5%
к конверсии в корзину (YoY)
+1,1%
к добавлению в избранное
Скорость принятия решения
По результатам тестирования прототипа пользователи быстрее находят нужные данные и принимают решение без лишнего скролла. Наблюдалось меньше возвратов к предыдущим блокам.
Читаемость
Пользователи легче ориентировались в интерфейсе и быстрее находили нужные блоки, реже задавали уточняющие вопросы.
Снижение негативного опыта
Снизилось количество ошибок в интерпретации сроков и условий покупки.
Смотреть далее
Скоро будет
Журнал. Вовлечённость и глубина чтения
Web
Media
Скоро будет
Bars. Сайт и дизайн-система производителя шин
B2B
D2C
Multilanguage