Приложение для здравоохранения
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 с макетами для компьютера, планшета и телефона.
