Кейс. Мобильное приложение для учёта персональных финансов
Разработал дизайн-систему, брендинг, сценарии использования и дизайн мультиплатформенного мобильного приложения и веб-версии.
Основной функционал приложения – учет доходов и расходов пользователя. Показываем пользователю подробную финансовую статистику.
Дизайн система
Дизайн приложения построен в фигме, для него я разработал дизайн систему которая содержит все элементы приложения в различных состояниях, а также версии компонентов для десктопного веб-варианта нашего сервиса. Все компоненты строятся на автолейаутах, с вариантами.
Палитра
Цвета парные, у каждого цвета есть аналог для темной темы.
Темная и светлая тема
Так как цвета создавались парами, перекрашивание приложения в темную тему в плане работы занимает несколько минут.
Кнопки
Используется несколько вариантов кнопок, каждый прорисован во всех необходимых состояниях и «упакован» в компонент с вариантами.
Иконки банков
Я отрисовал иконки популярных банков России, Украины, США, Англии, Германии, Беларуси, Канады, Италии. Это те страны, куда мы хотели заходить на старте. Сейчас приложение доступно только для РФ региона.
Карточки сущностей
Отрисованы во всех возможных состояниях, сделаны на автолайаутах, их можно использовать в мобильном приложении и вебе с минимальными изменениями.
Фирменный стиль
Для приложения я разработал логотип, который символизирует круговую диаграмму распределения финансов. Логотип разработал в нескольких вариантах, каждый вариант отлично подходит для размещения в иконке приложения.
Стартовый сценарий
При первом запуске приложения мы проводим пользователя по линейному сценарию, в процессе которого пользователь добавляет необходимые для дальнейшей работы сущности: Источники дохода, Счета, Категории расходов.
Десктоп версия
Отдельно разработал дизайн и сверстал адаптивную веб-версию приложения. Весь функционал приложения доступен с браузера.
Основные экраны приложения
Дизайн приложения построен в фигме, для него я разработал дизайн систему которая содержит все элементы приложения в различных состояниях, а также версии компонентов для десктопного веб-варианта нашего сервиса.
Главный экран
Главный экран содержит основную статистику по бюджету за текущий месяц. Так же на главном экране расположены все счета пользователя, кредиты, цели и история последних операций.
Операции
Экран для совершения операций. Операцию можно добавить перетаскиванием одной иконки на другую либо провалившись внутрь счета / категории расхода.
Категории расхода содержат круглый график, который показывает сколько потрачено на текущий момент от запланированной суммы.
Открытый счет
Показываем пользователю остаток на счете, даем возможность отредактировать счет, внести расход или доход. Ниже показываем историю операций по этому счету.
Статистика
В приложении реализовали экран с подробной финансовой статистикой пользователя. Показываем самые популярные категории трат, источники доходов и прочее. Даем возможность сравнения статистики по разным периодам.
Спасибо за внимание, буду рад обратной связи: )
Посмотреть другие кейсы можно на Behance –
Иконки в нижнем баре навигации в телефоне и в левом баре в вебе не очень, а так молодец :)
Ещё я бы посмотрел, как это реализовано у конкурентов (что уже сделал, скорее всего), взял идеи и подтянул визуал.
У apple очень симпатичный интерфейс для Apple Card.
Самое главное: вот ты сделал кейс и статью. А кто ты, какой у тебя опыт? Зачем про него рассказываешь? Где вводные? Ну разработал дизайн-систему, цвета и кнопки и что? В этом есть потребность, но нет хороших решений? Ты провёл какие-то исследования, сам столкнулся с нехваткой на рынке такого продукта?
Не хватает завязки, причины, зачем ты это всё сделал и почему. Статья выглядит как сухой отчёт боссу, что ты «разработал, сделал, отрисовал, где премия?».
Не ради критики, а чтобы понять. Такие кейсы раз в неделю можно делать.
Хм, действительно, зачем дизайнер делает дизайн?
Выглядит очень приятно!
Спасибо
Немного подушню сейчас. В целом, по визуалу норм, чисто, аккуратно, но по функционалу есть вопросы. Просто тоже делаю дизайн приложения ведения бюджета и заметил несколько спорных решений.
0. Можно было бы приложить ссылку на Google Play: https://play.google.com/store/apps/details?id=app.yoney
1. На главном экране нет кнопки целевого действия (Добавить операцию). Предлагаю на все экраны добавить возможность добавлять операцию. При таком подходе, в том числе, отпадет надобность в карточки счетов добавлять кнопки "Внести расход"/"Внести доход".
2. Стартовый сценарий – в посте есть схема онбординга, в приложении онбординга нет.
3. Можно сразу добавить какие-то базовые категории трат за пользователя (Продукты, Дом, Одежда, Развлечения, Электроника). Это покроет большой процент категорий и пользователю не нужно будет создавать все их с нуля, он сразу сможет добавить операцию в какую-то категорию.
4. Перетаскивание иконок для добавления операции не работает в приложении.
5. Зачем дублировать функционал на экране Сводка и Операции?
При этом зачем придумывать одним и тем же сущностям разный вид карточек?
6. Я бы убрал экран Операции (просто перенес из него блок Категории расходов на главный экран (Сводка)). Оставил бы два экрана – Сводка и История.
7. В Истории не очевидно разделение доход/расход. Есть мелкая подпись, но ее недостаточно. Я бы выделял сумму доходов зеленым цветом, расходы оставил бы черным (не красным, потому что мазолило бы глаза).
При этом, если провалиться в конкретный счет – там карточка операции выглядит иначе (это минус, где консистентность?!), но есть знак "минуса "или "плюса" перед суммой операции (это плюс, сразу считывается - доход это или расход).
8. Когда пытаюсь изменить операцию – могу поменять только сумму и дату, но не категорию расходов.
9. Когда добавляешь операцию, лучше четко разделить на "Доход"/"Расход". Сейчас можно ориентироваться только на категорию и читать, что там на ней написано, чтобы точно определить операцию в доходы или расходы. Это повышает когнитивную нагрузку.
10. Немножко бесит, когда с главного экрана проваливаешься в счет, нужно сделать еще тап чтобы появилась возможность внести изменения в счет. Слишком много уровней. Можно попробовать упростить.
Можно лучше (UI):
1. При добавлении счёта после ввода названия, баланса и валюты нужно выбрать иконку. Доступ к разделу с иконками есть сразу, но при клике на понравившуюся иконку она не выбирается, так как не скрылась клавиатура, котора была нужна для ввода в текстовые поля. Нужно делать второй клик по иконке, чтобы выбрать её.
2. Можно добавить переход между экранами с помощью свайпов.
3. Зачем, когда проваливаемся в какой-то счет, на карточке дублировать название этого счета снова?
4. В Истории, в каждой операции необоснованно много внимания уделено дате операции (большой размер, расположение в самой видимой зоне). Это не самая важная инфа. Важнее "сколько потратил" и "на что".
Дату вообще можно вынести выше, над операциями, так как каждый день будет n-операций (как правило). Зачем дублировать эту информацию на карточке?!
Спасибо, есть над чем подумать