Личный проект арт-директора
Редизайн приложения ForteBank
Аналитика, UХ/UI, прототип Figma
Задача
Сделать редизайн приложения. Упростить UI, облегчить UX мобильного интернет-банкинга для FotreBank.
ForteBank
Мобильный интернет-банкинг это цифровая экосистема Forte в которой есть управление и открытие новых счетов, оформление депозитов и кредитов, выпуск карт, переводы, оплата услуг, фирменный маркетплейс ForteMarket, платформа для туризма ForteTravel, страхование, работа с биржей.

Задача
Стать центральным пользовательским элементом экосистемы банка.
О проекте
Данный кейс является личным проектом арт-директора Алимхана Жапар. Проект выполнен бесплатно. Приложение ForteBank выбрано по личным предпочтениям.
Исполнитель
Алимхан Жапар
Работы
  • Аналитика
  • UX/UI дизайн
  • Прототип
  • UI-тестирование
Срок
9-27 декабря 2020 года
Инструменты
  • Figma
  • Adobe Photoshop
  • Adobe Illustrator
  • Google Forms
  • Notion
Что было сделано?
Аналитика

  • Изучены и протестированы мобильные интернет-банкинги (миб) ForteBank и еще 4 банков Казахстана и России: Сбербанк, Халык банк, Каспи банк, Тинькофф банк.
  • Проведен опрос 72 пользователей (25-40 лет, Казахстан, США) на пользование миб.
  • Вычитаны и изучены негативные комментарии в Play Market
  • Прочитаны статьи в интернете на тему миб ForteBank.
  • Детально изучен гайдлайн ForteBank

Дизайн

  • Упростили дизайн, добавили фишки.
  • Применили эмоциональный дизайн.
  • Сделали текст читабельным.
  • Облегчили UX.
  • Придерживались гайдлайнов ForteBank.

Тестирование

  • Провели UI-тестирование приложения и опрос с 21 пользователями (25-40 лет, Казахстан, США).
  • Получили и обработали отзывы
  • Применили рекомендации для улучшения интерфейса

Процесс
Аналитика
Опросили 72 пользователей мобильного интернет-банкинга (миб). 95,8% пользуются миб хотя бы раз в день. 62% пользователей в основном переводят деньги, 25% оплачивают услуги. 70,8% пользуются миб Каспи банка. 41,7% пользователям нравится дизайн миб, 16,7% предложили доработать его. 48,8% нравится UX, 29,2% уже привыкли. Пользователи отметили что нравится многофукциональность миб. Можно оплатить, перевести, оформить кредит, заказать услугу онлайн. Оплата по номеру телефона и QR-коду очень удобная функция. Некоторым не понравился медленный отклик, подвисание и разлогирование миб. Жаловались на отсутствие NFC-оплаты. Пользователи хотели бы иметь функцию выгрузки выписки в PDF-файл и возможность скрывать свой баланс при оплате. Получать больше подсказок при оплате государственных услуг. Иметь поиск и функцию управления семейным бюджетом. Пользователи отметили, что хотят видеть удобные миб других банков, как альтернатива Каспи банку.
Рейтинг в Play Market

Рейтинг приложения в Play Market 2,8 (по состоянию на 09.12.2020). Пользователи не довольны приложением. Жалуются на сложность выполнения операций, пишут о багах и неудобству пользования. Некоторых пользователей не устраивает новый интерфейс. Просят вернуть как было или иметь возможность пользоваться старым приложением.
Обзор приложения Forte

Скачали и установили приложение. Изучили функции и протестировали.

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

Изучены и протестированы приложения 4 банков Казахстана и России: Сбербанк, Халык банк, Каспи банк, Тинькофф банк.
Сбербанк
ПЛЮСЫ
  • Выдержанный фирменный стиль.
  • На стартовом экране личное приветствие на фоне красивого пейзажа, который меняется в зависимости от времени суток.
  • У шрифтов достаточный контраст и размер. Удобно читать.
  • Карты и услуги можно переименовать с использованием эмоджи.
  • Комментарии к многим полям помогают лучше разобраться в приложении.
  • Выбор до 5 языков. Казахский, русский, английский, китайский, турецкий
  • Есть поиск

МИНУСЫ
  • Тему оформления приложения нельзя поменять
Халык банк
ПЛЮСЫ
  • Фирменный стиль выдержан. Использованы основные цвета банка
  • Иконки красивые и приятные. Нарисованы в фирменных цветах и четко иллюстрируют контент. В платежах используются родные иконки компаний.
  • Карты и услуги можно переименовать с использованием эмоджи.
  • Есть поиск

МИНУСЫ
  • Тему оформления приложения нельзя поменять
  • Язык только русский
  • Стартовый экран перегружен информацией.
  • Для авторизации приходится выполнять больше действий
Каспи банк
ПЛЮСЫ
  • Фирменный стиль выдержан. Использованы основные цвета банка
  • Иконки ясные и контрастные. Нарисованы в фирменных цветах. В платежах используются родные иконки компаний.
  • Шрифт крупный и контрастный. Удобен для чтения для людей с плохим зрением.
  • Некоторые платежи можно переименовать
  • Платежи можно переименовать с использованием эмоджи
  • Есть поиск

МИНУСЫ
  • Меню расположено в самом труднодоступном месте. Не удобно нажимать и выбирать пункты подменю
  • Язык основной русский. Казахский только в меню "Мой банк"
  • Имя пользователя нельзя поменять
  • Тема приложения только белая. Нельзя поменять.
  • Карту переименовать нельзя
  • При отправке денег на переименованный перевод (новое имя с эмодзи) отображается системное название получателя (старое имя с именем получателя).
Тинькофф банк
ПЛЮСЫ
  • Платежи в виде карточек (свайпы)
  • Экран платежа/перевода интуитивно понятен
  • Темы приложений две: темная и светлая.
  • Интерфейс простой и понятный, не перегруженный
  • Иконки ясные и контрастные. В платежах используются родные иконки компаний.
  • Шрифт крупный и контрастный. Удобен для чтения для людей с плохим зрением.
  • Есть поиск. Головой поиск.
  • Мануал приложения в виде коротких сторис
  • Комментарии к полям помогают лучше узнать о банковской операции (комиссии, сроки платежа и тп)
МИНУСЫ
  • Не выявлено. Тестировалась демо-версия.

Платформа

79,4% трафика, создаваемого мобильными устройствами в Казахстане принадлежит Android-смартфонам. Решили делать редизайн приложения для них. Изучили гайдлайны мобильных приложений Google.
Дизайн
Цвета

Использовали 3 основных цвета. Фирменный красный цвет для выделения главных активных элементов интерфейса — поля для ввода информации, кнопки, иконки. Дополнительным синим цветом выделили вспомогательные элементы — стрелки, карточки сторис, пункты меню, статус бар.
Черным цветом выделили основной текст, заголовки, списки, названия. Серым — поясняющий тест, названия меню.
UI-кит

Изучили гайдлайны мобильных приложений Google. Задизайнили готовые шаблоны и сохранили в UI-кит приложения.
Интерфейсы

87% операций (опрос 74 пользователей) в миб это переводы или оплата услуг. В первую очередь разработали интерфейсы этих экранов.
Шрифт/текст

Чтобы было удобно читать текст разместили его на светлом фоне. Использовали 1 шрифт и 5 стилей текста.
Кнопки/активные элементы

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

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

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

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

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

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

Блок интерфейса "Мой Forte" выделили фирменным паттерном, особой формой кнопок и красным текстом.
Темная тема

Сделали дизайн "темной" темы для удобства пользования в темное время суток.
UI-тестирование
Подготовили прототип приложения в Figma и опросник. Провели UI-тестирование c 21 пользователем.
Отзывы

57,2% пользователям понравился новый UI. 42,9% легко разобрались в новом UX. 80,3% сообщили что весь текст читается. У 85,7% пользователей круглая кнопка не вызвала дискомфорта и они легко разобрались со свайпами влево/вправо. 71,4% отметили приятным и жизнерадостным экран приветствия. Пользователям понравились простота UX, обозначение шагов в операциях и ясно видимый баланс на картах. Также оценили хорошую верстку элементов главного экрана. Много информации, но легко найти нужную функцию. Хотели бы видеть не просто онлайн-банкинг, а что-то наподобие супер-приложения все в одном.
Работа со Студией
Сделаем дизайн интерфейса под любые задачи. Проконтролируем все стадии процесса. Найдем проверенных разработчиков или порекомендуем надежных партнеров.

Наемный работник
Можно нанять арт-директора на проект или срок. Договорится о задачах, установить сроки. Работать удаленно или в офисе.
Резюме Алимхана Жапар

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