voxtox: соцсеть с персонализированным аудиоконтентом
К нам обратился заказчик из Чехии — он работает директором по продукту в компании voxtox. Ребята решили сделать не просто музыкальный стриминг, а платформу, где пользователи могут слушать совершенно разный аудиоконтент: музыку, подкасты, новости и даже голосовые сообщения.
Концепция продукта — современное, персонализированное радио с элементами соцсети, которое дает возможность как потреблять контент, так и создавать его прямо в приложении. Например, записывать голосовые сообщения и подкасты. Весь контент максимально точно соответствует предпочтениям пользователя: даже реклама подбирается с учетом его интересов.
Страница веб-приложения voxtox
Пользователь может собрать свою аудиопрограмму из любого контента, доступного в voxtox, и поделиться ей с другими. А еще под каждым плейлистом можно оставлять комментарии, в том числе голосовые. По задумке создателей приложения, это мотивирует людей строить коммьюнити вокруг звука.
Команда работала над продуктом полтора года и выпустила MVP — мобильное и веб-приложение. Собрали обратную связь от юзеров, провели исследование на фокус-группах, пользовались продуктом сами, и поняли, что пользовательский путь и интерфейс нужно доработать. К тому же появились новые фичи, которых не было в MVP. А значит, менялась логика приложения, поэтому отдельные части приложения и флоу тоже нужно было менять.
Планировали справиться своими силами: директор по продукту взялся перерабатывать пользовательский опыт, а штатный дизайнер, который уже делал дизайн для MVP приложения, подхватил задачу по редизайну.
Но в какой-то момент команда voxtox поняла, что им нужен свежий взгляд на продукт и внешняя экспертиза от опытных специалистов в дизайне.
Заказчик влюбился в наши работы на Dribbble
На всякий случай напомним, что Dribbble — это популярная платформа, где команды дизайнеров и отдельные профессионалы делятся своими работами. На Dribbble проекты публикуют в виде «шотов» — небольших изображений, по которым можно быстро оценить дизайн и сразу понять, нравится он или нет.
Поэтому многие создают на Dribbble портфолио, а заказчики ищут там исполнителей. Кстати, про другие способы найти хороших UI/UX дизайнеров (а это может быть тот еще квест), мы рассказывали в этой статье — обязательно загляните.
Мы любим эту площадку и тоже выкладываем свои работы на Dribbble. Будущие заказчики не раз приходили к нам за дизайном именно после того, как увидели там наши работы. Ребята из voxtox не исключение 🙂
Директор по продукту искал портфолио с интерфейсами для соцсетей и аудиостримингов. Ему очень понравились наши Dribbble шоты и он связался с нами.
Одно из музыкальных приложений, которое мы делали. Dribbble шот
Приложение для подкастов, дизайн которого мы создали. Dribbble шот
Главная цель редизайна — привлечь новых пользователей
Клиент хотел, чтобы приложением voxtox могла спокойно пользоваться даже бабушка, которой внуки недавно подарили новый смартфон 🧓 То есть, путь пользователя должен быть максимально нативным, буквально — нажал на одну кнопку и вот он, твой контент.
По задумке заказчика, такая простота привлечет больше новых пользователей и повысит лояльность тех, кто уже использует приложение. Это и была главная цель редизайна.
Мы абсолютно согласны с тем, что принцип «чем проще, тем лучше» как нельзя кстати подходит для приложений. Стоит отказаться от лишних опций и не перегружать интерфейс ненужными элементами. Пользователи станут быстрее решать свои задачи и будут каждый раз благодарить вас за такое удобное и понятное приложение. А там и конверсия повысится.
Удивили дизайн-концептом
Мы хорошо поняли задачу клиента и были готовы лететь в редизайн, но у заказчика оказались другие планы 🙂 Параллельно с нами, он общался с еще несколькими командами и предложил всем им сделать тестовое задание — подготовить концепт главной страницы приложения. Так, кстати, она выглядела изначально.
Главная страница voxtov до редизайна
Клиенту было интересно увидеть, как разные дизайнеры могут выполнить одну и ту же задачу. Если наш концепт ему понравится — он был готов идти с нами дальше. У нас была одна неделя на работу.
Нам нужно было попасть в ожидания клиента, учесть пожелания, предоставленные референсы и уже имеющийся дизайн приложения. Мы хорошо понимаем, почему дизайн-концепты важны: они дают заказчику представление о нашей работе и экономят время, если ему не зайдет, а нам — возможность сразу проявить себя и продемонстрировать экспертизу.
И вот такой концепт сделали наши дизайнеры для voxtox в рамках тестового задания.
Концепт главной страницы приложения voxtox от дизайнеров Purrweb
Клиент отметил, что мы верно уловили вайб voxtox и отразили это в своем концепте. Ему понравился общий стиль, дизайн и качество нашей работы. Это было именно то, что нужно voxtox. Так что заказчик решил продолжать с нами.
Что нам предстояло сделать
Мы должны были:
-
- Разработать дизайн мобильного приложения, который отличался бы от других аналогичных продуктов.
- Обеспечить удобную и интуитивно понятную навигацию.
- Сделать так, чтобы пользователи выполняли задачи быстро и с минимальными усилиями, что повысит их лояльность к продукту.
- Создать взаимосвязанные страницы приложения, чтобы пользователь мог легко перемещаться между ними без необходимости возвращаться в главное меню.
- Учесть возможность будущих улучшений и расширений функций продукта.
Заказчик принес нам кучу материалов: позитивные и негативные референсы, схему, которая детально объясняет логику приложения и путь пользователя, а еще — заранее отрисованные схемки со всеми пожеланиями по новому UX. Их обязательно нужно было учесть в дизайне.
Доска в Miro с референсами от заказчика
Клиент сам продумывал пользовательский путь, но был готов обсуждать наши предложения и идеи, как можно сделать лучше.
Благодаря такому большому количеству вводных, мы легко погрузились в контекст. Нам не нужно было проводить предварительные исследования по лучшим решениям на рынке, а значит, мы быстрее взялись за саму задачу.
Когда клиент приходит к нам с ясным видением и пониманием, какой дизайн он хочет, это всегда плюс. Так гораздо больше шансов, что мы поймем друг друга и сделаем именно то, что нужно.
Функции voxtox и киллер-фича: реклама по геолокации
Главная функция — прослушивание аудиоконтента. Но у voxtox было много других фич, которые отличали его от стриминговых сервисов вроде Spotify или российской Яндекс.Музыки.
Функции voxtox
Некоторые функции выглядят очень необычно. Директор по развитию продукта voxtox объяснил, как они работают.
Например, благодаря истории прослушиваний или запросам, приложение знает, что пользователь футбольный фанат. Если во время матча его любимая команда забивает гол, бот voxtox создает новость и прерывает эфир, чтобы сообщить об этом.
Еще одна киллер-фича — аудиореклама на основе геолокации пользователя. Когда он проходит мимо определенных кафе или ресторанов, приложение рекомендует посетить их.
Команда voxtox планировала внедрить эти функции в обновленной версии продукта, и мы должны были разработать соответствующие экраны.
Результат: от черно-белых набросков — к готовому дизайну
Покажем несколько экранов, чтобы вы могли увидеть, как черно-белые наброски с примерным расположением элементов превращаются в готовый дизайн.
В наброске от клиента кнопки «лайк» и «сохранить», «комментировать» и «поделиться» находились в паре, но такое размещение противоречит привычным UX паттернам. К тому же все кнопки выстроились в один ряд. Это визуально перегружает пользователя, он теряется и не понимает, какое действие ему нужно совершить.
Мы решили сгруппировать кнопки по-другому: добавили между ними больше пространства, «поделиться» и «сохранить» разместили сверху — это ключевые действия, к ним нужно сразу привлечь внимание, а «лайк» и «комментировать» убрали ниже. Отображение цифр оставили только у лайков и комментариев, чтобы мотивировать пользователей к действию. Цифры у кнопок «сохранить» и «поделиться» не несут значимой информации, а только утяжеляют интерфейс.
Главная страница в светлой теме
Расположение строки поиска внизу нарушало пользовательские паттерны. Юзеры настолько привыкли, что поисковая строка в приложениях находится сверху, что могли бы просто не заметить её.
Разгрузили навигацию верхнего меню: в наброске здесь было примерно все, что есть в приложении 🙂 Мы оставили только важное. Аккуратно разместили все разделы в центре экрана, так, чтобы пользователь мог просканировать содержимое и сразу понять, в какой раздел приложение хочет попасть и какое действие ему нужно совершить.
В наброске в разделе запись очень много действий: пользователю предлагается тут же придумать название трека и загрузить обложку, удалить или сохранить запись. Все это может отвлекать от непосредственно записи.
Мы решили сфокусироваться на главном: во время записи предлагаем только или поставить на паузу, или завершить запись. Для последующих действий есть отдельные экраны.
Редактирование записи — на отдельном экране
Пользователь сохраняет треки в избранном, чтобы вернуться к ним позже и прослушать. Значит, главная задача раздела — отображать список всех сохраненных записей, помочь пользователю найти нужное по ключевым словам и воспроизвести всё или один конкретный трек.
В наброске все записи лежали вперемешку, и если бы мы реализовали такой дизайн, пользователи бы не сказали нам спасибо 🙂
Мы разграничили сохраненное по двум типам — аудиопрограммы (плейлисты) и отдельные записи. Так пользователь не запутается и точно найдет, что ему нужно.
Другие экраны приложения voxtox
Покажем еще несколько экранов. Во всех случаях мы помнили о главной бизнес-задаче клиента: сделать удобное приложение, к которому хочется возвращаться. Конечно, не забывали и о привлекательной визуальной составляющей.
Мы проявляли инициативу и предлагали варианты, которые, исходя из нашей практики в дизайне мобильных приложений, улучшали пользовательский опыт и были более эффективными чем то, что просил сделать клиент изначально.
Это было плодотворное сотрудничество: заказчик внимательно относился к нашим решениями и его фидбек всегда был по делу. Поэтому мы быстро двигались и сделали редизайн за 1,5 месяца.
Итог
Пока проект встал на паузу: заказчик ушел искать инвестиции. Но часть сделанных нами пользовательских флоу уже внедрили в мобильное приложение.
Директор по развитию продукта отметил, что мы на 85% соответствовали его ожиданиям 🙂 Учитывая высокую вовлеченность клиента, мы считаем это отличным результатом.
Он также отметил, что сотрудничество с Purrweb стало его лучшим опытом в IT. Наш проектный менеджер отвечала на сообщения клиента быстрее, чем его коллеги — его это очень впечатлило 🙂
Заказчик высоко оценил дипломатические навыки нашего проектного менеджера: она наладила коммуникацию между ним и дизайнером и на протяжении всего проекта помогала находить компромиссы.
Что, конечно же, сказалось на работе: фидбек отрабатывали грамотно, вопросы решали быстро, а лучшие решения искали вместе.
Мы уверены, что voxtox еще вернется и мы продолжим сотрудничество, внося свой вклад в создание нового интересного продукта в нише аудиостриминга.
Если вашему проекту нужен редизайн, заполните форму, чтобы связаться с нами. Мы внимательно выслушаем, поделимся опытом и прикинем цены и сроки.
