1 3 1160x620 - Редизайн мобильного приложения Tesla, которое мы заслуживаем

В качестве предисловия к этому кейс-стади, хочу заявить, что очень уважаю дизайнеров и разработчиков Tesla, и этот редизайн порожден желанием продолжить свое самообразование.

На мой взгляд, в мире есть всего несколько технологических компаний, которые действительно заботятся о дизайне и инновациях. Компании, которые рискуют задавать безумные вопросы, чтобы расширять горизонты. И в последние годы, на мой взгляд, Tesla нет в этом равных.

Когда дело доходит до разрушения отрасли, мало кто может похвастаться таким опытом, как Tesla. Они разрушили рынок, который был непрерывно счастлив в течение почти столетия. Причиной стало их рьяное стремление задавать вопросы и отвечать на них так же бесстрашно.

Вопросы могут быть небольшими, например: «Почему автомобильный ключ не может быть в виде карты?» Или более масштабным, например: «Зачем вам приборная панель и тактильные элементы управления, когда перед вами стоит 15-дюймовый дисплей?» И, конечно же, вопрос, с которого все началось: «Почему автомобили не могут быть электрическими?»

Однако цель этой статьи не обсудить, почему Tesla такая замечательная компания, потому что вы уже это знаете. Ее цель состоит в том, чтобы изучить один аспект, который, как мне кажется, всегда имел недостаток блеска – мобильное приложение Tesla. Мне кажется, что их мобильное приложение, далеко от идеалов и философии компании.

Кроме того, брелок для Model 3 – это лишние $150, что делает мобильное приложение основным способом взаимодействия владельца с автомобилем.

Tesla и ее клиенты не только нуждаются, но и заслуживают лучшего опыта.

И вот около двух месяцев назад я приступил, вероятно, к своему самому обширному личному проекту. Ниже вы найдете кейс-стади, подробно описывающее мой мыслительный процесс и возможные решения проблем, которые я вижу в мобильном приложении Tesla.

Проблема

Прежде чем изложить свое решение, я хочу сначала углубиться в то, почему я считаю, что приложение Tesla нуждается в редизайне. Я кратко упомянул, что считаю, что оно не соответствует стандарту Tesla. Видите ли, когда вы сидите в Tesla, у вас возникает ощущение, что вы, без сомнения, только что шагнули в будущее. Как будто сам Илон Маск одолжил машину из 2050 года, используя ту же машину времени, которую он, вероятно, использует для управления всеми своими компаниями.

Редизайн мобильного приложения Tesla, которое мы заслуживаем

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

Однако, не визуальный язык заставил меня изменить дизайн приложения, так как я не собирался создавать «непрошенный дизайн». Что действительно заставило меня заняться этим редизайном, так это фундаментальный опыт работы с приложениями.

Редизайн мобильного приложения Tesla, которое мы заслуживаем
Текущий интерфейс Tesla, скриншоты любезно предоставлены моим другом Aneesh Vempaty

Как я упоминал выше, приложение структурировано в виде таблицы. При правильных обстоятельствах это эффективное решение. Однако в нашем случае это означает, что большинство элементов управления спрятаны, что приводит к потере времени и, что более важно, к потери полезного пространства экрана. Например, для удаленного открытия багажника требуется два тапа, один раз внутри приложения. А на странице климат-контроля есть три кнопки, занимающие всю страницу.

Но это всего лишь два тапа, почему это так важно?

Это важно, так как это основной способ взаимодействия многих владельцев Tesla с их автомобилем из-за отсутствия брелока. Приложение должно быть не только простым в использовании, но и, что более важно, быстрым, как брелок. И поэтому я спрашиваю, почему бы не выдвинуть все кнопки и взаимодействия на первый план опыта?

Однако я не просто хотел сделать цифровой брелок, я чувствовал, что это приложение может быть чем-то большим. Это приложение должно быть приложением для вашего автомобиля. Идеальное приложение для перехода без запретов, которое вы используете каждый раз перед поездкой. Мобильное приложение, которое заставит ваших соседей завидовать вашему приложению также, как и вашему автомобилю.

Решение

Первоначальное исследование

Я не хотел ограничивать свое первоначальное исследование только пользователями и владельцами Tesla. Если я должен создать ультимативный опыт водителя, мне также нужно рассмотреть ценные идеи от всех типов автовладельцев.

Из своего обширного опроса и интервью я быстро узнал, что большинство пользователей перед тем, как сесть в машину делают или хотят сделать три вещи, а именно:

Редизайн мобильного приложения Tesla, которое мы заслуживаем

  1. Карты и навигация: «Я не могу никуда поехать без Google Карт».
  2. Климат-контроль: «Теплые сиденья – это любовь, теплые сидения – это жизнь».
  3. Управление звуком: «Дайте мне аксессуар».

Помимо управления звуком (поскольку Tesla автоматически подключает вашу музыку через Bluetooth), эти варианты использования отсутствуют или явно недоразвиты в текущей сборке приложения Tesla. Итак, я позаботился о том, чтобы вывести эти основные варианты использования на передний план моего редизайна.

Вайрфреймы, идеи, процесс

Как и с любым другим дизайн-проектом, сначала я взял перо и бумагу, чтобы придумать идею, поэкспериментировать и изобразить все, что было у меня на уме. Этот проект был особенно труден, потому что я пытался реструктурировать нынешние девять страниц приложения и при этом занять, как можно меньше места. Сложность заключалась в том, что вначале я отказался от структуры вкладок, поскольку это вернуло бы меня к тому, с чего я начинал, ведь для выполнения многих функций потребовалось бы два или более тапов.

Редизайн мобильного приложения Tesla, которое мы заслуживаем

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

Креативность часто берет две точки с противоположных концов спектра и объединяет их в одну сплоченную идею.

И с дизайном все также. Поэтому я посмотрел не только на автомобильные приложения, но и на ТВ-пульты, пункт управления Apple, умные дома, приложения для камер, приложения для здоровья, навигационные приложения и, как ни странно, действительно классное приложение о жуках.

Редизайн мобильного приложения Tesla, которое мы заслуживаем

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

Редизайн мобильного приложения Tesla, которое мы заслуживаем

Основной опыт

Карты и навигация

Несмотря на то, что приложение Tesla имеет страницу местоположения, она всего лишь показывает, где вы находитесь по отношению к вашему автомобилю. И в настоящее время пользователям необходимо либо ввести в автомобиле адрес, куда они собираются ехать, либо обратиться к другим навигационным приложениям. Это, очевидно, ухудшает общий опыта вождения Tesla. Конечно, большой сенсорный экран приятен и забавен в использовании, но ощущение новизны быстро проходит, и каждый раз наклоняться и нажимать на экран, чтобы задать пункт назначения, вскоре начинает казаться неуклюжим и раздражающим. Пользователи привыкли, что ввод информации в Картах Google не только норма, но и намного быстрее и проще. Ищете место на Yelp? Вы можете сразу связать с картами, нажать «Пуск», и сделать это не менее чем за два тапа.

Редизайн мобильного приложения Tesla, которое мы заслуживаем

Следуя моим принципам, я решил включить панель поиска в середину приложения, чтобы она была у пользователя под рукой. Она, конечно, будет синхронизироваться с навигацией в вашем автомобиле, поэтому все, что введено в телефоне, будет немедленно отображаться в автомобиле. Теперь пользователи будут не только испытывать опыт аналогичный вводу адресов в Картах Google, но, что более важно, смогут беспрепятственно переходить от управления в своем телефоне на управление в авто.

Дополненная реальность

Я хочу обратить ваше внимание на иконку, которую вы, возможно, заметили в правой части панели поиска.

Редизайн мобильного приложения Tesla, которое мы заслуживаем

Я хотел добавить одну функцию – лучший способ найти свой автомобиль. Честно говоря, меня немного смущает, сколько раз я забывал, где припарковал свою машину. Хотя карта помогает, она не всегда дает представление о том, где авто на самом деле. Чтобы решить эту проблему, я разработал Wayfinder дополненной реальности.

Редизайн мобильного приложения Tesla, которое мы заслуживаем

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

С точки зрения пользователя это делает поиск вашего автомобиля легким и приятным занятием. С картой вы должны сначала выяснить, как на ней ориентироваться, и компас часто может быть неточным. С этой функцией вам даже не нужно думать о том, куда вы идете.

Климат-контроль

Как уже упоминалось выше, я обнаружил, что одним из основных этапов поездки пользователя до ее начала была настройка климат-контроля в автомобиле. В настоящее время все приложения Tesla могут изменять температуру воздуха.

Редизайн мобильного приложения Tesla, которое мы заслуживаем

Tesla Model 3 уже имеет прекрасную панель управления климатом, так почему бы не добавить это в приложение?

Редизайн мобильного приложения Tesla, которое мы заслуживаем
Анимированные иконки нетрадиционны, но я чувствовал, что они отлично подходят

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

Редизайн мобильного приложения Tesla, которое мы заслуживаем
3D Touch для показа большего числа элементов управления

Заимствуя паттерн из Центра управления iOS, я пошел дальше и добавил возможности 3D Touch для показа более продвинутых опций, чтобы пользователи могли получить доступ к тем же элементам управления, что доступны в их автомобиле.

Общие улучшения

Разблокировка

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

Редизайн мобильного приложения Tesla, которое мы заслуживаем

Чтобы добиться того же эффекта, я разработал систему, которая использует жесты и тактильные ощущения, поэтому теперь все, что нужно сделать пользователю – это провести пальцем вниз, где бы он ни находился, и он будет точно знать, что он делает, даже не обращая на это внимания. Поначалу это может показаться немного менее интуитивным, чем просто кнопки на экране, но я думаю, что компромисс стоит того, потому что он возвращает вам ощущения, которые вы получаете с брелоком.

Настройки водителя

Иконка в верхнем левом углу открывает доступ к гамбургер-меню. Это очищенная версия текущего приложения, но есть несколько заметных изменений.

Редизайн мобильного приложения Tesla, которое мы заслуживаем
Я также переработал все иконки

Отличительной особенностью автомобилей Tesla является их способность запоминать профили водителей – расположение зеркал, сидений и рулевого колеса индивидуально для каждого пользователя. В настоящее время этим можно управлять только через основной интерфейс автомобиля. Я хотел убедиться, что эти уникальные профили будут добавлены в приложение, позволяя автомобилю точно знать, кто вы, и автоматически настраивать эти параметры, когда вы подходите к автомобилю.

Редизайн мобильного приложения Tesla, которое мы заслуживаем
Страницы элементов управления и зарядки в текущей версии приложения Tesla

Два других изменения, которые я сделал – это изменение режима парковщика (valet mode) и предела заряда в настройках. Я переместил в режим парковщика, потому что мне показалось, что логично, если этот параметр будет находится в настройках учетной записи, поскольку это, по сути, расширение возможности входа и выхода из разных аккаунтов.

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

Функция Summon

В текущем приложении Tesla предпочитает занимать верхний правый угол экрана со своим лутбоксом и размещает функцию Summon (прим. – автомобиль осуществляет парковку полностью самостоятельно и не требует присутствия водителя за рулем) в представлении таблицы ниже. Для меня единственная причина, по которой Tesla так выделяет свой лутбокс – это использование его в качестве маркетингового инструмента. Хотя, это может быть оправданием, мне кажется, вы вряд ли станете чаще приглашать друзей купить автомобиль за $35,000+. Поэтому я решил оставить его только в меню настроек.

Редизайн мобильного приложения Tesla, которое мы заслуживаем
Текущее расположение иконки лутбокса в приложении Tesla

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

Редизайн мобильного приложения Tesla, которое мы заслуживаем

Помимо визуального обновления, страница функции Summon в основном остается той же, что и в текущем приложении. Несмотря на то, что я экспериментировал с различными взаимодействиями, я чувствовал, что текущая модель была эффективной и, вероятно, была подкреплена бесчисленными часами исследований наиболее безопасных вариантов пилотирования вашего автомобиля стоимостью $35,000 с вашего телефона.

Снимок состояния

Следующая область улучшения – это то, что я называю «снимком состояния». Как следует из названия, это просто обзор текущего состояния вашей машины. В текущем варианте эта информация разбросана по всему приложению. Например, температура в салоне отображается надписью под ячейкой таблицы климата, а статус «припарковано» просто выглядит неловко под уровнем заряда батареи.

Редизайн мобильного приложения Tesla, которое мы заслуживаем

В моем редизайне все эти индикаторы состояния находятся в одном месте, что позволяет с первого взгляда оценить состояние вашего автомобиля. Я решил сохранить текущую версию визуального отображения состояния автомобиля. Она позволяет понять, например, оставили ли вы дверь ​​открытой.

Нижняя строка

Реорганизовав всю структуру приложения, я смог заполнить второй ряд иконок дополнительными необходимыми удаленными функциями. Эта строка является ближайшим расширением метафоры брелока, так как все эти функции вы найдете в типичном брелоке. Как упоминалось ранее, я перенес сюда кнопку «Открыть порт зарядки». И, хотя у меня есть метод открытия багажника жестом, я все же хотел включить стандартные кнопки для этих действий в качестве дополнительной опции. Я также добавил опцию открытия окон и / или люка на крыше. Наконец, я объединил мигающие огни и гудок в одну кнопку «паники». Честно говоря, мне не нравится это название, но, глядя на множество различных ключевых брелоков на рынке, слово «паника», кажется, стало отраслевым стандартом для функций такого рода.

Редизайн мобильного приложения Tesla, которое мы заслуживаем
Я также изменил дизайн иконок, чтобы они лучше подходили к внутренней части автомобиля

Размышление

Я начал этот редизайн, как вызов себе. Вызов для меня состоял в том, чтобы начать личный проект и довести его до конца. И я так рад, что справился с поставленной задачей.

В школе я делал проекты, которые мне поручали. Во время стажировки и работы с клиентами я работал над продуктами, которые были нужны бизнесу. Однако это была возможность сделать что-то для себя. Возможность исследовать свою креативность и страсть к дизайну.

Возможно это из-за того, что это мой последний год обучения в колледже, но этот экзистенциализм поразил меня. Я помню, как в старшей школе не спал долгими ночами, неустанно работая над творческими проектами и хобби. Я мучился до 2 или 3 часов утра, отказываясь от сна и учебы, потому что это было единственное время за весь день, когда я мог над этим поработать. Я был невнимательным в школе не потому, что мне было скучно, а потому, что сосредоточиться на чем-то другом было бы упущением.

Мне повезло, и я благодарен за то, что смог изучать творчество, и сделать его своей карьерой. И хотя теперь творческая работа – моя жизнь, думаю, что я забыл, насколько важно отойти от всего этого и сделать что-то для себя.

Спасибо за прочтение

Большое спасибо за прочтение этой статьи! Я действительно не ожидал, что напишу так много, но, честно говоря, я бы очень хотел когда-нибудь попробовать это снова. Надеюсь, вам понравилось узнавать о моем дизайне и мыслительном процессе, и я хотел бы услышать ваши отзывы и поучиться у вас!

При создании этого проекта были использованы Sketch, Principle, Photoshop и After Effects.

Автора статьи зовут Matthew Farmer.
Он цифровой продакт-дизайнер из Сан-Франциско.
Свободно пишите ему на Email или в LinkedIn.

Вы можете найти странички автора на Instagram | Dribbble.

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

5 UX способов начать разработку дизайна правильно

Проблема в том, что если вы работаете с не-дизайнерами, красивые экраны – то, что нужно. Вы сможете предоставить “вау-эффект” клиенту, а как этот вау-эффект будет реализовываться, уже значения не имеет. А мы все-таки предпочитаем создавать нечто в духе “Все довольны”.

OOUX: Основа дизайна взаимодействий

Свой подход “Объектно-ориентированного UX” (Object-Oriented UX – OOUX) я представил в прошлом году на A List Apart. Подход подразумевает дизайн объектов перед проработкой действий.

Полное руководство по процессу продукт-дизайна

Наша команда выработала процесс продукт-дизайна с методическим набором инструментов, применимым к любой индустрии, благодаря чему работа становится более научно обоснованно и увлекательной.