Застосунок для охорони здоров’я
UX продукту
КейсиШаблон кейсу · Lips by Lara
Lips by LaraКраса · Сайт
Послуги
Інструменти
Стек технологій
Краса · Сайт
Lips by Lara
Сайт естетичної практики Lara, що поєднує виразний візуальний дизайн, анімованого персонажа й конструктор процедур. Відвідувачі можуть дослідити зони, відкрито побачити ціни та скласти план для обговорення з Lara.
Дати практиці повноцінний онлайн-досвід
Lara відповідала на ті самі запитання в особистих повідомленнях і хотіла показувати ціни без окремого звернення. Ми розробили сайт, який знайомить із її практикою, допомагає розібратися в докладному переліку процедур і дає постійне місце цим відповідям.
Наш внесок
Ми сформували зміст і структуру сайту, спроєктували візуальну мову, створили AI-персонажа та її анімацію, розробили адаптивний сайт і оформлення замовлення. Робота поєднала артдирекцію, рух і механіку вибору процедур.
Ми згрупували процедури за зонами й спроєктували персонажа, картки та план як єдиний досвід. Поруч створили окремі сторінки цін, підготовки, догляду й FAQ, на які Lara може давати прямі посилання.
Візуальний напрям
Візуальний напрям ми побудували на виразній антикві, м’якому рожевому тлі й бордових акцентах. Великий портрет задає початкову композицію: навколо героїні вільний простір і ретельно розміщені картки процедур. Конструктор від початку є частиною композиції: панелі, ціни й керування використовують ту саму мову, переносячи характер сайту в практичні дії.
01 / Персонаж і рух
Створити персонажа для рухомого інтерфейсу.
Створення персонажа потребувало опрацювати і зовнішність, і рух. Ми згенерували модель та анімацію, вибрали узгоджені послідовності й зібрали довгий цикл, щоб короткий жест не повторювався кожні кілька секунд.
Рух також мав узгоджуватися з інтерфейсом. Переходи побудовано навколо вибраних точок циклу, а картки процедур стежать за відповідними зонами під час руху героїні. Короткий фрагмент показує персонажа й картки разом у готовій сцені.
02 / Конструктор процедур
Зберегти зону, вибір і ціну в одному плані.
Прайс Lara містив понад 40 позицій за типами процедур. Ми перегрупували їх за зонами, щоб відвідувач, який вивчає частину обличчя чи тіла, бачив відповідні варіанти й ціни разом.
Зміна зони оновлює сцену й список процедур, зберігаючи попередній вибір. Додавання процедури пов’язує її картку, вибраний стан, кількість позицій і загальну суму. У початковому кадрі дві процедури для обличчя залишаються вибраними після додавання процедури для шиї; усі три разом з’являються в кошику.
Ми підключили оплату до власного Stripe-акаунта Lara й чітко пояснили наступний крок: план починає розмову, а платіж не бронює зустріч і не замінює оцінку Lara.
03 / Контент і підказки
Дати повторюваним запитанням відповідь, якою Lara може поділитися.
Ми вивчили опубліковані запитання на інших сайтах фахівців з ін’єкцій і зібрали власні відповіді Lara через структурований бриф. Так виник FAQ із пошуком: 50 запитань за п’ятьма темами, а поруч — рекомендації з підготовки та догляду після процедур.
Кожна відповідь має власне посилання. Lara може надіслати потрібне пояснення в повідомленні, а відвідувачі — повернутися до нього без пошуку в старому листуванні. Довідкові сторінки продовжують візуальну мову головної.
Результат
Повноцінний сайт — від візуального напряму до оформлення замовлення.
Запущений сайт поєднує індивідуальний візуальний дизайн, анімацію згенерованого персонажа, пов’язаний конструктор процедур, практичні рекомендації та оплату Stripe з макетами для комп’ютера, планшета й телефона.
