Назад

Как мы за 5 месяцев собрали приложение для второй волны и конкурента Headspace

С началом пандемии доходность мобильных приложений для здоровья и фитнеса по всему миру выросла примерно на 280%. Закрытые в своих квартирах люди решают за счет таких приложений решают две проблемы: низкая физическая активность и выросший уровень тревожности. Расскажу, как мы в Purrweb вместе с клиентом во время первой волны готовились ко второй и разрабатывали приложение для дыхания.

Время чтения: 5 минут

Содержание

    Приложение для второй волны 

    Каролина и Доминик из Сингапура обратились к нам в мае 2020 года с просьбой разработать UI и UX дизайн для приложения с дыхательными практиками. У заказчиков была экспертиза и клиентская база: до карантина Каролина преподавала йогу и дыхательные практики, а с приходом пандемии перенесла свои занятия в Zoom. Доминик интересуется воздействием дыхания на человека. А у нас был опыт разработки похожего приложения для сна.

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

    У конкурентов дыхательных курсов почти не было. Кроме того, в нашем приложении контент был авторским, некоторые упражнения уникальные, например, “маятник дыхания”. Для заказчика авторский контент стал отличной мотивацией разработать свое приложение.

    Бюджет проекта составил 30 000 $, которые заказчик инвестировал из личных сбережений.

    Проект под ключ и привычный стек

    Доминик и Каролина пришли к нам за UI и UX дизайном. Разработку MVP они планировали заказать в другом месте. Но на созвонах мы договорились, что сможем решить всю задачу. В MVP включили регистрацию, просмотр курсов, маятник дыхания, пуши, админку и возможность прослушивания в фоновом режиме. Выкинули из скоупа аватарки пользователей, реферальную систему и историю просмотров курсов, офлайн-режим.

    Дизайн: серый бетон и сочная зелень

    У Каролины и Доминика были предпочтения по дизайну, но не было понимания, как это реализовать. Они хотели сочетания сочной зелени, серого бетона и светлого дерева. Центральной частью дизайна стали фотографии. При этом заказчики были резко против рисованных иллюстраций — были уверены, что они не подойдут целевой аудитории. Чтобы разбавить серость бетона фотографии использовали с природными мотивами: вода, растения и камни. Мы предложили два варианта оформления, один из них подошел.

    разработка приложения для здоровья

    Форматы контента

    В контент на этапе MVP включили три формата:

    • статьи про дыхание и его влияние на нашу жизнь;
    • аудиоуроки и видеоуроки о дыхании от Каролины, которые можно слушать на ходу;
    • дыхательные упражнения.

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

    разработка приложения для фитнеса

    Много внимания уделили аудиоурокам. В приложении они разделены по задачам, которые хочет решить пользователь:

    разработка приложения для фитнеса

    Разработали режим Pendulum. Это конструктор практик, которые пользователь генерирует под свои потребности. Когда пользователь хочет попрактиковаться, он может создать под себя упражнение (выбрать интервалы дыхания: 5, 10, 15 секунд и продолжительность практики), и система сгенерирует под пользователя музыкальную дорожку, в такт которой нужно дышать.

    разработка приложения для фитнеса

    Команда и стек

    К проекту подключили трех программистов, дизайнера, менеджера и тестировщика. Использовали наш традиционный стек — React Native + Nest.js. React Native отлично подходит для мобильного приложения, тем более для MVP. Для CMS использовали библиотеку React Admin, в которой много готового функционала для создания админки. Но с ней нужно быть осторожным: порог вхождения высокий, так как не все заявленные фичи работают как написано в документации. Все как обычно: Stackoverflow и Github issues в помощь. Но мы использовали эту библиотеку не в первый раз, поэтому были готовы.

    Чтобы пошло быстрее, взяли лучшие части библиотеки, а остальную часть функциональности написали сами. Совместили — работает.

    Фичи вне скоупа и обход Инстаграма

    На этапе разработки мы переживали, что будут трудности с воспроизведением аудио на заблокированном экране. Это важно, ведь если мы позиционируем приложение как “возможность подышать на ходу”, у пользователя действительно должна быть возможность идти. Здесь мы в очередной раз порадовались выбранному стеку: фича прикрутилась очень просто за счет параметра в React-Native-video и не пришлось изобретать велосипед.

    Обход ограничений через плагины

    Для презентации приложения нам нужно было собрать лендинг, с которого пользователи могли бы переходить в магазин для скачивания приложения. Взяли Gatsby, который помогает загружать сайты в 2-3 раза быстрее, чем WordPress или Wix. Мы хотели автоматически подгружать посты из инстаграма приложения на лендинг. Для этого взяли плагин Gatsby “gatbsy-source-instagram”. Когда сели за разработку, поняли, что плагин помогает только получать список постов, а этого было мало: мы хотели отображать полноценные посты в ленте и регулярно ее обновлять.

    Тогда с помощью плагина мы получили доступ к постам в инстаграме, сделали сортировку на последние 10 постов и сверстали слайдер. Затем мы подключили наш репозиторий с лендингом к хостингу веб-приложений Netlify, который поддерживает динамические билды Gatsby. Но у Инстаграма нет вебхуков, которые сообщали бы Netlify об изменениях в ленте (они есть, но инстаграм сильно урезал функциональность плагина gatsby-sourse-instagram из-за накруток — и мы не могли отслеживать новые посты автоматически). Поэтому мы прикрутили Zapier, который позволил автоматизировать деплои Netlify. Таким образом, мы раз в день обновляем ленту инстаграма на лендинге.

    разработка приложения для фитнеса

    Вход по Face ID: проще, чем мы думали

    Для нас это был первый проект, в котором нужно было писать вход по Face ID, поэтому мы предполагали, что это не просто. Фичу сложно назвать важной в случае с приложением для дыхания, но заказчик настаивал на ней. Мы заложили два полных дня на реализацию, но справились за один: все оказалось гораздо проще. Сделали так, что приложение само определяет, есть на телефоне Face ID/Touch ID или нет. Если распознавание лица есть, вход по нему, если по отпечатку, по отпечатку, а если этих фич нет, приложение попросит придумать код-пароль.

    разработка приложения для фитнеса

    Бессердечная конвертация

    В конце мы столкнулись с еще одной неучтенной деталью: заказчики хотели получать деньги с подписок в долларах США. Но к аккаунту Google Developers Console был подключен сингапурский банковский аккаунт, поэтому поступления автоматически конвертировались в сингапурские доллары. Новый аккаунт и новая привязка могли занять время, которого у нас уже не было. После релиза Доминик и Каролина в спокойном режиме сменили аккаунт.

    Борьба с App Store и дыхание с Apple TV

    У нас получилось минималистичное и стильное приложение, работающее по модели SaaS. В приложении есть триал на одну или две недели и подписка на месяц или год.

    Сейчас приложение есть в App Store и Google Play, но за публикацию в App Store нам пришлось побороться. Магазин несколько недель утверждал, что в приложении нет подписок. Такое часто происходит с платными приложениями. В несколько итераций с многочисленными скриншотами мы доказывали, что у нас все есть и находится на своих местах.

    Мы планировали выпустить MVP за три месяца, но работали пять месяцев. Выбились из графика из-за того, что заказчик долго готовил контент. Одно дело — трансляции в  Zoom и импровизация, другое — контент “на века” с промышленной записью видеоуроков (постановка света, кадра, монтаж). Дальше мы планируем доработать приложение под Apple TV, потому что стек позволяет легко собрать приложение из готового кода. Если Каролина и Доминик решатся на более масштабные доработки, доделаем аватарки пользователей, реферальную систему, историю просмотров курсов и офлайн-режим.

    Насколько публикация полезна?

    Оцени эту статью!

    12 оценок, среднее 4.6 из 5.

    Оценок пока нет. Поставьте оценку первым.

    Так как вы нашли эту публикацию полезной...

    Подписывайтесь на нас в соцсетях!

    Поделиться