Разбор концепта приложения MoneySkill
Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma, который передается автору работы с большими подробностями и точечными указаниям на то, что следует исправить.
Автор работы Елизавета, подписчица DL PRO
https://www.behance.net/gallery/125691765/MoneySkill-financial-assistant
Привет!
Cпасибо, что прислала свой проект на разбор. Тема очень живая, на рынке много реализованных продуктов в этой сфере, но всегда интересно посмотреть новые идеи и инсайты.
Что понравилось в работе
Понравилось, что ты изначально хотела упростить процесс финансового планирования, потому что частая история такова, что люди теряют мотивацию вести свой бюджет.
Логика
Очень важно, когда ты описываешь задачу, решение и процесс, показывать все этапы, которые указаны. А если создаешь новый продукт — то их должно быть ещё больше. В кейсе нет UX-исследования, описания портретов пользователя, конкурентного анализа, опросов пользователей. Это очень важно, чтобы показать почву для принятых решений и объяснить, что всё, что показано в прототипах и дизайне — не просто так, а проверено, протестировано, и уже финальное решение показано.
Второй момент – линейность User Flow. Не показаны пограничные ситуации, когда что-то идет не так. Это помогает понять, насколько критически мыслит дизайнер. Иногда такие ситуации составляют чуть ли не половину пути. Чтобы не растягивать из-за этого кейс, можно взять самые ключевые сценарии и максимально детально их описать и показать: со всеми состояниями, ошибками, заминками и т. д. Остальные экраны просто в формате фич "тут предлагаю вот так, потому что...", "а вот тут будет выглядеть вот так, потому что...". Также важно соблюдать языковую версию кейса. Сейчас только User Flow на английском.
Визуал
Очень классный заход в стиль с иллюстрациями в онбординге. К сожалению, на остальных экрана продолжение этого стиля на нашел. Экраны почти не отличаются от своих прототипов, черные, им явно не хватает цветов. Задан такой красочный стиль, хотелось бы его больше.
Иллюстрации в онбординге крутые, можно добавить к иллюстрациям фон, чтобы отделить их и добавить больше контраста к их тексту. Приложу пример, как могут выглядеть такие онбординги:
Прошу обратить внимание. Если иллюстрации однотонные, как в примере №1, используется фон, чтобы было визуальное разделение и выделение иллюстраций. Остальные иллюстрации достаточно контрастные. В твоем приложение можно использовать ход с фоном.
Хочется увидеть больше цветов в макете. Такое красочное начало и мрачное продолжение. Давай посмотрим примеры, чтобы было понятно, о чем я говорю:
Посмотри, как используются цвета из иллюстраций или их оттенки дальше по приложению. Приложение светлое, яркое и жизнерадостное. Будет круто, если мы добьемся такого эффекта в твоем кейсе.
Иконки достаточно детализированные и не подходят для маленького размера использования. Большое их количество превращается в визуальную кашу. На примере с иконками пляжа, спорта и красоты видно, как мелкие детали начинают сливаться. Давай рассмотрим пример с хорошими иконками:
У них больше воздуха, из-за чего они воспринимаются свободнее и проще. Залитые иконки чистых форм в небольшом размере воспринимаются лучше, чем те, которые стоят сейчас.
Рекомендованное распределение средств
Для начала нужно разобраться, какой из этих трех вариантов в итоговом дизайне:
Первый вариант появляется один раз в обложке макета, дальше я его не вижу. Остальные, выглядят как прототипы.
Название блока очень маленькое. Как будто это описание незначительного элемента.
Обрати внимание на механику взаимодействия с пунктами (функция "удалить"). Посмотри, как такая механика реализована в других приложениях – в почте, например, при удалении сообщения. Сейчас она не вполне правильно реализована для мобильных платформ. Вернее, не совсем явно.
По данному экрану у меня есть несколько комментариев.
Во-первых, почему здесь деньги стали такими неактивными, совсем не выделяются. Это важная часть информации, и она теряется.
Во-вторых, информация плохо воспринимается без графики. Можно, к примеру, добавить геймификацию, шкалу прогресса. Тогда мы и пользователя мотивируем копить, и ему легче понимать, как много он накопил. Добавить инфографику, просто текст без иконок и графики воспринимается хуже.
Задана классная стилистика в приложении, но, к сожалению, она не выдержана во всем макете. Не бойся добавлять больше цвета. В мудбордах есть примеры, как стилистика приложений работает на разных экранах. Подумай над функционалом, сейчас функционал некоторых экранов достаточно пуст и выглядит скудно. Выбери более простые формы иконок, они будут легче считываться.
Мудборд и референсы
Типографика
Пересмотреть систему шрифтов. Есть важные элементы, которых почти не видно (название "Рекомендация распределения средств"), а есть элементы слишком большие для своей задачи (виджеты).
Цвет
Понравилось, как ты подобрала цвета. Они яркие, на контрасте с черным хорошо смотрятся, но не хватило продолжения истории на всех экранах.
Бизнес
Основные вопросы — чем это приложение лучше конкурентов? Что в нем будет такого, что выделит его на рынке? На чем оно будет зарабатывать?
Вот прям ооооочень не хватило конкурентного анализа и разбора этих самых конкурентов на «запчасти»: что у них есть, чего нет, а если нет – то почему. А что пользователи пишут? А как вообще решают (и решают ли) проблему учета личных финансов молодые люди возрастом 15-25 лет? Какие у них страхи, блоки и трудности возникают? Не хватило исследований как качественных, так и количественных, чтобы подтвердить или опровергнуть гипотезу, что они нуждаются именно в приложении и именно с таким функционалом.
Небольшой коридорный опрос показал первые отправные точки, куда двигаться точно не надо: категории и аналитика есть и у банковских приложений. Нужно что-то уникальное, чтобы выделиться.
Тут очень помогает «идейный штурм», когда садишься, ставишь таймер на полчаса и просто выписываешь идеи одна за другой, не поддавая критике. То есть ты в этот момент не думаешь, как это реализовать, сколько это будет стоить и т.д. Просто максимум идей за короткое время.
Дальше смотришь на них и группируешь по смыслу: объединяешь похожие, выделяешь самые интересные, откидываешь сомнительные. Проверяешь, что из этого уже есть у конкурентов и как оно реализовано. То, чего нет, выносишь отдельно и задаешь вопросы: сколько это стоит, кто за это будет платить, где спрятана прибыль? Мы же говорим о том, что любая идея рано или поздно должна зарабатывать.
Команда
Все фреймы расположены очень аккуратно, все видно, но не хватает важной составляющей – стилей, компонентов, UI-кита. Без этого любой проект рискует обрасти многими сущностями, а время на любые доработки возрастет в разы, потому что нужно будет каждый раз искать нужные кнопки, шрифты и цвета.
Что посмотреть
Статья про создание базовых UI-китов: https://ux.pub/cvetovoj-kontrast-v-dizajne-interfejsov-p-ostandartam/
Официальный канал Figma, плейлист по работе с компонентами, вариантами, автолейаутами https://www.youtube.com/watch?v=k74IrUNaJVk&list=PLXDU_eVOJTx5LSjOmeBYMuvaa4UayfMe4
Сервис, где собрано много-много скринов из приложений https://mobbin.design/
Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис развития и поддержки дизайнеров Design Line PRO.