{"id":9208,"title":"\u0412 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u043d\u0430 vc.ru \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0441\u0442\u0438\u043a\u0435\u0440\u044b","url":"\/redirect?component=advertising&id=9208&url=https:\/\/vc.ru\/promo\/326527-lyubite-rugat-servisy-vk-etot-tekst-dlya-vas&placeBit=1&hash=032d65c70fe5fc63c371cf935d9281ebe7529d9359ff65d7499233043c93d674","isPaidAndBannersEnabled":false}
Дизайн
Heads and Hands

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

Мы, 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 и единая цель, поэтому мы одинаково заинтересованы в развитии продукта — это позволяет быстрее добиться положительных результатов.

Александр Семенов
0
9 комментариев
Популярные
По порядку
Написать комментарий...

 с опорой на ценности бренда

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

3

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

1

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

0

позиционирование текста в кнопках таким и должно быть? 😕

2

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

1

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

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

1

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

0

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

0

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

0
Читать все 9 комментариев
Холдинг Алишера Усманова выйдет из VK — продаст «Согазу» долю во владельце 57% голосов в группе Статьи редакции

Теперь структурам «Газпрома» принадлежит большая часть голосов в компании.

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

Маркетинговое исследование помогает экономить сотни тысяч долларов и выпускать продукты, которые приносят миллионы.

«Альфа-банк» доставляет карту, самостоятельно вскрывая конверт, в котором видно все данные

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

Наводим порядок и изучаем rocket sience. Доклады Go meetup

На прошедшем Go meetup спикеры из Evrone, «Ситимобил» и «Авито» учили правильной организации кода микросервиса, рассказывали, как вырастить MVP в полноценную масштабируемую архитектуру, и разобраться с мусором и алгоритмами управления памятью. Все доклады записаны в студии и доступны для просмотра.

Как я всё бросил и стал Тиктокером

От учёбы в топовом вузе и сеньорской позиции в IT до кривляния на камеру и заработка на рекламе.

Маркировка молочной продукции

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

15 млн рублей прибыли в год на травле тараканов и крыс: как стать дезинфектором и открыть компанию Статьи редакции

«Деззащита» получает 600 заказов в месяц и проводит обработки в квартирах, офисах «Газпрома», отелях Holiday Inn, магазинах Leroy Merlin и ресторанах.

Дезинфекция кухни
Удаленное трудоустройство - плюсы и минусы. Юридический взгляд
AWS анонсировала платформу Amplify Studio для разработки приложений с минимальным написанием кода Статьи редакции

Платформа подключена к онлайн-сервису Figma.

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

Рассказываем историю продакта «Яндекса», который решил помочь фермерам, а также составляем свой словарик стартапера.

null