Лёгкое начало
Иногда проект начинается не с длинных созвонов, а с короткого сообщения, где уже есть главное: продукт, позиционирование и задача
Начали работу, углубились в тему и подготовили более предметные вопросы заказчику
Целевая аудитория
Просмотрели более 100 отзывов о разных компаниях на сайтах-отзовиках. Выявили основные проблемы, с которыми сталкиваются люди при заказе кухни
При заказе кухни люди боятся не столько цены, сколько ошибок, недочётов и необходимости самим контролировать весь процесс
Команда студии ONE PAGE
«…Нам потом пришлось ещё 100 раз возвращаться в магазин, чтобы сдать лишнее и докупить недостающее…» – примерно с такими проблемами сталкиваются многие при заказе кухни.
После просмотра отзывов и изучения ЦА делаем выводы
Потребители не хотят:
• Решать проблемы
• Отвечать на глупые вопросы и вникать в детали
Потребители хотят:
• Кухню «с картинки». Они влюбляются в неё, либо сами уже знают, что примерно хотят
• Кухню в качественном исполнении
Потребители готовы
• Платить за качество
Делаем главный вывод
Команда студии ONE PAGE
Понимаем, что на сайте нужно красиво показать кухни и убедить потенциального клиента, что проблем у него не будет.
Конкуренты
Изучили 30 сайтов конкурентов в разных сегментах:
Основные конкуренты.
Их позиционирование или УТП
Конкурент 1
Чем больше техники, тем больше скидка на кухню
Конкурент 2
Столешница в подарок
Конкурент 3
Воплощаем ваши идеи в жизнь
Конкурент 4
Кухни по оптимальным ценам с гарантией 5 лет
Конкурент 5
При покупке 2 единиц техники, ещё 2 в подарок
Конкурент 6
Кухни для жизни. Оформляем пространство, а не продаём кухни
Кухни как кухни… Главное – идея
Чат команды:
Идея проекта - самый сложный и продолжительный по времени этап
Команда студии ONE PAGE
Это важно. Идея придаёт индивидуальность обычной услуге и отличает её, даже на эмоциональном уровне.
В этом проекте на идею потратили 48 трудочасов
36 чашек кофе
5 штук идей идеи
10 часов обсуждений
Чат команды:
Берём выше
Приняли решение сделать ставку на качество и его визуальную демонстрацию
Сайт должен воздействовать на подсознание и вызывать определённые эмоции
Команда студии ONE PAGE
Мы не хотели, чтобы сайт прямо в лоб рассказывал об услуге и преимуществах. Дизайн, эмоции, впечатления – вот, что главное. Поэтому скидки и акции мы не вывели на первый план, а оставили ближе к финалу страницы.
К этому выводу мы пришли ещё на этапе анализа целевой аудитории. Покупатель такой кухни рассуждает примерно так:«...Это дорогие, стильные кухни и супер качественные, которые стоят своих денег. Столешница в подарок мне не помешает, но это не так важно для меня...».
Текстовый прототип
Билет в дизайн
Чтобы ничего не потерялось при переходе на следующий этап, составляем такое резюме специалисту, который будет продолжать работу над проектом
Смотрим конкурентов на предмет «элитарности»
Мы решили отказаться от «атрибутов» эконома и по визуалу приблизиться к сайтам кухонь премиального сегмента
У премиальных брендов есть свои особенности в дизайне
Команда студии ONE PAGE
Просмотрев конкурентов элитных кухонь, мы подметили в дизайне общие черты:
• Тенденции к минимализму
• Визуальная доминанта – крупные качественные фотографии
• Типографика без засечек
• Отсутствие большого количества ярких цветов
Влюбляем в кухню
Подобрали референсы в поддержку идеи с крупными фотографиями и минимумом текста
Кухни должны влюблять в себя и показывать ценность ещё до консультации
Команда студии ONE PAGE
Воодушевившись таким обилием визуальной информации, нам захотелось сделать максимально удобный и понятный дизайн сайта, основной задачей которого будет влюбить посетителя сайта в кухню с помощью правильной подачи информации и фотографий.
Сделали 2 версии дизайна первых трёх блоков
Основной фокус в обоих концептах мы сделали на фотографиях кухонь: именно они передают стиль, качество материалов и помогают пользователю представить продукт в интерьере. Разница была в характере подачи
В первом варианте использовали более мягкие формы: закруглённые углы, крупные карточки и кнопки с заливкой. Это добавило интерфейсу современности, визуальной лёгкости и сделало целевые действия более заметными. Во втором варианте, наоборот, оставили строгие прямые углы и более воздушные контурные кнопки. Такая подача выглядела сдержаннее и ближе к классическому интерьерному каталогу.
Также мы проверили разные подходы к контентной сетке. В первом варианте задействовали почти всю ширину экрана. Для этого проекта такое решение хорошо работает на ощущение масштаба: фотографии выглядят крупнее, интерьерные сцены раскрываются лучше, а сайт воспринимается более уверенно и дорого. Во втором варианте использовали более привычную сетку с компактной шириной контента. Она проще в адаптации и быстрее в реализации, но даёт меньше ощущения простора и визуального вау-эффекта.
Дизайн-концепт 1
Дизайн-концепт 2
Каталог – важный блок
Изначально каталог реализовали в виде слайдера
Чат команды:
Дизайн поп-апа
Подробное описание кухни, при нажатии на карточку, решили сделать в поп-апе
Чат команды:
Не, не то…
Попробовали немного перестроить поп-ап, чтобы информация была показана сразу
Чат команды:
То, что надо. Финальная версия поп-апа
Большие фото
При нажатии на карточку кухни посетитель сразу попадает в просмотр с крупным изображением во весь экран. Ему не нужно искать иконку увеличения, дополнительно нажимать на фото или разбираться, как открыть его подробнее. Такой сценарий делает просмотр проще и естественнее: человек сразу может рассмотреть фасады, фактуру материалов, сочетание цветов, фурнитуру и общее настроение кухни.
Характеристики
Цена, технические характеристики, описание и материалы кухни становятся важны посетителю уже после того, как его заинтересовали фотографии. Поэтому мы не стали перегружать первый экран карточки текстом и деталями. Вся информация размещена ниже, под слайдером с фотогалереей, и открывается при скролле. Так пользователь сначала получает визуальное впечатление, а затем спокойно переходит к подробностям.
Кнопки
Кнопки «Записаться в салон» и «Удалённый расчёт» разместили в самом конце карточки. Сначала пользователь рассматривает кухню, затем изучает описание, материалы, характеристики и цену, и только после этого переходит к целевому действию. Такой порядок выглядит естественно: мы не давим на посетителя сразу, а даём ему сначала убедиться, что кухня ему подходит. Когда интерес уже сформирован, кнопки становятся логичным следующим шагом.
Полный макет готов
Адаптивы и подготовка к верстке
Адаптировали дизайн сайта под мобильные устройства. Отдельно продумали анимации и эффекты, чтобы сайт выглядел живым, но не перегружал пользователя. Движение должно было поддерживать ощущение качества и аккуратно направлять внимание, а не отвлекать от кухонь.
Затем подготовили все материалы для передачи в разработку: финальные макеты, графику, изображения, состояния элементов, комментарии по поведению интерфейса и техническое задание. После этого проект передали на верстку.
Верстка и оптимизация
Сверстали сайт
Завершили верстку сайта, реализовали задуманные анимаци и микро-анимации. Проверили стабильность работы и корректное отображение сайта на разных устройствах.
Оптимизировали производительность страницы и ускорили её загрузку
Оптимизировали изображения для ускорения загрузки и провели SEO-оптимизацию для правильной индексации поисковыми сайтами.
В этом кейсе мы осветили лишь часть работы над проектом
Команда студии ONE PAGE
Но нашей целью и не было показать всё. Главное - мы показали сам процесс работы, как внутри команды, так и взаимодействие с заказчиком.
