Barberlink

Об проекте:

Barberlink — это цифровая платформа для удобного взаимодействия клиентов и барберов.

Сервис позволяет клиентам:

Находить барберов по локации с использованием фильтров
Просматривать портфолио мастеров, их расписание и цены
Бронировать встречи с барберами и оплачивать их картой
Управлять записями: отменять, переносить, отслеживать в календаре
Общаться с барберами напрямую в приложении

Для барберов Barberlink предоставляет:

Персональный кабинет для управления записями
Календарь встреч с разными возможностями
Возможность устанавливать цены и редактировать услуги
Инструменты для ведения портфолио и редактирования профиля
Функционал спец.ссылок для приглашения своих клиентов

Процесс работы над продуктом

Исходные данные и старт проекта:

Проект заказан клиентом из Австралии, которого нашел project manager студии. Вся коммуникация велась через него, а я полностью отвечал за весь продуктовый процесс.

На старте были рассмотрены:

Технические и функциональные требования
Ожидания клиента относительно ключевого функционала
Основной референс — конкурентный сервис на рынке

Клиент хотел полностью скопировать успешного конкурента, но я и project manager настояли на необходимости уникального подхода, улучшенного UX и современной визуальной составляющей. Мне удалось защитить эту позицию и убедить заказчика, что проект должен отличаться не только внешне, но и в удобстве использования.

Собрали документацию с хотелками, которую в целом функционал предполагал и что хотелось бы видеть в MVP в первую очердь, а что уже по приоритету

Исследовательский этап:

🔍 Анализ рынка и конкурентов Так как у меня не было данных о рынке Австралии, я провел обширное исследование:

Изучил прямых конкурентов и их сильные/слабые стороны
Рассмотрел смежные сервисы с функционалом бронирования (фитнес, отели, доставка еды, шеринг)
Определил миссию, видение и метафоры продукта
Разработал уникальное Value Proposition для Barberlink
Собрал данные от клиента и всё что они смогли изучить
Собрал данные с исследований, которые были проведены нашим project manager

📌 Формирование требований и ограничений

Сформулировал требования и ограничения
Разработал Flow Maps для основных сценариев взаимодействия
Сформулировал Jobs to Be Done на основе анализа конкурентных решений, общих пользовательских сценариев и логики продукта
Разработал информационную архитектуру исходя из всех собранных данных

На этапе проектирования бронирования я упростил один из шагов, который присутствовал у конкурента, так как 2 действия можно объединить в один шаг и обосновал свое решение перед клиентом. Это помогло сделать процесс бронирования быстрее и удобнее.

Проектирование и визуальная концепция

🗂 Информационная архитектура Построил карту приложения, выделив основные компоненты и взаимосвязи между ними. Утвердил структуру с project manager.

🎨 Moodboard, refs, style

Собрал мудборд и референсы для визуального направления
Отслоил несколько стилистик в которых пенциально можно двигаться

📐 Wireframes и прототипирование

Разработал wireframes как для мобильного приложения, так и для веб-версии (клиент и барбер)
После утверждения перешел к сбору основных слоев для ui

🎨 Стилистика, шрифты, цвета, приёмы

Выбрал шрифт, составил цветовую палитру и начал двигаться по стилистике, которую отобра

Разделил по частям сразу же конкурентов, стилистику, направление и просто рефы для настроения

wireframes hi-fi (клиенты и барберы)

Разработка UI и подготовка к передаче

🎨 Дизайн и оформление

Отрисовал все экраны мобильного приложения и веб-версии
Сделал адаптивные версии интерфейсов

📦 Подготовка для разработки

Собрал UI-kit, завернул в компоненты и Auto Layouts
Создал систему цветов и шрифтов
Оформил всю документацию в Figma

Заказчики не хотели использовать вертикальный скроллинг, а предпочли слайдер. Почему я согласился? Потому что после первого релиза этот экран будет переделан — появится карта и изменятся карточки. Я сделал их максимально удобными с точки зрения важности информации, чтобы пользователь сразу получал всё необходимое.

Фильтры были в приоритете — мы собрали все нужные параметры, чтобы упростить поиск и позволить пользователям быстро найти подходящий вариант.

Если пройти по карточке, то можно получить всю информацию о барбере, словно на странице соцсети.

Управление назначенными встречами удобное:
— возможность отменить или перенести встречу,
— чат с барбером,
— просмотр истории посещений,
— оставление отзывов.

Flow бронирования — простой и пошаговый. Я убрал лишнее, оставив только необходимое, чтобы встречу можно было забронировать за пару кликов.

Теперь перехожу к экранам для барберов

Dashboard включает:
— переключатель с основными разделами,
— ключевую аналитику,
— список встреч на сегодня,
— карту и сумму заработка за день.

Календарь — классический, с цветными бейджами, обозначающими статус бронирования. Барбер может отметить отгулы, и эта информация будет отображаться у клиентов.

Веб-версию продукта нет смысла полностью разбирать, так как она по сути имеет тот же функционал, но адаптирована под браузер

И дизайн-система, которую я собрал в figma. Со всеми артефактами и компонентами

Результаты и личные итоги

✅ Полный цикл разработки дизайна продукта в одиночку
✅ Выстроенный удобный UX с учетом слабых мест конкурентов
✅ Уникальное визуальное оформление, которым не выделяются конкуренты
✅ Готовность к масштабированию и возможному подключению функционала для владельцев барбершопов

Проект все еще находится в разработке, но вся необходимая работа по проектированию, исследованию и подготовке для реализации была завершена. Я получил ценный опыт ведения сложного продукта в одиночку — от идеи до финальной документации, отстаивая свои дизайнерские решения перед клиентом и project manager'ом. Это позволило мне развить навыки комплексного подхода к продукту, аргументации UX-решений и создания масштабируемых UI-систем.