Top.Mail.Ru
Addamant, разрабатываем и сопровождаем ИТ продукты

Редизайн сайта сети итальянских химчисток

Lavanderya — сеть химчисток-прачечных с более чем 20-ю филиалами в г. Москва.

Теги

#Разработка макетов
#Интернет-магазин
#Редизайн
#Проектирование
#1С-Битрикс
case image

Технологии

1С-Битрикс
PHP
MySQL
xml выгрузки

Трудоемкость

500 часов

Планируемая окупаемость

16 месяцев

Задача

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

Проблема

Редизайн действующего сайта был сопряжен с решением ряда проблем:
  • требовалось повторить структуру для сохранения позиций в поисковой выдаче;
  • на старом сайте был реализован сложный модуль интеграции с Яндекс.Картами, который необходимо было повторить;
  • система управления сайтом сильно устарела и её обновление требовало значительных трудозатрат;
  • заказчик использовал отраслевую CRM систему с которой необходимо было настроить интеграцию;
  • к мобильной версии предъявлялись повышенные требования по навигации и удобству использования.

Решение

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

Кратко о результатах

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

01.

Аудит текущего сайта

Аудит информационной архитектуры сайта и CRM системы

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

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

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

02.

Составление технического задания и планирование

Обсудили с заказчиком план работ и согласовали методологию реализации step by step. Разработку выполняли по мере утверждения дизайн-макетов. Отдельно внимание уделили тестированию фунционала и опытной эксплуатации.

По результатам аудита составили техническое задание и описали:
  • требования к структуре и наполнению сайта;
  • механизм интеграции с CRM системой заказчика;
  • функционал интеграции с Яндекс картой и пожелания заказчика по изменению логики его работы;
  • структуру и функционал конструктора посадочных страниц для маркетинговых акций;
  • структуру каталога и логику заказа услуг конечным потребителем.
Разбили на этапы процесс реализации системы
case image

03.

Анализ и прототипирование

Данный этап стал для отдела дизайна одним из самых важных на пути к финальному решению. Предстояла объёмная работа по анализу текущего решения и проектированию структуры нового сайта.

UX/UI анализ прерыдущей версии сайта и его реализации

О предыдущей версии сайта можно сказать только 2 вещи: создавался он без помощи дизайнера и никаким правилам UX и UI дизайна не следовал. Сайт безконтрольно изменялся в течение длительного времени без соблюдений требований к фирменному стилю. В результате анализа сайта Заказчика, мы не нашли ничего, что можно было использовать в новой версии и приняли решение выполнить всю работу с нуля.

Из очевидных проблем выявили:
  • хаотичную организацию контента на странице;
  • чрезмерное количество акцентов и отсутствие единого стиля;
  • сложную и запутанную навигацию по сайту.
case image

Разработка прототипов

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

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

Основными задачами в дизайне являлись:
  • максимальное упрощение процедуры заказа услуги;
  • упрощение навигации;
  • выделение преимуществ компании.
case image

04.

Разработка дизайн-макетов

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

Цветовая схема

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

case image

Шапка сайта и баннер

На первом этапе разработки макетов расширили контентную область сайта и в результате получили больше пространства для построения оптимальной визуальной композиции блоков.

Провели трансформацию шапки сайта. Вся навигация была пересмотрена в сторону упрощения. В видимую часть вынесли только самые основные пункты, а второстепенные скрыли под иконкой меню. Отдельно реализовали меню каталога услуг, чтобы не нагружать такой объмной информацией навигационную панель.

Карточки услуг

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

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

case image

Личный кабинет и оформление заказа

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

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

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

case image

Адреса химчисток

Одним из актуальных вопросов для Заказчика являлся функционал “Адреса химчисток” и его интеграция с Яндекс.Картой. Заказчику было важно показать масштаб его компании и отобразить все возможные её форматы: от точек приемки до мини-фабрик, фабрик и химчисток.

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

case image

Адаптивные макеты

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

case image
case image

UI Kit

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

case image

05.

Программирование и верстка

После детальной проработки функционала и разработки дизайн-макетов дело осталось за малым — реализовать все идеи в готовом продукте.

Выполненные работы

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

case image

Результат

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

Понравился кейс?

Расскажем подробнее об этом и других кейсах и поможем решить вашу задачу

г. Омск, ул. Фрунзе 1, к.4,

офисный центр, 11 этаж, офис 1123

+7 (933) 991-91-31

info@addamant.ru

Общая почта

info@addamant.ru

Отдел продаж

sale@addamant.ru

Смотрите также

Смотреть все кейсы

Дизайн интернет-магазина Simply Hamper

Simply Hamper - сервис доставки готовых подарков из Сигапура.

Редизайн сайта сети итальянских химчисток

Lavanderya — сеть химчисток-прачечных с более чем 20-ю филиалами в г. Москва.