Професійний пілінг чи сироватку купують лише тоді, коли зрозуміло, що засіб зробить зі шкірою і що буде, якщо він не підійде. Тому магазину професійної косметики замало гарної вітрини: йому потрібні докази ефекту, відгуки та просте замовлення. Розповідаю, як я зібрав такий магазин для Fillers Shop.
Завдання: продавати професійну косметику без консультанта поруч
Fillers Shop продає косметику бренду WIQO та інноваційний пілінг PRX-T33 — засоби, які раніше купували переважно косметологи для роботи в кабінеті. Тепер їх дедалі частіше беруть і для домашнього догляду: жінки й чоловіки, підлітки з проблемною шкірою, фахівці, яким потрібен надійний постачальник. Магазин обіцяє оригінальну продукцію за доступними цінами, і сайт мав цю обіцянку показати.
У таких покупців різний досвід, але запитання ті самі: що робить засіб, скільки процедур потрібно, коли видно результат, скільки це коштує і чи можна повернути гроші. Під ці запитання я й вибудував сторінки магазину. Сайт повністю англійською мовою.
Головна: від першого екрана до каталогу й консультації
Перший екран присвячено головному товару — пілінгу PRX-T33. Ліворуч заголовок, короткий текст про те, що засіб відновлює шкіру, розгладжує зморшки, зменшує пігментацію, сліди акне й розтяжки, і чотири значки з фактами про процедуру: 3–5 сеансів, 30 хвилин на процедуру, без періоду відновлення, результат видно одразу. Праворуч — велике фото процедури, під текстом — кнопка «Buy».
Далі головна йде в такому порядку:
- каталог «WIQO product» — вісім карток товару з кнопкою «Show more» для решти;
- блок «Results» — фото до й після процедури та текст про те, як змінюється шкіра;
- акордеон частих запитань про пілінг PRX-T33;
- форма безкоштовної консультації щодо засобів WIQO і PRX-T33 — ім’я, телефон і кнопка надсилання;
- блок «About» про магазин і підвал із меню, сторінками доставки, контактів і політики конфіденційності.
У шапці завжди під рукою меню, рядок пошуку товарів і кошик зі спадним списком.
Каталог і картки товарів
Картка в каталозі проста: фото на білому тлі, назва, ціна й кнопка «Add to cart». Товар додається в кошик просто з головної, без переходу на окрему сторінку, — це зручно тим, хто вже знає, що йому треба, наприклад косметологам, які докуповують звичні засоби.
Сторінку товару зібрано так, щоб рішення можна було ухвалити на одному екрані:
- хлібні крихти й галерея фото з перемиканням крапками;
- назва й чотири головні ефекти засобу — зволоження, менше дрібних зморшок, щільніша й гладкіша шкіра, швидше оновлення клітин;
- ціна зі старою ціною і три сходинки «from 1 / from 2 / from 3» — коли купуєте кілька упаковок, ціна за штуку нижча;
- лічильник кількості й кнопка «Buy now»;
- рядок про гарантію повернення грошей протягом 90 днів;
- опис товару та блок «Featured Products» з рекомендованими засобами внизу сторінки.
Рейтинг і відгуки просто в картці
Для косметики відгуки — головний аргумент, тому вони стоять на сторінці товару, а не на окремій сторінці. Ліворуч — середня оцінка й розподіл відгуків за зірками смужками від п’яти до однієї. Праворуч — самі відгуки: ім’я покупця, позначка перевіреної покупки, оцінка, заголовок, текст, кнопки «Share» і «Comments» та запитання «Was this review helpful?». Під відгуком може відповідати сам магазин — таку відповідь бачить покупець, і вона показує, що за товаром стоять живі люди.
Оформлення замовлення та швидкі способи купити
Сторінка оформлення — одна форма «Where should we ship?»: ім’я, прізвище, адреса доставки, індекс, місто, штат, e-mail для чека й телефон для кур’єра. Позначка «Billing Address is same as Shipping Address» позбавляє повторного введення адреси, поруч — підсумок замовлення та оплата. Під формою — нагадування, що дані захищені й зашифровані, і блок гарантії повернення за 90 днів.
Не кожному хочеться заповнювати адресу, тому на сайті є ще три шляхи до покупки:
- «Buy in one click» — спливне вікно з одним полем телефону;
- «Call me» — замовлення зворотного дзвінка;
- форма зворотного зв’язку з вибором, як зручніше отримати відповідь: e-mail чи повідомлення;
- форма безкоштовної консультації на головній.
Унизу екрана під час першого візиту з’являється банер cookie з кнопками «Configure», «Decline» і «Accept all»: необов’язкові cookie вмикаються лише за згодою відвідувача.
Що важливо в інтернет-магазині професійної косметики
Косметика для професійного догляду — ніша, де покупець платить за ефект і ризикує власною шкірою. З досвіду цього проєкту магазину в цій ніші потрібно:
- пояснювати дію засобу простими словами й короткими фактами: скільки процедур, скільки часу, чи потрібен період відновлення;
- показувати результат — фото «до/після» переконують краще за будь-які описи;
- тримати відгуки й рейтинг поруч із ціною, а не ховати їх;
- знімати страх покупки гарантією повернення та зрозумілими умовами доставки;
- давати знижку від кількості — косметологи й постійні покупці беруть засоби упаковками;
- залишати шлях до людини: консультація й зворотний дзвінок потрібні тим, хто вагається.
Магазин, який підходить і косметологу, і новому покупцю
Fillers Shop вийшов невеликим, але завершеним магазином: головна продає ключовий товар і показує каталог, картка відповідає на всі запитання перед покупкою, а оформлення не затримує покупця довше, ніж треба. Досвідчений косметолог додає товар у кошик просто з каталогу, новий покупець читає відгуки й дивиться результати, а той, хто вагається, залишає телефон і отримує консультацію. Такий підхід пасує будь-якому магазину дорогих засобів, де рішення про покупку залежить від довіри.
Деталі проєкту
Тип проєктуінтернет-магазин
КатегоріяІнтернет-магазин
ТехнологіїHTML5, CSS3, JavaScript
Рольрозробка інтернет-магазину: верстка головної, каталогу, картки товару й оформлення замовлення, кошик, пошук, спливні вікна та форми
КлієнтFillers Shop
Країнаангломовний ринок
Що зроблено
- Зверстав головну: перший екран із пілінгом PRX-T33, каталог WIQO, результати «до/після», FAQ, консультація та «About»
- Зробив каталог із картками товару, кнопкою «Add to cart» і довантаженням за «Show more»
- Зібрав шапку з меню, пошуком товарів і спадним кошиком
- Зверстав картку товару: галерея, ефекти засобу, ціна зі сходинками від кількості, лічильник, «Buy now», гарантія повернення
- Зробив блок рейтингу з розподілом за зірками й відгуки з відповідями магазину
- Додав рекомендовані товари внизу картки
- Зверстав оформлення замовлення: форма доставки, «billing = shipping», підсумок замовлення та оплата
- Зробив спливні вікна «Buy in one click» і «Call me», форму зворотного зв’язку та форму консультації
- Додав банер cookie з кнопками «Configure», «Decline» і «Accept all»
Результат
- Англомовний інтернет-магазин із каталогом, карткою товару, кошиком і оформленням замовлення
- Ціна від кількості в картці підштовхує брати кілька упаковок
- Ефект засобу, відгуки й гарантію повернення видно ще до оплати
- Чотири шляхи до замовлення: кошик, покупка в один клік, зворотний дзвінок і консультація