Как создавалось приложение Gyroscope на React Native
Как я похудел на 20 фунтов, пока мы делали наше приложение для iPhone
Недавно мы выпустили новое приложение для iPhone, Health Tracking by Gyroscope. Оно синхронизирует ваши данные из HealthKit с Gyroscope и даёт панель, где видно всё о вашей жизни.
Пока мы тестировали и дорабатывали приложение, я похудел больше чем на 20 фунтов. Я собирал и синхронизировал все свои данные больше двух лет, но только когда увидел их в реальном времени, у меня получилось менять своё поведение и становиться здоровее с каждым днём. Та самая мечта quantified self.
Мы хотели сделать приложение, которое помогает людям использовать свои данные для практических целей: похудеть, стать продуктивнее, поделиться важными моментами.
Приложения, которое решало бы эти амбициозные задачи, ещё никто не сделал, но в других продуктах уже были отличные находки, от которых можно было оттолкнуться.
Что нас вдохновляло
Годовой отчёт Feltron
Последние 10 лет Nicholas Felton выпускал красивый годовой отчёт о своей жизни. Данные он скрупулёзно собирал весь год, а потом анализировал и оформлял по темам. Прошлые выпуски можно посмотреть на feltron.com или в SF MOMA.
Эти отчёты были захватывающим окном в чужую жизнь. У нас каждый день автоматически приходило много похожих данных, и мне очень хотелось увидеть, какие отчёты получатся про меня самого: и ради интереса, и чтобы найти полезные закономерности и поправить здоровье.
Веб-аналитика
По работе я каждый день опираюсь на кучу дашбордов и сервисов. Для всего критичного или зарабатывающего деньги наверняка найдутся десятки компаний, которые строят дашборды, чтобы это понимать и улучшать.
Все наши серверы хорошо обвешаны метриками, чтобы убедиться, что всё работает как задумано, и быстро дать сигнал, если что-то пошло не так. Когда-нибудь в (не таком уж далёком) будущем такие же дашборды появятся и для вашего тела.
Другие инструменты аналитики, вроде Google Analytics и Fabric, помогают нам понимать трафик и другие сложные метрики. Большие числа, спарклайны, подсвеченные выбросы и прочие приёмы дизайна позволяют быстро читать большие объёмы данных.
Видеоигры
У видеоигр аналитика веселее: там часто есть виртуальный персонаж с уровнями, здоровьем и очками опыта.
Если подать это правильно, получается очень весёлый и понятный способ следить за собой и делать то, что нужно: остаться в живых, поднять уровень, выпить зелье здоровья и так далее.
Люди тратят сотни часов на то, чтобы поднять эти виртуальные цифры, а для настоящей жизни ничего похожего нет. Пока…
Кодовое имя Magneto
Все наши проекты получают кодовые имена по персонажам «Людей Икс», и это приложение стало «Magneto».
В начале 2015 года Facebook выпустил классную новую технологию, React Native. Eric очень любил React и начал экспериментировать с простым проектом на React Native: он тянул живые данные из нашего API и рисовал их на экране.
Приложение запускалось через XCode, но код был почти весь на JavaScript, и я мог править его в Sublime Text или любом другом редакторе. За несколько часов я уже правил элементы на странице и стилизовал их синтаксисом, похожим на Flexbox и CSS. Это было волшебство.
Носимые устройства
Примерно тогда же вышли Apple Watch, и вокруг них было много восторга и путаницы. Больше всего говорили о приложениях и уведомлениях на часах, а нас сильнее всего радовали функции здоровья.
Как только я начал их носить, они в фоне считали мой пульс и шаги. Мне хотелось соединить это с другими данными, которые тоже важны для моего здоровья: весом и процентом жира с весов Fitbit, музыкой, которую я слушаю в Spotify, временем, которое я каждый день работаю.
Приложение Health стояло у всех на телефоне и собирало простые данные вроде шагов. Мне хотелось нескольких простых вещей, которые в нём были невозможны или очень неудобны.
- Посмотреть график пульса недавней тренировки
- Увидеть сводку за сегодня без прокрутки и нажатий
- Легко посмотреть, что было вчера, а не только сегодня
Mahdi, один из наших первых пользователей, который только что вышел к нам инженером на полный день, начал делать синхронизацию с HealthKit на Objective-C.
Приложение для бега
Пока Mahdi строил синхронизацию с HealthKit, я взялся за другое простое приложение, где можно было оформить свою пробежку разными фильтрами и макетами и поделиться ею.
Когда мы выпустили это беговое приложение, тысячи людей начали публиковать красивые картинки своих тренировок. Но многие другие жаловались, что они не бегуны и не могут порадоваться ни картам тренировок, ни тому, на сколько пончиков они сожгли калорий.
Нужно было понять, как принести это же чувство творчества и мотивации всем пользователям Gyroscope, а не только спортсменам. Решением стало сделать похожие вещи для того, чем занимаются все: музыка, сердцебиение, сон, время за компьютером, шаги, поездки и так далее.
Первые наброски приложения
Мы начали рисовать мобильные панели, чтобы уместить всю информацию в приложении. Для деталей решили сделать всё квадратными карточками, а под ними набор настроек.
Кнопку «поделиться» тоже вынесли заметнее, вниз страницы, потому что важной частью всего этого будет выложить своё главное достижение в Instagram или показать друзьям.
Эти экраны так сильно зависели от данных, что первые макеты давали лишь грубую отправную точку. Большая часть финального дизайна рождалась уже в живом приложении, поверх настоящих данных и графиков с наших серверов.
Недельные отчёты
Дневные карточки крутились вокруг одного показателя, а в недельных отчётах информации было гораздо больше: там можно было дать обзор и подсветить закономерности.
А тем временем на сайте…
С новыми возможностями вроде интеграции с Fitbit и синхронизации с HealthKit к нам пошло много новых данных о здоровье: пульс, шаги, давление, процент жира, а изначальный сайт был больше про места и фотографии. Надо было улучшить сайт, чтобы людям было легко читать свои новые данные, и мы взялись за новую тему профиля вместе с одним из моих любимых дизайнеров, Shane Mielke.
Новая тема задумывалась как более серьёзная панель со всеми вашими показателями, и Shane нарисовал десяток макетов, прежде чем нас по-настоящему зацепил вот этот.
Одним из переломных моментов стало разделение содержимого на понятные секции по частям человеческого тела. Сначала я не был уверен, что метафора сработает, но она неплохо легла на все наши данные и оставляла место для роста.
С трёхмерной моделью тела (Shane сделал простые мужскую и женскую версии) мы могли использовать тело как навигацию и подсвечивать каждую секцию при открытии.
Показатели психики, вроде сна, продуктивности и времени за компьютером, шли в секцию мозга. В будущем туда можно добавить настроение или медитацию.
Сердечно-сосудистые показатели, пульс и давление, собирались в области груди, а фитнес, шаги, бег и другие тренировки, уходил к ногам.
Каждая секция была важным понятием, которое позже можно наполнить деталями. Например, если бы мы добавили отслеживание еды, оно легло бы в секцию корпуса, и переделывать всё заново не пришлось бы.
Структура данных сработала на удивление хорошо, и мы решили продолжить её в приложении. Мы с Shane начали играть с мобильной главной, ужимая карточки каждой секции под экран.
До этого почти все макеты рисовались на выдуманных данных. Почти в каждом был крупный, легко читаемый заголовок и графика с подробностями. Следующим шагом было построить всё по-настоящему и посмотреть, насколько это полезно в жизни на моих реальных данных.
Цвет как статус
Мы хотели, чтобы с этой панели можно было мгновенно взглядом считать нужное. Крупные числа и цветные карточки быстро показывали, «хороший» ли сегодня день у той или иной секции.
Например, если шагов меньше нескольких тысяч, фитнес-карточка становилась красной или оранжевой и напоминала подвигаться. Если вы дошли до цели или только вернулись из зала, она становилась зелёной, и можно было заняться другими делами. Позеленить одну секцию не так уж сложно, интереснее оказалось найти баланс сразу по всем.
Экран запуска
Для первого экрана мне хотелось чего-то футуристичного, но всё же человечного. Пару лет назад я снял эту фотографию в Японии, и в ней, кажется, было нужное чувство.
Я положил сверху логотип Gyroscope и немного текста, и получился наш первый экран входа.
Бета-тест
К середине сентября у нас был работающий прототип, которым уже могли пользоваться люди. Мы тестировали его на себе, но главный вызов был в том, чтобы он оказался так же полезен миллионам людей по всему миру, а не был заточен только под нас.
Мы решили разослать его друзьям и пользователям Pro, с этого началась наша бета-программа. Завели группу в Facebook, чтобы публиковать анонсы и легко получать отзывы.
Мы выкладывали обновления, пользователи присылали отзывы и помогали быстро находить баги. Всё это происходило за часы или минуты и позволяло быстро крутить итерации. Бета была закрытой, так что новые версии мы выпускали почти мгновенно, не дожидаясь проверки в App Store.
До этого мы проектировали по своим догадкам и отзывам нескольких человек, а теперь могли опираться в решениях на статистику и отзывы пользователей.
Слышать, как всё складывается у наших первых бета-тестеров, было невероятно приятно.
«Gyroscope единственный продукт, с которым отслеживать свою жизнь легко. Одним взглядом я понимаю, где у меня всё отлично, а над чем надо работать. Не проходит и дня, чтобы я не заглянул в приложение.»
– Brandon Littell
Тестирование оказалось куда более совместным, чем просто поиск падений и багов. У многих были просьбы и идеи, которые помогли нам сосредоточиться на том, чем люди будут пользоваться регулярно.
Карта вашей жизни
Один из самых увлекательных типов данных у нас это перемещения, которые приходят из Swarm или Moves. Бег, велосипед и другие занятия тоже добавляют точки на карту.
Нам очень нравилось использовать Mapbox на сайте, и мы решили взять ту же картографию в приложение. Сначала мы пробовали карты с зумом и перетаскиванием, но быстро решили всё упростить и оставить карту статичным фоном. Мы сами считаем, какой масштаб и композиция лучше покажут всё важное.
Те, кто отслеживал перемещения через Moves, видели тепловую карту всех своих маршрутов и разбивку того, на что уходило время. С точки зрения здоровья любопытно видеть, сколько времени вы идёте пешком, а сколько едете. Я начал выходить раньше и чаще ходить на встречи пешком.
Одни экраны давали выводы про фитнес, другие были больше про поездки или про то, в какие рестораны вы ходили.
Пуш-уведомления
Один из способов облегчить людям жизнь был простой: каждый день присылать одно пуш-уведомление с выводами.
Мы много обсуждали и тестировали, когда его отправлять и как формулировать. Сначала я хотел слать его в конце дня как итог. Но данные иногда синхронизировались с задержкой, и был риск показать неполную картину. Мы остановились на 9 утра следующего дня.
Наш приоритет облегчить жизнь пользователю, даже в ущерб заработку или нашим желаемым метрикам. Вместо загадочного текста, который заставляет открыть приложение, мы положили в уведомление всю нужную информацию, чтобы человек получил пользу, даже не открывая его.
«Я начала пользоваться Gyroscope довольно давно, но по-настоящему важным он стал для меня только после рождения дочери. Мне нравится, как организованы мои данные о форме и какая подробная разбивка мне приходит. И ещё у меня всё время ощущение, что что-то в продукте становится лучше. Команде правда есть дело до своих пользователей.
Кроме общей картины здоровья я ещё внимательно слежу за тем, в какой форме моя голова, через уровень продуктивности. Я работаю в среднем 38–42 часа в неделю над Iris (моим стартапом) и при этом мама на полную ставку. Gyroscope помог мне разложить эти рабочие часы так, чтобы вышел настоящий «баланс», и я ему очень за это благодарна. Результат? Дикая продуктивность. Раньше 40 часов работы уходили на ерунду. А теперь? С младенцем никогда не знаешь, как пойдёт день, так что я по-настоящему выжимаю максимум из своего времени…»
– Cat Noone
Месячные отчёты
Раз в месяц появлялся новый месячный отчёт, и это время мы хотели использовать, чтобы оценить прогресс и подумать о себе. На несколько простых вопросов мы надеялись ответить этими данными.
Достаточно ли вы двигались?
Достаточно ли вы спали?
Насколько вы были продуктивны?
«Для студента поддерживать здоровый баланс это ключ к успеху. Gyroscope показывает мне данные моей жизни, и я могу балансировать сон, спорт и продуктивность. Красивая визуализация и очень полезное приложение!»
– Victoria Spiegel
Как я похудел
С тех пор как за год до этого начался Gyroscope, я потихоньку сильно набрал вес. Большой загадки тут не было: стресс, мало сна и много поздних вечеров за работой с перекусами с лихвой перекрывали те немногие тренировки, что у меня были.
Одной из моих целей с приложением было похудеть. Каждое утро я встаю на весы Fitbit Aria и смотрю вес и процент жира.
В течение дня Gyroscope напоминал мне об этих цифрах. Я сделал несколько макетов, которые не давали себе врать и показывали недавнюю историю в контексте. Ключом было быстро заметить и поправить себя.
До этого о таких вещах легко было забыть до недельного отчёта или до случайного захода на сайт. А в промежутке я успевал принять кучу нездоровых решений: вызвать Uber вместо того, чтобы дойти пешком, заказать десерт или лишнюю печенюшку к кофе, и всё это со временем складывалось. Постоянное внимание помогало сопротивляться желанию каждый день есть вкусные сладости.
Через полгода, когда приложение готовилось к выходу, я с радостью обнаружил, что сбросил около 20 фунтов и 5% жира. Я не делал ничего особенного, просто множество мелких изменений и решений каждый день привели к тому, что я стал заметно здоровее. Шагов стало больше, потому что я старался везде ходить пешком, и каждый раз, открывая приложение и видя прогресс, я хотел не терять набранный ход.
У многих других наших бета-тестеров истории были похожие. Нам ещё много чего хочется добавить и улучшить, но мы выпустили приложение в App Store, чтобы каждый мог начать менять свою жизнь к лучшему.