Дизайн интернет-магазина керамогранита Estima

Задача — удобный сайт товаров для ремонта и строительства

Заказчик — компания Estima, которая занимается производством и реализацией керамогранита. У нее есть интернет-магазин, которым пользуются оптовые и розничные покупатели, выбирая плитку с доставкой. 

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

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

Юзабилити-тестирование — основа для структуры сайта, интерфейса и дизайна

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

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

Интернет-магазин ведет пользователя к покупке

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

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

Визуализация в интерьере — как плитка выглядит в реальной жизни

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

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

Понятный выбор плитки по параметрам 

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

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

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

Визуальная концепция интернет-магазина — утонченность и эстетика

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

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