Сервис онлайн займов Joymoney
Joymoney — это веб-приложение, в личном кабинете которого можно оформить заявку, отслеживать информацию по займу и вносить платежи. Сервис входит в топ-10 МФО России по версии финансовых маркетплейсов «Банки.ру» и «Сравни.ру».
Сроки:
Ссылка на проект:
август 2023 – ноябрь 2025
На момент начала моей работы весь основной функционал уже был реализован. Новые дизайны создавались в рамках заложенного ранее стиля.
Я дорабатывала пользовательские сценарии для реализации интеграций, создавала дизайн для нового функционала и вносила изменения в основные сценарии.
О работе:
Дизайн система
Проблема
На момент начала работы над проектом в макетах не использовалась дизайн-система: присутствовало большое количество похожих цветовых стилей, типографика не была упорядочена, компоненты были разбросаны по разным страницам файлов.
Этап 1. Компоненты
Основные компоненты были перенесены в отдельный файл дизайн-системы, количество использованных цветов и шрифтовых стилей было сокращено. Ниже представлены наиболее часто используемые элементы UI, в дизайн-системе предусмотрены варианты всех состояний, компоненты настроены для быстрого редактирования и сборки макетов.
На момент начала работы над проектом в макетах не использовалась дизайн-система: присутствовало большое количество похожих цветовых стилей, типографика не была упорядочена, компоненты были разбросаны по разным страницам файлов.
Этап 1. Компоненты
Основные компоненты были перенесены в отдельный файл дизайн-системы, количество использованных цветов и шрифтовых стилей было сокращено. Ниже представлены наиболее часто используемые элементы UI, в дизайн-системе предусмотрены варианты всех состояний, компоненты настроены для быстрого редактирования и сборки макетов.
Этап 2. Токенизация
Были созданы токены цветов, типографики, отступов и радиусов скругления. Размерные токены созданы в двух темах, мобильной и десктопной, для ускорения процесса подготовки адаптивных версий.
Были созданы токены цветов, типографики, отступов и радиусов скругления. Размерные токены созданы в двух темах, мобильной и десктопной, для ускорения процесса подготовки адаптивных версий.
Этап 3. Экспорт
На финальном этапе токены были переименованы для экспорта CSS переменных для реализации дизайн системы на основе библиотеки Mantine. Отделом фронтэнда создан парсер, позволяющий переводить названия из Figma в нужный формат.
На финальном этапе токены были переименованы для экспорта CSS переменных для реализации дизайн системы на основе библиотеки Mantine. Отделом фронтэнда создан парсер, позволяющий переводить названия из Figma в нужный формат.
Абстрактная структура токена
Button / outlineGray / hover / background-color
Button / md / height
TextInput / default / text-error / color
Button / md / height
TextInput / default / text-error / color
3-d иконки и иллюстрации
Проблема
На момент начала работы, на сайте использовалось несколько комплектов векторных иконок и иллюстраций, 3D-иконки и стоковые фотографии. Изображения не всегда подходили по смыслу к тексту, который они иллюстрируют, и отличались друг от друга по стилю.
Результаты
После анализа конкурентов и изучения тенденций в интерфейсной иллюстрации было принято решение создать набор 3D-иконок и иллюстраций. Это решение широко распространено на рынке и не требует больших трудозатрат.
Модели создавались в программе Blender, финальное изображение создавалось с помощью встроенного механизма визуализации.
На момент начала работы, на сайте использовалось несколько комплектов векторных иконок и иллюстраций, 3D-иконки и стоковые фотографии. Изображения не всегда подходили по смыслу к тексту, который они иллюстрируют, и отличались друг от друга по стилю.
Результаты
После анализа конкурентов и изучения тенденций в интерфейсной иллюстрации было принято решение создать набор 3D-иконок и иллюстраций. Это решение широко распространено на рынке и не требует больших трудозатрат.
Модели создавались в программе Blender, финальное изображение создавалось с помощью встроенного механизма визуализации.
Авторизация по Биометрии
Работа была начата с анализа крупных сервисов, позволяющих использовать биометрию для входа в браузере. На основе полученных данных собрала прототипы авторизации нового и ранее зарегистрированного пользователей с учётом опции биометрии. После этапа системного анализа я доработала дизайн и подготовила его для передачи в разработку.
Запрос на подключение биометрии
Поп-ап успешного подключения
Экран авторизации с подключенной биометрией
Экран ошибки при авторизации через биометрию
