Як зробити дизайн дитячого інтернет-магазину зручним: Кейс Pampik

Це стаття про те, як створювався дизайн одного з найкращих дитячих інтернет-магазинів. Ми пройдемося по всім ключовим сторінкам сайту і покажемо: як мотивувати користувачів до додаткових покупок; як за допомогою cross-sell і upsell збільшувати середній чек; якою повинна бути структура головної сторінки; яку інформацію розміщувати на картці товару дитячої тематики; а також які дрібні деталі зроблять чекаут більш зручним і покажуть вашу турботу про клієнта.

Про клієнта:

Інтернет-магазин Pampik – один з лідерів сегмента «Дитячі товари» українського e-commerce. Згідно з даними дослідження RAU за 2017 рік, магазин Pampik займає 2 місце за відвідуваністю в сегменті товарів для дітей.

Особливості проєкту:

Pampik займається тільки онлайн-продажами, без наявності офлайн-точок. Компанія починала свою роботу з продажу памперсів, звідси і звучна назва. Згодом розширилася в повноцінний інтернет-магазин з широким асортиментом.

Завдання:

Зробити проєктування, дизайн і верстку для дитячого інтернет-магазину Pampik. Зробити акцент на високій якості та широкому асортименті продукції, досягти відчуття дитячого простору, оточеного турботою та увагою до покупців.

Цільова аудиторія:

Майбутні мами, молоді батьки

Ключові особливості дизайну дитячого інтернет-магазину

Пройдемося по сторінках інтернет-магазина Pampik і розглянемо, як деталі інтерфейсу впливають на поведінку користувачів.

1. Головна сторінка

Колірне рішення всього сайту виконано в спокійному ніжно-фіолетовому тоні з яскравими оранжевими акцентами на ключових елементах. В логотипі також використали оранжеву палітру і підкреслили основний посил компанії: «Ми піклуємося про маму і малюка».

За допомогою контрастів кольорового оформлення привертаємо увагу користувачів до значущих розділів сайту.

Щоб візуально виділити категорії товарів у меню, ми створили унікальні іконки. Вони виконані в фірмових кольорах і допомагають задати настрій інтернет-магазину.

Під шапкою розмістили банер з актуальними акціями, а контент максимально заповнили фотографіями новонароджених і розбавили цікавими віджетами.

Таке рішення спрямоване на те, щоб викликати у користувача позитивні емоції та зосередити на головній сторінці якомога більше точок входу на інші розділи сайту.

При кліку на іконку з порожньою кошиком у шапці сайту, користувачу виводиться повідомлення: «Ваша кошик пуста» та заклик вибрати товар. При цьому його не відправляють на сторінку кошика. Такий прийом економить час клієнта, не відволікаючи від вибору товару.

Call-to-action кнопка «Оформити» у правому верхньому куті шапки дозволяє швидко завершити покупку з будь-якої сторінки сайту. Такий функціонал також добре працює для емоційних покупців, яким товар потрібен терміново, тут і зараз.

Для постійних покупців у шапці виведена опція «Перевірити замовлення». Завдяки їй клієнту не потрібно заходити в особистий кабінет і шукати інформацію про замовлення. Все швидко можна переглянути, натиснувши одну кнопку у шапці сайту.

Окрім основних категорій товарів, ми вивели на головну сторінку сайту додаткові точки входу на інші розділи: популярні товари, рекомендовані товари, новинки, акції та можливість перейти на товари певного бренду.

Завдяки таким прийомам ми не тільки демонструємо асортимент магазину в різних зрізах, але й допомагаємо користувачу швидше знайти потрібний йому товар.

Оскільки компанія активно займається контентом і наповненням сайту, на головну сторінку винесено розділ «Огляди та тест-драйви», який допомагає користувачам з вибором товарів і генерує частину трафіку на сайт. У цьому розділі представлені відео огляди продукції, зроблені як експертами, так і звичайними користувачами, розкриті теми догляду та виховання дітей.

Наявність такого контенту є проявом турботи про клієнта і формує свого роду клуб за інтересами. З допомогою відео оглядів значно легше продемонструвати реальну цінність товару, ніж за допомогою картинки та характеристик від виробника.

Щоб підтримати дитячу тематику сайту, в дизайні футера інтернет-магазина використали зображення, що нагадують малюнки маленької дитини.

Таке рішення створює м'яку, дружню атмосферу і задає настрій інтернет-магазину.

2. Портали

Для кожної категорії товарів спроектували окремий портал – проміжний етап між головною сторінкою і сторінкою видачі.

Основна задача порталу – інформувати відвідувача про актуальні акції та пропозиції цього розділу за допомогою банера з автоматичним перелистуванням. Інформація про акції в порталі може стати ефективним інструментом для продажів. Наприклад, купивши ще одну пачку памперсів, ви отримаєте погремушку в подарунок.

В порталах чітко структурували інформацію по асортименту товарів, продублювали меню в двох площинах – вертикальне ліве меню з детальною системою фільтрів та основне горизонтальне під банером.  

Таким чином, підвищуємо зручність орієнтації та швидкість процесу підбору товарів.

3. Видача товарів

Видача товарів реалізована двома способами – списком і плиткою. Користувач може сам вибрати найбільш зручний для нього варіант перегляду.

Таке рішення вже стало нормою, оскільки підвищує зручність сприйняття інформації для інтернет-магазинів з широкою аудиторією.

Плитки оформили в білому кольорі, щоб нічого не відволікало увагу від продукції. Винесли максимум інформації про товар: ціна без знижки, ціна зі знижкою, відсоток дисконту.

Також сформували триггери для покупки, визначивши ключові критерії при виборі різних товарів. Наприклад, при покупці памперсів, покупець бачить інформацію про ціну за одиницю товару, тобто за один памперс. Таким чином, ми обґрунтовуємо вигоду придбання великої упаковки. Ціна за пакет вища, але одиниця товару, один памперс – дешевша.

Для продуктів харчування ми визначили, що критерієм вибору є термін придатності, тому вивели інформацію про нього на сторінку видачі.

При покупці одягу виділили в якості критеріїв вибору розміри та кольори.

Ми акцентуємо увагу на важливих аспектах, які впливають на рішення про покупку, тим самим надаючи допомогу в підборі відповідного товару.

4. Картка товару

Щоб зробити картку товару максимально зручною для користувачів, структурували інформацію, опрацювали 7 різних її станів для різних груп товарів. Окрім фото, характеристик і цін, вивели дані про колір, розмір, наявність товару, про варіанти доставки та її точну дату, про кількість балів за покупку, сертифікати якості, умови гарантії та можливі терміни повернення товару. Блок “Питання-відповіді” дозволяє клієнтам швидко отримати відповіді на цікаві питання про товар, як від професійного консультанта компанії, так і почути думку реального покупця.

Такая вичерпна інформація про продукт на сторінці картки товару створює всі умови для того, щоб користувач здійснив цільову дію.

Доповнили сторінку цікавим функціоналом з точки зору маркетингу:

• Блок “З цим товаром купують” – мотивує відвідувачів на додаткові покупки і спрямований на збільшення середнього чека.
• Інструмент “Разом дешевше” виводить комплекти товарів, покупка яких допомагає заощадити.

За допомогою цих інструментів cross-sell та upsell можна мотивувати відвідувачів здійснити додаткові покупки та збільшити середній чек інтернет-магазина.

5. Кошик

В кошику приділили увагу мікровзаємодіям:

• отримання подарунка при покупці певного товару
• наявність товарів-замінників
• нарахування бонусів за покупку

Розмістили підказки, які повідомляють про участь в акції або можливість отримати подарунок. Також, якщо бажаного товару немає в наявності, пропонуємо його замовити або замінити на аналог.

Структурували акційні комплекти, вказуючи не просто ціну зі знижкою, а й суму економії.

В інтернет-магазині Pampik діє система лояльності для постійних клієнтів. За кожне замовлення покупцеві нараховуються бонуси – «пампики», ця інформація відображається в кошику. Далі цими бонусами можна розраховуватися за товари.

Це працює як додаткова мотивація для користувачів самостійно накопичувати знижку.

Враховуючи, що цикл покупки може складати від кількох годин до кількох днів, додали опцію відстеження ціни. Якщо людина додала товар у кошик, а в подальшому його вартість змінилася, то з'являється відповідне сповіщення. При цьому покупцеві пропонують або залишити товар у кошику, або замінити на релевантний.

У кошику також використовуємо інструмент «З цим товаром купують». В спеціальному блоці виводимо варіанти супутніх товарів, які додаються в кошик шляхом одного натискання.

При необхідності очистити кошик, спочатку уточнюємо у відвідувача, чи не хоче він додати ці позиції в обране і дійсно чи хоче він видалити весь комплект.

З допомогою всіх цих прийомів ми акцентуємо увагу користувача в кошику на всіх вигодах, які він отримає в результаті завершення угоди.

6. Оформлення замовлення

Оформлення покупки включає лише 2 етапи:

• введення персональних даних
• доставка та оплата

На першому етапі чекауту постійні покупці авторизуються через e-mail/номер телефону та пароль, а новим клієнтам необхідно вказати телефон, ім'я, місто та e-mail.

На другому етапі магазин пропонує покупцям опції:

• надання детальної інформації про дату доставки замовлення в залежності від обраного способу доставки;
• можливість оформити отримання замовлення як на себе, так і на іншу особу;
• повторити замовлення одним кліком;
• відмовитися від додаткового дзвінка оператора за допомогою кнопки “Замовлення підтверджую, не перезвонюйте мені”.

Оформлення замовлення – це фінальний етап користувацького шляху, і важливо, щоб нічого не заважало покупцеві завершити угоду. Додаткові функції створюють атмосферу турботи про покупця, а швидкий чекаут не залишає часу на довгі роздуми.

7. Сторінка подяки

Дизайн thank you page дитячого інтернет-магазина Pampik складається з кількох плиток:

• вичерпна інформація про замовлення: номер, замовник, телефон, спосіб і адреса доставки, спосіб оплати;
• перехід в особистий кабінет;
• пропозиція залишити відгук про магазин;
• можливість підписатися на соціальні мережі.

Таким чином, сторінка подяки є повноцінним інструментом, який працює на підвищення лояльності користувачів і об'єднання їх в одне велике співтовариство.

8. Особистий кабінет

У магазину дуже багато замовлень, тому ми детально опрацювали функціонал особистого кабінету. Наповнили його великою кількістю можливостей:

• переглянути історію замовлень та статус поточних замовлень,
• ознайомитися з кількістю бонусів на рахунку та персональними акціями,
• перевірити наявність промо-коду та поділитися ним з друзями.

Ми додали розділи бажань, улюблені товари, список очікування, розсилки.

Фішкою особистого кабінету стала опція додавання інформації про дітей. Вона дозволяє отримувати додаткові знижки та бонуси, а також поради щодо підбору іграшок та інших товарів в залежності від віку дитини.

Таким чином, у постійних клієнтів з'явилося особисте простір з вичерпною інформацією про свої дії на сайті, можливі вигоди та цікаві пропозиції. Покупець відчуває свою значимість, що підвищує ступінь його прихильності до компанії.

9. Фішки дизайну дитячого інтернет-магазину

На сайті є два незвичайних блоки:

• сумки в пологовий будинок
• улюблені клієнти.

Сумки в пологовий будинок

Інтернет-магазин Pampik один з перших запропонував послугу продажу готових наборів в пологовий будинок. Для цього ми розробили не тільки стилістику, а й логіку роботи, комплектації, заміни товарів.

Покупцям пропонується на вибір 3 готові сумки, але клієнт також може скоригувати комплектацію набору на свій розсуд. Ще однією особливістю є можливість переслати зібрану сумку іншому користувачу. Наприклад, дружина може сформувати комплект і надіслати його чоловікові.

Такий інструмент вирішує основну задачу створення атмосфери турботи про покупця та його дитину.

Улюблені клієнти

Покупець може надіслати фотографію своєї дитини, і потім її розмістять у спеціальному розділі “Улюблені клієнти”. Якщо людина вирішує поділитися фотознімком улюбленого чада на сторінці інтернет-магазина, це свідчить про високий рівень довіри до компанії та задоволення її сервісом.

Таким чином, ми допомагаємо сформувати контент social proof, який створює відчуття приналежності до спільноти, об'єднує клієнтів в одну сім'ю на сторінках інтернет-магазина Pampik.  

Більше 400К відвідувачів і звання найкращого магазину дитячих товарів

В дизайні дитячого інтернет-магазина Pampik ми впровадили безліч рішень, які не тільки зробили інтерфейс зручним для користувачів, але й вплинули на ключові показники сайту:

• Сконцентрували на головній сторінці максимальну кількість точок входу на інші розділи сайту.
• Структурували інформацію в порталах.
• Визначили ключові критерії при виборі різних категорій товарів і вивели цю інформацію в картці товару в видачі.
• Впровадили інструменти крос-продажу та апсейлу для збільшення середнього чека.
• Пропрацювали мотиваційні рішення для допродаж на сторінці кошика.
• Додали елементи турботи про клієнта на сторінку оформлення замовлення.

Кожного місяця понад 400 000 онлайн покупців використовують створений нами інтерфейс. У 2017 році Pampik також став переможцем конкурсу “Фаворит успіху – 2017” у номінації “Найкращий Інтернет-магазин дитячих товарів”.

‍

‍