Главное о кейсе
Сaesar Watches — поставщик люксовых часов и аксессуаров в магазины России, Китая и ОАЭ. Компания работала только с B2B-сегментом, теперь же решила выходить на B2C, для чего потребовался сайт.
Мы предложили пойти в сторону не стандартного дизайна для e-comm, а сделать ставку на креативность и люксовость. Это, с одной стороны, должно было помочь выделиться среди конкурентов, а с другой — подкрепить доверие клиентов, совершающих дорогостоящую покупку.
За 3 месяца мы создали дизайн и разработали сайт с каталогом на сотни товаров, а также Telegram-app с интегрированным в неё каталогом.
Как проект изменил жизнь пользователей
Раньше, чтобы узнать о наличии товара, купить часы за 30,000$ или же посмотреть детали доставки либо возврата, требовалось мониторить Telegram-канал магазина, т.к. единого сайта для этого не было. Если же покупатель хотел получить дополнительные фотографии товара, ему приходило писать об этом напрямую в Директ продавцу.
Теперь же большую часть вопросов и недопониманий закрывает сайт — можно просто зайти на него, настроить фильтрацию, перейти в карточку интересующих часов и в ней получить всю необходимую информацию, не совершая лишних действий. Это всё положительно сказывается на конверсии и скорости принятия решения о покупке.
Бизнес-задача и ее решение
На старте у нас были две основные вводные: сайт должен отражать внутреннюю культуру и ценности компании и помочь сразу выделиться на рынке.
Помимо этого, сайт должен был улучшить пользовательский опыт, сделать процесс оформления заказа проще и, благодаря SEO-оптимизации, стать ещё одним источником заказов.
Что у нас получилось в итоге:
— Сайт начал генерировать заказы, и сейчас они составляют ~15% от всех заявок;
— Релиз сайта отметился большим количеством положительных отзывов от клиентов магазина;
— В течение 2-х недель после запуска сайта к нам обратились три крупных конкурента с запросом на разработку аналогичного проекта.
Крафт (мастерство), реализация, технические детали
Тут пошли просто по best practise-ам: фронт на React и
Next.js, CMS — Strapi.
1. Сделали сайт мультиязычным
Для локализации фронтенда использовали библиотеку next-intl, которая отлично работает вместе с
Next.js. А для локализации данных в CMS — встроенный плагин i18n.
2. Поработали над скоростью загрузки
Данные на сайте Caesar могут часто обновляться. Если хранить все версии — сайт будет загружаться медленно. Мы решили эту проблему с помощью ISR.
3. Добавили анимации
Чтобы разработчики заверстали всё как нужно, дизайнер отрисовывал каждый кадр анимации и собрал рефы. В качестве библиотеки для написания анимаций использовали Framer Motion. Она разработана специально под React и использует компоненты и хуки.
4. Интегрировали инструмент, чтобы контролировать состояние сайта
Настроили Zabbix для отслеживания состояния сайта и прикрутили его к Telegram. Это позволяет клиенту моментально получать информацию о состоянии сайта в удобном формате, что очень важно для e-comm.
Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком
1. На этапе дизайн-концепции случилось сильное расхождение с клиентом по видению: он хотел более «драматичный» вариант — с бордовыми, «кровавыми» цветами и отсылками к Колизею и гладиаторам. Мы же были за более сдержанные тона и метафоричный подход.
В итоге, у нас получилось реализовать все пожелания не «в лоб», а через различные визуальные приемы: например, за отсылку к Римской империи отвечает прелоадер и сменяющие друг друга слова «Veni, Vidi, Vici». На фоне — чёрно-белый каскад, который добавляет той самой визуальной драмы, о которой просил заказчик.
2. Честно признаемся, что немного просчитались в оценке. Из-за этого проект стал затягиваться, и у клиента начал копиться явный негатив. Чтобы исправить ситуацию, мы на ходу скорректировали процессы: выделили MVP и засинхронили специалистов.
В итоге, даже несмотря на то, что всё пошло не по плану и дедлайн сдвинули на пару недель, клиент всё равно остался доволен проектом, и мы с ним и дальше продолжаем работать над новыми задачами.
Скриншоты
Комментарий заказчика
Дизайн нашего сайта и всю айдентику помогла нам сделать компания Курсор — это Дмитрий Ларионов и его команда. Что могу сказать: люди ответственные, под ключ сделали нам сайт. Всё очень классно работает, все правки, которые мы давали по ходу работы, были учтены. Сроки были соблюдены, и в плане цены пошли нам навстречу. Рекомендую, и удачи.