Как создавался интернет­-магазин российского бренда часов, признанный лучшим в Европе

Интернет-магазин стал лучшим на европейском конкурсе eCommerce и веб-разработки ED Awards и взял международную премию коммуникационного дизайна Red Dot. По версии интернациональной платформы CSS Design Awards стал сайтом дня, а в России признан лучшим монобрендовым интернет-магазином на Рейтинге Рунета.

Lincor – один из брендов Угличского часового завода, наследие «Чайки». Отдельная марка наручных часов со своим позиционированием класса «доступный люкс». Качество – уровня западных брендов, а цена приемлема для российских потребителей.

Клиент понимал, что за онлайном будущее, и для бренда нужен был прорывной сайт, чтобы вывести продукт на новый уровень. Задачи, которые стояли перед сайтом Lincor:

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

Сайт – самостоятельный инструмент коммуникации, со своей аудиторией и логикой поведения потенциальных покупателей. В начале работы мы получили инсайт от клиента, что в других интернет-магазинах часов этого же производителя состав покупателей в среднем выглядит следующим образом: 60% женщин и 40% мужчин, все от 25 до 54 лет.

Исходя из этого мы разрабатывали сайт, который будет универсальным и удобным для широкой аудитории, уровневым для международного рынка eCommerce: 

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

Первой идеей были композиции из объектов, где главной была гипсовая рука, на которой и показывали модели часов. Без живых людей, в эффектных фэшн-композициях с гипсовыми кубами и флористикой. Плюсы этой концепции – отличие от конкурентов, подчеркнутая современность бренда и соответствие мировым дизайн-трендам в части использования 3D (рис. 1).

Рис. 1. Мудборд (коллаж) с примерами исполнения первой концепции

Для финального контента мы отливали руки настоящих моделей в гипсе, отшлифовывали объекты, выстраивали композиции с большой предварительной подготовкой. Клиент отказался, так как был уверен, что продукт на живом человеке будет выглядеть более привычно, задавать классический тон и понятен покупателям (рис. 2).

Рис. 2. Бэкстейдж съемок первой концепции: макеты с рукой, фото с отливкой рук

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

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

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

Это – качественные материалы в одежде, классический крой, со вкусом подобранные луки. Для помощи стилисту тщательно собирали примеры образов, в которых хотим видеть моделей (рис. 3).

Каждый раз надо проверять ТЗ на фотосъемку по задачам для сайта. Для нас они были такими: показать бренд как affordable luxury – доступную роскошь. А стиль продукта – для ежедневной носки, а не для богемной жизни, показов, вечеринок, спорта и так далее. Поэтому мы выбирали кэжуал-стиль и внимательно следили за каждой деталью (рис. 4).

Рис. 4. Бэкстейдж с финальной фотосессии

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

Рис. 5. Примеры ракурсов для фотографий каталога и карточки товаров

Понять правильные ракурсы также помогают скетчи – детальная отрисовка структуры будущего сайта. Они используются при разработке, чтобы проработать логику пути пользователя, зафиксировать расположение кнопок и контролов, определить тип сетки для контента и т. д. Здесь же можно заложить примеры ракурсов, чтобы видеть, как будет выглядеть дизайн с финальным контентом (рис. 6).

Так как часы чаще носят на левой руке, при съемке были ограниченные ракурсы. Чтобы фото не выглядели однотипными, мы использовали поворот корпуса моделей, наклон головы и разный по оттенкам фон: бежевый для женского раздела и более строгий серый для мужского. Также старались, чтобы часы ощущались первостепенными в кадре, были на первом плане (рис. 7).

Рис. 7. Часть финальных фото для раздела коллекций часов на сайте Lincor

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

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

Рис. 8. Слева – финальное фото для сайта с надзором разработчиков сайта,  справа – пробный неудачный фотосет без арт-дирекшна

Дизайном можно подчеркнуть уникальность продукта, добавить ощущение ценности вещи, которую планируешь купить. И таким образом создать образ бренда, то, из-за чего люди могут отдавать предпочтение вам, а не конкурентам. Например, на сайте Lincor для этого есть ряд дизайн-решений.

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

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

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

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

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

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

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

1. Популярные модели на главной странице. Сразу под приветственным экраном показали карточки часов с прямым переходом к покупке. Владелец сайта может вручную изменять модели через административную панель сайта. Например, ставить самые популярные товары. Так пользователь может быстрее находить желаемый продукт и принимать решение о покупке.
2. Множество перелинковок на сайте. Заканчивая просмотр одной модели часов, человек видит подборку из коллекции – похожие по стилю модели – и может быстрым кликом перейти на следующий товар. Кроме того, это повышает циркуляцию пользователей на сайте, увеличивает длительность просмотра страницы, а значит, и влияет на высоту выдачи в поисковиках. 
3. Формы заказа легко заполнять. Мы подключили форму с подсказками с помощью базы DaData – агрегатора открытых справочников интернета. При выборе города доставки название улицы подтягивается по первым буквам, и сайт предлагает выбрать дом из реально существующих на этой улице. Он также «знает» почтовые индексы и автоматически подставляет их для доставки. 

Здесь мы собрали решения в разработке, которые выгодно отличают Lincor от других интернет-магазинов.

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

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

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

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

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

Представьте, какой объем контента загружается в интернет-магазин: каждое качественное фото коллекции, каждая карточка товара и сама верстка сайта. Все изображения при разработке должны быть оптимизированы по современным стандартам, а все анимации – легкими, чтобы даже с телефона сайт летал.

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

Сфера digital быстро меняется: постоянно обновляются браузеры, операционные системы, предпочтения пользователя. Сам бренд также развивается и может корректировать образ со временем. Редко бывает сайт в вакууме, за ним надо следить, развивать и поддерживать.

На Lincor предусмотрели расширение функционала. Например: сейчас можно платить через Яндекс.Кассу, но при желании легко внедряются любые платежные системы. Также планируется интеграция API с курьерской службой и уже реализована интеграция с сервисом почтовых рассылок Mailgun.

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

Также, поскольку сайт будет работать на рынках Европы и Азии, дизайн должен учитывать и кириллицу, и латиницу, и иероглифы. Продумали адаптивность дизайна под язык, например, чтобы крупные иероглифы в заголовках также выглядели эстетично и размер надписей при любом языке не попадал на лицо моделей (рис. 9).

Рис. 9. Латиница и иероглифы в дизайне

В отзыве к проекту клиент поделился, что сайт превзошел ожидания. Залогом такого результата стало партнерское сотрудничество и тесный контакт с заказчиком. Мы продолжаем оставаться на связи и планируем дальнейшие шаги по развитию сайта.

Проект не один раз участвовал в профессиональных конкурсах и стал примером среди eCommerce в России и Европе:

• Золото «Монобрендовые интернет-магазины» Рейтинг Рунета, 2019
• Бронза «Интернет-магазины» Рейтинг Рунета, 2019
• Red Dot E-Commerce Red Dot, 2019
• Website of the Day, CSS Design Awards, 2019
• Silver, E-Commerce, European Design Award, 2020