Карточка продукта
Мобильное приложение брокерской платформы.
Карточка актива — ключевая точка принятия
решений, где пользователь:
оценивает состояние инструмента
анализирует динамику
принимает решение о покупке или продаже
Любая перегрузка или задержка в этом сценарии напрямую влияет на конверсию: если интерфейс
требует усилий для понимания, пользователь откладывает или отменяет действие
Роль
Отвечала за переработку сценария
взаимодействия с карточкой актива: от анализа
поведения пользователей до финального
интерфейсного решения
Бизнес-задача
Ускорить путь от открытия карточки
к действию (buy/sell), не теряя глубину
аналитики и функциональность
Продуктовая проблема
Интерфейс пытался одновременно показать
весь объём данных: цена, динамика, графики,
показатели и метрики
В результате:
пользователи тратили время на поиск
ключевых данных
новички не понимали, на что смотреть
в первую очередь
опытные пользователи не могли быстро
перейти к действию
→ проблема заключалась не в количестве информации, а в отсутствии структуры
её восприятия Интерфейс не отвечал на главный вопрос: что важно прямо сейчас?
Данные (baseline)
высокая доля отказов перед
переходом к операции
увеличенное время от открытия карточки
до действия
низкая вовлечённость в аналитику
при перегруженном экране
Инсайт
Взаимодействие с карточкой всегда делится
на два этапа:
быстрое понимание текущего состояния
углублённый анализ
В текущем интерфейсе эти этапы были смешаны, из-за чего пользователь
вынужден был обрабатывать весь объём
информации сразу
Если разделить информацию по уровням (overview →
details) и выстроить иерархию под сценарий
принятия решения, пользователь сможет:
быстрее понимать состояние актива
при необходимости углубляться в аналитику
быстрее переходить к действию
Гипотеза
Нельзя убирать ключевые данные
интерфейс должен работать для разных уровней
пользователей
необходимо сохранить доступ ко всей аналитике
→ решение должно было оптимизировать
структуру, а не сокращать функциональность
Ограничения
На первый экран вынесены ключевые
показатели:
текущая цена
изменение (рост / падение)
краткая динамика
→ пользователь получает базовое
понимание за первые секунды
Дополнительные данные (графики, метрики,
история) перенесены во второй слой:
доступны по запросу
остаются рядом, но не перегружают
основной экран
→ сохранена глубина без увеличения
когнитивной нагрузки
Разделение информации по уровням
Прогрессивное раскрытие аналитики
Решения
сокращён путь до buy/sell
усилена заметность действий
убраны лишние промежуточные шаги
→ устранён разрыв между анализом
и действием
Структура списка
Упрощение перехода к действию
ключевые данные — доминирующие
второстепенные — снижены по приоритету
переработаны отступы и ритм
→ интерфейс начал направлять внимание пользователя
Фокус был на разделении сценария
на два логических слоя:
быстрый обзор
углублённый анализ
Работа велась через анализ поведения:
как пользователь сканирует экран
какие данные считывает первыми
где возникает перегрузка
где происходит « застревание» перед действием
Подход
не сокращался объём данных — важна
была полнота аналитики
не оставлялась текущая структура —
она не поддерживала сценарий
не делался поверхностный визуальный редизайн
→ выбрано решение через структурное
разделение информации
Trade-offs
На первый экран вынесены ключевые
показатели:
текущая цена
изменение (рост / падение)
краткая динамика
→ пользователь получает базовое
понимание за первые секунды
Разделение информации по уровням
Прогрессивное раскрытие аналитики
Решения
Структура списка
ключевые данные — доминирующие
второстепенные — снижены по приоритету
переработаны отступы и ритм
→ интерфейс начал направлять внимание пользователя
Дополнительные данные (графики, метрики,
история) перенесены во второй слой:
доступны по запросу
остаются рядом, но не перегружают
основной экран
→ сохранена глубина без увеличения
когнитивной нагрузки
Упрощение перехода к действию
сокращён путь до buy/sell
усилена заметность действий
убраны лишние промежуточные шаги
→ устранён разрыв между анализом
и действием
Ошибки
На раннем этапе проблема рассматривалась
как визуальная перегрузка, из-за чего предпринимались попытки упрощения через удаление элементов.
Это ухудшало опыт для продвинутых пользователей и не решало основную задачу
Переосмысление показало, что ключевая проблема — отсутствие структуры
восприятия, а не объём информации
структура важнее объёма информации
интерфейс должен сначала давать ответ,
а затем детали
разделение уровней восприятия ускоряет
принятие решений
доступ к аналитике не должен мешать
базовому сценарию
снижение когнитивной нагрузки напрямую
влияет на конверсию
Ключевые принцины
Результаты
Убраны второстепенные элементы
снижена плотность информации в строке
выровнен визуальный ритм списка
→ ключевые данные стали считываться быстрее и стабильнее
Снижение визуального шума
Роль фильтров была пересобрана:
интегрированы в основной сценарий поиска
упрощена логика применения
добавлена визуальная обратная связь по активным состояниям
снижена когнитивная стоимость использования
→ фильтры стали частью базового сценария, а не отдельным инструментом
Фильтры
Переработаны отступы и визуальный ритм
элементы сгруппированы в логические блоки
снижена плотность визуального шума
улучшена сканируемость списка
→ информация воспринимается структурированно, а не как текстовый поток
Структура списка
Каждая транзакция была переработана как самодостаточный элемент:
добавлены статусы (завершена / в обработке / отклонена)
добавлены короткие пояснения типа операции
улучшено форматирование для ускоренного считывания
→ пользователь получает достаточный контекст без необходимости открытия деталей
Контекст операций
Строка транзакции была переработана для формирования чёткой структуры восприятия:
сумма выделена как основной визуальный якорь
тип операции сгруппирован с суммой в единый смысловой блок
статус операции доступен без перехода в детали
→ интерфейс стал поддерживать сканирование, а не требовать чтения каждой строки
Визуальная и смысловая иерархия
Дизайн решения
−17% отказов при переходе к операции
−20% времени от открытия карточки
до совершения действия
+11% взаимодействия с аналитикой
−14% ошибок при выборе операции
Сценарий использования стал более линейным:
карточка актива → быстрое понимание →
при необходимости аналитика → действие
Разделение информации по уровням упростило восприятие без потери глубины, ускорило принятие решений и увеличило конверсию в действие
Карточка продукта
Экран деталей актива в iOS, отображающий ключевые метрики, график доходности, аналитику и торговые действия, помогая пользователям быстро понимать
и управлять своей инвестиционной позицией
Результаты
— Снижение количества отказов при переходе
к действиям на 17%
— Сокращение времени от открытия карточки
актива до выполнения операции на 20%
— Увеличение просмотров аналитических
блоков на 11%
— Снижение количества ошибок
при выборе операции
Задача
Сложная структура карточки актива затрудняла быстрое выполнение операций пользователями
Решение
Разделены уровни информации: базовые метрики для начинающих пользователей и расширенная аналитика для опытных инвесторов
Процесс
— Анализ пользовательского поведения
— Редизайн структуры интерфейса
— Дизайн интерфейса
— Оптимизация сценариев покупки и продажи
Карточка продукта
Карточка продукта — один из ключевых экранов инвестиционного приложения.
Пользователи взаимодействуют с этим сценарием, чтобы:
отслеживать стоимость актива
анализировать динамику
просматривать статистику
принимать инвестиционные решения
покупать или продавать актив
Несмотря на высокую важность сценария, текущий интерфейс перегружал пользователя большим количеством данных и усложнял быстрое восприятие информации.
Цель проекта — упростить восприятие инвестиционных данных
и сделать сценарий принятия решений более быстрым и понятным.
Роль
Отвечала за полный цикл переработки сценария истории операций: анализ поведения пользователей, формирование гипотез, проектирование решения и дизайн интерфейса
UX-аудит текущего решения
анализ пользовательских сценариев
discovery и research
формирование UX-гипотез
redesign mobile experience
проектирование visual hierarchy
создание UI-концепции
проработка компонентной системы
Зона ответственности:
Продуктовая проблема
Карточка продукта являлась data-heavy интерфейсом
с высокой плотностью информации
сложность восприятия большого объема данных
отсутствие четкой visual hierarchy
перегруженный интерфейс
сложность быстрого считывания ключевых показателей
слабый фокус на основном пользовательском действии
недостаточная читаемость графиков и статистики
Пользователи сталкивались с несколькими проблемами:
В результате пользователям требовалось больше времени
для анализа актива и принятия решений
Цели проекта
1. Бизнес-цели
2. Продуктовые цели
3. UX-цели
повысить вовлеченность пользователей
увеличить частоту взаимодействия с продуктом
повысить доверие к платформе
улучшить восприятие инвестиционного опыта
упростить восприятие данных
ускорить доступ к ключевой информации
повысить scanability интерфейса
улучшить mobile experience
сократить cognitive overload
улучшить visual hierarchy
уменьшить перегрузку интерфейса
повысить читаемость графиков
сфокусировать внимание пользователя на ключевых действиях
_________________________________________________________________________________________________________________________
_________________________________________________________________________________________________________________________
Исследования
/ UX-аудит:
Позволил выявить проблемы навигации, визуальной иерархии и структуры интерфейса
/ Анализ пользовательских сценариев:
Помог определить основные действия внутри раздела истории операций
/ Competitive research:
Были изучены решения банковских и fintech-продуктов для сравнения подходов
к фильтрации, поиску и отображению транзакций
/ Интервью и обратная связь:
Были проанализированы повторяющиеся пользовательские проблемы
и паттерны поведения
Что важно было понять
Перед началом проектирования было важно определить:
какие данные наиболее важны для пользователей
как пользователи анализируют активы
какие блоки интерфейса игнорируются
где возникает когнитивная перегрузка
как пользователи взаимодействуют с графиками и статистикой
Используемые методы
1. UX-аудит
2. Competitive research
3. Анализ пользовательских сценариев
Анализ поведения пользователей
Позволил выявить проблемы visual hierarchy и перегруженности интерфейса
Были изучены fintech и crypto-продукты для анализа:
паттернов отображения данных
инвестиционных dashboard
mobile chart interactions
способов приоритизации информации
Помог определить ключевые действия внутри карточки продукта
Позволил выявить повторяющиеся точки friction и перегрузки
___________________________________________________________________________________________________________
___________________________________________________________________________________________________________
___________________________________________________________________________________________________________
Ключевые наблюдения
1. Пользователи не читали интерфейс последовательно
2. Перегруженные графики ухудшали восприятие
3. Основное пользовательское действие терялось
Большинство пользователей быстро сканировали экран в поиске:
Из-за отсутствия четкой visual hierarchy важные данные терялись среди второстепенной информации
цены
динамики
изменения актива
кнопок действий
Большое количество элементов и визуального шума
усложняло анализ динамики актива
CTA и ключевые действия конкурировали с большим объемом данных и не имели достаточного визуального приоритета
___________________________________________________________________________________________________________
___________________________________________________________________________________________________________
JBTD
Когда
Я хочу быстро понять его текущее состояние и динамику
Я хочу моментально видеть ключевые показатели
Я хочу комфортно анализировать графики и статистику
Когда я открываю карточку продукта
Когда я пользуюсь приложением с мобильного устройства
Чтобы принять решение без перегрузки информацией
Чтобы не тратить время на поиск нужных данных
Чтобы быстро взаимодействовать с продуктом на ходу
я анализирую актив
___________________________________________________________________________________________________________
___________________________________________________________________________________________________________
Гипотезы
Гипотеза 1
Гипотеза 2
Гипотеза 3
Почему мы так посчитали:
Если усилить visual hierarchy, пользователи смогут быстрее
считывать ключевую информацию
Почему мы так посчитали:
интерфейс был визуально однотипным;
важные данные не имели приоритета;
пользователи тратили слишком много времени на scanability.
большое количество блоков создавало перегрузку
графики конкурировали с остальными элементами
второстепенная информация отвлекала внимание
CTA не имели достаточного визуального веса
действия терялись внутри data-heavy интерфейса
текущий mobile flow содержал лишние шаги
Если сократить визуальный шум, интерфейс станет легче для восприятия
Почему мы так посчитали:
Если усилить акцент на ключевых действиях, пользователи будут
быстрее взаимодействовать с продуктом
___________________________________________________________________________________________________________
___________________________________________________________________________________________________________
Trades off
Во время проектирования было важно сохранить баланс между:
информативностью интерфейса
визуальной простотой
скоростью восприятия данных
Изначально рассматривался вариант с отображением всех фильтров
одновременно. Однако такой подход перегружал интерфейс и усложнял
быстрые пользовательские сценарии
Изначально рассматривался вариант с отображением максимального количества аналитики на одном экране.
Однако такой подход увеличивал cognitive overload и ухудшал scanability.
В результате часть второстепенной информации была упрощена или скрыта внутри дополнительных сценариев. Это позволило сделать интерфейс легче для восприятия без потери ключевой функциональности.
UX-решения
1. Упрощение фильтрации
3. Упрощение графиков
4. Фокус на ключевых действиях
4. Оптимизация UX mobile
2. Улучшение визуальной иерархии
уменьшить перегрузку интерфейса
ускорить основные сценарии
сохранить гибкость для продвинутых пользователей
лучшей читаемости
уменьшения визуального шума
более быстрого анализа динамики
более высокий визуальный приоритет
улучшенное расположение
более читаемую структуру
была улучшена структура контента
упрощен сценарий взаимодействия
улучшена читаемость данных
усилена scanability интерфейса
приоритеты информации
typography scale
spacing
контрастность элементов
акценты внутри интерфейса
цену
изменение стоимости
динамику
ключевые действия
Фильтры были разделены на быстрые и расширенные. Это позволило:
Графики были переработаны для:
CTA получили:
В mobile-версии:
Это позволило ускорить взаимодействие пользователя с продуктом
Были переработаны:
Теперь пользователи быстрее различают:
___________________________________________________________________________________________________________
___________________________________________________________________________________________________________
___________________________________________________________________________________________________________
___________________________________________________________________________________________________________
UI-концепт
Светлая и тёмная версии
Для интерфейса были проработаны светлая и тёмная темы.
Основной задачей было сохранить:
читаемость данных
визуальный контраст
консистентность experience
комфортное восприятие графиков
Итерации
Первая концепция
Что показал review
В итоговом решении
Изначально интерфейс содержал больше аналитических блоков и дополнительных данных. Это делало экран более информативным, но визуально перегруженным
Во время анализа стало понятно, что пользователи теряют фокус и тратят слишком много времени на поиск ключевой информации
visual hierarchy была усилена
второстепенные блоки упрощены
графики стали чище
CTA получили больший акцент
интерфейс стал легче для scanability
___________________________________________________________________________________________________________
___________________________________________________________________________________________________________
Оценка эффективности
После редизайна основное внимание уделялось:
Ключевыми индикаторами успешности стали:
После редизайна сценарий стал:
скорости выполнения ключевых сценариев
удобству поиска операций
снижению количества ошибок
уменьшению нагрузки на поддержку
сокращение обращений по поиску операций
снижение спорных обращений
рост вовлеченности пользователей
сокращение времени выполнения действий
быстрее
визуально проще
более предсказуемым
удобнее для mobile usage
масштабируемым для будущих изменен
___________________________________________________________________________________________________________
___________________________________________________________________________________________________________
Результаты
+15% вовлеченности
+20% взаимодействия
−30% времени анализа
−20% когнитивной нагрузки
улучшение mobile UX
Review
data-heavy интерфейсами
fintech и crypto UX
визуальной иерархией
mobile-first проектированием
системным подходом к сложным продуктовым сценариям
Главным результатом для меня стало создание интерфейса, который
помогает пользователям быстрее анализировать данные и принимать
решения без перегрузки информацией
Этот проект помог мне глубже поработать с: