O’Clock

Оклок (O’Clock) — сеть салонов по продаже наручных часов с широким выбором моделей от повседневной классики до спорта и умных решений.

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

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

Перед началом работы нами был сформирован список требований к проекту:

Важной частью проекта также стала реализация дополнительных функций: разработка бонусной системы, интеграция BNPL-сервиса «Яндекс Сплит» и внедрение систем автоматизации обработки заказов.

Перед разработкой дизайна мы провели анализ рынка интернет-магазинов часов. Посмотрели решения крупных федеральных игроков и региональных проектов. По итогам анализа стало ясно, что премиальный товар требует визуального акцента на фото и минимального «шума» в интерфейсе.

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

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

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

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

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

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

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

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

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

Все выбранные значения фиксируются в отдельном блоке «примененные фильтры», чтобы пользователь мог быстро отменить лишние фильтры и не терять контекст выбора.

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

В каталоге мы сделали плотный вывод карточек в 4 колонки без привычных всем фильтров в видимой части интерфейса. Так пользователь быстрее просматривает ассортимент и сравнивает модели без лишней траты времени на скролл. В каждой карточке сразу видны ключевые параметры выбора: фото, бренд, артикул, цена (текущая и зачеркнутая), процент скидки, ежемесячный платеж при покупке в рассрочку и быстрые действия (добавить в избранное или в сравнение).

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

В качестве действительно интересного функционального решения реализовали автоматическую генерацию посадочных страниц на основе примененных фильтров. Система автоматически формирует страницу с уникальным URL и заголовком, комбинируя до двух значений фильтра. Это кратно расширяет структуру каталога, дает сотни вариантов релевантных страниц и помогает в продвижении по средне- и низкочастотным запросам без ручной сборки посадочных страниц.

Также оптимизировали загрузку каталога. Фотографии в карточках подгружаются через «lazy load»: изображения загружаются только когда попадают в область видимости, а не все сразу. Это снижает нагрузку на страницу, ускоряет первый показ каталога и помогает сохранить плавный скролл, особенно на мобильных устройствах.

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

Слева в верхней части карточки товара размещен крупный блок с фото выбранной модели часов с возможностью увеличения. Рядом идет структурированный блок с ключевыми характеристиками, коротким описанием и информацией по доставке, чтобы покупатель сразу видел условия получения. Справа собрана покупательская зона, которая отвечает за конверсию: наличие, рейтинг товара, процент скидки, текущая и старая цена, бонусы, варианты оплаты и CTA-кнопка «В корзину». Рядом доступны добавление товара в избранное и в сравнение.

Для повышения среднего чека и снижения барьеров оплаты в карточке предусмотрены Яндекс Pay и рассрочка через «Яндекс Сплит».

Дополнительно внедрена бонусная программа. Начисление идет в размере 10% от покупки на внутренний счет пользователя, а затем бонусами можно оплатить до 100% следующей покупки. Это напрямую работает на повторные заказы и рост LTV, потому что у клиента появляется понятная причина вернуться и докупить еще.

Отдельно продумали блок «аналогичные модели». Он помогает не терять покупателя, если конкретная модель не подошла по цене, цвету или параметрам, и дает быстрые альтернативы внутри того же сценария выбора. Управление аналогами реализовано централизованно через 1С. Привязка и подбор формируются в учетной системе, поэтому контент поддерживается в актуальном состоянии без ручного редактирования на сайте, и логика рекомендаций остается управляемой из одного места.

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

Отдельно вынесли подробную информацию о доставке: условия рассчитываются автоматически через интеграцию с курьерской компанией СДЭК по API. Пользователь видит варианты получения, сроки и стоимость доставки, а значит, с большей вероятностью может принять взвешенное решение о покупке.

Отзывы проходят модерацию и публикуются только после проверки, поэтому блок остается управляемым и не превращается в раздел со спамом и сторонней рекламой.

И еще один важный элемент — блок «Смотрите также». Он работает как умная автоподборка: система предлагает товары со схожими характеристиками и близкой к просматриваемой модели часов ценой. Это помогает удержать покупателя в состоянии выбора и аккуратно ведет к альтернативам без ощущения навязчивости.

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

На экране остается только то, что нужно для решения о продолжении процесса оформления заказа: список товаров с фото и названием, управление количеством и быстрые действия (удалить, добавить в избранное). Справа — итоговая сумма, бонусы (которые пользователь получит за покупку) и заметная кнопка перехода к оформлению. Количество можно менять только в пределах реальных остатков из 1С, поэтому корзина не дает добавить больше, чем есть на складе.

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

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

В блоке получения заказа предусмотрены самовывоз и доставка. При самовывозе пользователю предлагается удобный выбор пункта выдачи в его городе через карту. Стоимость и срок доставки рассчитывается автоматически через интеграцию по API СДЭК.

Также в оформлении предусмотрена работа с бонусным счетом. Бонусы можно списать частично или полностью по курсу 1 рубль за 1 бонус, а также видно, сколько бонусов начислится за текущий заказ.

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

Вход завязан на номер телефона и SMS-код. Пользователь вводит телефон в текстовое поле (предусмотрена маска, которая не позволяет вводить никакие символы кроме цифр), подтверждает согласие на обработку персональных данных и только после этого может запросить код. Такое решение упрощает взаимодействие с сайтом: логин/пароль не нужны, а процесс авторизации выглядит привычно для e-commerce.

Чтобы снизить спам-нагрузку, запрос SMS-кода защищен таймингом и «rate limit»-ограничением: повторная отправка доступна только после заданного интервала.

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

При вводе запроса показывается выпадающая подсказка с товарами, чтобы можно было перейти сразу к просмотру искомой модели, не дожидаясь полной поисковой выдачи. Сам ввод работает аккуратно: запросы отправляются с небольшой задержкой (debounce), чтобы не нагружать сервер и сохранять быстрый отклик интерфейса даже на слабых устройствах.

Сравнение сделано как отдельная страница, где пользователь собирает несколько моделей и может быстро и эффективно сравнить их в одной таблице. Сверху остаются карточки выбранных товаров с фото, названием и ценой, рядом быстрые действия: можно удалить позицию из сравнения, добавить в избранное и сразу отправить модель в корзину. Есть переключатель «Показать только отличия» — он убирает одинаковые параметры и оставляет только отличия в выбранных моделях. Предусмотрена быстрая очистка списка, чтобы начать сравнение заново в один клик.

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

Личный кабинет сделан как понятная точка управления своим профилем и заказами.

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

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

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

В «Личных данных» предусмотрено управление основными данными профиля через простую форму, чтобы пользователь без каких-либо проблем мог самостоятельно обновить информацию. В структуре кабинета также заложен бонусный счет с балансом и историей начислений/списаний.

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

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

Проект реализован в концепции «Mobile First»: основной сценарий проектировали сразу под смартфоны и планшеты, а затем масштабировали на десктоп.

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

Интерфейс тестировали на разных устройствах и браузерах: Android и iOS, Safari на iPad, Chrome на Windows и других. В итоге на типичных связках «устройство + браузер» верстка ведет себя предсказуемо, без скачков, наложений и развала элементов.

Для полноценной автоматизации интернет-магазина реализовали набор интеграций с внешними системами.

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

В оформлении заказа подключили онлайн-оплату через Яндекс Pay и оформление рассрочки через Яндекс Сплит. Также реализовали карту с выбором пунктов выдачи и автоматический расчет стоимости/сроков доставки. Для интеграции использовали API курьерской компании СДЭК.

Сделали уведомления о новых заказах в Telegram-группу менеджеров сразу после оформления. Это повышает скорость реакции, снижает риск потери заявки и делает обработку более предсказуемой в пиковые периоды.

Реализовали авторизацию по номеру телефона через SMS-шлюз: отправка одноразового кода и подтверждение входа. Это упрощает регистрацию и дает единый безопасный способ доступа к личному кабинету без ввода логина и пароля.

В результате заказчик получил полноценный интернет-магазин часов, в котором сочетаются премиальное восприятие бренда и понятная продуктовая логика покупки. Мы выстроили сценарии выбора и оформления заказа, добавили необходимые e-commerce функции и интеграции, а также заложили основу для SEO и масштабирования. Ниже — ключевые итоги, которые напрямую учитывают изначальные требования к проекту:

На выходе клиент получил готовую e-commerce платформу, которую можно эффективно масштабировать, а именно расширять ассортимент и брендовые направления, разрабатывать новые функциональные компоненты, тестировать гипотезы и усиливать маркетинг, при этом операционные процессы (учет, доставка, оплата, уведомления и др.) уже выстроены и никак не тормозят развитие.