Кейс из России: Зачем команда «Альфа-Мобайл​» меняет дизайн своего приложения

Менеджер по продукту «Альфа-Мобайл» Андрей Колесников рассказал для редакции vc.ru о процессе редизайна приложения: почему решили проводить редизайн, какие цели стояли и какие эксперименты проводили.

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

Все, кто когда-либо меняли дизайн приложений, знают, что любое изменение в продукте — это такой опыт, о котором не забудешь никогда. Будем честны, тех, кто с радостью воспринимают любые изменения, меньшинство. Большинство людей воспринимают переделанный логотип Instagram или измененный сценарий «Кинопоиска», как личное оскорбление или личную трагедию. Те, кто против, делятся на несколько групп:

  • Те, кому правда стало неудобно. Это совсем не те люди, которые из серии «непривычно». Это те пользователи, которые нашли время пройти новый онбординг, потестили основные функции и приложение в их сценарии действительно не легло. Нужно сразу сказать, что эта группа самая крутая для любого продуктолога, потому что, как правило, эти люди дают очень интересные и конструктивные фидбэки по продукту.
  • Мы их, наверное, забавно маркируем папами из «Зачем вы переложили носки из правого ящика в левый. Верните отцу возможность хранить лыжи на антресоли, какого черта вы их выбросили!». Чем отличается данная группа? Да, люди давно не пользовались какими-то функциями, либо вообще не пользовались. Да, было неудобно. Но человек так привык. Вот без всякой на то логики, так привык. И да, вы сделали что-то гораздо проще, чем было, но вы залезли на его территорию, а потому гореть вам в аду. Эта аудитория тоже классная, за счет своего консерватизма она не стремится не только к изменениям в приложении, но и мобильный банк они не склонны менять на новый. Аудитория верная, но гневливая. Интересно, что после того, как они выплеснут на вас весь свой гнев, они перепривыкнут по-новому и будут с вами жить в любви и согласии. Может даже в большей, чем было до того. И все будет хорошо до нового обновления. Но этот приступ праведного гнева, конечно, нужно пережить.
  • Дизайнеры. Отдельная категория оценки обновлений. Самая парадоксальная аудитория. С одной стороны, эти люди дико чувствительные к оценке своей собственной работы, с другой, они первыми включаются в аттракцион «кто-то выкатил редизайн». Вряд ли есть что-то более увлекательное, чем треды дизайнеров под обновлениями, когда «кровавые слезы» и прочее. Здесь нужно принять, как мне кажется, одну вещь. Чтобы вы ни сделали со своим приложением, дизайнеры вам этого не простят. Особенно, если вы кто-то большой. Редкое более-менее яркое обновление обходится без, назовем это, страстного публичного обсуждения.
  • «Эксперты рынка». Все знают их по имени и в лицо. Люди, которые живут с мыслью, что ничего в российском, и не только, digital не может пройти мимо них и без их участия. Требует от них экспертной заметки или колонки на тему, что абстрактный Google, Apple или Facebook делает не так, почему абстрактный «Яндекс» уже не тот и что абстрактному «Кинопоиску» нужно было делать по-другому. Внимание экспертов можно воспринимать, как некий признак вашей заметности. Конечно, приятно, когда эксперты оказались на вашей стороне, но чем больше будет ваш продукт и известнее ваша компания, тем реже это будет происходить с вами. Нужно просто это принять и жить с этим.

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

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

Существует два пути развития продукта. Первый — это когда кто-то решил, что продукт давно не обновлялся и решил перекрасить «некрасивые» кнопочки в «красивые» в соответствии с трендами. Либо вдруг решил, что «приложение устарело» и нужно, «как у Google». Второй путь — это когда мы понимаем, куда нужно развивать продукт, чтобы он был актуальным через 2–3–5 лет и подстраиваем дизайн под потребности наших пользователей.

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

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

Многие, кто работает в digital, знают, что есть три подхода бизнеса к смене дизайна:

  1. Когда бизнес ничего не хочет менять, даже в момент, когда приложение безнадежно устарело, потому что «и так все хорошо работает» и «всех все устраивает».
  2. Когда бизнес просто гонится за трендами ради трендов, не понимая смысла этих трендов или цели гонки.
  3. Только зарождающийся подход, когда бизнес понимает необходимость осознанной эволюции дизайна в соответствии с развитием платформ, пользовательского опыта и пользовательских сценариев.

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

Эксперименты с Sense

Год назад мы запустили довольно нетипичный продукт для банка — мобильное приложение Sense. Первое, что привлекло в нем внимание — «мимими»-дизайн для единорогов. Дизайн — главное, о чем начали говорить, когда мы выкатили Sense в бету. Но дизайн Sense был лишь приятным дополнением к совершенно новому подходу в построении интерфейсов банка, сценариев использования приложения, а главное — в коммуникации с пользователями.

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

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

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

Карточки Sense

Спустя два месяца после выхода мы провели ещё один уникальный эксперимент — ненадолго изменили основные имэйджи на Stars Wars. Мы не сделали кардинально иного дизайна, это было очень деликатно и получили неожиданно большое количество положительных откликов. Это был вообще первый опыт, когда банковское приложение перекрасилось под что-то, что было интересно пользователю. Наш вывод был такой: пользователям нравится ощущать, что приложение живое и меняющееся, но им нравится, когда мы с ними поступаем деликатно.

В феврале, основываясь на тех же принципах в построении интерфейсов, была выпущена специальная версия Sense для владельцев карт World of Tanks. С одной особенностью — WoT были полной противоположностью «мимимишному» интерфейсу.

Sense «Классический» и World of Tanks

Это был тот опыт, который показал нам, что, когда вы уверены, что хорошо знаете своих пользователей и умеете делать им лучше, не всегда правда.Так, мы были уверены, что милитаристский дизайн, тем более, выпущенный на 23 февраля «на ура» зайдет на мужскую аудиторию.

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

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

Преимуществом Sense было то, что он является новым продуктом для аудитории, любящей изменения. У него не было устаревших сценариев, незалеченных болячек или хронических недугов, не было антресолей и лыж. Благодаря Sense было проверено огромное количество продуктовых гипотез, которые мы теперь внедряем в основное приложение «Альфа-Банка».

Перед внедрением нового «Альфа-Мобайла» мы проводили количественные и качественные исследования на пользователях. И объективно на цифрах увидели, что новая навигация позволяет пользователям намного быстрее достигать своих целей. В предыдущей версии приложения основой главной страницы был длинный однородный список функций, причем достаточно неоднозначно отсортированный.

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

Экран со старыми и новыми платежами и переводами

Как мы к этому шли

В далеком 2008 году, когда появился первый интерфейс «Альфа-Мобайла», функциональности было не так много и обычного списка для отображения всего вполне хватало. В нем можно было разобраться даже очень неопытному пользователю. Но с каждым годом функций становилось все больше, а список на главной все длиннее.

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

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

Было разработано два варианта прототипов: вариант с привычными всем табами в нижней части экрана, вариант с плавающей кнопкой «Платежи и переводы». С этими двумя прототипами мы пошли к пользователям для проведения качественных исследований. Основной целью исследования было понять, насколько быстро люди ориентируются в новом интерфейсе и какое количество ошибок совершают, по сравнению с текущим интерфейсом.

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

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

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

За достаточно короткий промежуток времени наши Android-разработчики сверстали две версии дизайна прямо в боевом приложении «Альфа-Мобайл». Одна версия с табами, другая с фиксированной кнопкой. И запустили A/B-тестирование на небольшое число пользователей Android. Целью количественного тестирования было измерить время, за которое пользователь находит нужный ему платеж. По результатам тестирования с большим отрывом победила фиксированная кнопка. После чего стало очевидно, какое решение должно пойти в бой.

Что же принципиально изменилось вместе с дизайном

bc0c85455b70b2.jpg«Клик» и «Мобайл»

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

При этом делаем это не кардинально в один момент, а постепенно, сохраняя преемственность, стараясь не травмировать пользователей. Один из ярких примеров идеального сценария — перевод между счетами с помощью Drag’n'Drop. Мы оставили на главном экране привычный всем пользователям «Альфа-Мобайла» дашборд со счетами, так почему бы не дать пользователю возможность выполнить одну из самых часто выполняемых операций непосредственно в списке счетов простым перетаскиванием?

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

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

Главная из будущего

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

Статьи по теме

©  vc.ru