Многостраничный сайт для оконной компании

Описание задачи

Цель

Спроектировать и создать дизайн нового сайта для компании «Оконный континент». «Оконный континент» производит и устанавливает пластиковые окна и двери, занимается остеклением и отделкой балконов. Входит в ТОП-5 лидеров оконного рынка, работает уже более 15 лет.

Целевая аудитория

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

Конкуренты

На начальном этапе работы над сайтом мы изучили конкурентов, как прямых («Фабрика окон», «Московские окна», «Окна роста» и др.), так и косвенных (строительных и отделочных компаний, например, «Леруа Мерлен»). Это позволило нам выявить сильные и слабые места существующих на рынке решений и создать дизайн-концепцию, которая визуально отличала нас от конкурентов более современным подходом. Большинство из рассматриваемых нами сайтов конкурентов имели устаревший UI, запутанную структуру и слабые акценты.

Цели и гипотезы

Цели

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

Боли

Также мы хотели закрыть основные боли наших клиентов:
• Не понимают, какие окна лучше выбрать (по профилю, стеклопакету, фурнитуре) и как будет выглядеть процесс остекления.
• Боятся скрытых доплат за работу.
• Испытывают сложности при оформлении заявки, долго ожидают информации от менеджера.
• Сомневаются в надёжности компании, не хватает примеров реальных работ и реальных отзывов клиентов, нет информации о гарантиях и сервисном обслуживании.
• Устаревшие и неудобные сайты, которые отпугивают клиентов.

Гипотезы

• Наглядная демонстрация разных опций остекления под разные нужды с подробным описанием и фото.
• Сделать калькулятор расчёта стоимости окна в несколько кликов.
• Сделать удобный личный кабинет клиента, где он сможет отслеживать и управлять заказами.
• Минимизировать количество шагов до оформления заявки, добавить онлайн-консультанта и быстрый заказ звонка.
• Добавили различные лид-магниты (бесплатный замер, бесплатно пересчитаем смету конкурентов со скидкой, чтобы предложить более выгодный оффер).
• Улучшить раздел с отзывами, добавить больше фото работ, реальных кейсов, сертификатов качества, наград.
• Создать современный минималистичный дизайн, который будет удобен даже для не самой технически подкованной аудитории.

Команда и обязанности

Я работала в команде вместе с ещё одним UX/UI дизайнером, 3D-дизайнером, маркетологами, копирайтерами и разработчиками.

Что было сделано

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

Калькулятор расчёта стоимости

Позволяет пользователям получить предварительный расчёт стоимости онлайн, не дожидаясь звонка менеджера. Чтобы получить расчёт мы всего лишь просим выбрать:
• Количество и тип створки окна.
• Предпочитаемую оконную систему + даём её краткое описание.
• Габариты окна.
• В конце показываем итоговую цену и предлагаем заказать бесплатный замер.

Личный кабинет клиента

Позволяет клиенту:
• Отслеживать статус и управлять заказами.
• В пару кликов получить бесплатные услуги и связаться со своим менеджером.
• Посмотреть историю заказов.
• Скачать документы (договоры, гарантийный талон).
• Обратная связь с менеджером и специалистом, которого направили к клиенту домой.

Интерактивная карта дилерских центров

• Позволяет пользователям быстро найти ближайший офис.
• Фильтр по городу/району.
• Просмотр адресов, телефонов, графика работы, возможность сразу связаться с нужным офисом.
• Построение маршрута до офиса через Yandex Maps.

Онлайн-консультант

• Помощь в выборе окон.
• Подключение менеджера в сложных случаях.

Процесс решения проблемы и моя роль

Исследование

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

При исследовании пользователей мы опирались на их отзывы, а также личное общение с клиентами компании. Также нами использовались инструменты веб-аналитики (Google Analytics, Яндекс. Метрика), анализ поведения пользователей с помощью тепловых карт. Для исследования аудитории мы использовали метод User Personas.

Проектирование

На этапе проектирования мы сосредоточились на создании логичной структуры сайта, что включало проработку юзер-флоу. Мы тщательно спланировали путь пользователя по сайту, начиная от главной страницы и заканчивая этапом оформления заявки. После нашей дизайн-командой были созданы низкодетализированные анимированные прототипы, чтобы протестировать юзабилити на раннем этапе и внести правки. Из трудностей: в процессе работы не раз возникали дополнительные требования к контенту, что требовало изменений в структуре и даже добавления новых страниц.

Информационная архитектура навигации

Визуализация

При создании дизайн-концепции нам важно было сохранить элементы фирменного стиля — синий и зелёный цвета, которые долгие годы ассоциировались с брендом компании. Мы совместно с коллегой-дизайнером разработали новый UI-кит, который сочетал фирменные цвета, но в более свежих и дружелюбных оттенках. Мы использовали чистый минималистичный стиль с понятными акцентами на CTA.

В процессе работы над макетами в Figma использовали компонентный подход (продумали как атомы, так и молекулы), подготовили библиотеку стилей цвета, текста, эффектов. Настроили автолейауты и привязки таким образом, чтобы разработчикам при взаимодействии с макетом было понятно как ведет себя каждый отдельный блок при изменении размеров. Большое внимание уделили проработке мобильной версии сайта, поскольку более 70% клиентов компании заходят на сайт с мобильных устройств.

Мне пришлось тесно взаимодействовать с 3D-дизайнером и прописывать ТЗ, чтобы создать 3D-модели окон и другой нашей продукции для сайта. Мы разработали версии макетов для разных устройств: мобильных телефонов, планшетов и десктопов.

Участие в процессе разработки

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

Контакты