Felt — классные и дорогие велосипеды для профессионалов. У клиента уже был сайт на тильде, который я делал в прошлой студии. Он устарел и проигрывал конкурентам. Решиться на покупку дорогого велосипеда через такой сайт трудно.
Меня позвали его заредизайнить и улучшить. Добавить инструментов, которые помогут выбрать велосипед и поработать над новыми сценариями, а также визуально прокачать.
Работа над концептом
Тут важен фокус на продукт, велосипеды рассматривают и изучают. От этого и строю концепты, аккуратно работаю с версткой и отталкиваюсь от больших фотографий.
Собрал три концепта на основе страницы подкатегории. Клиент выбрал третий и потаскал пару решений из других концептов. Идем собирать остальное.
Что встречает
На главной большой баннер с новым фирменным стилем. Диагональный паттерн из полосок под углом наклона букв логотипа, который про движение и скорость и новый акцидентный шрифт, который про тоже самое.
Затем категории, с ними пришлось повозиться. Сейчас всего три основных, но внутри много подкатегорий, а в будущем может появиться ещё больше. Собирал много вариантов, но нашел только два. Долго не получалось сделать подкатегории наглядными.
В итоге собрался вот такой аккуратный вариантик. На первом плане у нас встал чистенький велосипед, по взгляду на который сразу понятно, о какой категории идет речь. А фотографии со средой использования переехали в подкатегории, стало чище и полезнее.
На планшете и телефоне тоже хорошо получилось.
Дальше идут промо-блоки и журнал, но про них нечего рассказать.
Много великов
В каталоге весь фокус на велосипеды. Карточки максимально большие, даём пользователю рассмотреть велосипед в максимальном масштабе. Оставляем самые важные фильтры и тэги для быстрой навигации.
Под каждую категорию и подкатегорию есть разводящие страницы с небольшим рассказом про серию велосипедов. У категорий свой фирменный цвет и аббревиатура.
Большой велик
В карточке товара куча полезной информации: детальные спецификации, размерная сетка, геометрия велосипеда, основные преимущества и руководства.
Чтобы сделать велик максимально большим, его фиксируем слева а правую часть даём скролить.
Потом сразу большой раздел — спецификации. Тут детально про каждую мелочь велосипеда. Здесь профи выбирают и сравнивают.
Ещё удачным получился блок геометрия. Здесь клиент предоставил отрисованные велосипеды для каждой подкатегории.
Удобно сравнивать размеры. При наведении на букву на веле или на строку в таблице подсвечиваются нужные частички.
На мобилке не теряем функционала.
Сравнение великов
Если заметили у каждой карточки есть галочка «Сравнить». Сюда можно закинуть до 5 велосипедов и детально их сравнить, как по геометрии, так и по спецификациям.
Продумал под разные разрешения или разное количество велов.
Геометрию можно сравнить отдельно по каждой детали. Сверху есть панелька, чтобы не забыть, что сравниваешь пока скролишь простыню из характеристик.
Корзина и оформление заказа
Тут как обычно, но продуманы мелкие сценарии.
Даём возможность вернуть товар после удаления или изменить размер велосипеда.
При оформлении заказа помним уже заполненные адреса.
При успешном оформлении показываем первый велосипед из заказа. Ну или единственный :)
Детальки
Поиск вышел симпотный, также умеет искать по блогу и информационным страницам.
Кукисы :)
Письма на почту, об изменениях в заказе или для рассылки.
Менюшки для категорий.
Ещё много осталось, можете заценить вживую: feltrussia.ru