Этот пост о нашем прежнем, а теперь закрытом приложении для бега.
Как создавалось Gyroscope Running
Кодовое имя Quicksilver: наше первое приложение для iPhone на React Native
Недавно мы выпустили экспериментальное приложение для iPhone, Running by Gyroscope. Оно делает красивые картинки, чтобы поделиться свежей пробежкой. Это история о том, как мы его проектировали, какими инструментами пользовались и что поняли по дороге.
Приложение работает на двух наших самых популярных интеграциях, Runkeeper и Strava. Они отлично записывают вашу активность. После пробежки Gyroscope автоматически подтягивает сырые данные. А дальше начинается веселье: вы выбираете, какую историю рассказать.
Спутниковая карта живописного маршрута? Может, снятый вами захватывающий закат? Или тот факт, что пробежка равна 7 пончикам? А может, пульс был очень высоким и хочется это подчеркнуть. Выбор за вами.
Глава 1
Март 2015
Мы только что запустили сайт Gyroscope. Система работала прекрасно. Мои пробежки мгновенно синхронизировались и появлялись на aprilzero.com со всеми цифрами и даже с музыкой, которую я слушал в Spotify.
Мы построили красивую панель, но поделиться можно было только целиком, отправив кому-то всё сразу.
Нашими следующими большими задачами были мобильные и шеринг.
Однажды мартовским днём я побежал наверх, на Twin Peaks. День был ясный и красивый, вдалеке виднелись оба моста.
Глядя оттуда на город, я захотел как-то поделиться этим моментом. Я всё записал и оцифровал: набор высоты, пульс, маршрут, которым сюда добрался, музыку, которую слушал, и то, что видел (на фото), но собрать это обратно в моё переживание было нечем.
Я представил свой подъём на гору в дополненной реальности. В голове возникла идея карточки, которой можно поделиться: показатели тела и место поверх снятой мной фотографии. Всё это уже было в Gyroscope, оставалось только правильно это спроектировать.
Я решил, что из этого выйдет отличная фотография для Instagram, и всю дорогу домой бежал в нетерпении попробовать.
Глава 2
Притворяйся, пока не станет правдой
Едва вернувшись домой, я открыл Photoshop и перетащил туда несколько снятых фотографий. Добавил данные карты со своей пробежки и соединил их с цифрами в простенькую инфографику. Когда-нибудь у нас будет хороший автоматический инструмент, но пока что быстрее было сделать всё с нуля руками.
Базовые данные, город и дистанцию, я поставил в угол. Цвет текста (бирюзовый) я взял пипеткой с фотографии и отметил точку, где она была снята. Через несколько часов опубликованная фотография собирала кучу лайков. Люди спрашивали, как она сделана.
Я решил продолжать этот эксперимент: делать картинки руками после каждой пробежки и пробовать новые варианты.
Следующие несколько недель я делал новую картинку после каждой пробежки. Я играл с разными стилями карт и добавлял детали вроде музыки, погоды или пульса. Эти мелочи добавляли пробежке смысла и объёма, и людям, кажется, нравилось.
Я начал по-настоящему ждать этого творческого упражнения, сделать и выложить карточку после пробежки. Вместе с эндорфинами это здорово затягивало. Тут открывалось множество слоёв творчества и рассказа: пересмотреть снятые фотографии, увидеть разные виды маршрута на карте, подобрать красивый акцентный цвет.
Здесь сошлись сразу несколько моих любимых вещей: фотография, бег и внимание к себе.
Было что-то в том, как пара цифр и логотип превращали снимок из просто фотографии в графический дизайн или даже в искусство. Композиция и форма элементов складывались во что-то большее, чем их сумма.
Даже в поездках мне нравилось этим заниматься. Карточки хорошо схватывали разные места, где я побывал, вроде своеобразных открыток.
Включая и выключая разные данные, музыку или карты, из одного и того же материала можно было рассказать разные истории. Например, для тяжёлой пробежки я мог добавить пульс. Если день был очень жарким или холодным, интересной цифрой становилась погода. Если был красивый закат или вид, из него выходил отличный фон. Если рельеф был интересным, его подчёркивал спутниковый вид.
Проведя этот эксперимент несколько месяцев, я понял, что из этого выйдет отличный продукт. Мне самому его очень хотелось, и многие говорили, что тоже хотели бы им пользоваться.
Я начал набрасывать концепты и сводить свои эксперименты к нескольким лучшим раскладкам.
Глава 3
Проектирование приложения
Начиная новый дизайн, я люблю выписать задачи. Выбрать правильные цели часто важнее и труднее, чем сделать красиво. У Quicksilver было несколько ведущих принципов, которые казались мне важными. Они определяли каждый пиксель и каждую строчку кода, которую мы напишем.
- Собрать как можно больше лайков
- Сразу видеть свою последнюю пробежку
- Сделать настройку весёлой
Дизайн ради максимального отклика
Чтобы собрать как можно больше лайков, нужны были правильный визуальный акцент, фокус и контекст, чтобы это отзывалось у других. Понимание того, кто наша аудитория, обычные люди, а не только собратья-спортсмены, сильно повлияло на решения и отличило нас от всех остальных.
В большинстве приложений была подробная статистика ради роста результатов. Но другу, который не бегает, она куда менее интересна. Ему скорее захочется увидеть, что это равно 5 пончикам, и поставить вам большой палец. Или красивую фотографию с вершины горы, на которую вы мучительно забрались.
Мы старались сделать каждую раскладку отдельным брендом, со своим именем и иконкой. Это была ключевая функция приложения, и она должна была быть предельно понятной и приятной.
Перепробовав несколько идей, мы вывели раскладки в длинный список внизу. Листать их и выбирать одну было по-настоящему приятно.
Это было похоже на фильтры Instagram для бега
Экран запуска
Раз фотография и пользовательский контент были большой частью приложения, мне хотелось, чтобы это чувствовалось с первого открытия.
Я начал искать хорошую фотографию для фона. Мой друг Adam, один из лучших фотографов, кого я знаю, великодушно разрешил взять один из его снимков с Mt. Tam.
Как только я поставил его в приложение, я влюбился. Это было идеальное ощущение покоя и природы, задававшее верный тон всему остальному.
Отдельное приложение
Одним из главных решений было сделать это отдельным приложением именно про бег. Мне хотелось видеть слово «Running» на своём домашнем экране и мгновенно попадать в свой контент.
Когда в будущем мы добавим новое, велосипед или плавание, люди смогут ставить только то, что им нужно. Мне не хотелось нагромождения и уровней навигации.
Лента активности
Большинству беговых приложений нужно выпячивать запись тренировки, но у нас её не было, так что контент мог оставаться главным. Всё, кроме недавних пробежек, пряталось в боковую панель.
Мы играли с разными стилями и метафорами для каждой пробежки. Это могли быть стопки карточек или набор плиток. Поэкспериментировав с разной плотностью информации, мы поняли, что крупные варианты занимают слишком много места. Попользовавшись приложением пару минут, я понял, что слишком приблизился и не вижу общей картины, которую хотел. На сайте вид работал хорошо, так что мы переиспользовали те же полоски, раскрашенные по темпу.
Я попробовал вынести самую быструю & самую длинную пробежку в шапку, чтобы они всегда были под рукой без прокрутки. Это дружеский вызов: каждый раз, открывая приложение, я получал шанс побить свой же рекорд. А если кто-то пробежал марафон или сделал что-то по-настоящему впечатляющее, это всегда было бы у него на виду.
Постоянно тикающий счётчик возраста с сайта был очень популярен, так что мы добавили похожий таймер, отсчитывающий время с последней пробежки. Чем больше это число, тем сильнее, как мы надеялись, мотивация.
Глава 4
Счётчик пончиков
Тем летом мы работали из офиса True Ventures в Сан-Франциско. Однажды кто-то принёс туда пару коробок пончиков. После обеда кто-то, Phil Black, если я правильно помню, разрезал их на восьмушки и сказал, что маленькие кусочки не считаются. Я понимал, что научно это неверно, но всё же принялся дегустировать разные вкусы.
Сидя там, работая над беговым приложением и жуя четвертинку глазированного пончика на пахте, я задумался, сколько мне придётся пробежать вечером, чтобы этот перекус отменить. Погуглив, я выяснил, что обычный пончик это примерно 200 калорий, а калории пробежки считаются приблизительно как (вес × 0,75 × расстояние).
Пробежки без карты, на дорожке или записанные через Fitbit, доставляли нам много хлопот. Приложение опиралось на карты во всех видах, но нужна была более гибкая альтернатива.
Сидя там и считая свои разные пробежки, я понял две вещи: я понятия не имел, на сколько пончиков тянет большинство из них, и выяснять это было довольно весело.
Так родился счётчик пончиков.
Мы прикидывали примерное число пончиков, будь то короткая пробежка на один пончик или очень длинная. Остаток дня я провёл, подбирая стоковые фотографии красивых пончиков в разных количествах, от 1 до 6.
Глава 5
Бета-тест
Как только базовая версия приложения заработала, я разослал приглашения самым бегающим людям на сайте, тем, у кого больше сотни записанных пробежек. Я был поражён, увидев, что у некоторых в аккаунте накопились многие тысячи пробежек.
Мне нравилось бегать, но до их уровня было далеко. Именно их отзывы и предложения были нужны, чтобы получился отличный продукт.
Сначала я просто писал письма вручную. Люди отвечали багами и предложениями, и я пытался удержать в голове, кто что сказал.
Потом кто-то предложил завести группу в Facebook, они так делали на других бета-тестах, и это оказалось очень полезно. Я создал закрытую группу и разослал ссылку нескольким главным тестерам. Со временем она выросла больше чем до сотни человек, многие бегали каждый день и пользовались приложением.
Мы получили не только кучу баг-репортов и предложений, некоторые даже начали рисовать макеты того, чего им хотелось.
Мы могли придумать новую функцию, выкатить её всей группе и быстро увидеть её на настоящем материале.
Глава 6
Инструменты & приёмы
В Gyroscope отличная команда, которая очень много сделала, чтобы это приложение появилось (спасибо, Mahdi, Eric, Robbie!), но нам сильно помогали и снаружи. Вот несколько замечательных ресурсов и продуктов, которые оказались незаменимыми и сэкономили нам массу инженерного времени.
React Native
Я пришёл из веба, так что Javascript и раскладка в духе CSS/Flexbox ощущались очень естественно. Я проектировал приложения для iPhone раньше, но кода для них никогда не писал. Если бы React Native не существовало, мне пришлось бы ждать, пока разработку сделает кто-то другой. Такой сайд-проект, скорее всего, вообще бы не начался.
Brent Vatne, один из наших первых бета-тестеров, был ещё и контрибьютором React Native и здорово выручал нас, когда мы застревали или задавали вопросы, ответов на которые в документации ещё не было. Спасибо, Brent!
С тех пор как мы начали, React сильно вырос. Каждый релиз, примерно с 0.3 и до 0.12 на момент запуска, добавлял скорости и чинил то, с чем мы мучились.
Ему ещё есть куда расти (хотелось бы, чтобы анимации работали лучше), но развивается он очень быстро. По крайней мере для нашего совсем простого приложения он справился и помог двигаться намного быстрее, чем иначе.
Живая перезагрузка по сети в React Native позволяла быстро проверять новые идеи или вносить микроправки за считанные минуты. Теперь я и представить не могу, каково это, пересобирать и ждать, чтобы увидеть изменения.
Mapbox
Mapbox делает потрясающие картографические инструменты, которые мы используем по всему сайту. Их редактор позволяет настраивать стиль и цвет. С его помощью мы сделали несколько разных стилей, в том числе этот тёмный минималистичный набор тайлов.
Сначала мы поиграли с их реализацией на iOS GL, но поняли, что на самом деле не хотим давать людям двигать и приближать карту. Ради простоты мы решили переиспользовать нашу веб-реализацию через webview и сохранить код, который уже месяцами тестировали и улучшали.
Imgix
Одна из уникальных особенностей нашего приложения, подстройка стиля карточки под фотографию. Imgix помогает нам разобрать палитру, чтобы задать тексту и остальным элементам подходящие и дополняющие цвета.
Ещё мы используем Imgix для спецэффектов: усиления и размытия картинки. Облачное решение для фотографий означает небольшую начальную задержку, пользователю приходится загрузить снимок, а не обрабатывать всё локально на телефоне, и иногда загрузка с последующим скачиванием обработанного фото занимает минуту, но этот размен окупился сэкономленным временем и дополнительными возможностями.
Fabric by Twitter
Мы начали пользоваться Fabric/Crashlytics, чтобы отслеживать падения. На ранних порах приложение падало часто. Со временем мы всё починили, но я всё равно ловил себя на том, что смотрю в их панель ради статистики использования.
Я собирался настроить аналитику, но оказалось, что почти всё нужное уже есть в этой панели. Больше всего мне нравилось смотреть, кто сейчас в приложении, но и другие цифры, месячная аудитория (MAU), отношение DAU/MAU, удержание, оказались очень полезными.
По ходу беты мы меняли приложение и прямо видели, как меняются время сессии, удержание и прочее. Push-уведомления через Parse сильно улучшили возвращаемость и то, что люди заходили в нужный момент.
Parse
В ранних версиях приложения людям приходилось самим открывать его и проверять, подгрузилась ли последняя пробежка. Как только мы начали слать push-уведомления о новых пробежках через Parse, удержание резко выросло.
Глава 7
77 пончиков
Как-то раз я листал наши упоминания в Instagram. Там было несколько закатов, а потом я увидел человека, у которого пробежка тянула, кажется, на 77 пончиков.
Наверняка в моих расчётах калорий ошибка или кто-то залил фальшивые данные. Может, велозаезд по ошибке отметили как пробежку?
Я нажал и загуглил тот «Fat Dog», о котором упоминал Nate. Оказалось, это ультрамарафон на 120 миль в Канаде, который называют одним из самых тяжёлых в мире. Ого!
Я показал его пост нашей группе бета-тестеров. Увидев потрясающую пробежку Nate, я захотел, чтобы такие особенные пробежки можно было показывать всем.
Мы добавили в боковую панель приложения пару вещей: ленту избранных пробежек и список друзей, которые недавно бегали.
Рекорд Nate до сих пор не побит: 77 остаётся самым большим числом пончиков, записанным в Gyroscope. Но за этот проект я научился никогда не недооценивать людей. В следующей версии на всякий случай будет поддержка трёхзначных чисел.
Глава 11
Что дальше?
Мы выпустили это приложение в App Store & многие пользуются им, чтобы записывать свою жизнь и делиться ею.
Tatiana сбросила почти 40 фунтов, считая все свои шаги и рассказывая о них.
Dan Grant колесит на велосипеде по всей Англии, восстанавливаясь и держась в форме после инфаркта.
Мы взяли всё, чему научились на Running, & построили новое приложение Gyroscope, которое показывает полную историю вашей жизни. Оно тоже на React Native, можно почитать, как мы его делали, или скачать его в App Store.