{"id":13754,"url":"\/distributions\/13754\/click?bit=1&hash=45df24e35b9b6bb5f92ebc2bb2fa29f4eca481cf0ea0a460238620e2f8b1f176","title":"\u0421\u043f\u0440\u0430\u0432\u0438\u0442\u0435\u0441\u044c \u0441 \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c \u0444\u043e\u0440\u043c\u044b \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438?","buttonText":"\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c","imageUuid":"8933abea-af83-5427-9245-220aa01c8f3d","isPaidAndBannersEnabled":false}

Кейс: дизайн сайта для сникерстора с опорой на ценности бренда

Мы, Heads and Hands, известны как создатели мобильных экосистем, при этом у нас есть большой отдел веб-разработки, который вместе с дизайнерами делает сложные сервисы.

Рассказываем, как наши дизайнеры спроектировали и визуализировали сайт для Urban Vibes — магазина от «Спортмастера», который ориентируется на молодых покупателей и делает сникер-культуру доступной для всех.

Ещё мы рассказываем про цифровые экосистемы, ежедневно в нашем Telegram-канале. Присоединяйтесь, чтобы быть в курсе.

О проекте

Urban Vibes — сеть мультибрендовых магазинов кроссовок и уличной моды от «Спортмастера» с ассортиментом, который не пересекается с линейкой материнского бренда.

Целевая аудитория — молодые люди в возрасте от 16 до 24 лет. При этом компания создает комфортную среду для всех, чтобы бабушка не постеснялась купить кроссовки для внука.

Позиционирование бренда — сникер-культура доступна. Это выражается в широком ассортименте, актуальных моделях и справедливых ценах. Ассортимент на 70% состоит из кроссовок, на 30% — из одежды и аксессуаров.

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

На что смотрели и чем вдохновлялись

Начали со сбора информации от заказчика и изучения рынка. Вдохновлялись американскими проектами — там сникер-культура развита сильнее и уже находится в стадии зрелости. Особенно нас впечатлил сайт jordan.com: мы оценили минималистичный интерфейс, в котором ничто не отвлекает от кроссовок.

Магазины и сайт Urban Vibes нужно было связать через визуальную подачу. Заказчик поставил обязательное условие: 80% сайта должны были соответствовать фирменному стилю. Было и техническое ограничение — каталог, карточка товара, корзина, чекаут должны были работать с существующим бэкендом. Мы работали с четко определенными данными и логикой их выдачи.

Сделали прототип и протестировали его. На основании 2-3 основных страниц создали дизайн-концепцию.

Так выглядит прототип сайта под десктоп. Прототипы тестируем и изменяем, если что-то сработало не так, как мы ожидали. Для 2-3 основных страниц делаем дизайн-концепцию и защищаем перед заказчиком. 

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

В этом случае мы сразу попали в точку — клиент внес минимальные правки и согласовал концепт с первого раза. После приступили к дизайну сайта с адаптацией под планшеты и смартфоны.

Сделали дизайн MVP сайта для сникерстора Urban Vibes с адаптацией под смартфоны и планшеты. Получился стандартный ecommerce-проект с потенциалом для масштабирования. 

Дизайн вокруг сникер-культуры и ценностей бренда

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

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

При проектировании главной страницы акцент сделали на ценностях бренда.

Получилось вот так. Это главная страница Urban Vibes. 

Главная: важные бренды, честные цены и построение сообщества

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

«Горячие клавиши» с переходом к товарам от главных брендов

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

Слайдеры выставляют кроссовки как на витрину и вдохновляют посмотреть, а что там дальше.

На главной странице приглашаем присоединиться к программе лояльности «UVCommunity», чтобы копить бонусы и зарабатывать кешбэк с покупок. Программа позволяет стать частью сообщества и продвигает сникер-культуру — ее участники могут покупать кроссовки еще дешевле.

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

Каталог: быстро переходим к главному

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

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

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

Карточка товара: рассмотреть со всех сторон

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

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

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

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

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

Оформление заказа: редактируемое и быстрое

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

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

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

Как справлялись со сжатыми сроками

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

Мы спроектировали MVP сайта с версиями для планшета и смартфонов и потенциалом для масштабирования. Сейчас дорабатываем дизайн для расширения функциональности.

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

С ребятами из Heads and Hands удалось выстроить слаженную совместную работу. Отдельно хотелось бы отметить менеджеров проекта Александру и Илью за быструю обратную связь и построение рабочего процесса, за дизайн и креатив — арт-директора Екатерину. Вместе нам удалось запустить крутой сайт в соответствии с дедлайном, что ещё может быть показательнее?

Ирина Луценко, руководитель группы по развитию сайтов брендов «Спортмастера»

Усман Казаков, менеджер бизнес-продукта Urban Vibes

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

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

Александр Семенов, CEO Heads and Hands
0
9 комментариев
Написать комментарий...
Nikita Zubkov
 с опорой на ценности бренда

Неужели это еще продает?
По итогу вообще получился клон сайта adidas.ru

Ответить
Развернуть ветку
Влад Остров

Тоже возникли такие мысли. 

Ответить
Развернуть ветку
Артур Гапон

Удивлен не меньше вашего. 

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Konstantin Sakharov

Найс анимация слайдера

Ответить
Развернуть ветку
Сергей Бавин

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

Кроссы nike, adidas, puma, большая часть которых продается только в спортмастере и нигде более. Сайты самих производителей о таких моделях не знают)) качество и дизайн соответствующие, прайс при этом на уровне распродажных нормальных моделей.

Ответить
Развернуть ветку
Phil Balita

На чем делаете бэкенд ? 

Ответить
Развернуть ветку
Heads and Hands
Автор

На этом проекте не делали бэкенд. Занимались только дизайном. 

Ответить
Развернуть ветку
Евгений Востров

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

Ответить
Развернуть ветку
Читать все 9 комментариев
null