Задача
Создать сайт для барбершопа, который сохранит офлайн-характер бренда, познакомит с командой и поможет быстро записаться
Проблема
- Барбершоп существовал офлайн: у него уже были пространство, атмосфера и фирменный цвет, который использовался в интерьере
- Но в онлайне это никак не было собрано в цельную систему
Бизнес цель
- Сформировать для бренда первую полноценную цифровую точку контакта
- Перенести визуальный характер барбершопа из офлайна в онлайн
- Сделать сайт простым, аккуратным и профессиональным по подаче
- Сократить путь пользователя к записи и убрать лишние шаги в сценарии
Ограничения
- Фирменный цвет уже был частью офлайн-образа бренда, поэтому менять его нельзя было
- Сайт нужно было не только спроектировать, но и собрать как рабочее решение на Tilda
- Сделать сайт простым, аккуратным и профессиональным по подаче
- Интерфейс должен был получиться простым, понятным и без лишней перегрузки
Процесс
- Анализ конкурентов и смежных сайтов
- Сбор визуальных референсов
- Формулировка Job Stories и ранние гипотезы
- Проверка логики решений на этапе структуры и сборки
- Разработка визуальной концепции
- Реализация сайта на Tilda
Анализ конкурентов
Проанализировал сайты конкурентов, чтобы выявить лучшие практики и проблемные места в ключевых сценариях
В ходе анализа выяснилось, что сайты барбершопов часто строятся по похожей логике: с понятной структурой, но без ярко выраженного характера бренда.
Поэтому для ПЕРС БАРБЕР было важно сохранить удобство, но собрать более цельный визуальный образ и упростить путь к записи
Сбор визуальных референсов
Я искал референсы не только среди сайтов барбершопов, но и в типографике, постерах и винтажной печатной графике. Меня интересовал не буквальный газетный стиль, а крупные заголовки, жёсткая иерархия, плотная композиция и винтажные детали.
Это помогло собрать для Перс Барбер более цельный и характерный образ
Job Stories и ранние гипотезы
Чтобы понять, как пользователь будет взаимодействовать с сайтом в разных ситуациях, я описал ключевые сценарии через Job Stories.
Это помогло определить, что именно важно вынести в структуру, где размещать запись и как сократить путь к целевому действию
Это помогло определить, что именно важно вынести в структуру, где размещать запись и как сократить путь к целевому действию
На основе Job Stories я сформировал ранние гипотезы — не как готовые интерфейсные ответы, а как предположения о том, что может помочь пользователю быстрее дойти до записи и лучше считать образ бренда
Проверка гипотез и уточнение решений
Я не проводил отдельное формальное юзабилити-тестирование, поэтому валидация происходила через анализ сценария, сравнение вариантов структуры, проверку логики переходов и сборку реального сайта на Tilda
В ходе проектирования и сборки стало понятно, что не все ранние предположения работают одинаково хорошо
Структура сайта
Структура сайта построена вокруг простого и последовательного сценария: от первого впечатления о бренде к записи
Приоритет был не в том, чтобы рассказать всё сразу, а в том, чтобы быстро ответить на главные вопросы пользователя:
- что это за место
- какой у него характер
- какие есть услуги
- сколько это стоит
- как записаться
Такой порядок помогает быстро показать атмосферу, ответить на ключевые вопросы пользователя и довести его до целевого действия без лишней перегрузки
Дизайн-концепция
Визуальная система сайта строилась вокруг уже существующего фирменного цвета, который был частью офлайн-образа ПЕРС БАРБЕР
Так как этот цвет уже использовался в пространстве барбершопа, важно было не спорить с ним, а встроить его в более цельный и современный digital-образ
Итоговые UX-решения
После проработки сценариев и уточнения гипотез в проект вошли несколько ключевых решений, которые напрямую влияли на удобство записи
1．Запись доступна в нескольких точках страницы
1．CTA был размещён на первом экране, в шапке и в футере. Это позволило не привязывать переход к записи к одной конкретной точке и дало пользователю возможность действовать в тот момент, когда он уже готов
2. Умное поведение шапки
2．При скролле вниз шапка скрывается и не мешает просмотру контента. При скролле вверх — возвращается и снова открывает быстрый доступ к целевому действию
3. Прямой переход на конкретную услугу
3．В блоке с ценами каждая услуга стала кликабельной и ведёт сразу на соответствующую позицию в сервисе записи. Это сокращает путь пользователя и убирает лишний шаг в сценарии
4. Простая и понятная структура
4．Сайт не перегружен декоративными или второстепенными блоками. Основной акцент сделан на том, чтобы пользователь быстро понял, куда попал, какие услуги доступны и как перейти к записи
5. Связь офлайна и онлайна
5．Фирменный цвет и общая визуальная подача помогли сделать сайт продолжением физического пространства бренда, а не случайной цифровой страницей «в отрыве» от самого барбершопа
Реализация на Tilda
После проектирования визуальной концепции и структуры я собрал сайт на Tilda
Для меня было важно не ограничиться макетом, а довести решение до рабочего состояния: с реальным скроллом, поведением шапки, переходами в сервис записи и адаптацией под устройство
Tilda в этом проекте выступала не как компромисс, а как инструмент, который позволил быстро реализовать и запустить сайт без потери визуального качества и ключевой UX-логики
Что в итоге:
- Спроектировал и собрал сайт для реального бизнеса с нуля
- Сохранил фирменную визуальную основу бренда и перенёс её в digital-среду
- Выстроил простой пользовательский путь к записи
- Сократил количество действий в сценарии выбора услуги
- Реализовал сайт как рабочее решение на Tilda, а не только как концепт
