Лидеры года — новая категория на Workspace Digital Awards! Номинируйте вашу команду, продукты и проекты.
Purrweb
Сделали соцсеть, которая объединит тату-мастеров и их клиентов. Кейс TiesTattoo
Purrweb
#Приложение под ключ

Сделали соцсеть, которая объединит тату-мастеров и их клиентов. Кейс TiesTattoo

8 
Purrweb Россия, Омск
Поделиться: 0 0 1
Сделали соцсеть, которая объединит тату-мастеров и их клиентов. Кейс TiesTattoo
Сфера

Информационные технологии и интернет

Мобильная платформа

iOS, Android

Сдано

Март 2025

Задача

Стоит ли в 2025 году разрабатывать новую соцсеть, когда кажется, что все уже придумано? Да! Главное, найти свою нишу и сосредоточиться на узкой тематике.

Когда заказчик рассказал нам про идею TiesTattoo, мы сразу загорелись проектом. Соцсеть, которая объединяет тату-мастеров, студии и клиентов — это же круто!

В кейсе расскажем, как разработали приложение, аналогов которому нет на российском рынке.

Идея приложения

Сколько человек в России носят татуировки? ВЦИОМ в 2019 приводил такие данные: 11% взрослых россиян. Наверное, сейчас этот показатель стал еще больше 🙂

Но где людям, которые хотят набить тату, искать проверенных мастеров? Обычно прибегают к силе сарафанного радио: знакомые и друзья советуют классного мастера. Или смотрят соцсети и отзывы. Но такой ресерч отнимает много времени: можно пару часов пролистать ленту, а так и не найти «того самого». Да и не у всех есть приятели, которые могут порекомендовать лучшего тату-мастера в городе.

В свою очередь, мастерам тяжело продвигаться по разным каналам. Чтобы тебя заметили, нужно вести несколько соцсетей. Но это не гарантирует постоянного притока клиентов: всегда есть риск затеряться где-то в дебрях рекомендательных алгоритмов.

Наш заказчик сам часто ходит в тату-студии и не понаслышке знает об этих болях. Он решил: почему бы не объединить мастеров и людей, которые их ищут, на одной площадке?

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

Заказчик видел приложение так: в нем есть лента постов, реализован поиск через удобные фильтры, есть чаты, где клиент и мастер могут договориться о сеансе. Можно подписаться на интересные аккаунты и добавлять друг друга в друзья.

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

Задумка показалась нам классной, и мы очень хотели взять этот проект. К счастью, заказчик решил доверить создание приложения именно нашей команде.

Наши задачи

В рамках проекта нам предстояло:

• 🎨 Создать привлекательный интерфейс, который отражает тематику тату

• 👣 Продумать простой и понятный путь пользователя

• ⚙️ Разработать приложение с ключевыми фичами: лента, поиск мастера или студии, профиль

• 🖥️ Сделать админ-панель для менеджмента юзеров

• 📱 Зарелизить приложение в сторах

У заказчика был ограниченный бюджет, поэтому сначала мы делали только дизайн. Потом проект встал на паузу, но мы знали, что это временно 🙂 Заказчик вернулся к нам за разработкой чуть позже. Но было важно оставаться в рамках бюджета. Поэтому мы предложили сфокусироваться на базовой функциональности, без которой точно нельзя выходить в релиз. Да, это классический MVP-подход, который отлично подходит для стартапов.

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

Решение

Похожее приложение — Tattoodo — есть в Европе: так выглядит его интерфейс. В России же ничего подобного не было, а потенциальная аудитория достаточно большая

Как все устроено в TiesTattoo

В приложении три роли:

  • клиент 😎

  • мастер 💪

  • студия 🤘

Роль нужно выбрать на этапе регистрации — это важно, поскольку влияет на некоторые возможности.

Выбор роли при регистрации

У любого пользователя есть профиль. Но мастер или студия, кроме имени и био, размещают в профиле профессиональные данные: адрес, опыт работы, ценовой диапазон, стили, в которых они работают, есть ли дополнительные услуги — например, пирсинг. На основе этой информации работает поисковая выдача по фильтрам.

Дизайн похож, но у мастера и студии на аватарке есть соответствующая яркая плашка. А еще в профиле студии можно посмотреть информацию о мастерах, которые там работают, и фото сделанных ими тату

Вне зависимости от роли, пользователь в приложении может:

  • просматривать ленту, ставить лайки, писать комментарии к постам, делать репосты;

  • публиковать свой контент;

  • добавлять других юзеров в друзья и/или подписываться на интересные аккаунты;

  • добавлять спамеров в черный список;

  • отправлять личные сообщения другим пользователям.

Киллер-фича TiesTattoo — продвинутая система фильтров для поиска тату-мастера. Это важная функция, которая помогает сэкономить время: юзер видит только тех мастеров, которые соответствуют его конкретным запросам.

Учли все параметры, по которым люди могут искать тату-мастера — от цены до стиля татуировок и части тела, где хочется набить

При выборе параметра «Части тела» пользователь попадает на страницу с интерактивным элементом: чтобы выбрать зону для тату, нужно кликнуть на соответствующие части тела 3D-человечка. Кстати, его можно крутить 🔄 Актуально для тех, кто хочет набить тату на спине.

Результаты поиска отображаются списком. Их можно отсортировать — например, выбрать сначала дешевле или дороже.

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

Основные функции доступны бесплатно, но в приложении есть монетизация. Подписка позволяет полностью отключить рекламу. А мастерам и тату-студиям подписка дает приоритетную выдачу в поиске.

Создаем айдентику и ищем метафору

Чаще всего у стартапов нет проработанной айдентики и готового брендбука. Поэтому наша задача, как экспертов в дизайне мобильных приложений, не только отрисовать удобные и понятные флоу, но и найти для наших заказчиков уникальный визуальный стиль и позаботиться об эстетике.

Так было и на проекте TiesTattoo: у заказчика не было конкретных пожеланий по стилистике, кроме одного — он видел приложение в темных тонах.

Мудборд, который мы собрали, чтобы понять направление стилистики

Основываясь на информации от заказчика из брифа, анализе конкурентов — прямых мало, смотрели приложения для поиска исполнителей услуг — мы сделали дизайн-концепт и придумали метафору для TiesTattoo.

Татуировка — это часть истории человека. Мы решили сравнить линии тату с линиями жизни и пронести эту метафору через всю стилистику приложения.

Метафора

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

Цветовая палитра приложения

Подобрали интересную шрифтовую пару: декоративный шрифт для заголовков и основной. Оба шрифта бесплатны — так мы экономим бюджет заказчика.

Элементы декоративного шрифта Philosopher напоминают линии тату — это связка с метафорой приложения. Основной шрифт отличается аккуратностью и сдержанной стилистикой, хорошо читается

Одно из самых интересных UI-решений — это обложка в профиле пользователя. В шапке можно загрузить свою обложку, но мы также сделали красивую дефолтную: ненавязчивая анимация с переплетающимися линиями, которые образуют узоры — горы, бриллианты, киты 🐋

Снова отсылаем к метафоре — линии тату переплетаются и становятся событиями жизни, историями и впечатлениями:

Еще мы разработали логотип приложения. В его основу легла та самая метафора про тату и линии жизни.

Логотип приложения

Нам нравится работать над деталями: ведь именно они часто определяют настроение и восприятие продукта. Так, мы решили добавить ненавязчивую анимацию для лайка: когда пользователь ставит сердечко, оно оживает на экране переплетающимися линиями.

Визуализация лайка

Интегрируем нужные сервисы

Мы интегрировали в TiesTattoo несколько популярных сервисов. Не обошлось без некоторых трудностей, но мы придумали, как с ними справиться!

🗺️ Для работы с картами использовали библиотеку от Яндекс.Карт. Но она оказалась устаревшей и больше не поддерживалась. Чтобы адаптировать ее под задачи проекта, пришлось вручную исправить множество багов и добавить собственные патчи.

💳 Для безопасных платежей интегрировали CloudPayments. На одном из этапов столкнулись с несовместимостью текущего стека и одной из версий SDK. Нашли решение: использовали предыдущую стабильную версию, которая полностью закрыла наши потребности.

💬 Pusher применили для реализации функции чатов. Он требует написания кастомного кода под каждый проект, а это увеличивает сложность разработки. В процессе у нас даже возникла идея создать универсальный шаблон для чатов, который можно было бы повторно использовать в будущих проектах — как на фронтенде, так и на бэкенде.

📊 Для аналитики выбрали MyTracker — инструмент от VK. В ходе работы обнаружили две проблемы, но поддержка сервиса оперативно откликнулась, и все вопросы решили очень быстро.

Приложение разрабатывали на React Native — проверенный стек для создания кросс-платформенных продуктов. Он хорош тем, что нам не нужно разрабатывать отдельные приложения для iOS и Android. Конечно, это экономит время и бюджет проекта.

Летим в релиз первой версии

В момент активной разработки заказчик рассказал, что скоро примет участие в профильной конференции, на которой много заинтересованных людей из тату-сообщества. Поэтому было бы круто показать им готовое приложение. Уже в сторах. Конференция через два месяца.

Не то чтобы мы не были готовы: это же разработка IT-продуктов, тут всегда есть место неожиданностям! Поэтому мы применяем гибкие методологии, которые позволяют нам быстро адаптироваться под задачи клиентов и перестраивать работу, если нужно. К тому же у нас уже был похожий пример, когда заказчику нужно было презентовать продукт на отраслевой конференции, и мы должны были закончить работу за два месяца. Так что мы знали, что нужно делать.

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

Договорились с заказчиком, что остальные фичи, которые на данном этапе не так критичны, перенесем на пост-релизный период. Это, например, разработка админ-панели и добавление платежки.

В итоге мы успели к дате конференции.

Подготовили скриншоты для сторов

Результат

Приложение в релизе: TiesTattoo можно скачать в App Store, Google Play и RuStore.

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

https://apps.apple.com/ru/app/tiestattoo/id6503290580

Стек технологий

  • React Native React Native Фреймворк/библиотека
  • Figma Figma Графический редактор

Оцените кейс
Спасибо за оценку
Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

Purrweb с удовольствием обсудит вашу задачу

Оставить заявку