Сайт и booking-платформа для сети студий красоты NailLounge
Пересобрали цифровую витрину NailLounge как продуктовую платформу: выразительный сайт сети из 5 студий, собственная дизайн-система, каталог услуг и мастеров, онлайн-запись с актуальными слотами из YCLIENTS.
Итог: Клиент получил не просто лендинг, а управляемую систему записи: мобильный booking-flow, веб-виджет в фирменной оболочке, аналитику успешных записей и контентную основу для SEO по студиям, услугам и мастерам.
Product surface
Website + web booking
5
локаций в СПб
21 день
горячий горизонт календаря записи
SWR
быстрое повторное открытие booking-flow
90 дней
prefill для повторной записи
01 / Brief
С чем пришёл клиент
NailLounge вырос из набора отдельных точек контакта в сеть из пяти студий, но цифровой опыт должен был стать единым: человек приходит с телефона, быстро понимает характер бренда, выбирает услугу, мастера и ближайшее удобное окно без звонка администратору.
Стандартный виджет YCLIENTS не закрывал задачу: он не давал нужного визуального контроля, не поддерживал фирменный сценарий студий и не позволял показать свободные окна так, как это нужно сети с несколькими локациями.
Параллельно требовалась основа для роста: страницы студий, услуг и мастеров, юридические документы, SEO-разметка, аналитика записи и технический слой, который не раскрывает API-токены и выдерживает всплески запросов к расписанию.
02 / Execution
Как мы это решали
Решения разложены как цепочка продуктовых слоёв: от входа в запись до аналитики, кэша и SEO-структуры. Каждый слой поддерживает основной сценарий, а не существует ради отдельной технологии.
Собственный booking-flow вместо внешнего виджета
Сценарий записи живет внутри сайта: студия, услуга, мастер, дата, слот, подтверждение. Виджет принимает preset-параметры со страниц услуг, мастеров и студий, поэтому пользователь попадает в нужный контекст без повторного выбора.
Быстрый старт через prefetch и browser SWR
При hover, focus или touch по CTA сайт заранее грузит chunk виджета, услуги и мастеров. Данные сохраняются в localStorage с stale-while-revalidate, поэтому повторное открытие записи не начинается с пустого загрузчика.
Кэш-сервис как защитный слой перед YCLIENTS
Next.js не ходит в YCLIENTS напрямую из браузера. Запросы идут через серверные API и Nail-Lounge-Cache: там живут токены, Redis SWR, rate limiting, диагностика слотов и write-timeout для создания записи.
Подбор даты и времени без внешнего перехода
Свободные дни и времена показываются внутри booking-widget после выбора услуги и мастера. Кэш-сервис помогает быстро открыть сценарий, а критичный шаг выбора слота перепроверяется перед созданием записи.
Аналитика записи до уровня выручки
Успешная запись отправляет `booking_success`, сохраняет Metrika ClientID, пушит ecommerce purchase в `dataLayer`, различает источник CTA и помечает повторных клиентов через prefill.
Повторный визит без лишнего ввода
После успешной записи сайт сохраняет имя и телефон на ограниченный срок. При следующем открытии формы клиент видит заполненные данные и может очистить их, если устройство не его.
SEO, AEO и юридический контур
Страницы студий, услуг, мастеров, FAQ и документы согласия встроены в одну структуру. Для поисковых систем и AI-краулеров добавлены sitemap, robots, llms.txt и JSON-LD по сети студий.
03 / Design system
Студии как единый узнаваемый продукт
Для NailLounge была собрана дизайн-система, которая держит премиальный, уверенный характер бренда и одновременно обслуживает практичный сценарий записи. Она задает не только цвета, но и поведение CTA, карточек мастеров, страниц студий, промо-блоков и состояния виджета.
Registered token rail
Цвета показаны как роли дизайн-системы, а не как декоративная палитра.
Background
--brand-color-background
Inverse text and host-required white background.
Foreground
--brand-color-foreground
Primary ink, CTA text on ember, dense copy on cream.
Accent
--brand-color-accent
Single dominant action, active focus, emotional emphasis.
Surface
--brand-color-surface
Warm editorial panels, fields and light sections.
Muted
--brand-color-muted
Dark stage, footer metadata, overlays behind imagery.
Border
--brand-color-border
Rules, card outlines, form borders.
Accent secondary
--brand-color-accent-secondary
Secondary text on dark stage, quiet links, dividers.
Measured copper
reference color
Measured evidence from reference surfaces, not a primary token.
Component specimen
Запись в студию
Nail artist
Маникюр, укрепление, дизайн
State
Контекст сохранён
Палитра
ink, ember, cream
CTA
один orange-action
Mobile
touch-first booking
Motion
hero + micro states
Компоненты
shared token contract
Флоу
сайт ведет в запись
Studio Ember palette
Темная теплая база, оранжевый акцент, светлая cream-тема и контрастные состояния для фокуса, ошибок, успеха и рейтингов. Палитра выдерживает WCAG AA на ключевых элементах.
Editorial voice
Крупная уверенная типографика, короткие формулировки и italic-серифные акценты в брендовых местах. Сайт не выглядит как типовой салон красоты из пастельных шаблонов.
Component contract
CTA, sticky-кнопки, карточки мастеров, сервисные блоки, календарь записи и модальные состояния используют общий набор токенов, радиусов, теней и motion-таймингов.
Mobile-first behavior
Основной сценарий рассчитан на телефон: sticky CTA, крупные touch targets, сохранение контекста выбора, отсутствие hover-only зависимостей в критичных действиях.
Motion with restraint
Анимация поддерживает брендовый момент и не блокирует запись. Для `prefers-reduced-motion` предусмотрены спокойные альтернативы без потери контента.
Design system as documentation
PRODUCT.md и спецификации фиксируют аудиторию, tone of voice, анти-референсы, motion-систему и правила развития интерфейса, чтобы новые разделы не расползались визуально.
04 / Stack
На чём собрано
Технический стек показан как производственная схема: интерфейс, интеграции и инфраструктура поддерживают одну цепочку записи.
Frontend
- Next.js 16 (App Router, Server Components)
- React 19, TypeScript strict
- Tailwind CSS 4 + shadcn/ui (Radix)
- Framer Motion, next-themes (light/dark)
Интеграции
- YCLIENTS API через Nail-Lounge-Cache
- Yandex Metrica, ClientID capture и ecommerce dataLayer
- Yandex SmartCaptcha на формах
- Yandex Maps с виджетами отзывов
Инфраструктура
- Vercel / Coolify (Docker) как deploy-target
- sharp для production image optimization
- Redis SWR, server-only адаптеры, request coalescing
- SSE-события доступности и idempotency key для booking POST
05 / Evidence
Визуальные артефакты кейса
Скриншоты поданы как доказательства продуктовой системы: сайт, сценарий записи, web-виджет и дизайн-система студий.
Product surfaces
Публичный сайт работает как сеть связанных поверхностей: главная задает бренд, каталоги услуг и мастеров ведут в запись, страницы студий закрывают локальный спрос.
Вопросы, которые чаще всего задают по проекту
Коротко по техническим и продуктовым решениям NailLounge.
Приём заявок временно приостановлен
Мы временно не обрабатываем заявки через форму. Свяжитесь с нами напрямую:
- Email: it@nextprism.ru
- Телефон: +7 904 555 92 92