+7 (495) 215-52-91

Корпоративный сайт

UX дизайн, UI дизайн, Front-end разработка, WEB разработка

Dali Design

Дизайн-бюро Dali Design занимается проектированием и дизайном интерьеров. В списке услуг: ландшафтный дизайн, инженерия, архитектура, составление дизайн-проектов, декор, ремонт.

Задача

У бюро не было сайта и нам нужно было его разработать.

Задача была в том, чтобы пользователи сайта могли заказать ландшафтный дизайн или ремонт, дизайн интерьера для квартиры, офиса или частного дома. На сайте должно было появиться наглядное портфолио с умным фильтром и 3D-визуализациями, калькулятор стоимости услуг, который рассчитывает цену дизайн-проекта, квиз — опрос, отправляющий контакты пользователя в CRM-систему.

Решение

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

Мы разрабатывали сайт на базе 1С-Битрикс, поэтому для поиска по портфолио использовали «Умный фильтр», который позволяет пользователям находить нужную работу по заданным параметрам. А дополнительный модуль от Компании «Сотбит» помог сформировать уникальные УРЛы для каждого результата поиска и настроить сео-оптимизацию.

Стек технологий

  • UX/UI

    UX best practices, Figma, Adobe (PS, AI, XD), VisualEyes.

  • QA

    Smoke test, Renression test, Lambdatest, Apache Jmeter, Markup Validation Service, Google Mobile-Friendly Test, PageSpeed ​​Insights.

  • Project management

    Waterfall, Fixed price.

  • Frontend

    HTML5, CSS3, SCSS, ES6, JQuery.

  • Backend

    Битрикс, PHP7, MySQL, JSON.

  • Devops

    Git/GitLab, DevHosts, SafeDeplay.

Объём работы на проекте

  • 6

    месяцев делали проект

  • 20

    сайтов конкурентов изучили

  • 16

    уникальных страниц разработали

  • 9

    сотрудников работали над задачами

Команда проекта

Со стороны 5 углов:

  • Татьяна Владимирова

    Руководитель проекта

  • Александр Тихонов

    UX-исследователь

  • Андрей Ястребцов

    Frontend-разработчик

  • Лхасаран Баторов

    UX/UI-дизайнер

  • Александр Тихонов

    Арт-директор

  • Александр Масленников

    Frontend-разработчик

  • Денис Буркавцов

    Backend-разработчик

  • Ирина Моисеева

    Тестировщик

  • Варвара Посёлкина

    Тестировщик

Со стороны заказчика:

  • Анжелика Анаскина

    Куратор проекта

Кто клиент?

Бюро дизайна интерьеров Dali Design. Занимаются созданием интерьеров от дизайн-проектов до ремонта и отделки помещений.

Логотип.jpg

Какая была задача?

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

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

1.jpg

Целевая аудитория (ЦА) клиента выглядит так:

2.jpg

По словам клиента, основные страхи и возражения ЦА связаны с тем, что:

  • у бюро нет сайта в интернете;
  • это молодая компания;
  • много конкурентов.

Что мы сделали?

Работу над проектом мы строили из 5 шагов:

3.jpg

1) На этапе предпроектного исследования мы изучили 20 сайтов конкурентов: посмотрели, как они подают идеи и материал. Понравилось несколько решений, например, как меняется картинка в карточках товаров при наведении курсора, адаптация некоторых сайтов под мобильную версию. Ещё тут мы придумали механику: добавить понравившийся объект в «Избранное» и поделиться ссылкой. Все подробности будут чуть ниже.

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

4.jpg

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

5.jpg

6.jpg

4) Когда пришло время верстать сайт, мы столкнулись с тем, что нужно было адаптировать калькулятор под все устройства: список услуг длинный и требует удобной подачи как в десктопной, так и в мобильной версиях. Похожая история со слайдерами: их тоже адаптировали. Реализовали необычный прелоадер — анимационный эффект, который появляется перед полной загрузкой главной страницы.

7.jpg

8.jpg

9.jpg

5) При программировании мы реализовали раздел «Избранное», куда пользователь может закинуть не только статью или целый проект, но и отдельную фотографию из проекта, чтобы потом поделиться ссылкой на подборку понравившихся объектов.

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

10.jpg

В основе портфолио заложили каталог с умным фильтром и человекопонятными УРЛами (ЧПУ) для каждого результата, чтобы сайт оптимизировался в поисковиках.

Ниже — подробнее о каждом из этапов.

Сайт открывается и обращает на себя внимание прелоадером:

Гиф.gif

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

12.jpg

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

13.jpg

Разработали калькулятор расчёта стоимости дизайн-проекта: пользователь отмечает помещение, для которого нужен дизайн интерьера — квартира, офис или фасад, выбирает тариф и стиль, указывает площадь и видит стоимость. Калькулятор вызывается боковой кнопкой на любой странице сайта.

14.jpg

Если площадь меньше 40 м. кв. — цена фиксированная, если больше 200 м. кв. — цена рассчитывается индивидуально. Также на цену влияют удалённость от МКАД и стиль интерьера.

В основе калькулятора — формула расчёта стоимости, в которой участвуют различные переменные, она учитывает данные из таблицы, которую нам предоставил клиент:

15.jpg

Чтобы помочь пользователю рассказать о своей задаче, определиться с тем, что он хочет получить по итогам работы, рассчитать стоимость и решиться отправить свои контакты, мы придумали квиз, состоящий из 9 вопросов:

1) Выберите ваш стиль.

2) Устраивает ли текущая планировка?

3) Нужны ли рабочие чертежи?

4) Требуется ли 3D-визуализация?

5) Потребуется ли авторский надзор?

6) Как срочно нужен дизайн-проект?

7) Укажите площадь помещения.

8) Выберите тариф.

9) Укажите контактные данные.

Квиз — это опрос с персональным предложением для пользователя с наглядными вариантами ответов. В конце квиза пользователь оставляет свои контакты, отправляет заявку и получает скидку. Данные уходят в CRM-систему.

16.jpg

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

17.jpg

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

18.jpg

В разработке мы использовали 1С-Битрикс в редакции «Малый бизнес», поэтому нам были доступны функции «Умного фильтра» — это автоматически собираемый фильтр на основе характеристик проектов. Для тонкой настройки сео-параметров фильтра мы установили дополнительный модуль от Компании «Сотбит», чтобы формировать уникальный урл для каждого результата фильтрации, ставить в умном фильтре мета-теги и заголовки.

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

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

Для тех, кто хочет посмотреть работу в деталях, предусмотрен переход на страницу проекта, где есть много 3D-визуализаций:

3D-визуализации нужны для того, чтобы посетители сайта видели реалистичный дизайн выполненных проектов в объёме и пространстве и было проще сравнить воображаемую картинку в голове с тем, что получится на самом деле. 

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

19.jpg

Результат

На разработку корпоративного сайта ушло полгода. Сейчас на сайте есть портфолио с выполненными работами, умный фильтр, 3D-визуализации, калькулятор расчёта стоимости дизайн-проекта, нестандартный квиз-опрос, блог с полезными статьями — всё адаптировано под разные устройства.

20.jpg

Это и было важно для клиента. Сейчас мы продолжаем работать с Dali Design по другим проектам: заказчику понравилось работать с нами.

Всё, что получилось в итоге — смотрите на вкладке результат.

Хотите работать с нами?

Связаться

Перетянуть
сюда

Посмотрите другие наши проекты

В портфолио