Дизайн-система, на которой пересобрала 100+ экранов биржи

Российская часть биржи отделилась — и ей нужен был обновленный сайт

exmo.me разделила международную и российскую части продукта. Для российской аудитории нужен был полноценный обновлённый сайт, а не локализованная копия: свои платёжные методы, свои требования, свой контент. К моменту старта уже были согласованы новая стилистика редизайна и визуальный код, часть основных экранов была перерисована — но без адаптивов, без системы и полностью на английском языке.

Рамки, в которых пришлось проектировать

Я входила в задачу не с чистого листа: стилистика и визуальный код уже были согласованы, часть экранов нарисована. Менять утверждённый визуальный язык было нельзя — его нужно было достроить до системы. Моей зоной стало всё, что превращает набор макетов в работающий продукт: компоненты, русская версия, адаптивы и состояния.

Второе ограничение — ресурс и время. Отдельной команды дизайн-системы не было: я одна и собирала систему, и закрывала продуктовые задачи. Значит, система должна была экономить время сразу, а не когда-нибудь в будущем.

Система как продукт, а не папка с компонентами

Начала не с компонентов, а со стилей: типографическая шкала, цветовые роли, сетки, отступы и состояния. Только после этого собирала базовые компоненты — так компонент не тащит за собой случайные значения, а ссылается на общие стили.

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

Главный критерий качества системы для меня — не красота библиотеки, а скорость сборки новой страницы без моего участия. Поэтому у каждого компонента есть состояния, крайние случаи (длинный текст, пустые данные, ошибка) и понятное имя, по которому его находит и дизайнер, и разработчик.

40+ страниц веба на одной сетке

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

Earn promo Trade Верификация Кошелек

Маскот и флоу с чеком, чтобы вернуть пользователя

Задача от продукта звучала как «поднять вовлечённость». Я переформулировала её в сценарий: пользователю нужна причина вернуться после сделки и повод рассказать о продукте. Так появился флоу с чеком — визуальный итог операции, который приятно сохранить и которым можно поделиться.

Маскот решал вторую задачу: биржа воспринималась холодной и безликой. Персонаж дал продукту узнаваемость в пустых состояниях, онбординге и промо — и при этом не трогает торговые экраны, где он только мешал бы. Целевые метрики флоу — ER и доля возвращающихся после первой сделки; события «чек показан» и «чек расшарен» размечены для аналитики.

Passkey: вход без пароля, но с понятным откатом

Продукт переходил на Passkey — вход по биометрии вместо пароля. Сложность была не в экране, а в развилках: устройство не поддерживает технологию, ключ потерян, вход с чужого устройства, один аккаунт на нескольких устройствах. Спроектировала флоу целиком, вместе со всеми состояниями отказа и запасным путём через старый способ входа, чтобы ни один сценарий не заканчивался тупиком.

Каскад платёжек: деньги должны дойти

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

Русская версия макетов, английский — в variables

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

Иллюстрации и иконки как часть системы

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

60+ страниц под планшет и мобайл

Адаптив делался не как сжатый десктоп, а как решение про приоритет: что остаётся на экране 375 px, что уходит в раскрытие, а что исчезает совсем. Самое сложное — таблицы: на мобильном они превращаются в карточки с управляемым набором полей. Правила перестроения зашиты в компоненты системы, поэтому новые страницы адаптируются без отдельной дизайн-задачи.

Тот же объём — за полтора месяца

Кейс делался до того, как ИИ-инструменты стали частью дизайн-процесса. Если бы я бралась за эту же задачу сейчас, изменились бы и сроки, и сам способ поставки — и это главный вывод, который я забираю из проекта.