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

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

Задача

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

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

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

Конкуренты

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

Цели, боли клиентов и команда

Цели

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

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

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

• Упрощение взаимодействия на сайте.

• Повышение конверсии из посетителей в клиентов.

• Увеличение количества заявок на сайте.

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

• Боятся скрытых доплат за работу.

• Испытывают сложности при оформлении заявки, долго ожидают информации от менеджера.

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

• Устаревшие и неудобные сайты, которые отпугивают клиентов.

Боли клиентов

С помощью нового сайта «Оконного континента» мы хотели добиться следующих целей:

Также мы хотели закрыть основные боли наших клиентов:

Гипотезы

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

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

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

• В конце показываем итоговую цену и предлагаем заказать бесплатный замер.

• Габариты окна (ширина и высота).

• Предпочитаемую оконную систему + даём её краткое описание.

• Количество и тип створки окна.

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

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

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

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

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

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

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

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

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

Контакты

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