Редизайн сайта сети итальянских химчисток
Разработали новый сайт на базе системы управления 1С-Битрикс с личным кабинетом клиента, проработанным каталогом услуг, а также адаптивной версткой под мобильные устройства.
«Lavanderya» – популярная сеть московских химчисток с широким списком услуг и дистанционным обслуживанием
Задачи
Сайт заказчика был разработан более 7 лет назад и морально устарел. Компания сформулировала новые амбициозные маркетинговые планы, вследствие чего потребовалась глубокая переработка текущего ресурса как для реализации маркетинговых акций, так и для соответствия современным требованиям по удобству и адаптивности к мобильным устройствам. Также одной из задач стала интеграция с отраслевоей CRM системой для передачи заявок и обновление информации об ассортименте и стоимости услуг.
Повторить структуру для сохранения позиций в поисковой выдаче
Реализовать сложный модуль интеграции с Яндекс. Картами
Cистема управления сайтом сильно устарела и её обновление требовало значительных трудозатрат
Заказчик использовал отраслевую CRM систему с которой необходимо было настроить интеграцию
К мобильной версии предъявлялись повышенные требования по навигации и удобству использования
Решение
Разработать новый сайт на базе системы управления 1С-Битрикс с личным кабинетом клиента, проработанным каталогом услуг, а также адаптивной версткой под мобильные устройства.
Аудит текущего сайта
Инсайт 1
Выяснили, что далеко не все информационные страницы сайта участвуют в формировании целевого трафика на сайт. Обсудили ситуацию с Заказчиком и приняли решение об упразднении ряда разделов и упрощении структуры.
Инсайт 2
Аудит CRM системы заказчика показал, что она не имеет протоколов интеграции с внешними сервисами, поэтому приняли решение реализовать интеграцию путем загрузки прайсов, которые CRM система позволяла формировать.
Составление технического задания и планирование
Обсудили с заказчиком план работ и согласовали методологию реализации step by step. Разработку выполняли по мере утверждения дизайн-макетов. Отдельно внимание уделили тестированию фунционала и опытной эксплуатации.
По результатам аудита составили техническое задание и описали:
- требования к структуре и наполнению сайта;
- механизм интеграции с CRM системой заказчика;
- функционал интеграции с Яндекс картой и пожелания заказчика по изменению логики его работы;
- структуру и функционал конструктора посадочных страниц для маркетинговых акций;
- структуру каталога и логику заказа услуг конечным потребителем.
![](/image/cases/lavanderya/tech.png)
Гант проекта
Анализ и прототипирование
Данный этап стал для отдела дизайна одним из самых важных на пути к финальному решению. Предстояла объёмная работа по анализу текущего решения и проектированию структуры нового сайта.
UX/UI анализ прерыдущей версии сайта и его реализации
О предыдущей версии сайта можно сказать только 2 вещи: создавался он без помощи дизайнера и никаким правилам UX и UI дизайна не следовал. Сайт бесконтрольно изменялся в течение длительного времени без соблюдений требований к фирменному стилю. В результате анализа сайта Заказчика, мы не нашли ничего, что можно было использовать в новой версии и приняли решение выполнить всю работу с нуля.
![](/image/cases/lavanderya/ux-analiz.png)
Так сайт клиента выглядел изначально
Из очевидных проблем выявили:
Хаотичную организацию контента на странице
Множество акцентов и отсутствие единого стиля
Сложную и запутанную навигацию по сайту
Разработка прототипов
Так как Заказчиком ранее не проводились работы по построению логики контента, ux-дизайнеру потребовалось время на выделение основных смысловых блоков для главной страницы. Провели анализ, подготовили концепцию навигационной логики, провели презентацию Заказчику и утвердили приоритетные разделы сайта.
В результате согласовали трансформацию текущего информационного сайта в онлайн-сервис, где можно быстро и удобно заказать услугу в ближайшие 24 часа.
Важно
Основные задачи редизайна
Максимальное упрощение процедуры заказа услуги
Упрощение навигации по сайту
Выделение преимуществ компании.
![](/image/cases/lavanderya/dev-prot.png)
Детализированный прототип сайта
Разработка дизайн-макетов
Решили заменить цветовую схему сайта на более актуальную и приятную для восприятия. Избавились от «грязных» изумрудных оттенков, а основные акценты на сайте выполнили в цвете «ультрамарин», который визуально, вместе с белым цветом, сохраняет образ «чистоты».
![](/image/cases/lavanderya/dev-design.png)
Цветовая схема сайта
Шапка сайта и баннер
На первом этапе разработки макетов расширили контентную область сайта и в результате получили больше пространства для построения оптимальной визуальной композиции блоков.
Провели трансформацию шапки сайта. Вся навигация была пересмотрена в сторону упрощения. В видимую часть вынесли только самые основные пункты, а второстепенные скрыли под иконкой меню. Отдельно реализовали меню каталога услуг, чтобы не нагружать такой объмной информацией навигационную панель.
Десктопная версия
![](/upload/iblock/bc3/h7qhdpdh3o8chfa1jks9x8bikhpl1rai.png)
Мобильная версия
![](/upload/iblock/39b/vqyaluizae2q1cb2j9ou52gk2kf5i01t.png)
Карточки услуг
Так как у Заказчика большой список услуг, мы решили реализовать их в форме товарных предложений, выполненных в формате небольших карточек с дополнительными опциями.
![](/image/cases/lavanderya/card.png)
Карточки услуг
Для каждой категории услуг разработали узнаваемые иконки, которые помогают пользователю интуитивно ориентироваться в каталоге.
![](/image/cases/lavanderya/olya-comm.png)
Лидер команды «Дизайн»
Ольга Демидова
![](/image/cases/lavanderya/icons.png)
Иконки услуг
Личный кабинет и оформление заказа
Так как основной акцент в новом сайте делался на повторные заказы, то решили реализовать личный кабинет клиента с оформлением заказа через корзину.
![](/upload/iblock/30f/0si5xud4jp3fyqk1yr074iwa0a1jcxf5.png)
Отображение услуг в корзине реализовали по аналогии с каталогом. Для упрощения оформления заказа добавили возможность редактировать услуги прямо из корзины, не возвращаясь в каталог. Также реализовали функционал быстрого доступа к каталогу из корзины через кнопку “Добавить”, если пользователь забыл указать нужную вещь.
![](/upload/iblock/c1f/vtvehibihz8bpibmk1p8i6irtxxdk8gd.png)
Дополнительно расширили условия оформления заказа возможностью выбора времени передачи заказа (от клиента исполнителю и обратно), а также отметкой о срочности заказа.
Личный кабинет и оформление заказа
Одним из актуальных вопросов для Заказчика являлся функционал «Адреса химчисток» и его интеграция с Яндекс.Картой. Заказчику было важно показать масштаб его компании и отобразить все возможные её форматы: от точек приёмки до мини-фабрик, фабрик и химчисток.
Для этого мы реализовали возможность просмотра информации 2-мя типами: пунктами на карте и списком карточек с подробной информацией. Также реализовали фукнционал фильтрации адресов по близости к станциям метро или району.
Адреса на карте
![](/upload/iblock/f52/yfenmqjytlf5ccgn9asqjrbji3m1daga.png)
Адреса списком
![](/upload/iblock/5c9/7bzd9mqc5z4ma1t357z9qzge1qa3xit6.png)
Адаптивные макеты
Оптимальное отображение сайта на мобильных устройствах являлось одним из главных требований заказчика. Разработка макетов десктоп версии сайта сразу велась с учетом их последующей адаптации под мобильные устройства, поэтому проблем на этом этапе не возникло.
![](/image/cases/lavanderya/maket.png)
Адаптивная страница сайта
UI Kit
Для каждого проекта мы готовим UI-kit. Это такой набор готовых элементов пользовательского интерфейса, который предназначен для того, чтобы ускорить процесс верстки и создания новых макетов. А в будущем UI-kit позволяет без проблем для разработчиков и дизайнеров вносить изменения на сайте.
![](/image/cases/lavanderya/ui.png)
UI Kit проекта
Программирование и верстка
После детальной проработки функционала и разработки дизайн-макетов дело осталось за малым — реализовать все идеи в готовом продукте.
Выполненные работы
Выполнили адаптивную, кроссбраузерную верстку. Реализовали интеграцию с внутренней CRM системой, разработали функционал карты, протестировали весь функционал, провели обучение и только после этого обновили старый сайт.
![](/image/cases/lavanderya/works.png)
Отображение сайта на мобильных устройствах
Результат
Разработан новый адаптивный сайт для сети итальянских химчисток включающий в себя следующий функционал:
- каталог услуг химчистки с функцией быстрого заказа;
- интеграктивная карта ближайших офисов приема и выдачи заказов;
- конструктор посадочных страниц для маркетинговых акций;
- обмен данными с отраслевой CRM системой по услугам, ценам и заявкам.
![](/upload/iblock/261/d7h0336qj8pfeufwt8pkilv1fcoxo04a.png)
Расскажем больше внутрянки в нашем канале
Вероника Зуй , Бренд-менеджер
На первом этапе составили перечень всех страниц старого сайта и провели анализ результатов поисковой выдачи. Это помогло понять, как нам действовать дальше
CEO
Илья Лебёдкин