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