Фэшн из олсо май профэшн
Десять лет в разработке интернет-магазинов одежды и ювелирки. Три вызова. Девять решений.
Привет, меня зовут Кирилл Найдёнышев, я управляющий партнер its.agency. С 2014 года мы непрерывно запускаем сайты для молодых марок и помогаем крупным игрокам рынка улучшать то, что у них уже есть. Попутно типизируем проблемы, решаемые с помощью веба. И формулируем вызовы, с которыми сталкивается любой фэшн-бренд, занятый разработкой или развитием своего сайта. Этих вызовов на сегодня три:
- Сайт бренда должен транслировать ценности бренда. Как усидеть на двух стульях креатива и конверсии.
- Пользователям привычнее следить за брендом в Инстаграме*. Как не потерять аудиторию при переходе на сайт.
- Маркетплейсы и крупные игроки задрали планку пользовательского опыта. Как маленькому бренду конкурировать с гигантами.
Part I. Верните мой 2014-й
В 2014 году к нам обратились девушки из довольно дерзкого на тот момент питерского бренда Asya Malbershtein.
Это было золотое время, когда сайт Фарфетча выглядел так:
А H&M еще не до конца избавились от раннего скевоморфизма в виде объемных кнопок и страшненьких теней под селектами размеров:
При этом тренд на минималистичные интерфейсы брендовых сайтов завоёвывал всё больше поклонников и постепенно внедрялся всё большим количеством интернет-магазинов. Пользователи успели привыкнуть к тому, что фэшн в диджитале — это история про белый фон и большие фотки. Например, как у Лакоста тех лет:
Но Лакосту не нужно особым образом выделяться, а молодому питерскому бренду — нужно. Это был первый пойнт, который мы зафиксировали, пообщавшись с клиентом и набросав первую версию CJM.
Вызов № 1
Сайт бренда должен явно транслировать ценности бренда
И чем менее массовым является бренд, тем этот фактор важнее. Массмаркету простительно иметь типовой интернет-магазин, а локальной российской марке — нет. Впечатления от посещения сайта не должны проигрывать впечатлениям от посещения шоурума. Особенно в том случае, если сайт является первым касанием бренда с покупателем.
Шаблонные визуальные решения снижают ценность марки в глазах покупателя. А в случае с брендами, работающими в высоком ценовом сегменте, еще и способны поколебать уверенность пользователя в необходимости покупки.
Ася Мальберштейн называла свой стиль New punk и позиционировала коллекции как аксессуары для смелых сердцем — дерзкие по дизайну и сложные по выполнению. Этот манифест мы должны были визуализировать на страницах нового интернет-магазина. В 2014 году мы решили эту задачу следующими способами:
1. Make my photo bigger!
Увеличили фото товара. Фотка изделия на ⅔ ширины экрана сегодня является одним из множества отраслевых стандартов, а тогда нам пришлось повоевать, оправдывая выбранное решение.
В самом каталоге на любом разрешении мы размещали не более трех товаров по ширине. А чтобы акцент на товарах был еще более явным, предложили отказаться от фильтров.
Сделали ставку на то, что каждое изделие заслуживает того, чтобы увидеть его поближе, и нечего тут фильтровать. Технически это стало возможным за счет небольшого ассортимента и оптимизации структуры каталога. Теперь последняя категория иерархии содержала не более пяти товаров. Пользователи вдумчиво скролили каталог, неторопливо изучали товары и складывали понравившиеся изделия в корзину.
2. One color to rule them all
Сейчас никого не удивишь монохромным дизайном, но на сайте Asya Malbershtein мы тогда неплохо так упоролись. На весь сайт был предусмотрен один стиль кнопки. А фон и заливка любого элемента (не считая фоток) могли быть только белыми.
3. And a little mystery
На главной странице сайта мы вывели нестандартную сетку с акцентом на визуале. При наведении на превьюшку товара появлялась аккуратная иконографика (видите там глазик на фотке с рюкзаком?).
В финале добавили немного упоротости, чтобы прямо наверняка:
Сайт нравился клиенту, его клиентам, пользователям Бихенса (52.7k просмотров), и вообще стал знаковым для отрасли событием. Заодно приведя к нам нескольких новых клиентов.
Part II. Заменяем дерзость на нежность
В 2016 году Инстаграм* анонсировал фичу Shopping tag, призванную превратить Инстаграм* в полноценную еком-платформу. Но и без этой функциональности Инстаграм* успел стать основным способом взаимодействия молодых марок с покупателями. В 2017 к нам обратился питерский бренд платьев Larne. У ребят уже тогда было больше 150 000 подписчиков в Инсте*. Несмотря на комфортную для аудитории платформу (девушкам было удобно выбирать новое платье через Инстаграм*), отсутствие полноценного интернет-магазина тормозило развитие бизнеса.
Вызов № 2
Сайт бренда должен быть также нативен для аудитории как Инстаграм*
Мы решили аккуратно перенести знакомые аудитории паттерны и сценарии из Инстаграма* на сайт. В 2017-м это сработало (да и сейчас, вероятно, сработало бы тоже). Поведение пользователей, перешедших на сайт из Инстаграма*, мы впоследствии анализировали особенно тщательно. Как мы этого добились:
1. Фотки и ничего кроме фоток
Нам удалось убрать выбор категорий в верхнее меню, оставив на странице каталога только фильтры и сортировку.
В этот раз мы дали рекомендации и по фотосессиям изделий. Фотографии из Инсты оказались не совсем релевантны для витрины интернет-магазина. А стандартный серый или белый фон не мог в полной мере выразить то ощущение, которое хотели донести основатели бренда. Сошлись на спокойных, но все-таки разных цветах фона. Композиционно вариант совершенно беспроигрышный: буквально каждый раздел сайта в любом варианте сортировки выглядел как результат работы дизайнера.
Про карточку товара и говорить нечего. Отношение к разрешению экрана, которое занимала фотка на странице товара, было максимально возможным (конечно, математического предела мы не достигли, но интерфейсного — вполне).
2. Как Инстаграм*. Только сайт
Совершенно необязательные с точки зрения любого из UX-кейсов, но важные для настроения бренда, сторис-лайк превьюшки в слайдере и раскладка контента (да, в 2017 году раскладка постов в Инстаграме* была важной составляющей).
3. Быстрее, еще быстрее
Корзина и оформление заказа — части сценария, где каждая ошибка проектирования может заруинить конверсию. Достичь конца воронки могут не только лишь все. Нам хотелось доставить пользователям как можно меньше трудностей в процессе заказа. Для этого переход из корзины к оплате стал практически бесшовным:
Одно модальное окно и простой сценарий покупки. Корзина стала неотъемлемой частью процесса оформления заказа — его первым шагом.
Сайт получил третье место в номинации «Лучший ритейл-сайт» на Tagline Awards 2018, уступив Авито и сайту московского универмага.
Подробнее о кейсе на сайте агентства.
Part III. Зачем рисовать второй Озон?
Может показаться, что сайты ювелирных и фэшн-брендов не сильно изменились за последние несколько лет. Но это, конечно, не так. E-commerce — одно из самых динамичных направлений веба, потому что нужно увеличивать прибыль. Что, впрочем, не мешает ему быть одновременно одним из самых консервативных в интерфейсном отношении. Да, потому что нужно увеличивать прибыль, а непривычные для покупателей решения могут легко её обнулить. Но это тема отдельной статьи.
Маркетплейсы и крупные интернет-магазины сформировали у пользователей тонну паттернов и ожиданий. Даже необходимость вводить данные карты при следующем заказе вызывает у нас раздражение. А регистрация на сайте через придумывание пароля и подтверждение через имейл — это вообще сразу до свидания.
В 2023 году к нам обратилось сразу несколько брендов с очень ярким позиционированием и желанием донести это позиционирование до пользователя. При этом, в интерфейсе карточки товара нам нужно отобразить:
актуальную доступность изделия в шоурумах;
- сроки доставки в город покупателя;
количество баллов, которое получит пользователь в системе лояльности после покупки;
хитрые условия скидок в разделе Аутлет (ну хорошо, этот пункт и правда актуален не во всех случаях);
размер ежемесячных платежей при покупке через систему рассрочки;
условия доставки и оплаты, подробный состав, правила ухода — это даже не обсуждается;
требования сеошников (тексты, много текстов).
Вызов №3
Маркетплейсы задали планку пользовательского опыта, который покупатели хотят видеть даже на небольших сайтах
Можем ли мы отказаться от разумных и привычных требований к интерфейсу, призванных сделать сценарий покупки проще, быстрее и удобнее? Очевидно, что нет. Должны ли мы превращать сайт молодого и яркого бренда в Вайлдбериз? Нет. Больше продавать или точнее раскрыть ощущение бренда? По счастью эти задачи не всегда находятся на разных сторонах линии судьбы.
Сайты о которых пойдет речь ниже находятся в разработке прямо сейчас, поэтому мы пока не разглашаем названия брендов. Но каждый читатель, кто их угадает и отпишется ниже, получит по два сердечка (мы постараемся выдать больше, но пока тут только 2 члена нашей команды). Возможно, для этого придется подписаться на наш инст* или телегу и дождаться релизов.
Как мы решаем вызов №3 прямо сейчас:
1. Ммм… модалки…
Совсем необязательно сразу вываливать на пользователя весь объем информации. Определив основные сценарии, мы можем вести пользователя за получением дополнительных сведений или настройкой параметров в аккуратные модальные окна.
Активное применение модалок в вебе дает возможность практически не ограничивать себя в объеме контента. Вы же используете их в мобильных приложениях, на сайте они не менее уместны.
2. Скролл как предчувствие
Пользователи любят скролить гораздо больше, чем вам кажется. Но для нас это в первую очередь удобный инструмент для знакомства с товаром. Например, для взаимодействия пользователя с галереей изделия. И, что более важно, скролл позволяет делиться дополнительной информацией о товаре, не снижая интерес пользователя.
А фиксированные элементы, такие как панель с кнопкой добавления в корзину, позволяют не переживать о том, что пользователь потеряет из виду самые важные элементы страницы.
3. Не можешь бороться — возглавь
Я устал писать, поэтому назначаю этот параграф выводом статьи. Ну и потому что мне понравился его заголовок.
Совмещение эстетики и технологичности — сложная, но решаемая задача. Сайт новой марки одежды или ювелирного бренда должен следовать всем еком-бэст-прэктикс и при этом смело выражать те ценности за которые поклонники уже полюбили ваш бренд. А компромиссы оставьте для ваших менее амбициозных коллег.
Для тех кто хочет продолжения:
*Экстремистские организации, деятельность которых запрещена на территории Российской Федерации
Ну наконец контент!
хорошую параллель сравнений провели ,статья бомба
Мне кажется все наши сайты, это копия того, что делают западные дизайнеры
Ну технически вообще все сайты похожи на все остальные )
Вам не кажется, все передачи, сайты, вообще все, что есть это просто копия!
Статья реально бомба 💣🔥💥
Классный результат вышел. Получилось "дорого" 👍