Редизайн интернет-магазина DAVICI
Как сделать крутой сайт, если заказчик пришел с дизайн-макетом от полиграфистов
DAVICI — это уникальные деревянные пазлы. Ай, наверно, вы совсем не то себе представили… Это нереально крутые пазлы с эксклюзивным дизайном, которым нет аналогов во всем мире, а формы самих пазлов настолько причудливы, что можно зависнуть на несколько часов, разглядывая их по одному, и словить пресловутый дзен.
Первую версию интернет-магазина мы разрабатывали вместе. Годы шли, и настало время, когда сайт уже было бы неплохо обновить, а еще добавить новых функций и возможностей. Клиент пришел к нам с идеями! И с макетами дизайна…
Тестирование макетов
Клиент заранее заказал дизайн у одной известной компании, специализирующейся на графическом дизайне (был уже у нас такой проект). Они работают, в основном, с полиграфией, но решили попробовать и с сайтами. Однако не все то, что впечатляюще смотрится на бумаге, будет вызывать тот же эффект в вебе. Или даже может вовсе не работать.
Чтобы понять, заработает ли дизайн-макет в веб-пространстве, мы сначала провели аудит: проверили полученные дизайн-макеты на соответствие страницам текущего сайта, и затем протестировали их. На тестировании макетов мы проверяли юзабилити (удобство, интуитивная понятность), логику, связность между страницами и в целом пригодность к вебу.
Первое, что выяснилось — непонятно, как это все верстать :) В дизайне не использовалась сетка, не было унифицированного вида элементов. Например, у одних и тех же карточек товара цена, рейтинг и кнопки были в разных местах. Не все необходимые страницы полиграфисты учли, а значит, и не отрисовали их. Например, забыли часть поп-апов и кота :)
Первое, что выяснилось — непонятно, как это все верстать :) В дизайне не использовалась сетка, не было унифицированного вида элементов. Например, у одних и тех же карточек товара цена, рейтинг и кнопки были в разных местах. Не все необходимые страницы полиграфисты учли, а значит, и не отрисовали их. Например, забыли часть поп-апов и кота :)
Оцифрованный дизайн-макет
В целом дизайн-макет был неплох, поэтому мы подшлифовали его, оцифровали, дорисовали недостающие страницы, а некоторые вещи, которые в вебе хоть и не приветствуются, превратили в фишки нового дизайна!
Большая-пребольшая карточка
Одна из фишек, оставшаяся от исходного дизайн-макета: карточки товара разного размера. Проблема была в том, что по историческим причинам изображения для недорогого товара были большими, а для того, что стоит дороже — маленькими. Психологически внимание притягивает больший элемент (то есть тот, что стоит дешевле), но так в коммерции дела не делаются :)
Мы предложили два варианта: либо переделать все изображения, учитывая, какие из них дороже/дешевле (ох ты ж ёжик, тут делов!), либо завести у товара свойство, которое при выбранной опции делает карточку широкой (не 3 колонки, как по умолчанию, а 6). Таким образом, при добавлении товара стало возможным из админки управлять вниманием пользователя.
Мы предложили два варианта: либо переделать все изображения, учитывая, какие из них дороже/дешевле (ох ты ж ёжик, тут делов!), либо завести у товара свойство, которое при выбранной опции делает карточку широкой (не 3 колонки, как по умолчанию, а 6). Таким образом, при добавлении товара стало возможным из админки управлять вниманием пользователя.
Шапки страниц разного цвета
Фишка номер два, перешедшая от оригинала к веб-варианту. Когда нам отдали дизайн-макеты, мы заметили, что шапка каждой страницы была окрашена в новый цвет. «Окей», — прищурились мы, — «пусть будет другим цветом», — почесали бороду мы, — «только не здесь». И вновь запилили новое свойство — задавать любой цвет из HEX-палитры (это там где решетка и цвет задается значением, цифробуквами. Например, #ffa500 — это оранжевый) для любой страницы сайта.
Вот как это работает на практике:
1. Задается цвет шапки из административной панели сайта.
2. На сайте страница приобретает заданный цвет. В данном случае — каждая коллекция имеет свой цвет.
1. Задается цвет шапки из административной панели сайта.
2. На сайте страница приобретает заданный цвет. В данном случае — каждая коллекция имеет свой цвет.
3. Дочерние страницы наследуют родительский цвет. Будучи постоянным клиентом, начинаешь уже ориентироваться, какой товар к какой коллекции принадлежит.
Внезапные страницы
Где-то на середине процесса редизайна клиент захотел познакомить пользователей с коллективом. Не проблема!
Полина
Руководитель проекта
Список страниц для верстки и сборки был заранее утвержден, но в середине верстки на одном из звонков с заказчиком было решено, что полиграфисты будут рисовать еще одну страницу — о команде Давичи. Страница новая, ранее на сайте ее не было) Но в этом и плюсы работы по SCRUM — согласовали, добавили в бэклоги на верстку и программирование страницу, и вот у она уже в работе)
Новая главная страница
После запуска сайта в новом дизайне прошло полгода, и заказчик пришел к нам за новой главной страницей. В варианте от полиграфистов на главной выводилось больше товаров, чем в любом разделе каталога. Было много табов и слайдеров. Как результат — сайт тормозил. Вместо того, чтобы просто убрать часть блоков, — мы предложили перерисовать дизайн страницы целиком, чтобы учесть все нюансы веба и сделать красиво. За дело взялась Кристина.
Кристина
Дизайнер
Чтобы найти фишку для обновленной версии сайта я первым делом взяла в руки коробку пазлов Davici и первый час просто рассматривала замысловатые детали. Там были и животные в причудливых динамичных позах, и мелкие бытовые предметы вроде чайника и зонта. В моем наборе были даже мини-следы от ботинок! Это не обычные детали — они деревянные, шероховатые, тактильно приятные, с мягким бронзовым напылением на обратной стороне. А как они пахнут!
На деталях мы и решили сделать акцент в новой версии сайта. Они встречают посетителя в промоблоке с необычной навигацией.
Подготовка «ушей» слайдера была похожа на сборку пазла уровня «эксперт». Требования к изображениям для веба и полиграфии отличаются, поэтому при экспорте файлов то кот не стыковался с балериной, то домик не влезал в луч солнышка. Но художники лазерной резки, которые готовят и продумывают паттерны деталей просто чародеи математической мысли! Я буквально «детально» в этом убедилась. Каждая деталь перетекает в другую очень интуитивно и естественно, и пустоты тоже образуют узнаваемые очертания предметов!
Элементы пазлов настолько необычны и разнообразны, что мы даже использовали детали «в деталях»: для иконок коллекций и значков преимуществ.
Детали с легким параллаксом сопровождают пользователя и по мере скролла страницы. Эти реалистичные фигурки по бокам страницы мы замоделили в 3D. У нас вышло довольно много разных форм, поэтому в редакторе моделей можно тоже собрать пазл :)
На деталях мы и решили сделать акцент в новой версии сайта. Они встречают посетителя в промоблоке с необычной навигацией.
Подготовка «ушей» слайдера была похожа на сборку пазла уровня «эксперт». Требования к изображениям для веба и полиграфии отличаются, поэтому при экспорте файлов то кот не стыковался с балериной, то домик не влезал в луч солнышка. Но художники лазерной резки, которые готовят и продумывают паттерны деталей просто чародеи математической мысли! Я буквально «детально» в этом убедилась. Каждая деталь перетекает в другую очень интуитивно и естественно, и пустоты тоже образуют узнаваемые очертания предметов!
Элементы пазлов настолько необычны и разнообразны, что мы даже использовали детали «в деталях»: для иконок коллекций и значков преимуществ.
Детали с легким параллаксом сопровождают пользователя и по мере скролла страницы. Эти реалистичные фигурки по бокам страницы мы замоделили в 3D. У нас вышло довольно много разных форм, поэтому в редакторе моделей можно тоже собрать пазл :)
Готовую страницу мы сверстали и аккуратно заменили ей старую. Как результат — увеличение скорости загрузки страницы практически в три раза.
Согласно исследованиям, скорость загрузки целевых страниц напрямую влияет на конверсию. В январе 2019 года Колин Лафран, главный редактор платформы для маркетологов Unbounce, на основании проведенного исследования опубликовал доклад для маркетологов о скорости загрузки страниц — Page Speed Report For Marketers. В том числе там говорится, что если целевая страница слишком медленная, почти половина потенциальных посетителей станут реже посещать ее, а треть вовсе больше не вернется на сайт.
Новые фичи
Подарочные сертификаты
В каталоге есть сертификаты нескольких номиналов, которые можно подарить. Не нужно никуда ходить — сертификат можно отправить в пару кликов, даже сидя в кафе напротив того, кому этот сертификат сейчас прилетит.
При продаже подарочного сертификата мы создаем фиктивную корзину с одним товаром и сразу оформляем на нее заказ. Механизм похож на «быстрый заказ», когда пользователь заказывает товар прямо из карточки товара, не переходя в корзину.
Вы выбираете сертификат, жмете кнопку «Купить» и, не переходя в корзину, в появившемся попапе заполняете форму: кому, от кого (или остаетесь тайным дарителем), контакты и поздравление. Счастливчик получает сертификат к себе на почту и та-даааа! Буря эмоций обеспечена, и делать особо ничего не пришлось — сертификат вместо тысячи слов :)
При продаже подарочного сертификата мы создаем фиктивную корзину с одним товаром и сразу оформляем на нее заказ. Механизм похож на «быстрый заказ», когда пользователь заказывает товар прямо из карточки товара, не переходя в корзину.
Вы выбираете сертификат, жмете кнопку «Купить» и, не переходя в корзину, в появившемся попапе заполняете форму: кому, от кого (или остаетесь тайным дарителем), контакты и поздравление. Счастливчик получает сертификат к себе на почту и та-даааа! Буря эмоций обеспечена, и делать особо ничего не пришлось — сертификат вместо тысячи слов :)
Если сертификат не использовали в течение 9 дней, то его новому владельцу придет письмо с напоминанием, что пора бы что-то с сертификатом сделать. Еще одно письмо-напоминание придет через 90 дней.
Бонусная программа
А еще мы запустили программу лояльности для клиентов.
У зарегистрированного пользователя два уровня статусов: покупателя — по количеству покупок, и коллекционера — и по количеству зарегистрированных кодов деталей. У каждого статуса любого уровня есть триггер, когда он присваивается клиенту. С первым уровнем все просто и понятно, а со вторым — поясним.
В каждом наборе пазлов есть код, который можно найти на детальке-коте.
У зарегистрированного пользователя два уровня статусов: покупателя — по количеству покупок, и коллекционера — и по количеству зарегистрированных кодов деталей. У каждого статуса любого уровня есть триггер, когда он присваивается клиенту. С первым уровнем все просто и понятно, а со вторым — поясним.
В каждом наборе пазлов есть код, который можно найти на детальке-коте.
В личном кабинете вы регистрируете коды с деталей. Первые два статуса коллекционера присваиваются за регистрацию любых кодов. А дальше — за регистрацию кодов из всех наборов какой-либо коллекции. Ну, какой же вы коллекционер без коллекции? :)
Мы взяли готовый модуль бонусной системы и кастомизировали под наши требования: бонусы могут начисляться только за «живые» деньги. Если сумма покупки составляет 20 000 рублей, из которых 5 000 покупатель оплачивает сертификатом, то бонусы будут начисляться только за 15 000 (то есть, без учета сертификата).
Бонусы множатся и копятся за все статусы, а как накопятся, компания дарит подарки :)
Мы взяли готовый модуль бонусной системы и кастомизировали под наши требования: бонусы могут начисляться только за «живые» деньги. Если сумма покупки составляет 20 000 рублей, из которых 5 000 покупатель оплачивает сертификатом, то бонусы будут начисляться только за 15 000 (то есть, без учета сертификата).
Бонусы множатся и копятся за все статусы, а как накопятся, компания дарит подарки :)
Полина
Руководитель проекта
На новом сайте, кроме нового дизайна, появились и новые интересные фишки. Выражаем благодарность Вере Левша, Екатерине Сотниковой и Дарье Копыловой за оперативную обратную связь и быстрые согласования, четкие и понятные постановки задач. Благодаря такой слаженной работе редизайн сайта получилось сделать очень быстро!
Готовый проект
