Кейс: дизайн сайта для сникерстора с опорой на ценности бренда
Мы, Heads and Hands, известны как создатели мобильных экосистем, при этом у нас есть большой отдел веб-разработки, который вместе с дизайнерами делает сложные сервисы.
Рассказываем, как наши дизайнеры спроектировали и визуализировали сайт для Urban Vibes — магазина от «Спортмастера», который ориентируется на молодых покупателей и делает сникер-культуру доступной для всех.
Ещё мы рассказываем про цифровые экосистемы, ежедневно в нашем Telegram-канале. Присоединяйтесь, чтобы быть в курсе.
О проекте
Urban Vibes — сеть мультибрендовых магазинов кроссовок и уличной моды от «Спортмастера» с ассортиментом, который не пересекается с линейкой материнского бренда.
Целевая аудитория — молодые люди в возрасте от 16 до 24 лет. При этом компания создает комфортную среду для всех, чтобы бабушка не постеснялась купить кроссовки для внука.
Позиционирование бренда — сникер-культура доступна. Это выражается в широком ассортименте, актуальных моделях и справедливых ценах. Ассортимент на 70% состоит из кроссовок, на 30% — из одежды и аксессуаров.
К открытию первых магазинов нужно было запустить сайт для обслуживания онлайн-продаж, повышения узнаваемости бренда и роста базы лояльных клиентов.
На что смотрели и чем вдохновлялись
Начали со сбора информации от заказчика и изучения рынка. Вдохновлялись американскими проектами — там сникер-культура развита сильнее и уже находится в стадии зрелости. Особенно нас впечатлил сайт jordan.com: мы оценили минималистичный интерфейс, в котором ничто не отвлекает от кроссовок.
Магазины и сайт Urban Vibes нужно было связать через визуальную подачу. Заказчик поставил обязательное условие: 80% сайта должны были соответствовать фирменному стилю. Было и техническое ограничение — каталог, карточка товара, корзина, чекаут должны были работать с существующим бэкендом. Мы работали с четко определенными данными и логикой их выдачи.
Сделали прототип и протестировали его. На основании 2-3 основных страниц создали дизайн-концепцию.
На дизайн-концепции воспользовались своей стандартной практикой: устроили баттл среди дизайнеров — каждый предложил решение по оформлению. Арт-директор и ключевые сотрудники компании выбрали победителя, концепт доработали и представили клиенту.
В этом случае мы сразу попали в точку — клиент внес минимальные правки и согласовал концепт с первого раза. После приступили к дизайну сайта с адаптацией под планшеты и смартфоны.
Дизайн вокруг сникер-культуры и ценностей бренда
Сайт должен был радикально отличаться от «Спортмастера»: другая аудитория и новое позиционирование допускали смелые визуальные решения.
Мы добавили интерактивные анимации, использовали сверхкрупные заголовки и изображения на главной странице — эти элементы рифмуются с энергией и грубой визуальной эстетикой уличной моды.
При проектировании главной страницы акцент сделали на ценностях бренда.
Главная: важные бренды, честные цены и построение сообщества
Cобрать все важные для сникерхедов бренды — одна из ценностей Urban Vibes. На первой странице разместили логотипы спортивных компаний, к ассортименту которых можно перейти по клику. Так мы подчеркнули ценность бренда и сделали дополнительную навигацию.
Кликабельная бегущая строка со скидками, спецпредложениями, информацией о программе лояльности обращает внимание на другую ценность бренда — честную цену.
Слайдеры выставляют кроссовки как на витрину и вдохновляют посмотреть, а что там дальше.
На главной странице приглашаем присоединиться к программе лояльности «UVCommunity», чтобы копить бонусы и зарабатывать кешбэк с покупок. Программа позволяет стать частью сообщества и продвигает сникер-культуру — ее участники могут покупать кроссовки еще дешевле.
На формирование сообщества работает и интеграция ленты Instagram — привычный формат изображений привлекает внимание, а переход в соцсеть вовлекает в аккаунт бренда.
Каталог: быстро переходим к главному
От каталога до товаров всего один клик. Мы вывели основные разделы в шапку: остается выбрать нужный и уточнить пожелания через фильтры — никакой многоуровневой навигации и лишних кликов.
На листинге сделали настраиваемое отображение товаров: можно просматривать уменьшенные карточки с фильтрами, а можно убрать фильтры и развернуть товары на всю ширину экрана.
В мобильной версии также можно настроить отображение товаров в каталоге, при этом фильтры останутся на виду.
Карточка товара: рассмотреть со всех сторон
Не обязательно открывать карточку товара полностью. В режиме быстрого просмотра можно рассмотреть снимок, увидеть доступные размеры или сразу купить. Быстрый просмотр позволяет мгновенно возвращаться к листингу.
В карточке товара, как и в каталоге, пользователь настраивает отображение под себя: просматривает небольшие снимки в двух колонках или крупные в слайдере. Изображения можно открывать на весь экран и рассматривать товары в деталях.
Внутри карточки подробная характеристика товара и описание, а также блоки рекомендаций и просмотренных ранее товаров — все, чтобы пользователь не ушел с пустыми руками.
Кнопку покупки зафиксировали под шапкой, чтобы она оставалась перед глазами при прокрутке — в любой момент товар можно отправить в корзину.
В мобильной версии зафиксировали кнопку покупки внизу экрана, чтобы было удобно нажать одной рукой на любом этапе изучения карточки.
Оформление заказа: редактируемое и быстрое
Наполнение корзины можно просмотреть и удалить лишнее по ходу покупок, без перехода на отдельную страницу.
Сделали гибкое одностраничное оформление заказа: на любом этапе можно вернуться на шаг назад, при этом прогресс не потеряется. Например, пользователь указал адрес, и вдруг решил, что к новым кроссовкам нужна не одна пара носков, а две. Он прокручивает страницу вверх и меняет количество носков, сумма заказа пересчитывается. И все, можно продолжить оформление.
Заказ оформляется в три коротких шага, для каждого выделили блок, который сворачивается после заполнения. У пользователя нет ощущения, что нужно осилить простыню с формами.
Как справлялись со сжатыми сроками
Создание дизайна шло параллельными итерациями с передачей в разработку: согласовали концепцию, начали дизайн для десктопа, сделали главную, сразу отдали в адаптивы и перешли к другой странице. Мы идеально уложились в сроки даже с дополнительными задачами от клиента: начали проектировать 12 мая, в середине августа уже стартовала разработка, к середине сентября закончили дизайн, а релиз состоялся в октябре.
Мы спроектировали MVP сайта с версиями для планшета и смартфонов и потенциалом для масштабирования. Сейчас дорабатываем дизайн для расширения функциональности.
Мы амбициозный омниканальный сникерстор-проект и в целом ожидали запоминающийся дизайн, соответствующий нашей концепции и брендбуку, а также удобный и понятный интерфейс.
С ребятами из Heads and Hands удалось выстроить слаженную совместную работу. Отдельно хотелось бы отметить менеджеров проекта Александру и Илью за быструю обратную связь и построение рабочего процесса, за дизайн и креатив — арт-директора Екатерину. Вместе нам удалось запустить крутой сайт в соответствии с дедлайном, что ещё может быть показательнее?
Мы решаем проблемы бизнеса бок о бок с клиентами, а не делаем проекты в вакууме. Данный проект показывает, каких результатов можно добиться, если выделить под проект команду, которая усилит компетенции команды заказчика.
Почти с половиной наших клиентов мы работаем так: собираем команду под конкретные задачи и плечом к плечу идем к достижению общих результатов. У нас одни kpi и единая цель, поэтому мы одинаково заинтересованы в развитии продукта — это позволяет быстрее добиться положительных результатов.