Реализация редизайна и CRM для интернет-магазина компьютерной техники

Regard – это интернет-магазин компьютерной техники и комплектующих с посещаемостью до 700k в месяц.

Команда проекта обратилась к нам для усиления существующего IT- департамента по направлениям фронтенд и QA. Требовалось реализовать новый дизайн, разработанный студией AIC, создать мобильную версию, провести регресс-тестирование, помочь с проработкой сценариев, провести модерацию устаревшей технологической базы.

Сайт содержал большое количество легаси-кода, и нам предстояло провести рефакторинг для возможностей его дальнейшего развития.

С сентября 2021 года команда из фронтенд и бэкенд-разработчиков, UX/UI-дизайнеры и PM подключились к задачам по доработке внутренней CRM-системы для комфортной работы менеджеров Регард.

В рамках проекта было проделано несколько этапов работ, о каждом из которых мы расскажем подробнее ниже. 

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

Новый дизайн, актуальный и интуитивно понятный, был тепло встречен постоянными покупателями и позволил привлечь новых, расширив портрет ЦА.

У старого сайта не было мобильной версии, и это стало одной из главных причин для редизайна. Совместно с заказчиком был разработан удобный и понятный интерфейс для мобильных устройств. Он сохранил все возможности компьютерной версии и расширил возможности по использованию сайта пользователями.

Для удобства пользователей мы настроили систему верификации через подтверждение электронной почты и мобильного телефона. Добавили возможность изменять фон и аватар, выбирать никнейм, видеть статусы активных и историю выполненных заказов, пользоваться услугами конфигуратора.

Конфигуратор – сложный для разработчиков и очень важный для клиента модуль. Он отличается огромным количеством логики и сложным визуальным представлением.

Команда начала работу с визуала. Верстка слотов не доставила особых трудностей, однако над схемой системного блока пришлось подумать. В итоге разработчики провернули пару трюков с HTML и CSS, которые позволили по-хитрому контролировать поведение слоев и подсветки элементов блока.

Отдельного внимания заслуживает окно выбора товара в слот. Самой тяжелой здесь оказалась реализация фильтра «Совместимо», поскольку для этого требовалось четко определить, какие изменения фильтров покажут несовместимые товары, а какие – только уточнят поиск.

Спустя несколько согласований с заказчиком мы смогли определить схему, при которой пользователь имеет минимальный шанс ошибиться при работе с фильтрами – интуитивность их состояния и отображения.

Также для этого окна было принято решение добавить сохранение состояния при возврате, например, со страницы товара, чтобы пользователи быстро возвращались уже к настроенному списку товаров.

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

Для новичков в железе появилась возможность создать заявку на сборку с требованиями. Остальные пользователи могут предложить свои варианты конфигурации в комментариях.

У заказчика была разработанная CRM для внутреннего пользования с большим легаси и сложным кодом. 

Команда дизайнеров, фронтенд и бэкенд-разработчиков CRT занимались улучшением пользовательского опыта (UX) и интерфейса (UI) с акцентом на удобство работы внутренних менеджеров компании.

Для того чтобы понять реальные проблемы, провели несколько интервью с сотрудниками заказчика – пользователями CRM. Это помогло выявить главный запрос на доработку: исправление сложных сценариев, запутанной навигации и устранение лишних операций, уложнявших работу менеджеров с системой.

В ходе работы мы проработали все пользовательские сценарии и помогли наладить процессы:

- быстрого поиска клиентов и заказов;

- удобного оформления новых заказов;

- понятного отслеживания остатков на складе;

- фиксированных обращений к истории клиента;

- оперативного процесса возвратов и гарантийных заявок.

Также команда UX/UI-дизайнеров создала обновлённый визуальный стиль интерфейсов – CRM стала интуитивно понятной, снизилось количество ошибок при вводе данных благодаря удобным фильтрам. Общая визуальная консистентность упростила обучение новых сотрудников и сократила период онбординга в компании.

Для решения поставленных задач, команда разработчиков и дизайнеров CRT провела комплекс работ по реализации редизайна и оптимизации работы сайта интернет-магазина Регард:

- на основе дизайна от AIC реализовали вёрстку и провели регресс-тестирование

- реализовали систему взаимодействия пользователей в чатах и комментариях

- доработали и развили функционал конфигуратора комплектующих, сделав его фишкой интернет-магазина Регард

- реализовали удобный и функциональный ЛК

- совместно с заказчиком реализовали мобильную версию сайта, оптимизировали web- и tab-версии

- доработали UX и дотянули UI внутренней CRM заказчика по работе с клиентами интернет-магазина.