![](https://cdn.cases.media/image/wide/5d2b8c43-aa56-4dc6-b9cd-0ef66eb982b3.jpg)
Как сделать дизайн детского интернет-магазина удобным: Кейс Pampik
О клиенте:
Интернет-магазин Pampik — один из лидеров сегмента «Детские товары» украинского e-commerce. Согласно данным исследования RAU за 2017 год, магазин Pampik занимает 2 место по посещаемости в сегменте товаров для детей.
Особенности проекта:
Pampik занимается только онлайн продажами, без наличия офлайн точек. Компания начинала свою работу с продажи памперсов, отсюда и созвучное название. Через время расширилась в полноценный интернет-магазин с широким ассортиментом.
Задача:
Сделать проектирование, дизайн и верстку для детского интернет-магазина Pampik. Сделать акцент на высоком качестве и широком ассортименте продукции, добиться ощущения детского пространства, окруженного заботой и вниманием к покупателям.
Целевая аудитория:
Будущие мамы, молодые родители
Ключевые особенности дизайна детского интернет-магазина
Пройдемся по страницам интернет-магазина Pampik и рассмотрим, как детали интерфейса влияют на поведение пользователей.
1. Главная страница
Цветовое решение всего сайта выполнено в спокойном нежно-фиолетовом тоне с яркими оранжевыми акцентами на ключевых элементах. В логотипе также использовали оранжевую палитру и подчеркнули основной посыл компании: «Мы заботимся о маме и малыше».
![](https://cdn.cases.media/image/wide/c2a38dde-3e96-49cc-b202-e6d062434863.png)
При помощи контрастов цветового оформления привлекаем внимание пользователей к значимым разделам сайта.
Чтобы визуально выделить категории товаров в меню, мы создали уникальные иконки. Они выполнены в фирменных цветах и помогают задать настроение интернет-магазину.
![](https://cdn.cases.media/image/wide/1290c3f4-a56a-4600-955c-d5294e86f611.png)
Под шапкой разместили баннер с актуальными акциями, а контент максимально заполнили фотографиями новорожденных и разбавили интересными виджетами.
![](https://cdn.cases.media/image/wide/5d611aa8-fbd2-4bed-a2d4-9d90a5c4547f.png)
Такое решение направлено на то, чтобы вызвать у пользователя положительные эмоции и сконцентрировать на главной странице как можно больше точек входа на другие разделы сайта.
При клике на иконку с пустой корзиной в шапке сайта, пользователю выводится сообщение: «Ваша корзина пуста» и призыв выбрать товар. При этом его не посылают на страницу корзины. Такой прием экономит время клиента, не отвлекая от выбора товара.
![](https://cdn.cases.media/image/wide/83683882-b67f-431d-8739-2cf31d9a9a49.png)
Call-to-action кнопка «Оформить» в правом верхнем углу шапки позволяет быстро завершить покупку с любой страницы сайта.Такой функционал также хорошо работает для эмоциональных покупателей, которым товар нужен срочно, здесь и сейчас.
Для постоянных покупателей в шапке выведена опция «Проверить заказ». Благодаря ей клиенту не надо заходить в личный кабинет и искать информацию о заказе. Все быстро можно просмотреть, нажав одну кнопку в шапке сайта.
![](https://cdn.cases.media/image/wide/389d7064-daf2-4de6-ba85-338d2adda0b1.png)
Кроме основных категорий товаров мы вывели на главную страницу сайта дополнительные точки входа на другие разделы: популярные товары, рекомендуемые товары, новинки, акции и возможность перейти на товары определенного бренда.
![](https://cdn.cases.media/image/wide/ed90fac9-9ee2-4738-8d1c-b0f797de13d1.png)
Благодаря таким приемам мы не только демонстрируем ассортимент магазина в различных срезах, но и помогаем пользователю быстрее найти нужный ему товар.
Т.к. компания активно занимается контентом и наполнением сайта, на главную страницу вынесен раздел «Обзоры и тестдрайвы», который помогает пользователям с выбором товаров и генерирует часть трафика на сайт. В этом разделе представлены видео обзоры продукции, сделанные как экспертами, так и обычными пользователями, раскрыты темы ухода и воспитания детей.
![](https://cdn.cases.media/image/wide/04679d68-f1fe-4b2d-86c9-93617ef2ecd3.png)
Наличие такого контента является проявлением заботы о клиенте и формирует своего рода клуб по интересам. С помощью видео обзоров гораздо легче продемонстрировать реальную ценность товара, чем с помощью картинки и характеристик от производителя.
Чтобы поддержать детскую тематику сайта, в дизайне футера интернет-магазина использовали изображения, напоминающие рисунки маленького ребенка.
![](https://cdn.cases.media/image/wide/214b4534-e558-4597-99bc-7a7cb7f86733.png)
Такое решение создает мягкую, дружественную атмосферу и задает настроение интернет-магазина.
2. Порталы
Для каждой категории товаров спроектировали отдельный портал - промежуточный этап между главной страницей и страницей выдачи.
Основная задача портала - информировать посетителя об актуальных акциях и предложениях данного раздела при помощи баннера с автоматическим перелистыванием. Информация об акциях в портале может стать эффективным инструментом для продаж. Например, купив еще одну пачку памперсов, вы получите погремушку в подарок.
![](https://cdn.cases.media/image/wide/bbf4c395-ae77-4253-9863-7c3465d35914.png)
В порталах четко структурировали информацию по ассортименту товаров, продублировали меню в двух плоскостях - вертикальное левое меню с подробной системой фильтров и основное горизонтальное под баннером.
Таким образом, повышаем удобство ориентации и скорость процесса подбора товаров.
3. Выдача товаров
Выдача товаров реализована двумя способами – списком и плиткой. Пользователь может сам выбрать наиболее удобный для него вариант просмотра.
![](https://cdn.cases.media/image/wide/3e307419-fad4-4093-a93c-1ce409013630.png)
Такое решение уже стало нормой, так как повышает удобство восприятия информации для интернет-магазинов с широкой аудиторией.
Плитки оформили в белом цвете, чтобы ничего не отвлекало внимание от продукции. Вынесли максимум информации о товаре: цена без скидки, цена со скидкой, процент дисконта.
![](https://cdn.cases.media/image/wide/1da6468d-2bd1-4b47-b465-8044611f088c.png)
Также сформировали триггеры для покупки, определив ключевые критерии при выборе различных товаров. Например, при покупке памперсов, покупатель видит информацию о цене за единицу товара, т.е. за один памперс. Таким образом, мы обосновываем выгоду приобретения большой упаковки. Цена за пак выше, но единица товара, один памперс – дешевле.
Для продуктов питания мы определили, что критерием выбора является срок годности, поэтому вывели информацию о нем на страницу выдачи.
![](https://cdn.cases.media/image/wide/548fe169-41fb-4ed6-9c2b-4aa7ef943aca.png)
При покупке одежды выделили в качестве критериев выбора размеры и расцветки.
![](https://cdn.cases.media/image/wide/17644eed-9a2c-48d0-8e5f-5a08caa4bf26.jpg)
Мы акцентируем внимание на важных аспектах, которые влияют на решение о покупке, тем самым оказывая помощь в подборе подходящего товара.
4. Карточка товара
Чтобы сделать карточку товара максимально удобной для пользователей, структурировали информацию, проработали 7 различных ее состояний для разных групп товаров. Кроме фото, характеристик и цен,вывели данные о цвете, размере, наличии товара, о вариантах доставки и ее точной дате, о количестве баллов за покупку, сертификаты качества, условия гарантии и возможные сроки возврата товара. Блок “Вопрос-ответ” позволяет клиентам быстро получить ответы на интересующие вопросы о товаре, как от профессионального консультанта компании, так и услышать мнение реального покупателя.
Такая исчерпывающая информация о продукте на странице карточки товара создает все условия для того, чтобы пользователь совершил целевое действие.
- Дополнили страницу интересным функционалом с точки зрения маркетинга:
- Блок “С этим товаром покупают” - мотивирует посетителей на дополнительные покупки и направлен на увеличение среднего чека.
Инструмент “Вместе дешевле” выводит комплекты товаров, покупка которых помогает сэкономить.
При помощи этих cross-sell и upsell инструментов можно мотивировать посетителей совершить дополнительные покупки и увеличить средний чек интернет-магазина магазина.
5. Корзина
В корзине уделили внимание микровзаимодейтсвиям:
- получение подарка при покупке определенного товара
- наличие товаров-заменителей
- начисление бонусов за покупку
Разместили подсказки, которые уведомляют об участии в акции или возможности получить подарок. Также если желаемого товара нет в наличии, предлагаем его заказать или заменить на аналог.
![](https://cdn.cases.media/image/wide/994fc9f6-5be2-426f-b4ab-9caf0f6186d4.png)
Структурировали акционные комплекты, указывая не просто цену со скидкой, а и сумму экономии.
![](https://cdn.cases.media/image/wide/bf4e3050-c88d-4640-a19f-a7f2164f342c.png)
В интернет-магазине Pampik действует система лояльности для постоянных клиентов. За каждый заказ покупателю начисляются бонусы - «пампики», эта информация отображается в корзине. Далее этими бонусами можно рассчитываться за товары.
![](https://cdn.cases.media/image/wide/c3106453-a65b-4da0-9cd4-e77afee317c6.png)
Это работает как дополнительная мотивация для пользователей самостоятельно накапливать скидку.
Учитывая, что цикл покупки может составлять от нескольких часов до нескольких дней добавили опцию отслеживания цены. Если человек добавил товар в корзину, а в дальнейшем его стоимость изменилась, то появляется соответствующее уведомление. При этом покупателю предлагают или оставить товар в корзине, или заменить на релевантный.
![](https://cdn.cases.media/image/wide/1e08cc65-12dc-4c3f-bf6f-805e3b719fbe.png)
В корзине также используем инструмент «С этим товаром покупают». В специальном блоке выводим варианты сопутствующих товаров, которые добавляются в корзину путем одного нажатия.
![](https://cdn.cases.media/image/wide/6787b836-d59e-46b1-b27c-04c8df6b6a82.png)
При необходимости очистить корзину, сначала уточняем у посетителя не хочет ли он добавить эти позиции в избранное и действительно ли он хочет удалить весь комплект.
![](https://cdn.cases.media/image/wide/2c292a2c-001b-42c0-9e92-2aa9a4d38704.png)
С помощью всех этих приемов мы акцентируем внимание пользователя в корзине на всех выгодах, которые он получит по итогу завершения сделки.
6. Оформление заказа
Оформление покупки включает только 2 этапа:
- ввод персональных данных
- доставка и оплата
На первом этапе чекаута постоянные покупатели авторизуются через e-mail/номер телефона и пароль, а новым клиентам необходимо указать телефон, имя, город и e-mail.
На втором этапе магазин предлагает покупателям опции:
- предоставление подробной информации о дате доставки заказа в зависимости от выбранного способа доставки;
- возможность оформить получение заказа как на себя, так и на другого человека;
- повторить заказ одним кликом;
- отказаться от дополнительного звонка оператора при помощи кнопки “Заказ подтверждаю, не перезванивайте мне”.
![](https://cdn.cases.media/image/wide/9b9ca5ca-6147-4811-9221-227592a3efad.png)
Оформление заказа - это финальный этап пользовательского пути и важно, чтобы ничего не помешало покупателю завершить сделку. Дополнительные функции создают атмосферу заботы о покупателе, а быстрый чекаут не оставляет времени на долгие раздумья.
7. Страница благодарности
Дизайн thank you page детского интернет-магазина Pampik состоит из нескольких плиток:
- исчерпывающая информация о заказе: номер, заказчик, телефон, способ и адрес доставки, способ оплаты;
- переход в личный кабинет;
- предложение оставить отзыв о магазине;
- возможность подписаться на социальные сети.
![](https://cdn.cases.media/image/wide/9933df63-14f5-4c3d-9662-e25ced7e0a01.png)
Таким образом, страница благодарности является полноценным инструментом, который работает на повышение лояльности пользователей и объединение их в одно большое сообщество.
8. Личный кабинет
У магазина очень много заказов, поэтому мы детально проработали функционал личного кабинета. Наполнили его большим количеством возможностей:
- просмотреть историю заказов и статус текущих заказов,
- ознакомиться с количеством бонусов на счету и персональными акциями,
- проверить наличие промо-кода и поделиться им с друзьями.
Мы добавили разделы желания, любимые товары, список ожидания, рассылки.
Фишкой личного кабинета стала опция добавления информации о детях. Она позволяет получать дополнительные скидки и бонусы, а также советы в подборе игрушек и других товаров в зависимости от возраста ребенка.
![](https://cdn.cases.media/image/wide/38724c26-3f55-4cc3-96f1-8f9fbdd9d82e.png)
Таким образом, у постоянных клиентов появилось личное пространство с исчерпывающей информацией о своих действиях на сайте, возможных выгодах и интересных предложениях. Покупатель чувствует свою значимость, что повышает степень его приверженности компании.
9. Фишки дизайна детского интернет-магазина
На сайте есть два необычных блока:
- сумки в роддом
- любимые клиенты.
Сумки в роддом
Интернет-магазин Pampik один из первых предложил услугу продажи готовых наборов в роддом. Для этого мы разработали не только стилистику, а и логику работы, комплектации, замены товаров.
![](https://cdn.cases.media/image/wide/070cf4e7-cfad-481c-b235-931ef9ba07f0.jpg)
Покупателям предлагается на выбор 3 готовых сумки, но клиент также может скорректировать комплектацию набора на свое усмотрение. Еще одной особенностью является возможность переслать собранную сумку другому пользователю. Например, жена может сформировать комплект и отправить его мужу.
Такой инструмент решает основную задачу создания атмосферы заботы о покупателе и его ребенке.
Любимые клиенты
Покупатель может отправить фотографию своего ребенка и затем ее разместят в специальном разделе “Любимые клиенты”. Если человек решает поделиться фотоснимком любимого чада на странице интернет-магазина, это свидетельствует о высоком уровне доверия к компании и удовлетворенности ее сервисом.
![](https://cdn.cases.media/image/wide/95aa64b5-0710-4286-9032-9e000cdf0ba8.jpg)
Таким образом, мы помогаем сформировать контент social proof, который создает ощущение принадлежности к сообществу, объединяет клиентов в одну семью на страницах интернет-магазина Pampik.
Более 400К посетителей и звание лучшего магазина детских товаров
В дизайне детского интернет-магазина Pampik мы внедрили множество решений, которые не только сделали интерфейс удобным для пользователей, но и повлияли на ключевые показатели сайта:
- Сконцентрировали на главной странице максимальное количество точек входа на другие разделы сайта.
- Структурировали информацию в порталах.
- Определили ключевые критерии при выборе различных категорий товаров и вывели эту информацию в карточке товара в выдаче.
- Внедрили cross-sell и upsell инструменты для увеличения среднего чека.
- Проработали мотивационные решения для допродаж на странице корзины.
- Добавили элементы заботы о клиенте на страницу оформления заказа.
Каждый месяц более 400 000 онлайн покупателей используют созданный нами интерфейс. В 2017 году Pampik также стал победителем конкурса “Фаворит успеха - 2017” в номинации “Лучший Интернет-магазин детских товаров”.