о проекте:
Рассказываю о проекте в двух словах:
1) Это был уже второй сайт для этого заказчика. В первый раз мы с ними работали над другим проектом — сайтом для компании “Линкер” (подробнее об этом кейсе). “Линкер” — это оптовый поставщик керамогранита и керамической плитки, а “Гранитериум” больше специализируется на услуге резки и обработки керамогранита и керамической плитки.
Мы отлично сработались с заказчиком на первом проекте, поэтому они также решили заказать у меня редизайн для “Гранитериума”. Задачей было сделать редизайн старого сайта, так как он был сделан по шаблону и имел не очень представительный вид. Необходимо было сделать уникальный, современный дизайн в Figma, который затем технический специалист сверстает на коде.
Вот так выглядел сайт до редизайна:
4) Мы детально проработали меню. На старом меню все было в кучу, ничего не понятно. Сейчас меню выглядит лаконично, читабельно, и посетителям сайта понятно, куда смотреть и куда нажимать. Выделили номер телефона, мессенджер WhatsApp, кнопку "Оставить заявку", добавили кнопку «Избранные». Также выделили поиск, потому что поиск — очень важная деталь на многостраничных сайтах с каталогами. Таким образом, меню стало аккуратным и интуитивно понятным.
5) Главная страница — это лицо сайта, это первое, что видит человек. На ней мы выделили отзывы клиентов, чтобы подчеркнуть репутацию компании. У Гранитериума как раз было огромное количество отзывов на 5 звезд. Разместили оффер, который объясняет, для кого подходят услуги резки, с акцентом на целевые аудитории: дизайнеры и архитектурные бюро, застройщики и проектные организации, строительные компании и производители. Добавили две кнопки — «Перейти в каталог» и «Получить консультацию» — помогают пользователям сразу выбрать нужное действие.
Далее расписали преимущества, виды услуг с визуальными примерами (абразивная резка, резка декоративных элементов и так далее), отобразили каталог популярных изделий. Добавили открытый квиз, информацию о компании, выполненные проекты, отзывы в формате видео, блок с партнерами и карту с контактами.
6) Преобразили визуально карточку товара, она стала более понятной, читабельной. Добавили туда внутренние фильтры для товара (выбор материала, насечки, размеры, количество изделий). Разместили кнопки “Заказать” и “Рассчитать стоимость”. Калькулятор рассчитывает необходимое количество плитки, исходя из площади, характеристик и других параметров.
7) В карточку услуг добавили скидку от объема, кнопки “Заказать” и “Получить оптовые цены”. В описании разместили таблицу с размерами ступней и керамогранита с расчетом за штуку, чтобы визуально было понятно, из чего складывается стоимость.
8) На отдельной странице отобразили большое портфолио с разделением по видам изделий и услуг. Описание каждого проекта раскрывается в всплывающем поп-ап окне. Там можно подробнее узнать про сам проект, полистать галерею изображений и, если нужно, заказать что-то подобное.
9)В каталог готовых изделий добавили удобные фильтры по дизайну, поверхности, цвету, размеру и цене. Выделили цветом кнопки “Заказать”.
10) Старая страница “О компании” состояла в основном из текста с размытыми формулировками, например, “дружная команда”, “большой опыт”, широкий ассортимент” и т.д. Мы добавили четких фактов с цифрами: “более 20 лет работаем с керамогранитом”, “более 6000 довольных клиентов”, “более 100 000 м2 керамогранита в наличии”, “скидки от объема до -50%”. Также помимо проработки смысловой составляющей, мы добавили графические элементы и видео о процессе работы. Добавили блоки “Нам доверяют” и “Наши партнеры”, где разместили логотипы крупных заказчиков и партнеров компании. Выделили преимущества и добавили формы для заявок.
11) На странице услуг по резке в карточки услуг мы добавили кнопки “Заказать” и “Подробнее”, разместили видео о том, как происходит резка, добавили формы для заявок и блок “Наши партнеры”.
12) На странице с разделом услуг добавили продающих смыслов: “60 минут минимальное время заказа”, “10 станков для абразивной и 3D резки”, “более 6000 довольных клиентов”. Возле услуги разместили кнопки “Читать подробнее”, “Оставить заявку” и “Получить оптовые цены”. Выделили информацию о скидке за объем, добавили призыв к действию “Получить расчет и скидку!”, а также разместили ответы на часто задаваемые вопросы.
13) На странице с контактами добавили кликабельную кнопку “Написать в Whatsapp”, чтобы у человека была возможность связаться не только по телефону. Добавили на страницу блок “Наши партнеры” для повышения лояльности аудитории, так как компания сотрудничает с крупными партнерами.
14) Параллельно с тем, как создавался дизайн, заказчик оставлял комментарии в макете Figma, а мы вносили по ним корректировки. Заказчику очень понравилась работа, он отдал сайт на верстку. Проект классно завершился, и заказчик остался очень доволен.
2) Изначально мы провели аналитику конкурентов и целевой аудитории старого сайта, чтобы выделить сильные и слабые стороны, а также наглядно показать заказчику, что нужно доработать и почему. У компании свой парк станков, работа выстроена под потоковые, масштабные проекты, поэтому важно было в смыслах и дизайне ориентироваться именно на оптовых заказчиков.
Сайт достаточно большой, поэтому мы решили обновить 8 основных страниц: главная страница, каталог готовых изделий, карточка товара, страницы с услугами, страница о компании, портфолио и контакты. Я подобрала референсы для вдохновения, согласовала их с заказчиком, мы обсудили, что нравится, а что нет. И далее перешли к смысловой структуре. Мы переработали тексты и смыслы на всех страницах сайта.
3) После этого дизайнер приступил к созданию дизайна сайта с готовыми референсами и текстами. UI-кит был полностью создан под новую версию дизайна, мы полностью ушли из шаблонного варианта в уникализированный. UI-кит подробно определяет все элементы дизайна: кнопки, иконки, меню, поп-апы, квизы, шрифты, размеры, цветовые решения, формы для заявок. Он показывает, как элементы выглядят в статике, при наведении, при клике, с адаптациями под разные устройства. Создание UI-кита облегчает дальнейшую верстку и гарантирует, что после после верстки сайт будет выглядеть так, как он задумывался на этапе дизайна.
