Отсканируйте QR-код, чтобы скачать приложение, и начинайте отслеживать привычки:
Приняли задачу от «Импровизаторов»
«Импровизаторы» — популярное комедийное шоу на телеканале СТС. Актеры шоу — Арсений Попов, Дмитрий Позов, Сергей Матвиенко и Антон Шастун — шутят без сценария и заготовленных шуток и радуют поклонников классным юмором уже больше 8 лет.
Ребята решили сделать мобильное приложение для трекинга полезных привычек. В основе — уникальная идея: актеры шоу присылают пользователям поддерживающие видеосообщения, чтобы мотивировать двигаться дальше и не забрасывать начатое.
Но они не айтишники, поэтому обратились к нам в Purrweb, студию UI/UX дизайна и разработки, чтобы мы помогли реализовать эту идею и сделать классное и удобное приложение, которое помогает людям заводить полезные привычки и отказываться от вредных.
Экран онбординга из приложения
Вот какие задачи нам поставили «Импровизаторы»:
- Разработать мобильное приложение для Android и iOS.
- Создать интуитивно понятный и привлекательный дизайн, который понравится фанатам «Импровизаторов».
- Разработать механику показа мотивационных видео в ответ на действия пользователя в приложении.
- Создать админку для управления контентом — чтобы быстро загружать в приложение новые видосы и фотки.
- Помочь с релизом приложения в Google Play и AppStore.
Кстати, а почему людям так сложно заводить полезные привычки и чем тут помогут Мотиваторы? Сейчас объясним, в чем главная идея приложения 😉
Посвящается всем, кто хоть раз в жизни говорил «начну новую жизнь с понедельника», и знает, чем это обычно заканчивается 😿
Как часто вы думали: вот сейчас начну тренироваться/есть здоровую еду/откажусь от кофе/выучу английский/перестану каждый вечер залипать в видосики/нужное подставить, и кааак заживу прекрасной жизнью и вообще стану лучшей версией себя! А когда начну? C понедельника!
Но понедельник пролетел, а за ним вторник, среда, одна неделя, другая, и…коврик для йоги по-прежнему пылится где-то в шкафу, а вы третий час листайте рилсы под вторую пачку чипсиков. Про английский вообще молчим!
Вот несколько причин, почему так происходит (минутка психологии от Purrweb):
Ребята решили, что будет круто объединить все эти штуки — регулярность, поддержку, списки дел и вдохновение — в одном полезном приложении.
Конечно, в сторах можно найти разные трекеры привычек, но мало где есть импровизаторы наставники-мотиваторы, которые пройдут весь путь вместе с юзером и не оставят в одиночестве.
По задумке, мотиватор будет присылать пользователю вдохновляющие видео и хвалить за классный результат. Или напоминать о привычке, если юзер филонит.
Для каждой привычки можно выбрать своего мотиватора. Это как если бы у пользователя в смартфоне была целая группа поддержки.
В приложении можно следить за прогрессом по всем привычкам. А эмоции на лице мотиватора вместо тысячи слов показывают, как юзер справляется 🙂
У нас был опыт разработки похожих проектов с привязкой к регулярному выполнению привычки, например, приложение для медитации.
Мы собрали команду из проектных менеджеров, дизайнеров, системного аналитика, разработчиков и тестировщиков, и погнали делать приложение.
Как все устроено?
Сейчас покажем фичи «Мотиваторов!» 👉
1️⃣ Заходите в приложение — мы сделали быструю регистрацию по номеру телефона, нужно только ввести код. Если вы уже зареганы, авторизоваться можно по номеру телефона за несколько секунд.
2️⃣ Попадаете на главную страницу. Пока вы не создадите привычку, страница пустая. Добавили подсказки по шагам: плюсик, чтобы создать новую привычку или вкладка на таббаре, чтобы подсмотреть идеи у мотиваторов — они рассказывают о своих полезных привычках.
3️⃣ Создаете привычку и настраиваете её параметры. Здесь же выбираете мотиватора и отмечаете частоту пуш-уведомлений. Привычку в любой момент можно отредактировать.
4️⃣ Получаете видеосообщения от своего мотиватора!
Так выглядит лента видеосообщений с кружками от мотиваторов
5️⃣ Не забывайте заходить в приложение, трекать привычку и следить за своим прогрессом — по каждой отдельной привычке и в целом.
Экраны статистики по выполнению привычек
Показываем дизайн: от первых набросков до финальной версии
На разработку всего дизайна у нас ушло около трех месяцев. Мы придумали, как будет выглядеть интерфейс и как сделать так, чтобы юзеру было максимально удобно и просто создавать привычки и получать видео от мотиваторов. Работу над дизайном мы начинаем с подготовки дизайн-концепта — «Мотиваторы!» не исключение.
Ребята хотели, чтобы в приложении были яркие цвета, лаконичный современный дизайн со смелыми решениями и игривый вайб — все то, что нравится их аудитории.
Для вдохновения мы изучили десятки трекеров привычек и других подобных приложений, чтобы найти тот самый стиль.
Наши референсы
Для интерфейса подобрали яркую и ненапряжную палитру из восьми однотонных цветов, чтобы юзер мог выбрать для каждой привычки свое цветовое оформление и закрепить ассоциацию. По умолчанию цвет приложения — фиолетовый 🟣
Кстати, все цвета мы проверили контраст-чекером: этот инструмент помогает дизайнерам убедиться, что черный и белый текст хорошо читается на цветном фоне и не раздражает глаза.
Цветовая палитра Мотиваторов
А сейчас эксклюзив! Вот так выглядели самые первые наброски экранов «Мотиваторов!» на этапе дизайн-концепта
Мы обсудили результат с ребятами и поняли, что оставляем яркие цвета, но по-другому расставляем акценты: добавляем больше фоточек и делаем так, чтобы главный фокус был на личности мотиватора.
Получилось красочно и свежо. Позже мы доработали визуальную составляющую, но глобально не ушли от дизайн-концепта.
Что еще сделали для удобства юзеров?
Отказались от квадратных видео в пользу кружков. У нас было несколько идей по поводу внешнего вида ленты сообщений. Например, сначала мы хотели сделать видосы квадратными.
В итоге остановились на варианте с кружочками как в телеграме. Они создают ощущение диалога с мотиватором — будто он только что прислал тебе сообщение.
Прежде чем приступить к дизайну, мы создаем черно-белые вайрфреймы — наброски, и согласуем их с заказчиком. Это помогает синхронизировать видение и логику и избежать множества правок.
Реализовали возможность закрывать привычки задним числом. Нет, не для читерства и обмана системы 😅 Например, юзер уехал в горы или деревню, где нет интернета. Привычку он не забросил и по утрам делал зарядку на свежем воздухе. Когда он вернется в город, то сможет отмотать назад дни и протрекать привычку, чтобы не потерять прогресс и получить заслуженное видео с похвалой от мотиватора 👍
Сделали так, что можно установить дату завершения привычки и сколько раз в неделю её выполнять. Когда мы с ребятами изучали другие трекеры привычек, увидели, что в них бесит что в них не хватает возможности установить дедлайн по привычке. Ведь когда мы знаем, к какому сроку нужно что-то завершить, нам проще заниматься делом регулярно и достигать целей.
А еще заметили, что во многих трекерах нельзя выбрать, с какой периодичностью ты хочешь выполнять привычку. Если не делаешь её каждый день, приложение решает, что ты прогульщик. Но ведь не все нужно делать ежедневно!
В «Мотиваторах!» мы учли этот момент, поэтому пользователь сам выбирает, сколько раз в неделю ему нужна привычка.
Юзер сам выбирает, как долго он планирует выполнять привычку и сколько раз в неделю
Какие штуки разработали в приложении?
Теперь о разработке 🧑💻 Не волнуйтесь, мы объясним все простым языком, без сложных технических подробностей.
🎥 Разработали механику показа видео. Мы сделали так, чтобы видео автоматически приходили пользователю в ответ на определенные действия в приложении — разработчики называют их «событиями». Например, если пользователь выполнил привычку на 100% или не заходил в приложение месяц, это разные события, и пользователь должен получить разные видео.
Пустая видеолента 😿
Для реализации этой фичи использовали технологию под названием Kafka. Она отправляет информацию о событии от пользователя на сервер и забирает с сервера данные о видео. Немного магии — и видео уже в ленте пользователя 🔮 События, в ответ на которые должны прилетать кружочки, прописаны прямо в коде приложения.
Правда, с Kafka у нас случился настолько большой прокол, что стоит рассказать о нем отдельно…
👌 Придумали, что сделать, чтобы кружочки грузились быстро и в хорошем качестве. Когда юзер получает видео от мотиватора, он хочет посмотреть его без зависаний и в отличном качестве. И нам нужно было решить эту дилемму. Почему дилемму? Чем выше качество картинки, тем больше размер файла — а из-за этого загрузка видео может тормозить.
Мы могли пойти сложным путем, как на YouTube, где видео разбито на отрезки по пять секунд, которые загружаются по мере воспроизведения — это помогает сохранить HD-качество. Но нашли решение проще: договорились с ребятами, что размер всех видео — не выше двух мегабайт. Так они воспроизводятся без задержек и в классном качестве.
⏪ Реализовали фичу с управлением видео. Изначально в приложении было только две опции для кружочков: воспроизведение и пауза. Мы добавили функции перемотки и рефреша, используя готовую библиотеку — частый способ что-то быстро реализовать при разработке.
Кружок можно перемотать или воспроизвести
💻 Сделали админку. Чтобы менеджер контента оперативно загружал видео и фото, обновлял данные, добавлял новые идеи привычек и создавал категории. А чтобы ребята лучше понимали точки роста, мы прикрутили в админку AppMetrica от Яндекса для сбора статистики.
📈 Предусмотрели возможность масштабирования. Но не сразу 🙂 Сначала был факап.
Выход был один: добавить больше мощности серваку, на котором развернули приложение. Мы улучшили его производительность, и теперь «Мотиваторами!» могут пользоваться до 30 тысяч юзеров одновременно.
Задизайнили лендинг
Еще мы сделали для «Мотиваторов!» лендинг:
- Опирались на общую стилистику и настроение приложения, использовали ту же цветовую палитру
- Рассказали, как пользоваться приложением.
- Добавили интерактивный экран, чтобы наглядно показать, как создать привычку.
Посмотрите, что получилось 👀
Результат: 200 000 активных пользователей за первые 6 месяцев
В первый же день релиза в приложении зарегались 30 тысяч юзеров.
Немного цифр спустя полгода: у «Мотиваторов!» более 200 000 активных юзеров, 230 000 скачиваний, 3 000 отзывов и оценок в сторах.
Пользователи оставляли разные отзывы: кто-то был в полном восторге от приложения, а кому-то вообще не зашло. Для нас как команды разработки ценно, что аудитория «Импровизаторов» не осталась равнодушной: в отзывах юзеры подсказывали, что можно улучшить, где выскакивали баги, подсвечивали, каких фич им не хватает.
Негативные отзывы нам тоже помогали 🙃 Чаще всего, конечно, прилетало за баги, особенно в первое время после релиза.
Фидбек юзеров помогает совершенствовать приложение
Такое бывает, особенно с ранними версиями продукта — их не случайно называют MVP, то есть, минимально жизнеспособный продукт.
Именно обратная связь пользователей помогает быстро обнаружить ошибки, которых не было в тестовой среде, и сделать продукт круче. Так что вы в каком-то смысле соавторы «Мотиваторов!» — спасибо вам! 💜
В обновлении добавили разделение по привычкам на главной странице
На всю разработку приложения у нас ушло 7 месяцев, плюс почти 4 месяца заняла у команды подготовка к релизу в сторах. Это довольно кропотливый и очень ответственный процесс, и нам важно было убедиться, что приложение соответствует всем требованиям Google Play и AppStore.
На что-то мы потратили больше времени, чем планировали, например, на реализацию политики конфиденциальности, но в итоге оно того стоило — мы без проблем зарелизили приложение.
А что дальше? «Мотиваторы!» 2.0
Мы продолжаем оказывать пост-релизную поддержку и недавно выпустили первое масштабное обновление с момента релиза. Улучшили пользовательский опыт и пофиксили баги, которые мешали юзерам. Вот что мы доработали:
- разделили на главной странице привычки и челленджи — теперь ориентироваться еще проще
- добавили в карточке привычки дату её завершения
- сделали так, чтобы со страницы прогресса можно было сразу попасть в конкретную привычку и отредактировать её
- добавили активацию промокодов — это абсолютно новая фича
- внесли небольшие изменения в дизайн для еще большего комфорта.
- работаем над внедрением нового типа авторизации через email.
У ребят большие планы по развитию приложения. В ближайшее время они собираются выходить с «Мотиваторами!» на зарубежные рынки.
Так что передайте своим друзьям из других стран, что совсем скоро они смогут спокойно скачать «Мотиваторов!» и получить свою порцию поддержки от парней!
У вас есть крутая идея и вы хотите её реализовать, но не знаете, с чего начать? Свяжитесь с нами. Обсудим ваш проект, поделимся опытом, вместе прикинем сроки и бюджет.
