Лого vc.ru

Кейс Redmadrobot: редизайн iOS-приложения «Мой Билайн»

Кейс Redmadrobot: редизайн iOS-приложения «Мой Билайн»

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

Поделиться

Предыстория

Приложение «Мой Билайн» вышло в 2014 году и до недавнего времени практически не менялось с точки зрения UX/UI. За последний год продукт на платформе iOS был серьезно переработан: зимой приложение получило первую часть обновленной логики, а в июне — дополнительные логические улучшения и свежий UI. Наш заказчик, «Вымпелком», хотел осовременить дизайн, сделав его более свежим и дружелюбным, и улучшить общий пользовательский опыт. Тем временем пользователи жаловались на сложности с поиском нужной информации и услуг.

Задачи со стороны бизнеса:

  • Предоставить клиентам качественно новый сервис самообслуживания.
  • Снять нагрузку со службы поддержки.

Пользовательские проблемы:

  • Неудобная навигация и громоздкая структура приложения.
  • Слишком много информации, в которой тяжело ориентироваться.
  • Неудобно подключать услуги и опции.
  • Неясно отображается структура трат.
Павел Горшковдизайн-директор Redmadrobot

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

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

Навигация

Раньше в приложении было боковое меню, содержавшее массу пунктов («Главное», Финансы», «Тарифы», «Услуги», «Интернет», «Офисы», «Помощь», «Настройки», «Приложения»). Оказалось, что некоторые пользователи не догадывались о его существовании и частью функций приложения не пользовались вовсе. Не помогали даже специальные подсказки.

Мы заменили боковое меню на таббар, который отображается на всех экранах. Чтобы оставить главное для пользователя и отсечь ненужное, мы обратились к метрикам. Например, оказалось, что в старой версии в пункт меню «Офисы» заходили только 4% пользователей. Логично, что этому пункту не место на главном экране. Ограниченное пространство таббара также повлекло изменения логики.

В итоге таббар получился такой:

  1. Главный экран «Баланс», который полностью отвечает за баланс.
  2. Раздел «Финансы», где есть вкладки «Оплата» и «Расходы» с детализацией.
  3. Раздел «Тариф и опции» (раньше было три отдельных блока: «Тарифы», «Услуги», «Интернет»).
  4. Чат.
  5. Пункт «Еще», куда мы спрятали информацию, к которой обращаются реже всего (акции, офисы, информация о приложении и настройки).

Разделы расположены в порядке их приоритетности для пользователя:

Главный экран

Большим изменениям подвергся главный экран, который теперь называется «Баланс». Раньше на нем было слишком много информации, не всегда актуальной для пользователя (например, зачем предлагать человеку «доверительный платеж», когда у него и так достаточно денег на счете?).

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

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

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

«Какой у меня тариф?» — раньше это был один из самых частых вопросов, с которым пользователи обращались в колл-центр «Билайна». С тех пор линейка тарифов упростилась. Когда пользователь узнал свой тарифный план, нет нужды подсвечивать это каждый раз, когда он заходит в приложение. Поэтому мы убрали с главного экрана название тарифа, сделав акцент на остатке минут, SMS и трафика по пакету обслуживания. Раньше остаток скрывался по свайпу — теперь он отображается большими блоками.

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

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

Экран «Рубли»

Так как у «Билайна» много разных видов пользовательских рублей (бонусные, роуминговые и прочие), по тапу на сумму мы сделали переход на экран «Рубли». Там простым и понятным языком объясняется, из чего конкретно рубли «состоят», а также что такое постоплатная и предоплатная система расчетов.

Финансы

В новой версии приложения мы существенно поменяли логику этого меню. Раньше здесь была информация о балансе (сейчас она вынесена на главный экран). Теперь «Финансы» состоят из двух вкладок: «Оплата» и «Расходы».

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

Упрощенная оплата банковской картой в авторизованном режиме

Пополнение счета в приложении происходит через WebView, и сейчас изменить это невозможно. Для удобства пользователей мы сделали автоматическое заполнение нескольких полей: номер абонента и сумма пополнения. Сумма рассчитывается исходя из средней суммы, которую человек вносит на счет).

Тариф и опции

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

«Тариф и опции» и каталог

Экран тарифа

Мы значительно упростили сценарий подключения опций: сейчас их можно подключать и отключать прямо в каталоге опций, не «проваливаясь» глубоко в приложение и не читая кучу текста. После нажатия на конкретную опцию снизу выскакивает алерт с выбором действия: пройти на карточку опции и ознакомиться с условиями либо сразу же ее подключить. За год, прошедший с сентября 2015 года, количество просмотров тарифов выросло на 97%, миграции по тарифам — на 210%, а количество подключений — на 57%.

Чат с поддержкой

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

Еще

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

Персонализированные предложения и контекстные уведомления

Для коммуникации бизнеса с клиентом мы реализовали систему персонализированных предложений и контекстных уведомлений. Так, кнопка пополнения счета увеличивается, если сумма близка к нулю, а если заканчивается аккумулятор интернета, кнопка появляется прямо на нем. Аналогичным образом это работает на экране «Мой интернет».

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

Александр Бурдинарт-директор на проекте «Мой Билайн»

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

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

Кеширование данных и сплэшскрин

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

Никита Степановдизайнер на проекте «Мой Билайн»

Из-за сложной логики приложение долго загружалось и обновляло данные. Ускорить загрузку на программном уровне мы не могли: для этого потребовалась бы доработка middleware. Нужно было как-то решить проблему локально. Одним из решений стало вместо рекламы и картинок продублировать на сплэшскрине желтый фон. Так создается ощущение, что приложение почти запустилось, осталось только подгрузить данные.

UI-принципы

Никита Лукьяновдизайнер Redmadrobot

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

Акценты и цвета

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

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

Иконки

Иллюстрации и zero screens

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

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

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

В ходе редизайна было отрисовано более 300 экранов, протестировано 10 сценариев и нарезано свыше 100 иконок.

Что в итоге

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

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

Ежемесячная аудитория iOS-версии «Моего Билайна» с сентября 2015 года по сентябрь 2016 года выросла на 76%. Улучшились почти все показатели жизнеспособности по продукту: на 52% выросло количество установок, на 95% — месячная активная аудитория и на 129% — дневная активная аудитория. На 90% увеличилось количество сеансов, а показатель по вернувшимся пользователям вырос на 12%.

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

Убрали подробную информацию о расходах, вот это редизайн!
Списано за исходящие звонки 94₽. Куда звонил, когда? Хз. Старая версия давала ответ на эти вопросы

Ну написано же, что детализацию в Финансы убрали

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

Убрали в выписку на почту. Ну тут уж кому как

0

Раздел "что в итоге" смазал очень неплохую статью.
1. "Ежемесячная аудитория iOS-версии «Моего Билайна» с сентября 2015 года по сентябрь 2016 года выросла на 76%. Улучшились почти все показатели жизнеспособности по продукту: на 52% выросло количество установок, на 95% — месячная активная аудитория и на 129% — дневная активная аудитория. На 90% увеличилось количество сеансов, а показатель по вернувшимся пользователям вырос на 12%." - т.е. во время когда трафик из веба автоматом перетекает в мобайл, рост мобильной аудитории объяснен именно редизайном?
Ну и не забываем, что Билайн отрубил разговоры с операторами по телефону, так что у меня выбора не осталось - приходится лезть в чат приложения.

2. "Приложение практически полностью соответствует ожиданиям пользователя" - ну что за детский сад? Это на заборе написали пользователи приложения?

3. "Его функциональность имеет для аудитории ценность: даже те пользователи, которые не смогли авторизоваться, пытаются это сделать как минимум еще один раз" - т.е. плохо реализованную авторизацию попытались выставить достоинством?

4. "Приложение имеет хорошую доходность, которая продолжает расти." - ок, верим.

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

0

1. Чат не лучше, когда проблема условно не заключается в том, что забыл тариф. Например, я для маминого аккаунта пытался восстановить доступ, гораздо проще было бы по телефону рассказать всю историю. Чем набирать километр текста, а потом вылет из чата и по новой.
2. Когда мы говорим про конкретные вещи, хочется слышать конкретные вещи, а не какую-то воду. То что стал дизайн смахивать на Рокетбанк во второй версии, мне как пользователю профит не несет. Мне как предлагали сумасшедшие тарифы так и предлагают. Хотя там у Билайна Big Data куда не плюнь. А единственную крутую вещь я не могу подключить из этого приложения - тариф все за 1 рубль. 2 недели срался в чате, прежде чем подключил.
3. Мне вот, например, неочевидна. Я создал логин/пароль, но меня периодически разлогинивает и заставляет подключаться через сотовую связь. Причем это не при обновлении версии в магазине приложений, а рандомно. Что за бред?

0

1. Разве 0611 не работает?
3. Но это же у вас не ошибка авторизации?

0

1. Работает, но теперь не попасть на живого человека. Только автоответы и отсыл к приложению.
3. Я неправильно донес боль. Там проблема не только в том, что меня разлогинивает, а том что иногда после разлогина, авторизовавшись под логином/паролем, не работает виджет. Он требует, чтобы я авторизовался именно через 4G. И такая свистопляска уже очень долго продолжается, а периодически вообще виджет не пашет.

1

Все-таки не зря я дюжину человек 8 лет назад с Билайна увел

"Сумма пополнения рассчитывается исходя из средней суммы, которую человек вносит на счет"
Захардкодили 300₽, даже привязки к абон плате по тарифу нет

0

Чат отвратительный в приложении. Переписка постоянно сбивается и оператор начинает задавать вопросы "как вас зовут? Чем можем помочь?" Я постоянно копирую в кэш свое обращение, потому что знаю, что придётся повторить.

Иногда они еще через час-два могут начать спонтанно отвечать

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

Ну за код они не в ответе

0

Поэтому я и написал, что ребята молодцы.

0

))) поэтому я вас плюсанул

0

Одни хейтеры. Энергию комментариев бы, направить бы в созидательное русло.

0

А рейтинг новой версии не айс.

Приложение при этом весит почти 80мб
Вообще о пользователях не думаете :(

Интересно, они этот трафик в счет включают?

0

Приложение хорошее. Кавычки бы ещё поправили)

0

А для андроид будет редизайн?

0

В ближайшее время нет.

0

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

0

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

0

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

Сейчас обсуждают
Sasha Zivers

Мы ещё и яиц сами не несём, но пригорелую яичницу враз распробовать можем.

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Sasha Zivers

*паталогически собирает

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Sasha Zivers

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

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Sasha Zivers

Ну вот об этом как раз и много говорит и повторяет Кийосаки.
Но до многих так и не доходит и продолжают твердить как заводные: "его книжки не работают в россии!!"
Рилли? Не работает экономить на пассивах и умножать активы?)

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Sasha Zivers

Ну да, лучше послушайте гипнотезёра, лол.

(уточнил, т.к большинство не знает, кто это вообще)

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Показать еще