585 Золотой
E-commerce. Cross-platform.
Описание проекта
Сайт и мобильное приложение (iOS, Android) по продаже ювелирных украшений и аксессуаров сегмента mass market.
Подробнее о проекте и моей роли
До формирования моей продуктовой команды компания была сосредоточена на офлайн-продажах, а цифровые продукты существовали в зачатке.
За 5,5 лет я прошла путь от запуска MVP до устойчивой операционной модели и внедрения дизайн-системы. Я участвовала в создании и развитии порядка 70% решений, которые до сих пор используются в компании. Это были как успешные решения, так и вынужденные компромиссы, и провалы с последующей работой над ошибками — всё это дало мне ценный и разносторонний опыт.
За 5,5 лет я прошла путь от запуска MVP до устойчивой операционной модели и внедрения дизайн-системы. Я участвовала в создании и развитии порядка 70% решений, которые до сих пор используются в компании. Это были как успешные решения, так и вынужденные компромиссы, и провалы с последующей работой над ошибками — всё это дало мне ценный и разносторонний опыт.
Моя роль
Ведущий продуктовый дизайнер с расширенными зонами ответственности.
- Я не была закреплена за отдельным флоу, а принимала решения во всех частях продукта: от клиентских до внутренних сервисов для сотрудников.
- Защищала подходы и решения на уровне бизнеса, презентовала C-level. Плотно взаимодействовала с фронт- и бэк-разработкой.
- Участвовала в формировании бэклога, распределении задач.
- Участвовала в найме и онбординге новых дизайнеров, помогала в адаптации и развитии.
Что я сделала для клиентской части продукта
- Главная страница
- Листинг
- Страница товара
- Корзина
- Оформение заказа
- Личный кабинет
- Список заказов и страница заказа
- Сценарии возвратов: список, карточка, оформление
- …и десятки других элементов продукта, включая промо-механики, уведомления, фильтры, техдолг и дизайн-систему.
Кейс
Оформление заказа
Задача от бизнеса
Сократить количество обращений в колл-центр (📉 Contact Rate), увеличить количество заказов через сайт (📈 Conversion Rate).
Дискавери
Путём анализа релевантных обращений в саппорт, отзывов со сторов, просмотра сессий, коридорных исследований, анализа прямых и косвенных конкурентов, я сформулировала верхнеуровневые проблемы:
- Неочевидное двухэтапное оформление
- Плохой мобильный опыт
- Громоздкие и неудобные inline-формы
- Морально устаревший дизайн
Интерфейс оформления заказа на старте работы над задачей
Цели и гипотезы
Оговорюсь, что вопрос о внедрении дизайн-системы поднимался давно. Было решено начать с оформления заказа как с ключевого и сложного флоу.
Из этого определились цели команды:
К целям бизнеса идем через сокращение количества незавершенных оформлений заказа (📉 Checkout Abandonment Rate, 📈 Task Success Rate).
Гипотезы:
Из этого определились цели команды:
- Уменьшить технический долг
- Подготовить платформу к масштабированию и редизайну
К целям бизнеса идем через сокращение количества незавершенных оформлений заказа (📉 Checkout Abandonment Rate, 📈 Task Success Rate).
Гипотезы:
- Объеденить флоу в один экран, чтобы упростить путь пользователя и снизить количество незавершённых оформлений.
- Отказ от inline-форм, чтобы интерфейс был предсказуемым и не вызывал дополнительной когнитивной нагрузки.
- Обновить дизайн, чтобы повысить доверие к оформлению и привести экран к современным стандартам восприятия.
Процесс
Для создания концептуально нового UI не было времени и ресурсов. Поэтому мы пошли в сторону актуальных на тот момент округлых форм, плашек и выстраивания визуальной консистентности.
Флоу декомпозировали на отдельные подзадачи: данные покупателя/получателя, способ получения и пр. Об этих частностях можно написать еще с десяток кейсов, но так мы с вами застрянем надолго)
Флоу декомпозировали на отдельные подзадачи: данные покупателя/получателя, способ получения и пр. Об этих частностях можно написать еще с десяток кейсов, но так мы с вами застрянем надолго)
От частного к общему
После череды проработок и тестирования отдельный шагов, я собрала единый экран оформления заказа и провела юзабилити-тесты, ведь эмергентность никто не отменял. TSR≈70% — отличный прогресс, но есть что докрутить.
Например, в мобильном интерфейсе страница стала значительно длиннее. Увеличился показатель прокруток вверх-вниз, время до целевого клика.
Например, в мобильном интерфейсе страница стала значительно длиннее. Увеличился показатель прокруток вверх-вниз, время до целевого клика.
Обновленный интерфейс оформления заказа
Путем очередного этапа исследований, я выяснила, что среди наших пользователей ощутимый процент — «тревожных» покупателей. Им важно неоднократно проверить заполненные данные.
💡 Из интересного
Среди «тревожных» пользователей выделился сегмент тревожных-инвесторов — тех, кто покупает ювелирку как инвестицию. Им критично видеть точные характеристики изделия, которые зависят от размера. Я доработала страницу товара: теперь характеристики обновляются при выборе размера. Это снизило количество отказов на карточке на 12%.
Возвращаемся к кейсу...
Для снижения тревожности я поработала с фиксированным блоком внизу экрана. Для помощи в самопроверке вывела туда короткую информацию о количестве товаров, способе получения, способе оплаты и итоговой сумме. Попутно на тестах проверила, насколько блок заметен и как воспринимаются текстовые формулировки. Финальная версия отыграла хорошо: пользователи быстрее ориентировались и меньше блуждали по странице.
Саммари-блок
Понимая, что флоу оформления заказа будут выкатывать поэтапно, я уточнила порядок внедрения и предусмотрела версионность саммари-блока.
Пошаговая реализация саммари-блока: V1 → V2 → V3
Релиз
Выкатывались в прод поэтапно на органиченный процент аудитории, что позволяло безопасно протестировать реакцию пользователей и быстро реагировать на фидбек.
Например, на этапе способа получения не все пользователи понимали, что для изменения выбранного адреса нужно тапнуть/кликнуть по нему. И, как водится, нет ничего лучше решения в лоб — кнопка «Выбрать другой…».
Например, на этапе способа получения не все пользователи понимали, что для изменения выбранного адреса нужно тапнуть/кликнуть по нему. И, как водится, нет ничего лучше решения в лоб — кнопка «Выбрать другой…».
Пример доработки флоу после релиза на основании пользовательского фидбека
🎯 Результат
Через месяц после полного обновления экрана продакты сняли метрики и сообщили о положительном фидбеке — как от пользователей, так и от бизнеса.
Экран стал чище и современнее — это упрощение, вкупе с UX-улучшениями, дало ощутимый эффект:
Да, там всё ещё есть, что докручивать, но это был большой шаг вперёд.
Экран стал чище и современнее — это упрощение, вкупе с UX-улучшениями, дало ощутимый эффект:
- на 18% чаще пользователи завершали оформление без обращения в колл-центр,
- количество возвратов к предыдущим шагам снизилось на 22%,
- на 30% сократилось количество обращений в поддержку по вопросам оформления.
Да, там всё ещё есть, что докручивать, но это был большой шаг вперёд.
Почитать кейс покороче, вернуться на главную