Провели редизайн приложения МКБ

Сделали бодрый и вдумчивый редизайн инвестиционного сервиса Московского кредитного банка.

Задача

Вместе с командой банка вывести «МКБ Инвест» в лидеры рынка инвестиционных приложений

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

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

Приложение МКБ до редизайна и Новое приложение

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

Решение

В основе решения — две идеи

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

У вас есть похожая задача? Давайте обсудим!

Провели исследовательскую работу

Чтобы сделать хорошую концепцию, начали с исследований:

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

На основе этих данных вместе с командой банка сформировали и приоритизировали бэклог.

Заголовок

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

Иван Андреев

Дизайнер интерфейсов

Продумали концепцию

Над концепцией плотно работали вместе с клиентом. Много думали про архитектуру будущего решения, логику взаимодействия.

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

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

Больше экранов нашей концепции

Проработали ключевые сценарии

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

Ниже — ключевые сценарии, которыми особенно гордимся.

Заботливо знакомим с продуктом
Улучшили онбординг для пользователей, которые только собираются стать клиентами МКБ. Путь всегда разный, онбординг зависит от этапов, на которых пользователь сейчас находится. Информацию старались давать поэтапно, чтобы не перегружать пользователя.
Держим пользователя в курсе новостей
Теперь на главном экране банк может общаться с пользователем, знакомить его с последними новостями. В ленте событий отражена актуальная информация: движение активов, новости рынка, в будущем — персонифицированные уведомления.
Фокусируем на четких задачах
Помогаем ставить цели на будущее, воплощать в жизнь финансовую стратегию. В будущем разовьем интересные персональные фичи — дадим возможность подписываться на финансового наставника, на стратегии, дадим обучающие материалы по инвестициям. Сделаем опыт пользователей еще более ценным и уникальным.

Заголовок

«Собрали кликабельный прототип и повезли его в Москву, на утверждение к топ-менеджменту банка. Защитили концепцию и приступили к дальнейшей работе над продуктом.»

Дмитрий Ванин

Руководитель проекта

Собрали UI-кит

После презентации и утверждения концепции собрали UI-кит. Это помогает сохранять консистентность системы. А в будущем — облегчает ее масштабирование.

Часть элегантного UI-кита

Детально проработали макеты

Сфокусировались на развитии продукта. Ниже — самые интересные разделы, которые появились на этом этапе.

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

Экран, который не только спрашивает как дела, но и поздравляет с новым статусом

Заголовок

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

Константин Шабалин

Начальник управления развития продуктов «МКБ Инвестиции»

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

Так выглядит экран инструмента

Заголовок

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

Марго Вырвич

Руководитель проекта

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

Подборки и покупки помогают пользователю сориентироваться во всем многообразии рынка

Заявки
Увеличили инструментарий инвестора: добавили лимитную заявку, стоп-лимит и тейк-профит. Сделали экран более простым и понятным для восприятия.

Экраны, которые помогают инвесторам управлять своими активами.

Итог

Сделали бодрый и вдумчивый редизайн инвестиционного сервиса МКБ

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

После публикации рейтинга Markswebb дополним кейс и расскажем, как изменились позиции банка за год.

Заголовок

«Для нас это больше чем редизайн, это начало нового этапа развития приложения с определенной философией. Мы хотим, чтобы „МКБ Инвест“ стал инструментом, который поможет начинающему или опытному инвестору работать на фондовом рынке осознанно, в долгосрочной перспективе.»

Константин Шабалин

Начальник управления развития продуктов «МКБ Инвестиции»