Tabs4me – сервис с гитарными разборами, где пользователь может быстро найти песню, открыть аккорды и разучивать её вместе с синхронным плеером. Плеер был killer-фичей продукта: он должен был связать текст, аккорды, такт и воспроизведение в один учебный сценарий.
На старте продукт собирали как бесплатный MVP: важно было сделать его удобным для пользователей и заложить основу для роста аудитории и авторов разборов пользовательского контента.
Клиент пришёл с запросом на редизайн, но без чёткого понимания, что именно мешает продукту расти. Я начал с UX-аудита, чтобы зафиксировать проблемные сценарии, расставить приоритеты и собрать первую версию вокруг действительно важных функций.
В проекте я отвечал за UX-аудит, конкурентный анализ, приоритизацию MVP, прототипирование, UI, адаптивы и UI-kit для разработки.
Проблема
Старый сайт закрывал базовую задачу, но создавал лишние сложности в ключевых сценариях и уступал конкурентам по удобству использования.
Основной сценарий:
Найти песню, открыть разбор, посмотреть аккорды и играть вместе с плеером.
Второй сценарий:
Добавить новый разбор и довести его до публикации без ошибок
Основные проблемы, которые я зафиксировал в аудите:
- ❌ Сложная навигация и структура → пользователь дольше шел до нужного разбора
- ❌ Слабые подборки и поиск → пользователь дольше искал разбор под свой уровень и задачу
- ❌ Перегруженная страница разбора → текст, аккорды и плеер конкурировали за внимание во время игры
- ❌ Непонятный сценарий добавления разбора → авторы чаще ошибались, бросали заполнение и оставляли публикации в черновиках
Ключевые гипотезы
- Пересобрать главную страницу и подборки как быстрый вход в контент, чтобы упростить поиск нужных песен.
- Добавить фильтры, поисковые подсказки и разные режимы отображения, чтобы пользователь быстрее находил подходящий разбор.
- Сократить расстояние между текстом, аккордами и плеером, чтобы сценарий изучения песни был удобнее во время игры.
- Развить плеер как учебный инструмент, чтобы пользователь мог разучивать фрагменты песни, а не только слушать её.
- Упростить добавление разбора через шаги, подсказки и обработку ошибок, чтобы авторы чаще доводили публикацию до конца.
Критерии успеха MVP: пользователь быстрее находит нужный разбор, может читать текст и аккорды без лишнего переключения внимания, использует плеер для разучивания фрагментов, а автор проходит добавление разбора по понятным шагам и доводит публикацию до конца.
Процесс работы
Я начал с 26-страничного UX-аудита текущего сайта: разобрал структуру, навигацию, сценарии поиска, просмотра и добавления разбора. По итогам аудита зафиксировал 40+ предложений по улучшению продукта и собрал их в гипотезы для MVP
Затем проанализировал самых сильных конкурентов AmDm и Ultimate Guitar: поиск песни, просмотр аккордов, работа с плеером, добавление разбора и адаптация под мобильный экран. Так я отделил обязательные функции MVP от идей для следующих релизов.
Фокус MVP
В первую версию я вынес только ключевые сценарии продукта: поиск песни, просмотр разбора и добавление нового контента. Поэтому основной фокус MVP был на четырёх разделах: Главной, Подборках, Странице разбора и Добавлении разбора.
Остальные идеи, включая плейлисты, форум, комментарии и дополнительные обучающие материалы, оставил на следующие итерации, чтобы не растягивать разработку. Для MVP было важнее довести до качества основной цикл: найти песню — открыть разбор — играть с плеером — при необходимости добавить свой разбор.
Для этого проекта я подготовил доску с референсами по ключевым направлениям: подборки, листинги, плееры, таблицы, текста песен и аккорды. Она помогла быстрее согласовать визуальное направление и не спорить о каждом решении на уровне вкуса.
Сделал детализированные прототипы, чтобы согласовать путь пользователя до финального UI.
В финале отрисовал дизайн в светлой и тёмной теме под десктоп и мобильные адаптивы. Отдельно проработал мобильный сценарий плеера, чтобы в будущем его можно было развивать в сторону мобильного приложения.
Ключевые решения
Главная
Главная страница представляет собой точку входа в продукт. Пользователь сразу видел поиск, подборки, популярные песни и основные направления, поэтому мог начать сценарий без лишнего изучения структуры сайта.
Подборки
Переработал страницу подборок так, чтобы пользователь мог быстрее найти подходящий разбор под свой уровень и задачу. Добавил более понятную структуру, фильтрацию для точечного выбора разборов и два режима отображения – карточный — для более визуального выбора, табличный — для быстрого сравнения песен по параметрам. Так пользователь мог искать разбор под свой уровень, стиль игры и задачу.
Добавление разбора
Упростил сценарий добавления разбора для авторов: сделал структуру страницы понятнее, добавил пошаговую логику, подсказки, обработку ошибок и предпросмотр.
Это снижало порог входа для музыкантов, которые добавляют разбор впервые, и делало сценарий предсказуемым для опытных авторов.
Главная цель решения – уменьшить количество ошибок при заполнении и снизить риск незавершённых черновиков.
Страница разбора
Пересобрал ключевой экран продукта вокруг основного сценария – читать, слушать и играть одновременно. Увеличил читаемость текста и аккордов, отделил служебную информацию от основного сценария и сделал акценты спокойнее, чтобы пользователь меньше отвлекался от игры.
Интерфейс стал чище и спокойнее для пользователей: сократил визуальный шум, усилил иерархию и упростил восприятие информации о песне, аккордах и параметрах разбора. Это помогло быстрее ориентироваться внутри страницы.
Плеер
Плеер стал главной фичей продукта, поэтому по нему было больше всего итераций: нужно было совместить воспроизведение, смену аккордов, управление темпом и возможность отдельно тренировать сложные фрагменты.
Для пользователя он делает разучивание песни понятнее и удобнее: он показывает смену аккордов в реальном времени, помогает удерживать ритм и отдельно прорабатывать сложные фрагменты синхронно с аккордами.
Функционал «Играть фрагмент»
Функция «Играть фрагмент» закрывала отдельный учебный сценарий: пользователь мог выбрать сложный участок, зациклить его и отработать отдельно. Это делает продукт полезнее именно в обучении, а не только в просмотре разборов.
Дополнительно добавил закрепление и свободное размещение аккордов рядом с текстом. Пользователю не нужно постоянно возвращаться в начало страницы, чтобы вспомнить аппликатуру и продолжить синхронно играть.
Мобильный интерфейс плеера
Отдельно спроектировал мобильный сценарий плеера: сохранил ключевые действия — воспроизведение, аккорды, фрагменты и управление, но перестроил компоновку под маленький экран. Это позволяло заниматься с телефона без потери основного учебного сценария.
Результат «Было – Стало»
Ниже — сравнение ключевых экранов до и после редизайна: вход в контент стал быстрее, подборки понятнее, добавление разбора структурнее и плеер удобнее для обучения.
Итоги
В результате редизайна сервис Tabs4me стал понятнее и удобнее для двух основных сценариев: изучения разборов и добавления нового контента. Пользователю стало проще находить нужные песни, ориентироваться внутри страницы разбора и использовать плеер как инструмент обучения. Для авторов сценарий публикации стал более структурным и понятным, с подсказками, предпросмотром и обработкой ошибок.
Цифры проекта
- 4 ключевые раздела
- 26-страничный UX-аудит
- 40+ предложений по улучшению продукта
- 12 гипотез, собранных по итогам аудита и конкурентного анализа
- 120 дизайн макетов отрисовано с учетом темной темы
- 64 мобильных адаптива, включая сценарий плеера
- 40 компонентов собрано в Figma
Главный вывод: в подобных музыкальных сервисах интерфейс должен поддерживать пользователя в самом процессе игры, когда внимание уже занято инструментом, ритмом и текстом песни. Поэтому я сфокусировался на странице разбора, читаемых аккордах и плеере, который помогает учиться без лишних переключений и отвлечения от музыки.