Rant — редизайн интернет-магазина детских товаров — polishka
Коляску не покупают между делом. Её долго выбирают, сравнивают, сомневаются, спрашивают других родителей и только потом решаются. Сайт Rant — большого бренда детских товаров — успел устареть, и ко мне пришли за редизайном магазина. Я не стала рисовать красивую витрину, а прошла весь путь человека, который выбирает вещь для своего ребёнка, и собрала под него единую систему
Один магазин, 263 макета
Масштаб проще показать цифрами. Это весь магазин: от главной до личного кабинета и страницы 404, в четырёх разрешениях
Главная: сначала бренд, потом товары
Главная отвечает сразу на два вопроса: что тут есть и можно ли этому бренду доверить ребёнка. Поэтому товарные подборки здесь идут вперемешку с историями: «Как живёт бренд», офлайн-магазины, «Формула заботы»
Найти нужное, когда товаров очень много
В каталоге есть всё, от колясок до одежды, поэтому навигация разложена на слои: от широкого к точному. Человек сужает выбор постепенно и не видит стену из товаров. Наведи на номер, чтобы найти блок на экране
Телефон — не урезанная версия
У коляски важны проходимость, материал колёс, вес и возраст ребёнка, и все эти параметры должны работать на телефоне. В мобильных фильтрах 13 групп: длинная панель листается, активные фильтры собраны наверху, а кнопки «Сбросить» и «Показать товары» всегда внизу. Поиск подсказывает запрос уже после пары букв
Карточка товара помогает решиться
Здесь человек задаёт себе самый сложный вопрос: «Точно эта?». Поэтому сверху остаются цена и способы получения, а ниже страница работает как консультант: крупно показывает детали вроде магнитных замков и перфорированной спинки, а в блоке «Глазами родителей» даёт посмотреть на коляску в жизни. Для тех, кто всё ещё сомневается, есть консультация
От СМС-кода до конфетти
Мой любимый кусок проекта. Обычно регистрация — это стена между человеком и покупкой, поэтому я встроила её прямо в оформление. Новичок оставляет телефон, вводит код, называет имя и тут же получает бонусную карту. То есть вместо анкеты ему достаётся подарок. Посмотри, как это работает, шаг за шагом, на телефоне и на десктопе
Навигация, которая не мешает выбирать
Товаров очень много, и переходить между разделами приходится постоянно, поэтому на телефоне и на десктопе навигация устроена по-разному. На телефоне главное — большой палец: свободная капсула висит над контентом, страница едет под ней, а текущий раздел раскрывается в подпись. На десктопе места больше: кнопка «Меню» открывает боковую панель с разделами сайта, а внутри неё каталог разворачивается на два уровня, и контекст страницы остаётся на фоне
И всё, что вокруг покупки
Хороший магазин не заканчивается корзиной. Человек возвращается проверить заказ, читает совет про первую коляску, ищет точку рядом с домом или даже устраивается на работу. Вот несколько таких страниц, и все они говорят на том же языке
Система, которая держит всё вместе
Когда макетов сотни, без правил всё быстро разваливается. Поэтому я собрала бренд-гайд и UI-kit: палитру вокруг фирменного оранжевого, шрифтовую систему, кнопки, поля и другие компоненты со всеми состояниями. На той же основе живут и баннеры: один язык от кнопки до рекламы, а вариантов я перебрала много