web-designhh@yandex.ru
*Запрещена деятельность на территории РФ, признана экстремисткой организацией
Обсудим проект?
Интерфейс
для клиентов и менеджеров
личного кабинета

Интернет-магазин ювелирных украшений

О клиенте
Крупнейшая российской компания по производству и обслуживанию кассовых аппаратов для ритейла (работают с fix price, лента, дикси, окей).
О проекте
1) Стояла задача разработать внутренний ЛК для клиентов компании, по подаче заявки на обслуживание. Проблема была в том, что большая часть заявок поступала через телефон в отдел обслуживания, а компания хотела автоматизировать процесс и сделать свой удобный интерфейс.


2) Разработать ЛК системы обслуживания для внутренних клиентов (менеджеров поддержки, инженеров обслуживания разных уровней)
Исследования, детализированные варфреймы, User Flow, интерактивный прототип
разработка UI-kit и подготовка макетов к верстке
90 часов
время разработки
Интервью
Проект большой и сложный, поэтому мы проводили несколько интервью, чтобы погрузиться в задачу и лучше понять пользователей. Интервью проводили с руководителем проекта и командой. Руководитель проекта работал в компании более 10 лет, в том числе в поддержке, поэтому хорошо знал пользователей и их боли. Я подготовила список вопросов, на которые клиент мне развернуто отвечал, вместе с другими членами команды.
Протоперсоны
На основе интервью я составила 4 типа протоперсон и JobStories к ним. Главной персоной и основной ЦА были кассиры. Которые, по мнению руководителя, чаще всего оставляли заявки на обслуживание.

"Это как правило женщина, 40+ лет, без высшего образования и без технических знаний. Либо всю жизнь проработала продавцом с кассой, либо вообще только только устроилась на эту должность и боится всего технического и сложного"

Результат руководитель проекта отправил клиенту — менеджеру крупной сети магазинов, чтобы тот оставил свои корректировки и подтвердил правильность работы.

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

Вывод один — если есть возможность, нужно всегда изучать своих пользователей, даже если уверены, что знаете их боли)
Схема
Разработали схему сервиса, чтобы понять объем и структуру. Проработали примерный функционал каждого сценария.
Job Strories
На основании всей информации выше, я составила джоб стори и прописала возможные решения в интерфейсе и функционале.
Варфреймы
Дальше была работа над варфреймами. Их я делала детализированными, потому что проект сервисный и надо уделить особое внимание UX.

Мы работали небольшими итерациями в тесной связке с аналитиками и проджект-менеджером. Сперва аналитик присылал мне бизнес-процесс внутри компании, далее я прорабатывала варфреймы со всеми сценариями. Важно было учесть и потребности пользователей и внутренние уже сложившиеся БП и технические ограничения. Поэтому в команде также присутствовали разработчики.

После готовности макетов мы согласовываю их со всеми членами команды и дорабатывали.
Дизайн
В дизайне нельзя было уходить от фирменного стиля компании. Но хотелось сделать интерфейс более дружелюбным и открытым. Решили разбавить его минималистичными иллюстрациями и небольшой анимацией.
Регистрация и авторизация
Это самый первый экран входа в ЛК. Здесь решили показать, что процесс подачи заявки стал проще — всего 3 шага, без лишней волокиты. Ранее на этом шаге значительное количество пользователе отваливалось, из-за сложности авторизации и начинали звонить. А наша задача как раз состояла в уменьшении нагрузки на тех.поддержку.
Подача заявки
Подачу заявки разделили на 3 шага. Мы не вываливаем на пользователя сразу все поля, а ведем его постепенно по нужным этапам.
На втором этапе важно было наглядно показать оборудование, чтобы еще больше ускорить процесс. Поэтому оставили изображения, вместо иллюстраций
На третьем этапе требуется заполнить большое количество полей, поэтому их мы тоже раскрываем по мере заполнения, чтобы не нагружать слишком большим объемом информации. При этом, предугадываем его запрос и предлагаем самые популярные проблемы.
Тут же показываем пользователю его заявку и он всегда может вернуться на шаг назад и внести изменения
Список заявок
После подачи заявки в ЛК пользователя — она попадает на страницу со всеми заявками. Здесь можно увидеть статус по каждой, открыть подробную карточку, написать в поддержку, отредактировать или закрыть задачу.
ЛК для специалиста поддержки
Мы разрабатывали ЛК не только для клиента, но и для менеджеров поддержки. Здесь менеджер может видеть состояние задачи, кто координатор, какой инженер назначен на устранение поломки и предложить обходное решение, если на основное требуется больше времени.
ЛК для инженера
В компании есть выездные инженеры, которые приезжают на место и пытаются починить оборудование. У них нет доступа в моменте к компьютеру, поэтому для них делали отдельную мобильную версию ЛК.
Он может увидеть свои назначенные заявки, увидеть какая проблема, кто клиент, адрес и контактное лицо. Может сразу же связаться с клиентом и менеджером поддержи при необходимости. Также через мобильное приложение инженер закрывает заявку.
UI kit
На таких проектов не обходится без подготовки макетов к верстке. Я подготовила UI kit, показала стилистику, анимации и интерактивные прототипы, чтобы у верстальщиков не возникало вопросов.
Более 150 макетов
Мы получили в итоге. Со всеми состояниями, модальными окнами и прочей красотой.
Вам понравился этот проект?
Посмотрите другие кейсы
Made on
Tilda