Ребрендинг и полная модернизация интернет-магазина офисной оргтехники

Компания ЗипЗип – крупнейший в России поставщик оригинальных запчастей для офисной печатающей техники. Является официальным дистрибьютором производителей и брендов: Canon, Epson, Xerox, Brother.

Компания имеет действующий интернет-магазин, специализируется на B2B продажах в корпоративном сегменте, для которого важны удобство поиска комплектующих на сайте, оперативное оформление заказа и быстрая доставка.

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

Нашими задачами стали:

1) обновление бренда компании

2) создание современного и удобного интерфейса, который соответствует статусу лидера рынка.

3) переработка пользовательских сценариев, редизайн всех страниц и элементов

4) реализация удобного и гибкого поиска по обширному каталогу

5) создание полноценного личного кабинета

6) комплексная SEO-оптимизация для привлечения целевого трафика.

В рамках проекта было проведено 3 этапа работ, каждый из которых мы опишем подробнее ниже:

1) Разработка концепции брендинга ЗипЗип

2) Исследование, дизайн, прототипирование

3) Фронтенд и бэкенд-разработка 

Создали фирменный стиль и логотип, отличающие ЗипЗип от конкурентов и отражающие позиционирование интернет-магазина.

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

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

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

Для того чтобы приступить к этапу разработки дизайн-концепции и прототипов будущего сайта, команда CRT проинтервьюировала заказчика и узнала его «боли», изучила текущий пользовательский путь и провела анализ сайтов конкурентов.

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

- все ключевые разделы сайта отображаются одинаково, без учета приоритетности (трудно понять, куда идти, и «где что лежит»)

- слишком большая вариативность поиска и его недостаточная эффективность (5 вариантов поиска, которые были не очень корректно реализованы)

- неединообразная и неполная информация в карточках товаров (нет важной информации, необходимость подключения менеджера)

- неинтуитивный процесс оформления заказа (слишком много запрашиваемой информации, клиенты просто устают заполнять форму).

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

Мы создали интернет-магазин ZipZip на мощном стеке технологий. Фронтенд-приложение было построено на фреймворке Nuxt.js в связке с TypeScript, что обеспечило высокую скорость загрузки, строгую типизацию и отличные показатели для поисковых систем. Для управления состоянием приложения использовался Pinia, а стили были написаны с помощью SCSS для поддержки сложных адаптивных интерфейсов.

Основные возможности платформы:

1) Умный каталог: реализована продвинутая система фильтрации по разделам, маркам, моделям аппаратов и наличию на складе. Пользователи могут выбрать удобный формат отображения карточек товаров – горизонтальный или вертикальный.

2) Глубокая SEO-оптимизация: каждая карточка товара имеет ЧПУ-ссылку, семантическую разметку заголовков (h1-h6) и мета-теги. Для увеличения среднего чека и помощи в выборе на страницах товара реализованы слайдеры с похожими и рекомендованными товарами.

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

4) Личный кабинет: полноценный раздел для пользователя с историей заказов, отслеживанием статусов и детализацией каждого заказа, а также настройками профиля.

5) Онлайн-чат: встроенный инструмент для прямой связи с менеджерами магазина, позволяющий оперативно решать вопросы клиентов.

6) Полная адаптация: проработанный интерфейс корректно отображается и функционирует на всех типах устройств – от десктопов до смартфонов.

В рамках проекта:

1) Обновили визуальный стиль ЗипЗип, разработали гайдбук с рекомендациями по использованию, привели примеры носителей, успешно применили новый визуальный стиль в редизайне сайта заказчика. 

Новый брендинг ЗипЗип выгодно выделил его на фоне конкурентов и подчеркнул статус лидера рынка.

2) Провели аудит текущего сайта, исследование ЦА и сайтов конкурентов, переработали логику и интерфейсы, применили best practice из UX/UI и фронтенд сфер по улучшению пользовательского пути и созданию интуитивно понятных интерфейсов сложнонагруженных интернет-магазинов.

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

- привлекает клиентов за счет SEO, 

- повышает конверсию посетителей в покупатели благодаря удобному каталогу и корзине, 

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

ЗипЗип стал надежной и эффективной платформой для онлайн-продаж в нише комплектующих для офисной техники. Благодарим заказчика за интересный и масштабный проект!