- Заказчик
- Интернет-магазин Pampik — один из лидеров сегмента «Детские товары» украинского e-commerce.
- Задача
- Сделать проектирование, дизайн и верстку для детского интернет-магазина Pampik. Сделать акцент на высоком качестве и широком ассортименте продукции, добиться ощущения детского пространства.
Это статья о том, как создавался дизайн одного из лучших детских интернет-магазинов. Мы пройдемся по всем ключевым страницам сайта и покажем: как мотивировать пользователей к дополнительным покупкам; как с помощью cross-sell и upsell увеличивать средний чек; какой должна быть структура главной страницы; какую информацию размещать на карточке товара детской тематики; а также какие мелкие детали сделают чекаут более удобным и покажут вашу заботу о клиенте.
О клиенте:
Интернет-магазин Pampik — один из лидеров сегмента «Детские товары» украинского e-commerce. Согласно данным исследования RAU за 2017 год, магазин Pampik занимает 2 место по посещаемости в сегменте товаров для детей.
Особенности проекта:
Pampik занимается только онлайн продажами, без наличия офлайн точек. Компания начинала свою работу с продажи памперсов, отсюда и созвучное название. Через время расширилась в полноценный интернет-магазин с широким ассортиментом.
Задача:
Сделать проектирование, дизайн и верстку для детского интернет-магазина Pampik. Сделать акцент на высоком качестве и широком ассортименте продукции, добиться ощущения детского пространства, окруженного заботой и вниманием к покупателям.
Целевая аудитория:
Будущие мамы, молодые родители
Ключевые особенности дизайна детского интернет-магазина
Пройдемся по страницам интернет-магазина Pampik и рассмотрим, как детали интерфейса влияют на поведение пользователей.
1. Главная страница
Цветовое решение всего сайта выполнено в спокойном нежно-фиолетовом тоне с яркими оранжевыми акцентами на ключевых элементах. В логотипе также использовали оранжевую палитру и подчеркнули основной посыл компании: «Мы заботимся о маме и малыше».
Логотип интернет- магазина Pampik
При помощи контрастов цветового оформления привлекаем внимание пользователей к значимым разделам сайта.
Чтобы визуально выделить категории товаров в меню, мы создали уникальные иконки. Они выполнены в фирменных цветах и помогают задать настроение интернет-магазину.
Дизайн шапки детского интернет-магазина Pampik
Под шапкой разместили баннер с актуальными акциями, а контент максимально заполнили фотографиями новорожденных и разбавили интересными виджетами.
Оригинальная категоризация товаров в интернет-магазине Pampik в нестандартных срезах
Такое решение направлено на то, чтобы вызвать у пользователя положительные эмоции и сконцентрировать на главной странице как можно больше точек входа на другие разделы сайта.
При клике на иконку с пустой корзиной в шапке сайта, пользователю выводится сообщение: «Ваша корзина пуста» и призыв выбрать товар. При этом его не посылают на страницу корзины. Такой прием экономит время клиента, не отвлекая от выбора товара.
Уведомление при попытке зайти в пустую корзину
Call-to-action кнопка «Оформить» в правом верхнем углу шапки позволяет быстро завершить покупку с любой страницы сайта.Такой функционал также хорошо работает для эмоциональных покупателей, которым товар нужен срочно, здесь и сейчас.
Для постоянных покупателей в шапке выведена опция «Проверить заказ». Благодаря ей клиенту не надо заходить в личный кабинет и искать информацию о заказе. Все быстро можно просмотреть, нажав одну кнопку в шапке сайта.
Кроме основных категорий товаров мы вывели на главную страницу сайта дополнительные точки входа на другие разделы: популярные товары, рекомендуемые товары, новинки, акции и возможность перейти на товары определенного бренда.
Так на главной странице интернет-магазина Pampik распределены различные точки входа на другие страницы сайта
Благодаря таким приемам мы не только демонстрируем ассортимент магазина в различных срезах, но и помогаем пользователю быстрее найти нужный ему товар.
Т.к. компания активно занимается контентом и наполнением сайта, на главную страницу вынесен раздел «Обзоры и тестдрайвы», который помогает пользователям с выбором товаров и генерирует часть трафика на сайт. В этом разделе представлены видео обзоры продукции, сделанные как экспертами, так и обычными пользователями, раскрыты темы ухода и воспитания детей.
Пример раздела с видео обзорами товаров
Наличие такого контента является проявлением заботы о клиенте и формирует своего рода клуб по интересам. С помощью видео обзоров гораздо легче продемонстрировать реальную ценность товара, чем с помощью картинки и характеристик от производителя.
Чтобы поддержать детскую тематику сайта, в дизайне футера интернет-магазина использовали изображения, напоминающие рисунки маленького ребенка.
Пример дизайна футера детского интернет-магазина Pampik
Такое решение создает мягкую, дружественную атмосферу и задает настроение интернет-магазина.
2. Порталы
Для каждой категории товаров спроектировали отдельный портал - промежуточный этап между главной страницей и страницей выдачи.
Основная задача портала - информировать посетителя об актуальных акциях и предложениях данного раздела при помощи баннера с автоматическим перелистыванием. Информация об акциях в портале может стать эффективным инструментом для продаж. Например, купив еще одну пачку памперсов, вы получите погремушку в подарок.
Внешний вид портала для категории “Подгузники”
В порталах четко структурировали информацию по ассортименту товаров, продублировали меню в двух плоскостях - вертикальное левое меню с подробной системой фильтров и основное горизонтальное под баннером.
Таким образом, повышаем удобство ориентации и скорость процесса подбора товаров.
3. Выдача товаров
Выдача товаров реализована двумя способами – списком и плиткой. Пользователь может сам выбрать наиболее удобный для него вариант просмотра.
Пример выдачи товаров списком 
Выдача товара плиткой
Такое решение уже стало нормой, так как повышает удобство восприятия информации для интернет-магазинов с широкой аудиторией.
Плитки оформили в белом цвете, чтобы ничего не отвлекало внимание от продукции. Вынесли максимум информации о товаре: цена без скидки, цена со скидкой, процент дисконта.
Триггер покупки для памперсов - цена за единицу
Также сформировали триггеры для покупки, определив ключевые критерии при выборе различных товаров. Например, при покупке памперсов, покупатель видит информацию о цене за единицу товара, т.е. за один памперс. Таким образом, мы обосновываем выгоду приобретения большой упаковки. Цена за пак выше, но единица товара, один памперс – дешевле.
Для продуктов питания мы определили, что критерием выбора является срок годности, поэтому вывели информацию о нем на страницу выдачи.
Триггер для покупки детских продуктов питания - срок годности
При покупке одежды выделили в качестве критериев выбора размеры и расцветки.
Триггер для покупки обуви и одежды - цвет, размер
Мы акцентируем внимание на важных аспектах, которые влияют на решение о покупке, тем самым оказывая помощь в подборе подходящего товара.
4. Карточка товара
Чтобы сделать карточку товара максимально удобной для пользователей, структурировали информацию, проработали 7 различных ее состояний для разных групп товаров. Кроме фото, характеристик и цен,вывели данные о цвете, размере, наличии товара, о вариантах доставки и ее точной дате, о количестве баллов за покупку, сертификаты качества, условия гарантии и возможные сроки возврата товара. Блок “Вопрос-ответ” позволяет клиентам быстро получить ответы на интересующие вопросы о товаре, как от профессионального консультанта компании, так и услышать мнение реального покупателя.
Такая исчерпывающая информация о продукте на странице карточки товара создает все условия для того, чтобы пользователь совершил целевое действие.
Дополнили страницу интересным функционалом с точки зрения маркетинга:
- Блок “С этим товаром покупают” - мотивирует посетителей на дополнительные покупки и направлен на увеличение среднего чека.
- Инструмент “Вместе дешевле” выводит комплекты товаров, покупка которых помогает сэкономить.
Так выглядит функционал интернет-магазина Pampik “Вместе дешевле”
При помощи этих cross-sell и upsell инструментов можно мотивировать посетителей совершить дополнительные покупки и увеличить средний чек интернет-магазина магазина.
5. Корзина
В корзине уделили внимание микровзаимодейтсвиям:
- получение подарка при покупке определенного товара
- наличие товаров-заменителей
- начисление бонусов за покупку
Разместили подсказки, которые уведомляют об участии в акции или возможности получить подарок. Также если желаемого товара нет в наличии, предлагаем его заказать или заменить на аналог.
Информируем о возможности получить подарок при покупке определенного товара
Структурировали акционные комплекты, указывая не просто цену со скидкой, а и сумму экономии.
Акцентируем внимание на размере скидки при покупке комплекта товаров
В интернет-магазине Pampik действует система лояльности для постоянных клиентов. За каждый заказ покупателю начисляются бонусы - «пампики», эта информация отображается в корзине. Далее этими бонусами можно рассчитываться за товары.
В корзине выводится подробная информации о количестве бонусов и вариантах их использования
Это работает как дополнительная мотивация для пользователей самостоятельно накапливать скидку.
Учитывая, что цикл покупки может составлять от нескольких часов до нескольких дней добавили опцию отслеживания цены. Если человек добавил товар в корзину, а в дальнейшем его стоимость изменилась, то появляется соответствующее уведомление. При этом покупателю предлагают или оставить товар в корзине, или заменить на релевантный.
Так работает функционал отслеживания цены
В корзине также используем инструмент «С этим товаром покупают». В специальном блоке выводим варианты сопутствующих товаров, которые добавляются в корзину путем одного нажатия.
Блок “С этим товаром покупают”
При необходимости очистить корзину, сначала уточняем у посетителя не хочет ли он добавить эти позиции в избранное и действительно ли он хочет удалить весь комплект.
Функционал очистки корзины
С помощью всех этих приемов мы акцентируем внимание пользователя в корзине на всех выгодах, которые он получит по итогу завершения сделки.
6. Оформление заказа
Оформление покупки включает только 2 этапа:
- ввод персональных данных
- доставка и оплата
На первом этапе чекаута постоянные покупатели авторизуются через e-mail/номер телефона и пароль, а новым клиентам необходимо указать телефон, имя, город и e-mail.
На втором этапе магазин предлагает покупателям опции:
- предоставление подробной информации о дате доставки заказа в зависимости от выбранного способа доставки;
- возможность оформить получение заказа как на себя, так и на другого человека;
- повторить заказ одним кликом;
- отказаться от дополнительного звонка оператора при помощи кнопки “Заказ подтверждаю, не перезванивайте мне”.
Так выглядит второй этап чекаута интернет-магазина Pampik
Оформление заказа - это финальный этап пользовательского пути и важно, чтобы ничего не помешало покупателю завершить сделку. Дополнительные функции создают атмосферу заботы о покупателе, а быстрый чекаут не оставляет времени на долгие раздумья.
7. Страница благодарности
Дизайн thank you page детского интернет-магазина Pampik состоит из нескольких плиток:
- исчерпывающая информация о заказе: номер, заказчик, телефон, способ и адрес доставки, способ оплаты;
- переход в личный кабинет;
- предложение оставить отзыв о магазине;
- возможность подписаться на социальные сети.
Так выглядит thank you page интернет-магазина Pampik
Таким образом, страница благодарности является полноценным инструментом, который работает на повышение лояльности пользователей и объединение их в одно большое сообщество.
8. Личный кабинет
У магазина очень много заказов, поэтому мы детально проработали функционал личного кабинета. Наполнили его большим количеством возможностей:
- просмотреть историю заказов и статус текущих заказов,
- ознакомиться с количеством бонусов на счету и персональными акциями,
- проверить наличие промо-кода и поделиться им с друзьями.
Мы добавили разделы желания, любимые товары, список ожидания, рассылки.
Фишкой личного кабинета стала опция добавления информации о детях. Она позволяет получать дополнительные скидки и бонусы, а также советы в подборе игрушек и других товаров в зависимости от возраста ребенка.
Пример оформления страницы личного кабинета интернет-магазина Pampik
Таким образом, у постоянных клиентов появилось личное пространство с исчерпывающей информацией о своих действиях на сайте, возможных выгодах и интересных предложениях. Покупатель чувствует свою значимость, что повышает степень его приверженности компании.
9. Фишки дизайна детского интернет-магазина
На сайте есть два необычных блока:
- сумки в роддом
- любимые клиенты.
Сумки в роддом
Интернет-магазин Pampik один из первых предложил услугу продажи готовых наборов в роддом. Для этого мы разработали не только стилистику, а и логику работы, комплектации, замены товаров.
Оригинальная услуга - продажа готового набора в роддом Покупателям предлагается на выбор 3 готовых сумки, но клиент также может скорректировать комплектацию набора на свое усмотрение. Еще одной особенностью является возможность переслать собранную сумку другому пользователю. Например, жена может сформировать комплект и отправить его мужу.
Такой инструмент решает основную задачу создания атмосферы заботы о покупателе и его ребенке.
Любимые клиенты
Покупатель может отправить фотографию своего ребенка и затем ее разместят в специальном разделе “Любимые клиенты”. Если человек решает поделиться фотоснимком любимого чада на странице интернет-магазина, это свидетельствует о высоком уровне доверия к компании и удовлетворенности ее сервисом.
Так выглядит раздел “Любимые клиенты”
Таким образом, мы помогаем сформировать контент social proof, который создает ощущение принадлежности к сообществу, объединяет клиентов в одну семью на страницах интернет-магазина Pampik.
Более 400К посетителей и звание лучшего магазина детских товаров
В дизайне детского интернет-магазина Pampik мы внедрили множество решений, которые не только сделали интерфейс удобным для пользователей, но и повлияли на ключевые показатели сайта:
- Сконцентрировали на главной странице максимальное количество точек входа на другие разделы сайта.
- Структурировали информацию в порталах.
- Определили ключевые критерии при выборе различных категорий товаров и вывели эту информацию в карточке товара в выдаче.
- Внедрили cross-sell и upsell инструменты для увеличения среднего чека.
- Проработали мотивационные решения для допродаж на странице корзины.
- Добавили элементы заботы о клиенте на страницу оформления заказа.
Каждый месяц более 400 000 онлайн покупателей используют созданный нами интерфейс. В 2017 году Pampik также стал победителем конкурса “Фаворит успеха - 2017” в номинации “Лучший Интернет-магазин детских товаров”.