Многофункциональный личный кабинет интернет-магазина для работы с оптовыми покупателями
- Заказчик
- Оптово-розничный интернет-магазин. Продажа запчастей сотовых телефонов и комплектующих
- Задача
- Переработка существующего личного кабинета для сокращения обращений к администрации веб-сайта
Немного о бизнесе
«SNPMarket» – это крупная оптово-розничная компания, в которой можно приобрести запчасти для ремонта смартфонов, аксессуары и гаджеты из низкого ценового сегмента. Обладает мощным онлайн-сервисом для работы с оптовыми покупателями через систему личных кабинетов.
Какие задачи клиентов он решает
В первую очередь, это автоматизация работы с оптовыми покупателями. На старом сайте был реализован многофункциональный личный кабинет, с помощью которого оптовик мог решать следующие задачи:
- Формировать доставки на разные точки
- Оформлять возврат бракованных товаров
- Назначать представителей компании
- Отслеживать статус доставки
- Производить оплату с личного счета и пополнять его
С какими проблемами обращаются клиенты
Сложный функционал личного кабинета. Часто, без дополнительной консультации с менеджерами сайта или видеоуроков, сложно разобраться в модулях личного кабинета.
Например, есть модуль «Смарт-доставка», он позволяет формировать заказы, которые составлены в разное время, в разные дни и далее они объединяются в одну более удобную доставку.
Модуль удобный, но из-за непродуманного интерфейса, он умеренно сложный, когда сталкиваешься с ним в первый раз.
Сложности внутри компании
Много времени тратится на обучение и консультации новых оптовых клиентов. Часто приходится исправлять ошибки, совершенные оптовиками при работе с личным кабинетом.
Проблема
Неудобный и сложный функционал личного кабинета, требующий обучение и консультаций со стороны менеджеров сайта.
Цели
- Разработать удобный и интуитивно понятный личный кабинет
- Разработать детальные и понятные стайл-гайды, с помощью которых встраивание новых модулей в личный кабинет будет происходить без привлечения дизайнеров
Анализ личного-кабинета старого сайта
Прежде всего, SNPmarket был тщательно проанализирован, чтобы выявить сильные и слабые стороны текущего дизайна.
Преимущества
Юзабилити:
- Многофункциональность
- Удобное разделение на категории
- Информативность каждого модуля
Недостатки
Визуально:
- Устаревший дизайн
- Плохо адаптирован на мобильные устройства
- Многие модули не стилизованы под общий дизайн
Юзабилити:
- Избыток информации на главной странице личного кабинета
- Не все модули необходимы на главной странице личного кабинета
- Многие модули интуитивно непонятны
ЦА
Определяем сегменты
Понимание целевой аудитории очень важно для любого сайта. Мы выделили 2 архетипа и описали ключевые потребности каждого сегмента:
- Постоянные оптовики. Клиенты, которые имеют продолжительное и успешное сотрудничество с SNP. Для них важно, чтобы сервис имел индивидуальный подход и автоматизировал часть постоянных действий совершаемых оптовиком. Также, своевременное уведомление о новинках и популярных товарах среди пользователей сайта.
- Новые оптовики. Только начали сотрудничество с SNP. Для них важен интуитивно понятный интерфейс, не требующий дополнительных обращений к менеджерам за консультациями. Важно сразу начать успешную работу с сервисом.
Персоны
Чтобы проверить идеи и гипотезы, мы взяли 2 вымышленных персонажей из целевой аудитории SNPmarket и проанализировали, какие потребности они готовы удовлетворить на сайте, какие функции могут быть полезны.
Гипотезы
Составляем гипотезы
Мы описали предположения о том, что пользователь действительно хочет, какие затруднения он испытывает. А также, какие функции и какие UX-решения помогут выполнить его задачи.
Например:
На главной странице все модули сделать в виде небольших виджетов, показывающие основную информацию. Сделать возможность добавлять и убирать виджеты, тем самым формировать удобное рабочее пространство. Оформить заказ с доставкой и через определенное время, например сутки, иметь возможность к текущей доставке добавить еще заказы при условии, что заказ не был отправлен.
Проверка гипотез
Гипотезу нужно проверить, чтобы быть уверенным в правильности понимания задачи и потребности пользователя. Для этого мы разбили гипотезу на небольшие вопросы и составили опросник, который раздали нашей целевой аудитории. Также было проведено коллективное обсуждение с заказчиком, где рассматривались гипотезы.
Пользовательские сценарии
Чтобы быть уверенными в соответствии выбранной функциональности потребностям целевой аудитории, мы создали несколько пользовательских сценариев, основанных на персонах.
Структура личного кабинета
Составляем карту личного кабинета. Основная цель — максимально упростить карту и минимизировать количество шагов, которые пользователь должен выполнить для выполнения задачи.
Прототипы
Мы создали сотню прототипов, чтобы определить правильное содержание страницы и дизайн макета. Также, часть прототипов была выполнена в виде сценариев, Например, демонстрация работы модуля «смарт-доставка». Такой сценарий удобно презентовать заказчику. Вы не показываете все 150+ страниц с разным количество форм на странице, а только конкретный функционал.
Стайлгайд
На основе разработанных стайлгайдов для основного сайта, был разработан собственный стайлгайд для личного кабинета.
Визуальный дизайн
На создание дизайна для каждой страницы личного кабинета ушло около двух недель. Для каждого модуля был придуман собственный виджет, который имеет три размера. Также, каждый модуль был продуман до мелочей, чтобы пользователь не испытывал затруднений при работе с ним. В целом, дизайн полностью отзывчивый и представляет собой продуманный UX.
Главная страница личного кабинета.
Главная страница формируется из виджетов. Каждый пользователь может добавлять виджеты, которые ему необходимы.
Виджеты
Каждый модуль личного кабинета имеет свой информативный виджет. У каждого виджета, также, есть два размера. Сам виджет передает всю самую необходимую информацию по модулю, к которому он относится.
Страница личного кабинета / Баланс
Каждый модуль имеет продуманный и интуитивно понятный функционал. Все страницы проходят А/Б-тестирование для того, чтобы повысить качество работы с личным кабинетом.
Тестирование и петля улучшений
После мы тестировали все модули на пользователях, собирали аналитику и вносили изменения. Тем самым, разрабатывали удобный интерфейс.
Выводы и результаты
Работа по разработке нового интерфейса личного кабинета оптового покупателя заняла у нас порядка 3-х месяцев работы. На выходе мы получили повышение конверсии при формировании заказов с использованием своей логистической службы на 14,5% по сравнению с тем же периодом времени, но на старом интерфейсе. Положительные отзывы от постоянных оптовых клиентов об удобстве нового интерфейса. Уменьшение нагрузки на работу менеджеров веб-сайтов, что позволило в итоге сократить нашему клиенту одну штатную единицу ставки.