Liliway: сайт wellness-студії та інтернет-магазин на WordPress
Від структури й UX/UI-дизайну до каталогу WooCommerce, наповнення та запуску. Об’єднали послуги студії й продаж доглядових продуктів в одному сайті.
Перейти до результатів
- Платформа сайту
- WordPress
- Товарний каталог
- WooCommerce
- Обсяг роботи
- UX/UI + розробка
- Ринок
- Нью-Йорк, США
Про проєкт
Liliway Holistic Studio — wellness-студія у Нью-Йорку, яка пропонує процедури догляду та косметичні продукти. Її сайт має допомагати двом групам відвідувачів: тим, хто обирає процедуру, і тим, хто шукає засоби для домашнього догляду.
Команда Pro Resultat створила новий сайт: спроєктувала структуру, розробила інтерфейс і реалізувала його на WordPress. Робота також охопила наповнення каталогу, технічний запуск і супровід.
- Клієнт
- Liliway Holistic Studio
- Ринок
- Нью-Йорк, США
- Платформа
- WordPress / WooCommerce
- Обсяг роботи
- UX/UI та розробка
З яким запитом звернулися
У клієнтки вже був сайт, але його підтримка обходилася дорого, а робота не повністю відповідала очікуванням. Потрібне було нове рішення, яке зручно розвивати й адмініструвати разом із бізнесом.
Що мало змінитися
Поєднати презентацію студії, вибір процедур і магазин, зберігши цілісний візуальний стиль. Відвідувач має розуміти, де записатися на послугу, а де знайти й обрати продукт.
Два етапи: дизайн у Figma та розробка
Спочатку дизайнер провів аналіз і аудит, спроєктував структуру та підготував макети сайту у Figma. Після погодження макетів розробник перейшов до верстки й реалізації на WordPress. Дизайн зайняв близько 30 днів, а наступний етап верстки та розробки — орієнтовно 21 день.
01
Структура та сценарії
Провели аналіз і аудит користувацьких сценаріїв, уточнили бізнес-завдання та спланували розділи. Окремо опрацювали маршрут до запису на процедуру й маршрут покупця: категорія, товар, кошик. Ці висновки стали основою навігації та майбутніх макетів.
02
UX/UI-дизайн у Figma
Дизайнер створив у Figma макети основних сторінок і мобільних станів: головної, меню, каталогу, фільтрів і картки товару. Окремо підготував UI-kit із типографікою, палітрою та повторюваними елементами. Погоджені макети стали основою для верстки.
03
WordPress і WooCommerce
Після погодження дизайну у Figma розробник виконав верстку та реалізацію на WordPress: адаптивні сторінки, навігацію й товарний каталог WooCommerce. Поєднали контент про послуги з функціональністю магазину в одній системі керування.
04
Контент і товари
Допомогли з наповненням сторінок і вручну додали товари. Опрацювання каталогу було окремою частиною роботи: клієнтка отримала сайт із внесеними позиціями, а не лише порожню структуру магазину.
05
Технічний запуск
Виконали роботи з підключення домену та DNS, налаштування аналітики й погоджених інтеграцій. Підготували сайт до роботи на основному домені.
06
Супровід після запуску
За проєктом закріпили розробника для технічних питань, виправлень і консультацій. Команда, яка реалізувала сайт, залишилася на зв’язку й після його запуску.
Макети у Figma до початку верстки
На етапі вебдизайну опрацювали вигляд сторінок і стани взаємодії. У мобільних макетах показали головний екран, розкриття меню, фільтри каталогу та картку товару. UI-kit зафіксував узгоджені шрифти й кольори, щоб розробник міг послідовно перенести дизайн у код.
Два сценарії в одному інтерфейсі
На головному екрані є два прямі переходи: запис на процедуру та перегляд продукції. Така структура враховує різні наміри відвідувача: знайомство з послугами не має заважати покупці, а магазин — приховувати запис до студії.
Вибір процедури — від фотографії до деталей
Сторінка процедур поєднує великі фотографії з короткими описами, тривалістю та вартістю. Картки допомагають порівняти варіанти, перейти до подробиць і продовжити шлях до запису.
Магазин у стилі студії
Для магазину передбачили категорії догляду, фільтри за категорією, брендом і типом продукту. Каталог також враховує різні правила показу ціни: для частини позицій відвідувач бачить ціну одразу, для інших — запрошення увійти в обліковий запис.
Картка товару з усією важливою інформацією
На сторінці товару відвідувач бачить галерею зображень, ціну, об’єм та вибір кількості. Інформацію про використання і склад розмістили в окремих розкривних блоках, щоб зберегти компактність сторінки.
Як знайти студію
Контактна сторінка допомагає підготуватися до візиту: показує адресу, фотографії будівлі та пояснює, яким входом скористатися. Так дизайн підтримує відвідувача і після вибору процедури.
Головна й магазин на телефоні
На мобільному зберегли прямі переходи до запису й магазину. Товари відображаються у дві колонки, а фільтри відкриваються окремою панеллю з кнопками застосування та скидання.
Instagram, який оновлюється разом зі студією
Клієнтка активно веде Instagram, тому ми інтегрували її стрічку в сайт. У блоці «Follow Us On Instagram» публікації відображаються у два ряди. Коли в Instagram з’являється новий пост, він автоматично підтягується на сайт — повторно додавати його в WordPress не потрібно.
Футер як продовження навігації
У футері зібрали категорії магазину, послуги, інформаційні сторінки та контактні дані студії. Поруч розмістили посилання на соціальні канали й форму підписки. Так відвідувач може перейти до потрібного розділу або знайти спосіб зв’язку й наприкінці сторінки.
Терміни та організація роботи
UX/UI-дизайн у Figma зайняв приблизно 30 днів, верстка й розробка на WordPress — близько 21 день. Невеликі додаткові правки виконували окремо.
Одна команда супроводжувала проєкт від планування до роботи готового сайту. Це об’єднало дизайн, технічну реалізацію, внесення контенту й запуск у послідовний процес.
Що отримала Liliway
Результат проєкту — новий адаптивний сайт із цілісним оформленням і наповненим товарним каталогом. Він поєднав два напрями бізнесу та створив основу для подальшого керування сторінками й асортиментом.
Єдиний сайт для студії та магазину
Послуги, шлях до запису й каталог косметики зібрані в узгодженій структурі.
Готова основа для керування контентом
Сторінки й товари доступні в WordPress та WooCommerce для подальшого ведення сайту.
Запуск із технічним супроводом
Налаштування домену, DNS та інтеграцій доповнили підтримкою розробника.
Коли доречний такий підхід
Якщо бізнес одночасно продає товари й надає послуги, ці напрями варто врахувати ще під час проєктування. У Liliway ми почали з користувацьких сценаріїв і структури, а потім перейшли до дизайну, розробки та наповнення.
Для подібного проєкту перегляньте розробку сайту під ключ та створення інтернет-магазину. Якщо вже маєте сайт і хочете обговорити його оновлення, напишіть нам про вашу задачу.
Дізнайтеся більше про розробку корпоративного сайту.
