Назад
Auto Layout · Variables · Variants · Components · Design Tokens · Handoff
Fintech Dello Banking App - New Way to Empower Life
Проблема
In an era where seamless digital experiences define user expectations, the Dello Fintech Banking App emerges as a beacon of innovation in the financial technology landscape. This case study delves into the user experience (UX) design journey undertaken to transform conventional banking interactions into intuitive, efficient, and user-centric experiences. As traditional banking institutions grapple with the evolving demands of a digital-savvy clientele, Dello steps forward with a visionary approach to redefine how users engage with their financial resources. The intersection of cutting-edge technology, user-centered design principles.
In an era where seamless digital experiences define user expectations, the Dello Fintech Banking App emerges as a beacon of innovation in the financial technology landscape. This case study delves into the user experience (UX) design journey undertaken to transform conventional banking interactions into intuitive, efficient, and user-centric experiences. As traditional banking institutions grapple with the evolving demands of a digital-savvy clientele, Dello steps forward with a visionary approach to redefine how users engage with their financial resources. The intersection of cutting-edge technology, user-centered design principles.
In an era where seamless digital experiences define user expectations, the Dello Fintech Banking App emerges as a beacon of innovation in the financial technology landscape. This case study delves into the user experience (UX) design journey undertaken to transform conventional banking interactions into intuitive, efficient, and user-centric experiences. As traditional banking institutions grapple with the evolving demands of a digital-savvy clientele, Dello steps forward with a visionary approach to redefine how users engage with their financial resources. The intersection of cutting-edge technology, user-centered design principles.
Задача №1
Построить систему: провести аудит интерфейса, выявить все несистемные значения, дробные числа и дублирующиеся элементы,которые должны стать компонентами
Создать стили,токены и переменные
Разработать систему нейминга
Спроектировать компонентную библиотеку
Внедрить новую систему в существующие макеты и прописать гайдлайн
Построить систему: провести аудит интерфейса, выявить все несистемные значения, дробные числа и дублирующиеся элементы,которые должны стать компонентами
Создать стили,токены и переменные
Разработать систему нейминга
Спроектировать компонентную библиотеку
Внедрить новую систему в существующие макеты и прописать гайдлайн
Построить систему: провести аудит интерфейса, выявить все несистемные значения, дробные числа и дублирующиеся элементы,которые должны стать компонентами
Создать стили,токены и переменные
Разработать систему нейминга
Спроектировать компонентную библиотеку
Внедрить новую систему в существующие макеты и прописать гайдлайн
Задача №2
Адаптировать интерфейс под все разрешения (desktop, tablet, mobile)
Доработать UX рабочего пространства
Разработать страницу нового режима генерации,
Создать информирующие pop-up для коммуникации с пользователем
Адаптировать интерфейс под все разрешения (desktop, tablet, mobile)
Доработать UX рабочего пространства
Разработать страницу нового режима генерации,
Создать информирующие pop-up для коммуникации с пользователем
Адаптировать интерфейс под все разрешения (desktop, tablet, mobile)
Доработать UX рабочего пространства
Разработать страницу нового режима генерации,
Создать информирующие pop-up для коммуникации с пользователем
Результаты для бизнеса
Снизила time to market
Снизила time to market
Ускорила разработку с помощью подготовки макетов и handoff
Ускорила разработку с помощью подготовки макетов и handoff
Сократила затраты
Сократила затраты
Токены и библиотека компонентов позволяют эффективнее добавлять новые разделы
Токены и библиотека компонентов позволяют эффективнее добавлять новые разделы
Устранила дизайн-долг
Устранила дизайн-долг
Благодаря рефакторингу UX продукта улучшился. Новая система причёсала ошибки макетов
Благодаря рефакторингу UX продукта улучшился. Новая система причёсала ошибки макетов
Как я достигла результатов
Аудит и токены
Зафиксировала все расхождения — хаотичные значения отступов включая дробные числа, несогласованные радиусы, случайные цвета. На основе аудита выстроила токены: единая типографическая шкала, цветовая система, система отступов и радиусов.
Зафиксировала все расхождения — хаотичные значения отступов включая дробные числа, несогласованные радиусы, случайные цвета. На основе аудита выстроила токены: единая типографическая шкала, цветовая система, система отступов и радиусов.
Зафиксировала все расхождения — хаотичные значения отступов включая дробные числа, несогласованные радиусы, случайные цвета. На основе аудита выстроила токены: единая типографическая шкала, цветовая система, система отступов и радиусов.
Разработчик получил переменные — изменение токена обновляет весь продукт сразу, а не вручную в каждом месте. Для бизнеса любые правки теперь занимают минуты, а не дни.
Разработчик получил переменные — изменение токена обновляет весь продукт сразу, а не вручную в каждом месте. Для бизнеса любые правки теперь занимают минуты, а не дни.
Разработчик получил переменные — изменение токена обновляет весь продукт сразу, а не вручную в каждом месте. Для бизнеса любые правки теперь занимают минуты, а не дни.
Разработала систему неймнга на основе IBM Carbon
Разработала систему неймнга на основе IBM Carbon
Разработала систему неймнга на основе IBM Carbon
Библиотека компонентов
Спроектировала полноценную библиотеку (30+ компонентов) по атомарному подходу. Каждый компонент построен с Variants:
состояние (default, hover, focus, disabled, error, loading),
тип (primary, secondary),
размер L, M, S, XS, XSS (по необходимости)
режимы иконок — с возможностью быстрой замены через подключённую библиотеку иконок и установки видимости иконки в компоненте.
Спроектировала полноценную библиотеку (30+ компонентов) по атомарному подходу. Каждый компонент построен с Variants:
состояние (default, hover, focus, disabled, error, loading),
тип (primary, secondary),
размер L, M, S, XS, XSS (по необходимости)
режимы иконок — с возможностью быстрой замены через подключённую библиотеку иконок и установки видимости иконки в компоненте.
Спроектировала полноценную библиотеку (30+ компонентов) по атомарному подходу. Каждый компонент построен с Variants:
состояние (default, hover, focus, disabled, error, loading),
тип (primary, secondary),
размер L, M, S, XS, XSS (по необходимости)
режимы иконок — с возможностью быстрой замены через подключённую библиотеку иконок и установки видимости иконки в компоненте.
В результате компоненты собираются как конструктор, поведение каждого состояния описано и предсказуемо. Скорость создания новых блоков кратно выросло за счёт готовых компонентов.
В результате компоненты собираются как конструктор, поведение каждого состояния описано и предсказуемо. Скорость создания новых блоков кратно выросло за счёт готовых компонентов.
В результате компоненты собираются как конструктор, поведение каждого состояния описано и предсказуемо. Скорость создания новых блоков кратно выросло за счёт готовых компонентов.
Паттерны снизили когнитивную нагрузку на пользователей
Паттерны снизили когнитивную нагрузку на пользователей
Паттерны снизили когнитивную нагрузку на пользователей
Пример формирования компонентов
Пример формирования компонентов
Пример формирования компонентов
Revolutionizing Banking: Enhancing User Experience with the Dello Fintech Banking
Revolutionizing Banking: Enhancing User Experience with the Dello Fintech Banking
Разработала панель истории генераций, категорию режимов и параметров. Адаптировала экраны под desktop, tablet и mobile и Разработала pop-up для оферты, рабочей зоны и регистрации — снизила юридические риски и повысила конверсию в начало генерации
Разработала панель истории генераций, категорию режимов и параметров. Адаптировала экраны под desktop, tablet и mobile и Разработала pop-up для оферты, рабочей зоны и регистрации — снизила юридические риски и повысила конверсию в начало генерации
Разработала панель истории генераций, категорию режимов и параметров. Адаптировала экраны под desktop, tablet и mobile и Разработала pop-up для оферты, рабочей зоны и регистрации — снизила юридические риски и повысила конверсию в начало генерации
UX-анализ и последующая доработка рабочего пространства организовала пользователю больший контроль над настройками и хранением генераций
UX-анализ и последующая доработка рабочего пространства организовала пользователю больший контроль над настройками и хранением генераций
UX-анализ и последующая доработка рабочего пространства организовала пользователю больший контроль над настройками и хранением генераций
Разложила сценарии по экранам. Сформировала гайдлайн, провела итоговую проверку макетов, приложила комментарии для разработчика
И ключевое, передала в разработку! Продукт скоро выйдет в прод)
Разложила сценарии по экранам. Сформировала гайдлайн, провела итоговую проверку макетов, приложила комментарии для разработчика
И ключевое, передала в разработку! Продукт скоро выйдет в прод)
Разложила сценарии по экранам. Сформировала гайдлайн, провела итоговую проверку макетов, приложила комментарии для разработчика
И ключевое, передала в разработку! Продукт скоро выйдет в прод)
Я на связи
