Finoria
Мобильное приложение для личных финансов:
бюджет, операции и капитал в одном месте
бюджет, операции и капитал в одном месте
Содержание кейса
• О продукте
• Этапы работы
• Главная
• Бюджет
• Операции
• Капитал
• Другие разделы
• Итог
О проекте
Роль: Product designer
Продукт: iOS-приложение
Тип проекта: B2C
Ссылка на продукт:
скоро
Задача
Провести аудит интерфейса и редизайн UX/UI перед выходом приложения в App Store
О продукте и этапах работы
В Finoria главное не расходы, а капитал. Пользователь планирует бюджет на месяц, разбирает операции из банковских выписок и следит, как меняется его капитал: деньги в фондах и имущество за вычетом кредитов. Приложение сделано для iPhone и готовится к выходу в App Store
Screen Flow
Изучил техническую документацию и логику продукта, собрал скринфлоу приложения со всеми переходами
Аудит
Провел аудит по всему функционалу, согласовал проблемные зоны напрямую с владельцем продукта
Главная
Прошёл экран сверху вниз: шапка, карточка месяца, операции вне бюджета, ближайшие платежи и кнопка добавления. Ниже пять изменений, которые поменяли экран сильнее всего. Мелкие правки в кейс не вошли, например с Главной убрано промо веб-аналитики по проектам
Платежи
Проблемные зоны
Решение
01
Карточка месяца
По экрану было не понять, идёт ли месяц по плану. Сумма, которую можно потратить, была обычной зелёной цифрой, а доходы и расходы показывались только фактом, без плана
Доходы и расходы в формате «факт / план» с полосами: видно, сколько ещё придёт и сколько осталось на траты. Сумма, которую можно потратить, стоит в акцентной карточке и считывается первой
02
Вне бюджета
Операции вне бюджета висели красным блоком с красным бейджем, как системная ошибка, хотя разбирать их для пользователя обычное дело
Нейтральная карточка с кнопкой «Разобрать»: видно, сколько операций и денег ждёт разбора. Красный на Главной остался только у просрочки
03
Ближайшие платежи
Платежи шли одинаковыми строками: дата, название и сумма без знака. Что оплатить сегодня, что просрочено и какие деньги придут, а какие уйдут, видно не было
У платежей статусы «Сегодня», «Завтра» и «Просрочено», просроченный в красной рамке. Доход зелёный с плюсом, расход тёмный с минусом, платёж в фонд с синей полосой слева. Полный список открывается по ссылке «Все»
04
Шапка
Выписку можно было загрузить только из «Операций», хотя это основной способ получить операции. Заголовок «Финансы» ничего не говорил пользователю
Импорт выписки в шапке каждого раздела, рядом подсказки и профиль. Вместо безликого заголовка приветствие по имени
05
Кнопка добавления
Низ экрана занимали кнопка «Добавить операцию» и плашка беты, хотя плашка нужна один раз
Добавление в плавающей кнопке «+», она под рукой при прокрутке. Плашка беты убрана
До
После
Детали операции
Проблемные зоны
Решение
03
Сумма и тип
Текущий тип и его смена были разными элементами: тип показывался подписью «РАСХОД», а сменить его предлагали отдельные чипы под ней. Сумма менялась во всплывающем диалоге в стиле Android
Тип стал переключателем «Расход / Перевод / В фонд»: текущее значение и варианты в одном элементе. Сумма крупно и правится прямо в шторке, под ней дата и банк
04
Привязка к статье
В выборе статьи был виден только план, например «План: 155 ₽», без остатка. Операцию легко было отнести туда, где деньги уже закончились
У каждой статьи остаток плана, под заголовком сумма операции. Сразу видно, куда операция поместится, и легче не выйти за план
05
Добавление операции
Кнопка «Добавить» вела сразу в ручной ввод, а выписку можно было загрузить только иконкой в шапке «Операций». В форме сумма была мелким полем, а кнопка «Внести операцию» выглядела активной при пустых полях
«+» открывает меню, где первым идёт «Загрузить выписку», вторым «Добавить операцию». В форме сумма крупно под переключателем типа, а кнопка неактивна, пока форма не заполнена
До
После
Дополниетельные экраны
Детали операции
Проблемные зоны
Решение
03
Сумма и тип
Текущий тип и его смена были разными элементами: тип показывался подписью «РАСХОД», а сменить его предлагали отдельные чипы под ней. Сумма менялась во всплывающем диалоге в стиле Android
Тип стал переключателем «Расход / Перевод / В фонд»: текущее значение и варианты в одном элементе. Сумма крупно и правится прямо в шторке, под ней дата и банк
04
Привязка к статье
В выборе статьи был виден только план, например «План: 155 ₽», без остатка. Операцию легко было отнести туда, где деньги уже закончились
У каждой статьи остаток плана, под заголовком сумма операции. Сразу видно, куда операция поместится, и легче не выйти за план
05
Добавление операции
Кнопка «Добавить» вела сразу в ручной ввод, а выписку можно было загрузить только иконкой в шапке «Операций». В форме сумма была мелким полем, а кнопка «Внести операцию» выглядела активной при пустых полях
«+» открывает меню, где первым идёт «Загрузить выписку», вторым «Добавить операцию». В форме сумма крупно под переключателем типа, а кнопка неактивна, пока форма не заполнена
До
После
Дополниетельные экраны
Детали операции
Проблемные зоны
Решение
04
Привязка к статье
В выборе статьи был виден только план, например «План: 155 ₽», без остатка. Операцию легко было отнести туда, где деньги уже закончились
У каждой статьи остаток плана, под заголовком сумма операции. Сразу видно, куда операция поместится, и легче не выйти за план
03
Сумма и тип
Текущий тип и его смена были разными элементами: тип показывался подписью «РАСХОД», а сменить его предлагали отдельные чипы под ней. Сумма менялась во всплывающем диалоге в стиле Android
Тип стал переключателем «Расход / Перевод / В фонд»: текущее значение и варианты в одном элементе. Сумма крупно и правится прямо в шторке, под ней дата и банк
Другие разделы
Картинки для App Store, авторизация, онбординг
ЗАДАЧА
Решение
Показать пользу приложения ещё в магазине
Пять картинок: короткий заголовок о пользе и экран, который её показывает, например «Управляйте капиталом, а не только расходами». Картинки в магазине листают быстро, поэтому на каждой одна мысль
ЗАДАЧА
Решение
Авторизация / регистрация
Один сценарий для новых и вернувшихся пользователей: почта и код из письма или вход через Google. Пароль не нужно придумывать и помнить. Прорисованы ошибки и повторная отправка кода с таймером
ЗАДАЧА
Решение
Онбординг
По просьбе заказчика сделал онбординг с нуля: светлые экраны с 3D-иллюстрациями, короткий заголовок и строка о пользе. Мысль считывается с одного взгляда, спокойная подача подходит продукту, которому доверяют деньги
