MFA Soft App

Редизайн приложения-аутентификатора MFASOFT для iOS и Android: светлая и тёмная темы, баннеры для App Store и Google Play. Кейс RezDesigners, 1,5 месяца

Мобильное приложение Дизайн

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

О клиент

MFASOFT — российская компания, которая разрабатывает, внедряет и поддерживает программное обеспечение для аутентификации и управления доступом. Её система двухфакторной аутентификации Secure Authentication Server на базе одноразовых паролей создана для импортозамещения и защищает доступ к устройствам и приложениям. Мобильное приложение — часть этой системы, и именно с ним каждый день работают сотрудники клиентов. Мы сделали редизайн приложения для iOS и Android в светлой и тёмной темах и подготовили баннеры для App Store и Google Play. Работа заняла 1,5 месяца

Карточка проекта

Параметр	Значение
Клиент	MFASOFT (ООО «СИС разработка»)
Страна	Россия
Ниша	Информационная безопасность, двухфакторная аутентификация
Что сделали	Редизайн мобильного приложения для iOS и Android в светлой и тёмной темах, баннеры для App Store и Google Play
Объём	2 платформы × 2 темы; число экранов 76; комплект баннеров для сторов
Срок	1,5 месяца
Год	2025
Инструмент	Figma

Задача

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

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

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

Как работает приложение

Приложение работает как обычный аутентификатор и вместе с сервером аутентификации ПК SAS MFASOFT активирует одноразовый пароль (OTP) в безопасном режиме и обеспечивает вход в сервисы с помощью push-уведомлений. Одноразовый код можно дополнительно защитить PIN-кодом на стороне сервера аутентификации или в самом приложении. Доступ к камере запрашивается только для сканирования QR-кодов при активации, а кроме того, поддерживается ручная активация одноразовых кодов

Решение

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

Ключевые решения

Коды всегда под рукой

Главный экран показывает одноразовые коды без лишних шагов

Два способа активации

Сканирование QR-кода и ручной ввод: для тех, кто не хочет давать доступ к камере. Интерфейс понятно объясняет, зачем приложению нужна камера

Подтверждение входа push-уведомлением

Отдельный понятный экран запроса: что пытается войти и что нужно сделать

PIN-код

Экраны ввода и настройки PIN-кода с понятными состояниями (ввод, ошибка, блокировка)

Светлая и тёмная темы

Обе темы спроектированы как полноценные, а не как инверсия цветов, чтобы приложение было удобно в любых условиях освещения

Платформенные особенности

Версии для iOS и Android учитывают правила каждой платформы, но остаются узнаваемыми как один продукт

Объём работ

Направление	Что вошло
Интерфейс	Приложение для iOS и Android
Темы	Светлая и тёмная
Основные сценарии	Активация (QR и вручную), коды, push-подтверждение, PIN-код, настройки
Маркетинг	Баннеры для App Store и Google Play

Как мы работали

Исследование

Изучили приложения-аутентификаторы на рынке и сценарии работы пользователей

Сценарии и структура

Выстроили путь активации, получения кода и подтверждения входа

Прототипы

Собрали ключевые экраны и проверили логику

UI-дизайн в Figma

Нарисовали интерфейс для iOS и Android в светлой и тёмной темах

Баннеры и передача

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

Сложности и как их решили

Сложность	Как решили
Продукт про безопасность: интерфейс должен вызывать доверие, но не усложнять работу	Сделали минималистичный интерфейс с ясными состояниями и текстами
Много состояний: ожидание запроса, ошибка, неверный PIN, истёкший код	Спроектировали все состояния заранее, чтобы пользователь не терялся
Две платформы и две темы	Собрали единую систему компонентов и адаптировали её под правила iOS и Android
Пользователь настороженно относится к доступу к камере	Предусмотрели ручную активацию и понятное объяснение, зачем нужна камера
Нужно объяснить B2B-продукт в сторе за несколько секунд	Подготовили баннеры с коротким месседжем и ясными экранами
Срок: 1,5 месяца	Работали по сценариям и согласовали ключевые экраны до отрисовки всех состояний

Результаты

Что получил клиент	Итог
Интерфейс	Обновлённое приложение для iOS и Android
Темы	Светлая и тёмная версии
Маркетинг	Баннеры для App Store и Google Play
Основа для развития	Макеты в Figma для команды клиента

Почему этот кейс важен для вашего проекта

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