Разработка лендинга для KOMANDOR - кухни на заказ

ЗаказчикKOMANDORЗадачаРазработка лендинга для KOMANDOR

5090303f7cbf7cb6252640444452df51.png

Лёгкое начало

43807fa59ee2e2de53095ef4b79ac02e.png

Начали работу, углубились в тему и подготовили более предметные вопросы заказчику

6a709f8d72394abfad5e8659ff30f9bf.png

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

Просмотрели более 100 отзывов о разных компаниях на сайтах-отзовиках.
Выявили основные проблемы,  с которыми сталкиваются люди при заказе кухни.

9cb872cec87d476032ac171ce33014fb.jpg

»…Вам потом придётся 100 раз возвращаться в магазин, чтобы сдать лишнее и докупить недостающее…» — примерно с такими проблемами сталкиваются многие при заказе кухни.

После просмотра отзывов и изучения ЦА делаем выводы

Потребители:

a5f05396b26e4568ce316ee412517032.jpg

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

Конкуренты

Изучили 30 сайтов конкурентов в разных сегментах:

17c371d3dc90a9869387722f5d60d821.png

Основные конкуренты. Их позиционирование или УТП

c8ee2c742639de9d93050f6623d6118a.png

Кухни как кухни… Главное — идея

d4082e9934ca27a5e45aa7d2c63cf20b.png


Идея проекта — самый сложный и продолжительный по времени этап

Это важно. Идея придаёт индивидуальность обычной услуге и отличает её, даже на эмоциональном уровне.

На идею потрачено:

  • 48 трудочасов;
  • 36 чашек кофе;
  • 5 штук идей идеи;
  • 10 часов обсуждений.

5da9edbf990d6f22a5698c65b80fd4b9.png

Берём выше

Приняли решение сделать ставку на качество и его визуальную демонстрацию.

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

»…Это дорогие, стильные кухни и супер качественные, которые стоят своих денег. Столешница в подарок мне не помешает, но это не так важно для меня…» — так рассуждают покупатели.

06899b94e25dd79479720b815eb5f1e7.png

Текстовый прототип

95227e5cfb4b16767835bf6eb9d5b3be.png

Записали видеопрезентацию с пояснениями прототипа.

1d9d0e6ff60c9934d5cd4211f7a72784.jpg

Билет в дизайн

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

4f3f28b4949b804d8613f537005e152b.jpg

Смотрим конкурентов на предмет «элитарности»

Мы решили отказаться от «атрибутов» эконома и по визуалу приблизиться к сайтам кухонь премиального сегмента.

7d76014b0e4721baad29c0dcf6e1fa35.jpg

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

  • минимализм;
  • типографика без засечек;
  • крупные качественные фотографии;
  • отсутствие большого количества ярких цветов.

Влюбляем в кухню

Подобрали референсы в поддержку идеи с крупными фотографиями и минимумом текста.

bd46f40228ff0315298d7b510174ff30.png

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

Сделали 2 версии дизайна первых трёх блоков

Вариант 1

  • Cетка из трёх колонок с небольшими отступами по бокам;
  • Крупная типографика;
  • Акцент на фото;
  • Закругленные углы;
  • Кнопки с заливкой.

d3c51fd83faa1de300113e9295d1ba14.jpg

Вариант 2

  • Стандартная 12-ти колоночная сетка с контейнером 1100 px;
  • Элементы на подложках;
  • Акцент на фото;
  • Кнопки с обводкой.

4094b440c01d296564131724194e453e.jpg

Отправили их заказчику на согласование.

e52f05a920431c1baf51ce5e68bb0466.png

Каталог — важный блог

Изначально каталог реализовали в виде слайдера.

07890c26c1772590593605addf54c58a.png

И сделали развёрнутый :)

67dc6f6f42faf3aff1f9265fbaa1651a.png

Дизайн поп-апа

Подробное описание кухни, при нажатии на карточку, решили сделать в поп-апе.

67106bc19b5e8854039bdf043199352f.png

Не, не то…

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

1d2736c4948ea42c097905737f5f1ca7.png

Собрались, обсудили иии…

То, что надо. Финальная версия поп-апа

efc922e92f0340fe938878d82f0c9cd1.png

Фото

При нажатии на карточку кухни посетитель сразу видит фото во весь экран. Ему не нужно дополнительно нажимать на неё,  чтобы увеличить.

Характеристики

Цена, технические характеристики, описание и материалы кухни — важны посетителю, если ему понравились фото, и он увидит эту информацию при скролле. Поэтому весь текст «спрятали» внизу, под слайдером с фотогалереей.

Кнопки

Наименее важные элементы в самом конце: кнопки «Записаться в салон»,  «Удалённый расчёт».

Полный макет готов

7fd1fd658d53ae4caf447e9d43caaaaf.png

Отправили полный макет на согласование заказчику.

d03930302e02dd5b3c9fb6430f4877c9.png

Сделали 3 адаптивные версии сайта

2d5a931e918cd64c355ad9a1f73002a9.png

ТЗ для верстальщика

Продумали пользовательское взаимодействие и интерактивные элементы.

374a77a83249b9ac376be0b5bc46648a.png

Последние приготовления

Оптимизировали производительность страницы и ускорили её загрузку.

82ab0f69a63d0fd8f864e6c23b49aaef.png

В этом кейсе мы осветили лишь часть работы над проектом. Но нашей целью и не было показать всё. Главное — мы показали сам процесс работы, как внутри команды, так и взаимодействие с заказчиком.

А результаты нашей работы и больше проектов вы можете посмотреть на нашем сайте one-page-site.ru.

Перейти на сайт

Полный текст статьи читайте на CMS Magazine