01 / Infrastructureавторская дизайн-гипотеза
Картридж
Gas как расходник: понятно, но слишком уходит в hardware.
Original exploration
После первого созвона / самостоятельное исследование
Xsolla Gas:
как дать комиссии форму
На созвоне команда показала драфт Xsolla Gas. Из нескольких скриншотов и новой айдентики Xsolla / Pentagram получились три дизайн-гипотезы — каждая доведена до рабочего HTML.
Моя рольProduct Designer & Art Director
Я вёл exploration целиком: разобрал механику продукта, сформулировал три дизайн-гипотезы, разработал форму объектов, арт-директил и собирал AI-assisted 3D-ассеты, спроектировал взаимодействия и через vibe coding довёл три направления до рабочих HTML-прототипов.
Продуктовая логикаВизуальное направлениеAI-assisted 3DИнтеракцииVibe-coded HTML
3визуальные метафоры
3рабочих HTML
16+AI-рендеров
1сквозной flow
Не редизайн и не тестовое. Механика, пакеты и статусы — из оригинального драфта; исследовалось, как их показать.
01 / Контекст
Отправная точка — только то, что было на экране.
Ни брифа, ни доступа к внутренней логике. Экраны из демо: как объясняется Gas, как выбирается пакет, как работает статус и вход через Xsolla ID.
Я не пытался угадывать внутренние ограничения. Эти экраны — исходный материал для product exploration.
How it works
Packages + status
Xsolla ID02 / Product tension
Механика уже есть. Не хватает ощущения.
В драфте продукт собран целиком: предоплаченные пакеты, статус, Backpack, вход через ID. Но на странице это отдельные блоки, а сам Gas остаётся абстракцией — шар в герое красивый, но не объясняет, что покупается и куда тратится.
Invisible fee → objectресурс получает форму
Блоки → сценарийпакет, статус и Backpack связаны
Cost → statusпокупка оставляет видимый след
Сейчас
Пакет — карточка с числом.
Статус живёт отдельным блоком, остаток Gas нигде не виден. Покупка ощущается как оплата комиссий.
Дизайн-гипотеза
Пакет — объект с запасом внутри.
Объект показывает остаток, тускнеет при каждом trade / gift / transfer и связан со статусом в профиле.
03 / Brand foundation
Опора — новый язык Xsolla / Pentagram.
Новая система уже даёт готовые строительные блоки: Archive как физическая витрина, Backpack как инвентарь и Sol как эмоциональный персонаж.
Archiveпрозрачная предметная система
Backpackместо, где ресурс становится полезным
Solчеловеческая реакция внутри продуктового UI
Archive и Sol придуманы не здесь: это язык Pentagram, взятый как ограничение и перерендеренный под сценарий Gas.
04 / Visual exploration
3D-направления, собранные из скриншотов.
Две дизайн-гипотезы я сформулировала, отталкиваясь от первых скриншотов и механики Gas. Третья — адаптация нового языка Xsolla / Pentagram под тот же сценарий.
Дизайн-гипотезы, не результаты пользовательского тестирования.
02 / Game feelэксперимент
Игровой кейс
Покупка становится желанной и коллекционной, но язык начинает спорить с брендом.
Original exploration
03 / ArchivePentagram × Xsolla
Archive extension
Gas как ещё один объект внутри существующей системы Archive.
Brand-native extension / re-rendered for Gas
05 / Visual search · Cartridge
моя дизайн-гипотеза · из первых скриншотов
Сначала я сделал Gas физическим ресурсом.
Картриджи, док-станция, янтарное свечение и разные объёмы пакета. Так комиссия становилась чем-то материальным: не «ещё один fee», а запас, который можно увидеть.
Что сработалоМетафора топлива считывается почти без объяснений.
Что не сработалоСистема получилась тяжёлой и слишком близкой к sci-fi hardware.
6 рабочих рендеров · поиск пропорций и семейства XG-050 / 300 / 1000
06 / Visual search · Game case
моя дизайн-гипотеза · из первых скриншотов
Потом я превратил покупку в игровой ритуал.
Вместо утилитарного контейнера — бронированные кейсы, жетоны, разные размеры и состояние «открытия». Покупка Gas начинает ощущаться как действие внутри игры.
Что сработалоПоявилась эмоция покупки и понятная система размеров.
Что не сработалоGame feel стал настолько громким, что начал конкурировать с самим продуктом.
12 рендеров · кейсы, жетоны, exploded view и варианты форм-фактора
07 / Visual search · Archive
визуальный язык Xsolla / Pentagram · адаптация существующей системы
Третий шаг — проверить механику в новой системе Xsolla.
Третье направление не было моим оригинальным стилем с нуля. Я изучил новую систему Xsolla × Pentagram и собрал кодовый prompt-workflow, который генерировал иллюстрации в этой стилистике. На его основе я пересобрал тот же Gas-flow внутри Archive, чтобы проверить, как продуктовая механика может жить внутри нового бренда.
ЗачемПроверить, живёт ли моя продуктовая механика внутри существующего бренда, а не только в собственных метафорах.
РезультатСистема стала спокойнее и меньше спорит с UI, а prompt-workflow позволил масштабировать её на разные типы игровых предметов.
13 рендеров · prompt-workflow + единая витринная система для разных типов предметов
08 / Reframing the purchase
Цена та же. Меняется то, как она ощущается.
Пакеты, цены и статусы — из оригинального драфта, механика не менялась. Проверялось одно: может ли покупка ощущаться не как оплата комиссий, а как пополнение запаса, которое видно в интерфейсе.
1 paymentпакет покупается один раз
50 / 300 / 1,000запас moves виден на объекте
Statusпокупка меняет профиль
Главная идея: дать запасу форму, а трате — видимое последствие.
09 / Three working prototypes
Каждая дизайн-гипотеза — рабочий HTML.
Не статичные макеты: выбор пакета, Xsolla ID, состояние Gas, hover-реакции, popup и эмоциональные состояния Sol.
10 / Sol in product UI
Персонаж уже был. Ему нашлась работа.
Новый маскот не нужен: Sol поддерживает вход во всех трёх версиях.
Микроэмоция после технического действия, а не новая сущность бренда.
IdleВ спокойном состоянии Sol не отвлекает от формы, но следит за курсором.
TypingВо время ввода взгляд становится собраннее: понятно, что персонаж реагирует на действие.
SuccessПосле connect подтверждает действие эмоцией, а не только системным текстом.
IdleСостояния переключаются самой формой: hover → typing → success.
original live HTML
loading live concept
12 / Product flow
Визуал менялся, сценарий — нет.
Во всех трёх версиях один flow — чтобы сравнивать способы объяснения, а не случайные картинки.
01 / CHOOSE
Выбрать пакет
Выбран XG-300. Оплаты ещё нет.
02 / CONNECT
Подключить Xsolla ID
Профиль подключён. Пакет всё ещё ждёт оплаты.
03 / BUY
Оплатить XG-300
После подтверждения 300 Gas загружается в Backpack.
04 / USE
Trade / gift / transfer
Каждое действие списывает 1 Gas: 300 → 299 → 298 → 297…
XSOLLA IDBACKPACK / GAS
Not connected
Connect profile before checkout
Xsolla ID connectedGas synced to Backpack
—Gas not loaded
XG-300 selected
13 / Как собрано
От скриншотов
к рабочим прототипам.
В основе были несколько исходных скриншотов, механика Gas и новый визуальный язык Xsolla. Дальше процесс шёл короткими итерациями: сначала дизайн-гипотезы и 3D-рендеры, затем рабочие HTML-прототипы, где можно проверить не только картинку, но и поведение интерфейса.
process
01
Скриншоты → визуальная рамкаИз первых экранов были выделены механика, объект Gas, структура пакетов и общая логика сценария.
02
3D-генерации → поиск формыЧерез серию AI-рендеров я проверил три образа продукта: две собственные дизайн-гипотезы и одну адаптацию Archive-языка Xsolla / Pentagram. Для третьего направления собрал кодовый prompt-workflow, чтобы воспроизводить стиль на новых объектах.
03
Vibe coding → проверка поведенияЧерез vibe coding каждое направление доведено до живого HTML: с выбором пакета, состояниями, hover-реакциями и покупочными сценариями.
result
3дизайн-гипотезы
3рабочих HTML-прототипа
16+AI-рендеров и промежуточных артов
1сквозная продуктовая логика между всеми версиями
CartridgeТехническое прочтение механики: Gas как ресурс и понятный utility-объект.
Game CaseБолее эмоциональная версия покупки, где действие ощущается как игровой ритуал.
ArchiveВариант, выросший из нового визуального языка Xsolla / Pentagram и встроенный в ту же механику.