![](https://cdn.cases.media/image/wide/8853635e-8536-44e1-858e-e433fc65ed3f.png)
Проектирование и дизайн сайта автостекла
Клиент
Autoglass Group — компания, которая более 15 лет продает, ремонтирует и устанавливает автомобильные стекла. На сегодняшний день каталог компании Autoglass Group состоит из 18 млн деталей, включая продукцию брендов Sekurit, Pilkington, PGW, Sika, Dinitrol.
Боль:
Необходим корпоративный сайт, на котором можно получить полную информацию о компании, узнать об услугах, локации, где можно получить сервис, а также оставить заявку на обслуживание.
Решение:
Команда дизайнеров и разработчиков создала десктоп и мобильную версии сайта, а также спроектировала кастомный фильтр подбора автостекла в соответствии с маркой автомобиля.
Этап 1: Архитектура сайта
При разработке сайта был сделан акцент на функциях:
- личный кабинет;
- «заказать быстрый звонок»;
- форма обратной связи.
![](https://cdn.cases.media/image/wide/1f3cee48-0682-4d8b-ab9d-6aa6a8ff9a6f.png)
Это было сделано для того, чтобы снизить процент отказов, повысить глубину просмотра страниц, а также сделать пребывание посетителей на сайте более длительным.
Чтобы сделать сайт более комфортным для пользователей, были разработаны фильтры для сортировки товаров по разным параметрам:
- строка быстрого поиска по ключевому слову;
- форма поиска по конкретной марке автомобиля.
Форма поиска по марке автомобиля включает:
- наличие товара на складе;
- быстрый просмотр фотографии товара;
- скрытая цена для отслеживания наиболее просматриваемых товаров.
Этап 2. Прототипирование
Прототипирование - это важный этап, который начинается с продумывания логики пути пользователя.
![](https://cdn.cases.media/image/wide/1e7f74c9-75d9-42c7-b21a-304a2cd67bae.png)
После полной проработки прототипа можно описать логику будущего сайта:
- заполнение пользователем полей фильтра (марка / модель / год / тип кузова);
- загрузка готовой схемы машины;
- загрузка таблицы вариантов стекла (описание, производитель, цена и наличие на складе).
![](https://cdn.cases.media/image/wide/1a88b1ba-5ae2-4eb0-b67b-8c33ebc1582e.png)
Изучив специфику, мы решили делать акцент на интуитивность и визуализацию, чтобы пользователь не путался в деталях, а нажал на то, что его интересует.
Отрисовывали все по принципу группировки и разбили на логические блоки, а также предусмотрели поиск по коду стекла, на случай, если у пользователя таковой имеется.
Этап 3. Дизайн
Финальный этап - дизайн, который создавался по принципу KISS (keep it short and simple). Главное для нас было сделать интерфейс простым и понятным для пользователя.
![](https://cdn.cases.media/image/wide/008ec0f0-8ba4-4a6e-8caa-b96bde5b0ab6.png)
Старались делать как можно меньше акцентов, чтобы не отвлекать пользователя от целевого действия. Сдержанность и консерватизм прослеживается на всех деталях сайта.
Шрифт Muller был подобран исходя из его прекрасной читабельности, так как он максимально простой и не отвлекает на себя внимание.
![](https://cdn.cases.media/image/wide/b74c64f8-1a48-46f0-a640-b6dbd714c70d.png)
Основная цветовая гамма черно-белая, а цветовым акцентом стал красный, который ассоциируется с решительностью, уверенностью и скоростью.