Фэшн из олсо май профэшн

Десять лет в разработке интернет-магазинов одежды и ювелирки. Три вызова. Девять решений.

Привет, меня зовут Кирилл Найдёнышев, я управляющий партнер its.agency. С 2014 года мы непрерывно запускаем сайты для молодых марок и помогаем крупным игрокам рынка улучшать то, что у них уже есть. Попутно типизируем проблемы, решаемые с помощью веба. И формулируем вызовы, с которыми сталкивается любой фэшн-бренд, занятый разработкой или развитием своего сайта. Этих вызовов на сегодня три:

В 2014 году к нам обратились девушки из довольно дерзкого на тот момент питерского бренда Asya Malbershtein.

Это было золотое время, когда сайт Фарфетча выглядел так:

А H&M еще не до конца избавились от раннего скевоморфизма в виде объемных кнопок и страшненьких теней под селектами размеров:

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

Но Лакосту не нужно особым образом выделяться, а молодому питерскому бренду — нужно. Это был первый пойнт, который мы зафиксировали, пообщавшись с клиентом и набросав первую версию CJM.

И чем менее массовым является бренд, тем этот фактор важнее. Массмаркету простительно иметь типовой интернет-магазин, а локальной российской марке — нет. Впечатления от посещения сайта не должны проигрывать впечатлениям от посещения шоурума. Особенно в том случае, если сайт является первым касанием бренда с покупателем.

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

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

1. Make my photo bigger!

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

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

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

2. One color to rule them all

Сейчас никого не удивишь монохромным дизайном, но на сайте Asya Malbershtein мы тогда неплохо так упоролись. На весь сайт был предусмотрен один стиль кнопки. А фон и заливка любого элемента (не считая фоток) могли быть только белыми.

3. And a little mystery

На главной странице сайта мы вывели нестандартную сетку с акцентом на визуале. При наведении на превьюшку товара появлялась аккуратная иконографика (видите там глазик на фотке с рюкзаком?).

В финале добавили немного упоротости, чтобы прямо наверняка:

Сайт нравился клиенту, его клиентам, пользователям Бихенса (52.7k просмотров), и вообще стал знаковым для отрасли событием. Заодно приведя к нам нескольких новых клиентов.

В 2016 году Инстаграм* анонсировал фичу Shopping tag, призванную превратить Инстаграм* в полноценную еком-платформу. Но и без этой функциональности Инстаграм* успел стать основным способом взаимодействия молодых марок с покупателями. В 2017 к нам обратился питерский бренд платьев Larne. У ребят уже тогда было больше 150 000 подписчиков в Инсте*. Несмотря на комфортную для аудитории платформу (девушкам было удобно выбирать новое платье через Инстаграм*), отсутствие полноценного интернет-магазина тормозило развитие бизнеса.

Мы решили аккуратно перенести знакомые аудитории паттерны и сценарии из Инстаграма* на сайт. В 2017-м это сработало (да и сейчас, вероятно, сработало бы тоже). Поведение пользователей, перешедших на сайт из Инстаграма*, мы впоследствии анализировали особенно тщательно. Как мы этого добились:

1. Фотки и ничего кроме фоток

Нам удалось убрать выбор категорий в верхнее меню, оставив на странице каталога только фильтры и сортировку.

В этот раз мы дали рекомендации и по фотосессиям изделий. Фотографии из Инсты оказались не совсем релевантны для витрины интернет-магазина. А стандартный серый или белый фон не мог в полной мере выразить то ощущение, которое хотели донести основатели бренда. Сошлись на спокойных, но все-таки разных цветах фона. Композиционно вариант совершенно беспроигрышный: буквально каждый раздел сайта в любом варианте сортировки выглядел как результат работы дизайнера.

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

2. Как Инстаграм*. Только сайт

Совершенно необязательные с точки зрения любого из UX-кейсов, но важные для настроения бренда, сторис-лайк превьюшки в слайдере и раскладка контента (да, в 2017 году раскладка постов в Инстаграме* была важной составляющей).

3. Быстрее, еще быстрее

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

Одно модальное окно и простой сценарий покупки. Корзина стала неотъемлемой частью процесса оформления заказа — его первым шагом.

Сайт получил третье место в номинации «Лучший ритейл-сайт» на Tagline Awards 2018, уступив Авито и сайту московского универмага.

Подробнее о кейсе на сайте агентства.

Может показаться, что сайты ювелирных и фэшн-брендов не сильно изменились за последние несколько лет. Но это, конечно, не так. E-commerce — одно из самых динамичных направлений веба, потому что нужно увеличивать прибыль. Что, впрочем, не мешает ему быть одновременно одним из самых консервативных в интерфейсном отношении. Да, потому что нужно увеличивать прибыль, а непривычные для покупателей решения могут легко её обнулить. Но это тема отдельной статьи.

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

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

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

Сайты о которых пойдет речь ниже находятся в разработке прямо сейчас, поэтому мы пока не разглашаем названия брендов. Но каждый читатель, кто их угадает и отпишется ниже, получит по два сердечка (мы постараемся выдать больше, но пока тут только 2 члена нашей команды). Возможно, для этого придется подписаться на наш инст* или телегу и дождаться релизов.

Как мы решаем вызов №3 прямо сейчас:

1. Ммм… модалки…

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

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

2. Скролл как предчувствие

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

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

3. Не можешь бороться — возглавь

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

Для тех кто хочет продолжения:

Инстаграм* и ФБ* (фу, запрещёнка), ВК

Behance, Dribbble и Dprofile

*Экстремистские организации, деятельность которых запрещена на территории Российской Федерации