Как решала задачу
Работа велась итерационно. На каждом этапе я согласовывала решения с дизайн-лидом, получала фидбэк и дорабатывала. После этого показывала результат клиенту. Регулярно созванивалась с заказчиками, чтобы избежать недопониманий и учесть все нюансы.
Discovery (исследование)
Анализ текущего решения
Сначала я проанализировала текущее решение на сайте.
Глубинные интервью
Инициировала интервью с тремя call-менеджерами ARKADIA — они ежедневно общаются
с пользователями.
Также провела отдельный созвон с клиентами и проектным менеджером.
Общие ключевые проблемы, которые я выделила
Запутанный флоу для B2B. После регистрации пользователю приходит письмо, но доступ к проф. ценам открывается только после загрузки диплома. Кнопка загрузки — сложно находима.
Проверка вручную. Менеджеры просматривают дипломы и вручную открывают доступ. Это сильно загружает команду.
Проблемы с конверсией. Трафик на сайт растет, но CR — нет: большинство покупок идет через менеджеров, так как пользователи не могут зарегистрироваться.
Сложная форма. Много полей — индекс, страна, сложные пароли. Это пугает и мешает завершить регистрацию.
Регулярные обращения за помощью. Менеджеры вынуждены отправлять инструкции, потому что пользователи не справляются с формой.
Нагрузка на менеджеров. Они тратят время на помощь с регистрацией, хотя это не их основная задача.
Неудобный вход. Пользователи забывают логин/пароль и не могут войти без помощи менеджеров.
Исследование best practices
После сбора инсайтов я изучила отчеты Baymard Institute и Nielsen Norman Group, чтобы понять,
как можно улучшить UX страницы.
Выделила основные тезисы
Пароли раздражают пользователей.
Нужно предлагать альтернативные методы регистрации.
Не нужно просить пользователей подтверждать регистрацию по электронной почте.
Необходимо запрашивать только минимальный объем информации в регистрационной форме.
Необходимо пронумеровать шаги.
Конкурентный анализ
Получила от клиента список прямых конкурентов, а также добавила косвенных (схожая модель продаж). Провела сравнение UX решений.
Формы регистрации у конкурентов проще.
У всех конкурентов вход осуществляется по SMS коду на телефон.
Дают возможность пользователям войти несколькими способами.
Разделение флоу на старте: обычные пользователи и профи (косметологи) идут разными путями. Это снижает путаницу.
Есть мини-инструкции прямо на странице по входу/регистрации.
Сделан фокус на одном действии — регистрация или вход, ничего лишнего.
Промежуточные итоги
Составила список потенциальных фичей для страницы, которые необходимо внедрить.
Узнала о болях бизнеса и пользователей, выделила четыре кейса, которые важно проработать: разделить флоу для обоих сегментов, предложить решение внедрения входа по SMS, загрузка диплома прямо при регистрации, разделить регистрацию косметологов на понятные шаги.
Сравнила текущую страницу входа/регистрации с конкурентами, сделала выводы
Define (анализ)
Анализ и синтез информации
Совместно с PM и дизайн-лидом мы провели синтез данных из интервью и бизнес-фидбэка.
Это помогло:
Выделить повторяющиеся пользовательские проблемы.
Определить реальные барьеры на пути регистрации.
Сформировать фокус: не «переделать все», а решить ключевые UX-проблемы на этапе регистрации и авторизации.
Основные проблемы страницы, которые необходимо решить
Непонятный флоу регистрации.
Сложная и перегруженная форма.
Единственный способ входа — логин/пароль.
Загрузка дипломов неочевидна, проверка — вручную.
Растущий трафик не приводит к росту регистраций.
Менеджеры перегружены ручной регистрацией.
Конкуренты предлагают более удобные способы входа.
Нет встроенных подсказок, фокус размыт.
Пользователям сложно пройти регистрацию без помощи.
Формирование гипотез и проверка
Я провела 7 юзабилити-тестов на прототипе, охватывающем все ключевые элементы. Каждый пользователь проходил полный сценарий регистрации — с момента входа до получения доступа.
В процессе я наблюдала за действиями, задавала уточняющие вопросы и собирала инсайты.
Если мы разделим флоу регистрации для B2C и B2B, то снизим путаницу и увеличим завершенные регистрации среди B2B, потому что пользователи сразу попадут в нужный сценарий с понятной логикой.
Если мы сделаем загрузку диплома частью основного флоу регистрации, то снизим количество незавершенных регистраций, потому что пользователю не придется отвлекаться на письмо
из почты и дополнительно находить кнопку прикрепления диплома.
Если мы добавим автоматическое подтверждение диплома с отложенной модерацией (или автодопуск с ограничениями), то ускорим доступ к ценам профессиональной линии и снизим нагрузку на менеджеров.
Если мы сократим количество полей до минимально необходимых, то увеличим процент пользователей, завершающих регистрацию, потому что процесс будет проще и быстрее.
Если мы добавим вход по SMS-коду, то снизим количество обращений к менеджерам, потому что им будет проще войти в личный кабинет.
Если мы встроим пошаговый флоу с прогрессом и подсказками прямо в интерфейсе,
то уменьшим зависимость от туториалов и увеличим самостоятельные регистрации.
Вывод
Гипотезы подтвердились — флоу оказался понятным и эффективным.
User Flow
Одна из ключевых UX-проблем — отказ от входа по логину/паролю мог отрезать часть текущих пользователей от личного кабинета.
Промежуточное решение
На основе гипотез было принято промежуточное решение: добавить альтернативную опцию входа по логину и паролю — для ранее зарегистрированных пользователей.
Новые B2C-клиенты входят только по SMS-коду. Регистрация не требуется: данные подтягиваются автоматически после первой покупки или заполняются вручную в личном кабинете.
Регистрация доступна только B2B-косметологам — это основной сегмент бренда. В будущем для них планируются отдельные функции и доступ к проф. продуктам, который открывается только после загрузки диплома.
Design (проектирование)
Создание wireframes
После проработки флоу у меня уже была четкая структура. Я начала с детализированных вайрфреймов — это позволило на раннем этапе обсудить решения с командой и клиентом
и сэкономить ресурсы на доработки.
На этом этапе я не прорабатывала все состояния — они добавлялись позже, при работе над UI.
После презентации вайров собрала обратную связь, внесла правки и перешла к визуальному дизайну.
Wireframe → Дизайн
Ниже — ключевые решения, реализованные на UI-этапе, с учетом результатов юзабилити-теста
и всех edge-кейсов:
Коротко о моих решениях
Разделила флоу регистрации для B2C и B2B — чтобы каждый сегмент попадал в нужный сценарий.
Вход по SMS — обсужден и утвержден с клиентом как основной способ авторизации.
Сохранила вход по логину и паролю для ранее зарегистрированных пользователей, но без возможности новой регистрации этим способом. Добавила восстановление пароля.
Упростила форму регистрации: сократила количество полей и разделила процесс на два шага — личные данные и образование.
Сделала загрузку диплома/сертификата косметолога частью регистрации, чтобы пользователю не пришлось открывать почту и прикреплять документ отдельно. Дипломы теперь будут проверяться автоматически системой, ответ после модерации придет на почту пользователя
в течение 2 часов.
Были подготовлены экраны для десктопной версии и проработаны все состояния интерфейса.
Test (тестирование)
Юзабилити-тестирования на интерактивном прототипе в Figma
Участники
Новая группа из 7 пользователей (B2B и B2C пользователи — косметологи и покупатели)
Тестируемые сценарии
Регистрация нового пользователя (B2B и B2C флоу)
Загрузка диплома
Вход по SMS-коду
Альтернативный вход по логину/паролю
Ошибки и подсказки в формах
Основные наблюдения
100% участников справились с регистрацией до конца, но 3 человека из 7 заметили, что на шаге с дипломом не хватает пояснения, зачем он нужен → добавили пояснение прямо на шаге загрузки.
Вход по SMS был понятен всем — ни у кого не возникло вопросов.
Кнопку входа по логину/паролю находили легко — особенно те, кто уже пользовался сайтом ранее.
B2C пользователи иногда пытались зарегистрироваться, хотя регистрация была только для B2B → после теста усилили разделение сценариев на старте.
Пошаговая форма регистрации получила положительную обратную связь — все отметили,
что «проще и не путаешься».
Подготовка к разработке
Подготовила финальные макеты, описала все сценарии и состояния, обновила UI Kit и передала проект разработчикам. Передала проект в разработку и ответила на все уточняющие вопросы команды.
Результаты
На момент моего ухода из компании проект находился в разработке, поэтому точных цифр по метрикам пока нет.
Метрики, которые планируется повысить этой страницей: Conversion Rate, Drop-off Rate, Bounce Rate
Ниже — сравнение экрана до редизайна и после реализации моего решения в разработке.
Личные успехи после проекта
Во время проекта команда дизайнеров выросла, и мы столкнулись с тем, что старые процессы уже не подходили — особенно на проектах, где работало несколько дизайнеров одновременно. Я поняла, что команда не была готова к такому формату, и предложила изменения. Обсудила это с дизайн-лидом, и мы пересмотрели процесс, чтобы упростить совместную работу и сделать её более понятной для всех.
Например, мы перестали параллельно делать одинаковые информационные страницы. Вместо этого сначала делали одну, а потом остальные делали по её примеру. Это помогло сделать дизайн более цельным, даже в тех частях, которые не были заранее прописаны в UI Kit.
ARKADIA
ARKADIA — научная лаборатория и собственное производство, обеспечивающие полный цикл выпуска косметической продукции. Крупный игрок на рынке с 2000 года.
Целевая аудитория
B2C: женщины 35+, покупающие только продукцию для домашнего ухода (40% аудитории).
B2B: косметологи и региональные дистрибьюторы, приобретающие как профессиональные,
так и домашние средства (60% аудитории).
Статус проекта
Разработка в процессе, следить можно на сайте. Проект разрабатывали как PWA-приложение
Моя роль
Я была одним из ведущих дизайнеров проекта. Работала в связке с двумя представителями клиента, проектным менеджером и дизайн-лидом. Периодически созванивалась с другими дизайнерами и консультировалась с разработчиками.
Что делала на проекте
Спроектировала и отдала в разработку: главную страницу, страницы авторизации/регистрации, страницу товара, страницы блога, навигацию и поиск, каталог, избранное, чекаут
и информационные страницы.
Задача
Разработать удобные и понятные страницы регистрации/авторизации для двух сегментов:
B2C: физические клиенты, покупающие косметику, могут купить только домашнюю линию
(цены на проф. линию не доступны)
B2B: косметологи, которым требуется подтверждение квалификации (диплом) для доступа
к проф. продуктам
Откуда взялась задача
Во время редизайна сайта стало ясно, что страницы регистрации и входа неудобны и не учитывают особенности B2C и B2B. Задачу поставили в приоритет.