Agile в дизайне: кейс мобильного приложения Oak

0
382

Возрождаем рубрику кейсов. И на этот раз кейс не локальный, а глобальный. Ведь что, как не кейсы нам показывают то, как нужно и как не нужно делать. Джонатан Кортни, основавший дизайн-агентство по диджитал продуктам AJ&Smart, рассказал об опыте работы над дизайном мобильного приложения Oak.

Итак, перед вами обзор спринта дизайна этого приложения от Джонатана:

Если вы когда-либо работали над приложением, вы можете только мечтать о чувстве переполняющей радости в момент, когда открываете App Store и видите свое приложение на главной странице. Затем вы открываете Product Hunt, и оно там тоже есть!

Приложение было совершенно новым, переделанным из первой версии приложения медитации Кевина Роуза «Oak», над которым мне и моим коллегам из AJ & Smart выпал шанс поработать.

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

Я редко получаю возможность показать людям, как именно мы разрабатываем продукты в AJ & Smart, потому что многие из продуктов, над которыми мы работаем, находятся под строгим соглашением о неразглашении, но Кевин любезно разрешил мне показать все.

У нас были удаленные спринты

Основным процессом, который мы использовали для переосмысления приложения и сотрудничества с Кевином (и его разработчиком), был Design Sprint от Джейка Кнаппа. Поскольку мы были на отдельных континентах и часовых поясах, мы сделали это полностью дистанционно.

[ Design Sprint – это пятидневный процесс решения проблем и тестирования новых идей. Он изобретен в Google Джейком Кнаппом, усовершенствован более чем 150 стартапами в GV, затем явился всему миру в бестселлере Sprint. ]

Поскольку я предполагаю, что многие из вас уже знают шаг за шагом Design Sprint, я не буду вас утомлять, вдаваясь в подробности и упражнения. Сосредоточим внимание на тех моментах, которые сделали этот спринт особенным.

Кевин Роуз
Кевин Роуз

Общее время проекта: 4 недели (до перехода к разработчику)

Оригинальная область работы: изменение экрана выбора медитации приложения Oak (в дальнейшем превратилось в полный редизайн приложения)

Интересная информация: весь спринт был запущен удаленно, потому что Кевин Роуз был в Сан-Франциско, а AJ & Smart базируется в Берлине.

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

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

Затем я познакомился с Кевином в Сан-Франциско и рассказал ему о наших идеях по улучшению продукта. Вместе мы решили, что AJ & Smart поможет ему спроектировать новый экран выбора медитации в приложении. Но он и не знал, что когда я вернулся в Берлин и рассказал об этом команде, мы были так взволнованы проектом, что решили удивить Кевина и сделать полный редизайн с нуля, разобрав приложение по частям и снова собрав его.

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

Что такое Oak? Это приложение для медитации и дыхания, где пользователи могут отслеживать прогресс и цели. Оригинальная версия была выпущена Кевином Роузом в 2017 году.

Шаг 1: Первоначальный вызов и дистанционное экспертное интервью

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

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

Кевин
Разговор команды с Кевином

Мы сделали это удаленно с помощью RealtimeBoard – мы создали небольшие виртуальные заметки и заполнили их на доске. Это помогло нашей команде и Кевину увидеть все в одном месте и обновить в режиме реального времени, находясь при этом на разных континентах.


Нравится материал? Подпишись!

RealtimeBoard
Виртуальная доска RealtimeBoard

Общее время звонка: 1 час и 20 минут.

Шаг 2: Создание целей и вопросов спринта

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

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

Шаг 3: Создание карты

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

Примечание. Обычно мы не рекомендуем расширять сферу применения спринта, если только ваша команда не имеет большого опыта работы с крупномасштабными проектами и обладает способностью справляться хорошо с чем-то подобным.

Шаг 4: Демо-версии

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

Realtimeboard
Сортировка карточек в доске

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

Pinterest
Доска в Pinterest

Вдохновение Кевина: Мы спросили Кевина перед нашим первым вызовом найти некоторые продукты, которые его вдохновили, и представить их нам по вызову, чтобы мы могли понять субъективность, когда речь пойдет о дизайне, и подтолкнуть нас в правильном направлении. В обычном демонстрационном режиме Design Sprint мы сказали ему, что это не должны быть другие приложения для медитации и что ему следует искать вдохновение в других продуктах и отраслях.

Шаг 5: Создание первых эскизов

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

Realtimeboard
Кевин оставляет комментарии по нашим эскизам

Шаг 6: Голосование за эскизы

Затем мы попросили Кевина проголосовать за то, что ему нравилось в этих эскизах, так что у нас появилась идея по поводу того, в каком направлении нам стоит двигаться, прежде чем приступить к дизайну.  Также мы попросили его отправить нам видеоролики о том, как он говорит об эскизах с открытой доской Realtimeboard. Так мы поняли, что ему нравится и что нет.

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

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

Рисование иллюстраций к приложению
Рисование иллюстраций к приложению

Шаг 7: Прототипирование

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

Наш выбранный экранный инструмент – Figma. Мы двигались шаг за шагом из рисованной раскадровки и начали работать в Figma, а затем экспортировали экраны в Marvel для прототипирования.

Шаг 8: Первый фидбэк от Кевина

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

Обновление времени: На этом этапе у нас 3-й день первой недели.

Шаг 9: Согласование

На этом этапе, в конце 1-й недели, у всех нас было видение того, что новая версия приложения будет. У нас была полная гарантия покупки от Кевина, поэтому мы могли уверенно продвигаться вперед, чтобы создать все экраны.

Шаг 10: Создание экранов

Мы потратили около 2 недель на создание экранов. Федор, Тим и Роб, наши удивительные дизайнеры, выкладывались во всю.

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

Шаг 11: Передача разработчику

На этом этапе мы передали все разработчику, с которым Кевин работал (Тейлор Робинсон, она потрясающая!).

И прошло 3-4 месяца, прежде чем мы узнали, что новое приложение Oak находится в Appstore и с любовью загружается со всего Интернета!

Кевин был очень доволен результатом.

Отзыв Кевина
Отзыв Кевина

Мои советы по удаленному Design Sprint:

Будьте особенно конкретными, когда делаете заметки “Как мы можем”. Возможно, кому-то другому на другом конце света нужно будет их прочитать тогда, когда вы не будете там, чтобы объяснить, что вы имели в виду.

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

Дополнительный акцент на демонстрационных версиях: опять же, потому что есть вероятность возникновения путаницы. Важно понять мышление клиента и то, что он задумал. Это труднее сделать когда вы не в одной комнате, поэтому мы всегда уделяем им много внимания в таких случаях. Они показывают нам, что их вдохновляет, мы со своей стороны также работаем над этим (например, доска Pinterest).

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

Конечный результат нашей работы
Конечный результат нашей работы

Панель инструментов Remote Sprint:

RealtimeBoard – инструмент совместной работы, в котором вы можете создать рабочую область, в которой есть все, что вам нужно для спринта (точки голосования, история и т. д.).

Basecamp – инструмент для управления проектами. Важно всегда отслеживать четкие и прозрачные заметки, которые могут получить все члены команды.

Figma + Marvel – Дизайн и прототипирование пользовательского интерфейса.