Finoria — приложение для личных финансов, iOS | Сергей Саяпин, продуктовый дизайнер

Finoria

Мобильное приложение для личных финансов:
бюджет, операции и капитал в одном месте

Содержание кейса

• О продукте

• Этапы работы

• Главная

• Бюджет

• Операции

• Капитал

• Другие разделы

• Итог

О проекте

Роль: Product designer

Продукт: iOS-приложение

Тип проекта: B2C

Ссылка на продукт:

скоро

Задача

Провести аудит интерфейса и редизайн UX/UI перед выходом приложения в App Store

О продукте и этапах работы

В Finoria главное не расходы, а капитал. Пользователь планирует бюджет на месяц, разбирает операции из банковских выписок и следит, как меняется его капитал: деньги в фондах и имущество за вычетом кредитов. Приложение сделано для iPhone и готовится к выходу в App Store

Screen Flow

Изучил техническую документацию и логику продукта, собрал скринфлоу приложения со всеми переходами

Аудит

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

Главная

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

Платежи

Проблемные зоны

Решение

Карточка месяца

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

Доходы и расходы в формате «факт / план» с полосами: видно, сколько ещё придёт и сколько осталось на траты. Сумма, которую можно потратить, стоит в акцентной карточке и считывается первой

Вне бюджета

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

Нейтральная карточка с кнопкой «Разобрать»: видно, сколько операций и денег ждёт разбора. Красный на Главной остался только у просрочки

Ближайшие платежи

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

У платежей статусы «Сегодня», «Завтра» и «Просрочено», просроченный в красной рамке. Доход зелёный с плюсом, расход тёмный с минусом, платёж в фонд с синей полосой слева. Полный список открывается по ссылке «Все»

Шапка

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

Импорт выписки в шапке каждого раздела, рядом подсказки и профиль. Вместо безликого заголовка приветствие по имени

Кнопка добавления

Низ экрана занимали кнопка «Добавить операцию» и плашка беты, хотя плашка нужна один раз

Добавление в плавающей кнопке «+», она под рукой при прокрутке. Плашка беты убрана

До

После

Бюджет

Статья бюджета это план на месяц по одной трате или доходу, например «Ипотека», «Продукты» или «Зарплата». Статьи разложены по вкладкам Расходы, Доходы и Фонд. Фонд хранит накопления: его пополняют и из него снимают. Операции, которые ещё не привязаны к статьям, собираются в блоке «Вне бюджета». Разобрал список статей, саму статью и её создание. Ниже пять главных изменений

Список статей

Проблемные зоны

Решение

Карточка статьи

Перерасход приходилось искать, сравнивая пары чисел: статья показывала «0 ₽ из 888» и иногда дату платежа, без прогресса, состояния и периодичности

Полоса прогресса с цветом состояния: зелёная с галочкой, если план выполнен; оранжевая, если он почти исчерпан; красная с суммой перерасхода. У статей без плана подпись «без лимита», под названием периодичность и день платежа

Сводка месяца

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

Сводка начинается со свободных денег и их расчёта: на счетах минус запланированные траты. План и факт по доходам и расходам открываются по «Подробнее».

Пустой бюджет

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

На экране одно действие: «Создать статью». Рядом короткий текст и ссылка «Как это работает?», подсказки открываются по иконке в шапке

До

После

Статья бюджета

Проблемные зоны

Решение

Экран статьи

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

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

Новая статья

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

Тип выбирается первым, и форма подстраивается под него: для фонда появляется выбор пополнения или изъятия

До

После

Операции

Пока операция не привязана к статье, она остаётся вне бюджета и не учитывается в плане. Переводы в бюджете не учитываются, а пополнения и изъятия фонда связаны с Капиталом. Разбирал список, детали операции и добавление. Ниже пять главных изменений. За кадром остались мелочи: подробный и компактный режимы списка, шторки iOS вместо диалогов Android и блок «Разбить на части» под будущую функцию.

Список операций

Проблемные зоны

Решение

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

Список сливался в красную стену: тип показывался трижды, цветной полосой, тегом и цветом суммы. У расходов красные тег и сумма, у операций без статьи ещё красный «!»

Тип читается по знаку суммы: расход тёмный с минусом, доход зелёный с плюсом, тег убран. Фонд и переводы подписаны над названием и отмечены полосой слева, синей и серой. Вместо красного «!» спокойная подпись «Без статьи бюджета» и фиолетовая кнопка «привязать»

Фильтры и период

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

Все фильтры в одной шторке: тип, теперь с фондом и переводом, банки, ручные операции и прежний фильтр «Без статьи». На кнопке заранее видно число операций, выбранные фильтры остаются чипами, а месяц переключается стрелками или барабаном

До

После

Детали операции

Проблемные зоны

Решение

Сумма и тип

Текущий тип и его смена были разными элементами: тип показывался подписью «РАСХОД», а сменить его предлагали отдельные чипы под ней. Сумма менялась во всплывающем диалоге в стиле Android

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

Привязка к статье

В выборе статьи был виден только план, например «План: 155 ₽», без остатка. Операцию легко было отнести туда, где деньги уже закончились

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

Добавление операции

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

«+» открывает меню, где первым идёт «Загрузить выписку», вторым «Добавить операцию». В форме сумма крупно под переключателем типа, а кнопка неактивна, пока форма не заполнена

До

После

Капитал

Сверху экрана итог, ниже три вкладки: Фонд для накоплений, Имущество для квартир, машин и техники, Кредиты для долгов. Самый большой раздел: сводка, фонд, имущество и кредиты. Ниже девять изменений, а мелочи вроде иконок у вкладок и архива проданных объектов со счётчиком в разбор не попали

Сводка и фонд

Проблемные зоны

Решение

Сводка капитала

Расчёт итога не читался: чистая стоимость, «чем владею» и «что должен» стояли тремя карточками. Долг, обычный для ипотечного заёмщика, всегда был красным

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

Динамика фондов

Растут ли накопления, было не понять: под балансом фонда сразу шёл список операций

Под балансом график «Динамика фондов» по месяцам, а история операций свёрнута в строку с их числом

До

После

Имущество

Проблемные зоны

Решение

Карточка объекта

Долг был красным тегом без прогресса выплат, а у проданного объекта показывались только цена и дата продажи

Вид карточки зависит от состояния: у объекта в ипотеке выплаченная сумма и остаток долга с полосой прогресса, у проданного прибыль и кнопка «Архивировать». Состояние видно без перехода внутрь

Экран объекта

Три кнопки трёх цветов с одинаковым весом: изменить стоимость, продать и удалить. Кредит, связанный с объектом, на экране не показывался

Одно основное действие «Продать квартиру», редактирование в шапке, удаление внутри параметров. Появился блок привязанного кредита с остатком и платежом

Проданный объект

Цены продажи и суммы после погашения долга не было: после продажи экран почти не менялся, на нём оставались метка «Продано», доля, стоимость и пустой график

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

Параметры имущества

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

Экран «Параметры имущества»: тип, название и стоимость с подсказкой про рыночную цену. Долг включается переключателем и раскрывает свои поля, адрес и площадь вынесены в дополнительный блок

До

После

Кредиты

Проблемные зоны

Решение

Карточка кредита

Ставку, срок и погашение приходилось смотреть внутри: в списке были только название, тип, остаток и платёж в месяц

Главное о кредите видно в списке: остаток, ставка, платёж, дата окончания и полоса погашения с датой ближайшего платежа

Экран кредита

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

Появился блок «Привязанное имущество» с залогом. Статьи разделены на основной платёж и сопутствующие расходы вроде страховки и налогов, у каждой свой прогресс

Новый кредит

Разницу между типами и свои объекты приходилось держать в голове: типы кредита шли списком одних названий, а залог выбирался в выпадающем списке имён

У типов пояснения про залог, объекты для залога показаны списком со стоимостью, а на шаге параметров сверху выбранные тип и объект

До

После

Другие разделы

Картинки для App Store, авторизация, онбординг, профиль и импорт

ЗАДАЧА

Решение

Показать пользу приложения ещё в магазине

Пять картинок: короткий заголовок о пользе и экран, который её показывает, например «Управляйте капиталом, а не только расходами». Картинки в магазине листают быстро, поэтому на каждой одна мысль

ЗАДАЧА

Решение

Авторизация / регистрация

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

ЗАДАЧА

Решение

Онбординг

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