Разработал дизайн-систему, брендинг, сценарии использования и дизайн мультиплатформенного мобильного приложения и веб-версии.
Основной функционал приложения – учет доходов и расходов пользователя. Показываем пользователю подробную финансовую статистику.
Дизайн система
Дизайн приложения построен в фигме, для него я разработал дизайн систему которая содержит все элементы приложения в различных состояниях, а также версии компонентов для десктопного веб-варианта нашего сервиса. Все компоненты строятся на автолейаутах, с вариантами.
Палитра
Цвета парные, у каждого цвета есть аналог для темной темы.
Темная и светлая тема
Так как цвета создавались парами, перекрашивание приложения в темную тему в плане работы занимает несколько минут.
Кнопки
Используется несколько вариантов кнопок, каждый прорисован во всех необходимых состояниях и «упакован» в компонент с вариантами.
Иконки банков
Я отрисовал иконки популярных банков России, Украины, США, Англии, Германии, Беларуси, Канады, Италии. Это те страны, куда мы хотели заходить на старте. Сейчас приложение доступно только для РФ региона.
Карточки сущностей
Отрисованы во всех возможных состояниях, сделаны на автолайаутах, их можно использовать в мобильном приложении и вебе с минимальными изменениями.
Фирменный стиль
Для приложения я разработал логотип, который символизирует круговую диаграмму распределения финансов. Логотип разработал в нескольких вариантах, каждый вариант отлично подходит для размещения в иконке приложения.
Стартовый сценарий
При первом запуске приложения мы проводим пользователя по линейному сценарию, в процессе которого пользователь добавляет необходимые для дальнейшей работы сущности: Источники дохода, Счета, Категории расходов.
Десктоп версия
Отдельно разработал дизайн и сверстал адаптивную веб-версию приложения. Весь функционал приложения доступен с браузера.
Основные экраны приложения
Дизайн приложения построен в фигме, для него я разработал дизайн систему которая содержит все элементы приложения в различных состояниях, а также версии компонентов для десктопного веб-варианта нашего сервиса.
Главный экран
Главный экран содержит основную статистику по бюджету за текущий месяц. Так же на главном экране расположены все счета пользователя, кредиты, цели и история последних операций.
Операции
Экран для совершения операций. Операцию можно добавить перетаскиванием одной иконки на другую либо провалившись внутрь счета / категории расхода.
Категории расхода содержат круглый график, который показывает сколько потрачено на текущий момент от запланированной суммы.
Открытый счет
Показываем пользователю остаток на счете, даем возможность отредактировать счет, внести расход или доход. Ниже показываем историю операций по этому счету.
Статистика
В приложении реализовали экран с подробной финансовой статистикой пользователя. Показываем самые популярные категории трат, источники доходов и прочее. Даем возможность сравнения статистики по разным периодам.
Спасибо за внимание, буду рад обратной связи: )
Посмотреть другие кейсы можно на 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-операций (как правило). Зачем дублировать эту информацию на карточке?!
Спасибо, есть над чем подумать
Очень прошу постарайтесь над нативными приложениями под комп, мак и винду с локальным хранилищем и синхронизацией через облако !!!!!!!
Есть ли учёт средне и долгосрочных накоплений? Ежемесячные расходы, ежегодные? Баланс и вне баланс
Или просто считаем расход доход, без свободного управления личным фондом. Настройка категорий и под категорий, объединение по признакам счета?
Мне нравится диз. Конечно тестить надо, но вполне хорошо выглядит. Подскажите, может знаете, а какой стек технологий выбран у приложения? UPD: а все, увидел react native
React Native
Если позволите, по функционалу:
- из вашего приложения в банковское - фикс платежи за связь, интернет, парковку и пр.
- и снова из вашего приложения загрузка в банковское приложение динамических ежемесячных платежей и их автоматизация, например коммуналка за квартиры, дом и пр.
Выглядит здорово, удачи
полезное приложение,личный бухгалтер в телефоне
А цена?
150р подписка. Собственно она уже встроена в аппу, но приложение сейчас выпущено только на рынок РФ, а оплата подписок/приложений Google Play перестала работать для жителей РФ аккурат после релиза приложения, удачно вышло. Сейчас мы уходим в облако и пилим веб версию, через которую можно будет подписку оформлять минуя плей.
А зачем в принципе это нужно, если сейчас во всех банковских приложениях, есть это? В чем уникальность данного продукта? Тем более это надо быть оч своеобразным человеком, чтобы все свои расходы вручную вносить.
месяц?
Да
$2,5- не дороговато-ли?
Будем смотреть по факту, цена не конечная.
Смотря сколько счетов, для людей больше 3х карт за чашку кофе статистику свести норм
Класс, красиво, только непонятно, где тут пользователи.
А так ваши галлюцинации оч даже симпатичные
про галюцинации прям пять балов)
Было бы неплохо выложить (и регулярно обновлять!) ваше приложение в AppGallery, там нормально работает оплата картами МИР. Ну и подписку сделать дешевле, по крайней мере я лично не готов платить 250 ₽ за предлагаемый функционал, и я думаю, что я далеко не один такой 😉
А есть ли функции за которые Вы готовы платить, хоть сколько нибудь?)) Я приготовил блокнотик...
Блокнотик не понадобится, просто 250 это жирно)))
Не плохо, а монетизация в чём?
Несколько вариантов, ограничение количества счетов, категорий расходов, доступ к расширенной аналитике.
Тоесть подписку не рассматриваете?
но это и будет входить в подписку:
Безлимит счетов / категорий
Аналитика
Есть к чему стремится
Интерестно, как затестить?
https://play.google.com/store/apps/details?id=app.yoney
Заметил, что все чаще выкладывают свои работы сюда (мб раньше как-то стороной обходило), Behance уже не популярен, получается?
Тут хорошая обратная связь, а на Behance "Please, check my project"
Слишком избитый и замусоленный дизайн для такого формата приложения. Абсолютно теряется на фоне остальных подобных. Нет свежего дыхания, новизны, киллер фич и собственной узнаваемой айдентики.
За старание и потраченное время конечно лайк, но приди с такой идеей, например, к инвестору - пошлёт по матери..
Остаётся 2 вопроса: зачем и чтобы что?
Ультра сильно не хватает опенсорсного приложения для учёта финансов, ведь доверять фин данные сомнитильным проприетарным приложения вообще не хочется
В настоящий момент данные хранятся только на устройстве, насколько я помню, сейчас только переносим в облако.
Молодец!
Работа проделана большая, но ощущение складывается, что автор сам не ведёт учёт своих финансов и не проведено исследование потенциал рой аудитории, и поэтому решение получилось вырванным из контекста. Это видно, например, по отсутствию главного и самого частого действия — добавления трат, которое совершается несколько раз в день. Я веду учёт последние месяцы и могу точно сказать, что это будет неудобно и многие функции не несут пользы
Где скачать?
https://play.google.com/store/apps/details?id=app.yoney
На айфон нада :(
Сейчас как раз ищу такое приложение, обрадовала бы возможность сканировать qr с чеков из магазинов, чтобы вручную не вносить.
Матвей, отличная работа!
а есть figma дизайн этого приложения в открытом доступе?
Хотел бы для практики сделать подобное приложение на реакте