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

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

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

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

Чтобы решить эту задачу, мы с нуля разработали для Caesar Watches онлайн-магазин, в котором соединили визуальную выразительность, техническую гибкость и внимание к деталям — от SEO до Telegram-мини-аппы: 

1. Проанализировали российский часовой рынок и сайты конкурентов;

2. Создали карту сайта и смысловой прототип с учетом SEO-оптимизации;

3. Разработали дизайн-концепцию в точности такую, какой видел ее клиент — современную, отличную от конкурентов и с отсылками к величию Римской Империи;

4. Добавили в дизайн главной страницы эффектные анимации, удерживающие клиентов на сайте;

5. Запрограммировали сайт на React+Next.js, в качестве CMS использовали готовое решение — Strapi, и подключили инструменты мониторинга сервера;

6. Разработали и запустили ТГ-аппу с функционалом каталога для возможности оформления заказа прямо внутри месседжера.

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

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

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

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

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

2. Второй вариант — прямой, понятный и контрастный

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

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

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

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

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

— 3D-модель Rolex Daytona на первом экране;

— Двухуровневый хедер, который сворачивается при скролле;

— Карусель брендов, стилизованная под циферблат;

— Прелоадер, который отражает философию бренда.

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

— Выделили MVP

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

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

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

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

1. Выбрали стек

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

— Неправильно оценили проект, но сделали всё, чтобы это не отразилось на клиенте. Выделили MVP, запараллелили процессы и согласовали новые, комфортные для нас и клиента тайминги;

— Разработали сайт с вау-эффектом, который выделяет Caesar среди конкурентов;

— Упростили процесс заказа и коммуникации, превратив Telegram-канал в полноценный, автоматизированный канал продаж;

— Поняли, что оценка проектов — наша зона роста, и теперь уделяем этому этапу больше внимания.