Crypto Wallet: внедрение новых функций, новая ДС и дизайн-долг

Web3-кошелёк, который больше 4 лет на рынке. У него более 15 миллионов скачиваний и пользователи из 190+ стран. Основная аудитория — начинающие криптотрейдеры, но команда хочет постепенно привлекать и опытных. Отсюда рамка для всех решений: не перегрузить новичка, дать профессиональные инструменты тем, кто их ждёт, и не отпугнуть старую аудиторию резкими изменениями.

Я работала в трёх направлениях: достраивала ядро торговых сценариев и добавляла виральный контур, пересобирала дизайн-систему с помощью AI-инструментов и закрывала накопленный UX-долг.

Цель. Гипотеза: если торговать станет безопасно, новички будут торговать чаще и смелее. Смотрим на долю позиций с TP/SL и число активных трейдеров.

В кошельке уже была торговля перпетуалами, и ей активно пользовались. Но сделку нельзя было закрыть автоматически: чтобы зафиксировать прибыль или ограничить убыток, приходилось постоянно следить за рынком и закрывать позицию вручную.

Задача: добавить TP/SL и лимитные ордера с переключением market / limit. Встроить их в существующий интерфейс так, чтобы новичок не запутался, и заодно постепенно обновлять страницу перпетуалов.

Разобрала, как TP/SL и лимитки устроены у ключевых игроков: Hyperliquid, Phantom, Trust Wallet, MetaMask. Смотрела и на визуал, и на функциональные решения.

Пользователь должен за секунду понять, что он открывает, на какую сумму и что произойдёт при движении цены.

• TP/SL — часть формы ордера. Его выставляют сразу при открытии позиции, но при желании можно отключить.
• Переключатель market / limit стоит наверху формы. Поле лимитной цены появляется, только когда оно нужно.
• Значения по умолчанию безопасные, ошибки видны ещё до подтверждения. Предупреждения подсвечены оранжевым, а не красным: важно не напугать человека, а подсказать ему.
• Подготовила макеты всех дополнительных состояний и корнер-кейсов. Состояния риска и крайние случаи доводили вместе с разработчиками на этапе вёрстки.

Базовые вайрфреймы рисовал продакт, а я дорабатывала логику:

• Проценты вместо долларов. По умолчанию поле Gain выставлялось в $. У конкурентов почти везде проценты, многие вообще убрали доллары. Новичку и всей команде разработки проще думать и считать «закрыть на −10%». Перешли на проценты.
• Простое редактирование стопов. Этот сценарий продакты не учли, а у конкурентов он запутанный: через отмену лимитных ордеров. Я предложила один ввод для профита и один для лосса: новое значение, старое подписывается снизу, чтобы не забыть. Команда утвердила.
• Корнер-кейсы, которых не было в ТЗ: закрытие всех позиций сразу, изменение маржи в открытой позиции, состояние экрана после ставки. Их дорисовала самостоятельно.

Дальше курировала вёрстку и дизайн-ревью. Всего 30+ экранов для десктопа.

На мобильном перенесла тот же принцип, но там пришлось переработать страницу перпетуалов целиком. Использовала прогрессивное раскрытие: новичок видит простую форму, а опытный трейдер при необходимости открывает все параметры.

Цель: охваты и новые пользователи. Смотрим на шеринги на 100 сделок, переходы и установки по ссылкам.

Трейдеры любят делиться результатами: удачная сделка или сыгравшая ставка — повод для поста в X. У конкурентов для этого есть готовые карточки, у нас их не было, поэтому люди либо делали скриншоты, либо не делились вовсе. Для продукта это упущенный канал привлечения.

Прототипов и требований не было, продакт в задаче почти не участвовал, так что структуру, сценарии и визуал определяла я.

Исследование. Пошла туда, где люди реально делятся, — в X. Собирала и референсы карточек, и поведение: чем гордятся (процент прибыли, плечо, «угадал рынок»), что не хотят раскрывать (абсолютные суммы и размер депозита), что делает карточку живой (график, анимация, гифки вместо статичной цифры), в какие моменты хочется поделиться (не только при закрытии, но и пока позиция открыта).

Для перпетуалов спроектировала карточки для прибыли и убытка в 4 разных дизайнах, пользователь выбирает под настроение. Для prediction markets одной карточки было мало: в каждом из трёх состояний человек делится разным, поэтому и состояний три.

• Ставки нет. Человек делится самим рынком: событием и текущими шансами. По сути, это приглашение.
• Ставка есть, рынок открыт. Показываем позицию и исход, на который поставлено: «я верю, что будет так».
• Ставка сыграла. Результат, процент прибыли и, если хочется, сумма.

Цель. Сейчас система покрывает малую часть интерфейса. Задача: довести покрытие до 80–90% экранов, чтобы приложение выглядело консистентно, а новые экраны собирались из готовых компонентов.

Формально дизайн-система у продукта была. На деле в ней жили три несовместимых слоя, и каждый новый экран добавлял ещё один.

Аудит. Прошла всё приложение и все существующие макеты и выписала значения, которые реально используются. Так появилась карта расхождений.

Токены через AI. Все найденные значения перенесла в новый файл и превратила в токены: цвета, типографику, отступы, скругления. Механическую часть (разбор, группировку, именование) делал AI-агент под моим контролем: я задавала структуру и правила и проверяла результат. Так же собрала и переименовала пак иконок.

Атомарная сборка. Система строится по принципу атомы → молекулы → организмы. Все новые макеты делаю на новых токенах, а компоненты добавляю в ДС, когда обновляется экран, где они используются. Так система растёт вместе с продуктом и не превращается в отдельный проект. Вариации компонентов тоже разворачивает агент: элемент уже есть в макете, агент делает из него компонент со всеми состояниями и вариантами, а я проверяю и правлю.

Насколько быстрее. По моей оценке, примерно в 3 раза. Компонент со всеми вариациями вручную занимает 10–20 минут, с агентом 3–5. Правка компонента или новая иконка: минимум 5 минут руками и 1–2 минуты с агентом.

Параллельно с фичами я закрывала дизайн-долг, из-за которого приложение выглядело неконсистентно.

• Визуальные дефекты. Провела полноценный аудит десктопной версии и мобильного приложения и собрала все накопившиеся расхождения в один файл. Набралось около 40 UX/UI-ошибок разной важности. Разложила их по приоритету, и вместе с разработчиком мы начали их закрывать. Первыми пошли мелкие правки, которые почти ничего не стоят по времени, но сразу заметны: приложение стало аккуратнее и удобнее. Заодно на этих правках экраны переезжают на новые токены.
• Релизные материалы. Обновила скриншоты для App Store и Google Play и визуалы для X, чтобы то, что выпускает команда, и на витрине выглядело цельно. Ещё нарисовала и сверстала лендинги для новых разделов продукта.

• TP/SL и лимитные ордера: 30+ экранов для десктопа спроектированы, свёрстаны и прошли дизайн-ревью, мобильная версия ждёт комментариев продакта.
• Шеринг: карточки для перпетуалов в 4 дизайнах и 3 состояния для prediction markets, точки входа и настройки приватности переданы в разработку.
• Дизайн-система: токены и иконки собраны, все новые макеты делаются на них, компоненты добавляются по ходу.