Полностью упаковали салон премиальных часов за 3 месяца

И это включая несколько вариантов дизайн-концепции, SEO-оптимизацию, разработку на React и… ошибку в оценке проекта. Как — рассказали в этом кейсе.

Мы — агентство Курсор. Любим маму, сложные B2B-проекты и HR-продукты. Особенно для IT, телекома и консалтинга. Но в целом делаем крутые сайты и упаковываем визуальные коммуникации компаниям из разных сфер.

Caesar занимается поставками швейцарских часов и люксовых аксессуаров в магазины в России, Китае и в ОАЭ. Компания работала только с бизнесом, а теперь планирует запускать B2C-направление.

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

В названии Caesar — отсылка к величию и масштабам Римской империи. Целевая аудитория клиента — люди, которые ценят роскошь, качество и традиции. Важно было отразить это в дизайне, но не переборщить. Отдельное требование заказчика — SEO-оптимизация продукта.

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

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

Первый вариант — элегантный и в приглушённых нейтральных цветах

Мы постарались передать величие через лаконичность и чистоту. И использовали мягкие интерактивные решения. Например, анимацию часов, которая по скроллу разворачивается в превью карточки товара с этими часами.

Caesar показалось, что такой акцент не мэтчится с ценностями бренда, поэтому они попросили нас разработать ещё один полярный вариант — с драматичными контрастами и более понятными метафорами.

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

За отсылку к Римской империи в концепте отвечает прелоадер — сменяющие друг друга Veni, Vidi, Vici. Это слоган компании, и его важно было разместить в дизайне — прелоадер оказался идеальным местом. На фоне — чёрно-белый каскад, который добавляет той самой визуальной драмы, о которой просил заказчик.

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

Также по просьбе Caesar мы поэкспериментировали с журнальной вёрсткой, отсылаясь к медиа о часах. На этом этапе клиент размышлял над тем, чтобы сделать блог точкой входа на сайт. Но в итоге мы вместе отказались от этой идеи и увели дизайн в более стандартную для магазина часов стилистику.

Финальный концепт включал такие элементы:

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

Выделили MVP

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

Запараллелили процессы

Пока готовили макеты для MVP, подключили копирайтера, чтобы тот наполнял сайт текстами. Моушн-дизайнера — для работы над stop motion. И иллюстратора — чтобы тот отрисовал лайновые часы.

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

Выбрали стек

Для фронтенда — React-фреймворк Next JS. Он отвечает требованиям проекта, плюс у нас есть в нём уверенная экспертиза.

А для управления контентом на сайте использовали Strapi — это CMS, которую удобно настраивать и расширять при помощи плагинов. Ещё один плюс — это headless-система. Работает быстрее традиционной, потому что отвечает только за хранение контента, а за его отображение — нет.

Сделали сайт мультиязычным

Для локализации фронтенда использовали библиотеку next-intl, которая отлично работает вместе с Next.js. А для локализации данных в CMS — встроенный плагин i18n.

Поработали над скоростью загрузки

Данные на сайте Caesar могут часто обновляться. Если хранить все версии — сайт будет загружаться медленно. Мы решили эту проблему с помощью ISR. Работает так:

Оптимизировали поиск по каталогу

Использовали встроенный в Strapi REST API, который из коробки поддерживает локализацию, сортировку, фильтрацию, поиск и пагинацию.

Настроили уведомления

Использовали Nodemailer — это библиотека, которая позволяет легко настраивать SMTP-сервер для отправки писем-уведомлений. Например, о новой заявке на покупку товара. Nodemailer хорошо интегрируется с другими стеком на проекте и гарантирует безопасность данных.

Добавили анимации

Чтобы разработчики заверстали всё как нужно, дизайнер отрисовывал каждый кадр анимации и собрал рефы. В качестве библиотеки для написания анимаций использовали Framer Motion. Она разработана специально под React и использует компоненты и хуки.

Интегрировали инструмент, чтобы контролировать состояние сайта

Для мониторинга сервера мы настроили Zabbix и подключили бота в Telegram, который отправляет пуши при инцидентах.