Beefy.finance
В одиночку отвечал за весь продуктовый дизайн – от исследования до dev. ревью – на продукте с 12 000 MAU и $584M TVL. Пользователь кладёт актив в волт – дальше протокол сам реинвестирует награды, без ручного фарминга.
- Роль
- Senior Product Designer · end-to-end, единственный дизайнер в продукте
- Команда
- PM и два разработчика
- Сфера
- DeFi/web3, оптимизатор доходности
- Период
- Февраль 2025 – август 2026
- Платформа
- Web + мобильный веб
“The design system was good, very organized and instructions were clear. Compared to other designers I have worked with, it was better since we had a clear system.”
Eren
Разработчик Beefy
Контекст
Больше полутора тысяч волтов, более трёх десятков сетей в пике.
Весь продукт живёт на одном экране. Главная – это список волтов и фильтр, и почти вся работа пользователя происходит здесь: он ищет, куда положить деньги, и решает, оправдывает ли доходность риск. По информации от продакт-менеджера поиск и анализ волтов забирают 63% пользовательского времени.
Это определило приоритеты: работа началась там, где пользователь проводит наибольшее время, – в фильтрах, поиске, сортировке, а затем, списке, и карточках волтов.
End-to-end дизайн продукта
Я был единственным дизайнером продукта и вёл дизайн end-to-end – от discovery и постановки задачи до dev. ревью. Работал напрямую с продакт-менеджером и двумя разработчиками, без дизайн-лида над собой.
- Дизайн-система – собрал с нуля: 202 семейства компонентов в 26 разделах. До этого её в продукте не было;
- Интерфейсная анимация в Rive – состояния кнопок во время долгих блокчейн-транзакций, микровзаимодействия, а также элементы промо-страниц;
- Основные экраны продукта – список волтов, фильтры и поиск, карточка волта, навигация, меню сетей и активов – в основном глубокая переработка; Buy crypto, Bridge BIFI, дашборд и Treasury тронул точечно – в основном паддинги – без глубокой переработки;
- Новые функции – кросс-чейн ZAP и перенос депозита между волтами, beGEMS, Featured vaults, объединение CLM – пулов с концентрированной ликвидностью, карточка Safety Score, коннектор кошелька, страница подписи сообщения;
- Исследования – юзабилити-тестирование, интервью, конкурентный анализ; прототипы на переменных и условиях, тестирование в Maze;
- Адаптивность и UI-полировка – до меня продукт жил на трёх брейкпоинтах; привёл интерфейс к тому, чтобы он занимал всё доступное пространство на любой диагонали, и стандартизировал отступы;
- AI в рабочем процессе – с апреля 2026, агенты для сбора данных и deep research; доски в Notion, на которых устройство фичи собирается в разы быстрее; генерация ряда вариантов компонента по готовому наброску или вводным, чтобы нащупать дельное направление и довести до идеала;
- Дизайн-хендофф – онбординг разработчика в задачу, передача макета, dev. ревью после вёрстки.
Типичный ход выполнения задачи:
- Исследование лейаута, требований, критериев успеха;
- Сбор референсов;
- Для крупных задач – немодерируемые UX тесты на прототипах в Maze;
- Отрисовка сценариев использования;
- Согласование с продакт-менеджером;
- Dev. ревью.
Линч всего продукта был одной из первых задач: я прошёл по каждому флоу в Figma и выписал на общую доску все проблемы, что замечал, – заодно начал понимать, как устроена экосистема: сети, платформы, типы волтов. Продакт-менеджер разбирал доску со мной: с чем-то соглашался, с чем-то нет, и уже по этому фильтру формировался беклог – оттуда позже выросли первые задачи.
Всё, что я сделал в Beefy за полтора года
- Дизайн-система, с нуля
- Cross-chain ZAP
- Vault to Vault ZAP
- Sorting & filtering
- Value Proposition research
- Enhanced SearchIn dev
- CLM mergeIn dev
- Safety Score card
- Responsive / adaptive layout
- UI animation & micro-interactions
- Data visualization (price graphs)
- New wallet connectorIn dev
- Navigation menu
- RPC menu
- Asset menu
- beGEMS in nav
- Featured vaults 2.0
- Free ZAP campaign
- beGEMS – In-product campaigns & gamification elements
- Visual hierarchy – boosted vaults
- Heading visual hierarchy
- In-product branding – token visibility
- Tooltips upgrade
- Notifications
- Display “Suggested vaults” for the retired vaults
- Vaults page review
- Vaults page
- Vault page – scoped update
- Ultimate Vaults
- Main page
- Main page :: vault types
- Curator logos for the Platform
- Popup overlay
- Transaction “dust”
- MegaETH Points banner
- Wide lanes hiding
- Spacing system standardization
- MainPage padding fix
- Page title fix
- Withdrawal timer section
- Boost action in deposit flow
- Sorting: Current APY control
- Sign a message page
- Blogpost
Бусты
Бусты только появились как MVP, и оранжевый акцент выбивался из палитры. Это не частный случай: единой цветовой логики во многих элементах не было. Я достраивал её параллельно – собирал правила и вносил в токены дизайн-системы.
Сперва волтов с бустом было один-три, и их просто прикрепляли наверх списка. Потом стало пять-десять, а после запуска Profit Distribution – двадцать-тридцать одновременно. Приём, на котором держалась вся видимость бустов, перестал работать: прикрепить наверх тридцать позиций нельзя.
Юзабилити-исследования
Beefy – privacy-first продукт: пользовательская аналитика не собирается, поэтому опереться на воронки и события было нельзя. Проверять решения пришлось напрямую на пользователях.
Я инициировал программу полевого тестирования: предложил продакт-менеджеру создать канал на Discord-сервере продукта (около 10 000 участников). Так, вместо разового набора появился постоянный пул тестировщиков, которых можно было привлекать к новым исследованиям без повторного рекрутинга. Коммуникацию с участниками вёл продакт-менеджер, а я отвечал за подготовку сценариев, проведение и анализ результатов тестирования.
#app-testing работают на каждый следующий раунд исследованийUnmoderated usability testing
Участник проходил задания сам, когда ему удобно, без наблюдателя и без интервьюера рядом. Инструмент – Maze: записывает каждый клик и мисклик, считает время на задание, строит хитмапы и собирает ответы на открытые вопросы. Это дало масштаб, недостижимый для модерируемых исследований: 98 пользовательских сессий вместо привычных пяти-восьми.
Бусты тестировали в марте 2025.
Результаты
46 участников.
Как обычно в Maze, не каждый доходит до последнего задания.
| Задание | Успех | Отвал | Время |
|---|---|---|---|
| Открыть волт с доступным бустом | 46 из 46 | 0 (0%) | 12,1 с |
| Открыть страницу со всеми бустами | 39 из 43 | 4 (9,3%) | 12,1 с |
| Забустить волт на выбор | 39 из 41 | 2 (4,9%) | 38,4 с |
В дополнение к количественным данным я получил качественную обратную связь:
Удовлетворённость бустами – 3,6 из 5 (n=40). Здесь я допустил методологическую ошибку: вопрос «How satisfied are you with the vault boosting experience?» стоял сразу после трёх заданий на прототипе – и по формулировке, и по позиции в анкете он мог читаться как вопрос о только что пройденном тесте, а не о реальном опыте буста на продакшне. Часть респондентов могла отвечать про одно, часть – про другое, и однозначно сказать, о чём шла речь, нельзя. Редизайн при этом целенаправленно закрывал перечисленные пользователями жалобы.
Фильтры, сортировка и поиск
Фильтры, сортировка и поиск – самая нагруженная часть продукта, за неё я взялся уже с пониманием некоторых проблем: они лежали на доске, которую я завёл на общем ревью и пополнял всё время работы.
Сортировка и фильтры стоят над списком – и на десктопе, и на мобильном. При скролле они пропадают из вида первыми, и чтобы настроить выдачу, приходится возвращаться далеко наверх.
Контролы выстроены в ряд, но не читаются как одна система. На десктопе группы переключателей разнесены чрезмерными расстояниями, а поиск отделён от них и не сообщает, по какому параметру ищет. На мобильном фильтрация и сортировка – два стоящих рядом, но не связанных между собой компонента.
Буст, платформы и порог TVL – на втором уровне вложенности. Волты с бустом лежат внутри фильтров, список платформ – в самом низу той же панели. «Минимальный TVL» – порог по объёму средств в волте – сделан чекбоксом: его селлектор лежит на следующем уровне и появляется только после включения, до этого не видно ни значения, ни того, как его можно задать.
Частые действия требуют больше движений, чем редкие. Первым в ряду стоит переключатель «Все / Сохранённые / Мои позиции» – то, чем пользуются реже всего, а платформа и минимальный TVL спрятаны внутрь дополнительного меню.
Юзабилити-исследования
В марте 2025 тестировали бусты, в апреле – фильтры и поиск, уже как проверку того, стал ли переработанный интерфейс понятнее.
Результаты
Фильтры, 52 участника.
Тестировали на мобильном прототипе – десктоп получил те же решения, но отдельной проверки с пользователями не проходил, поэтому скрины ниже мобильные.
| Задание | Успех | Отвал | Время |
|---|---|---|---|
| Открыть только стейблкоин-волты | 23 из 35 | 12 (34,3%) | 43,5 с |
| Открыть CLM-пулы с бустом | 19 из 29 | 10 (34,5%) | 26,2 с |
| Открыть BTC-correlated | 20 из 27 | 7 (25,9%) | 27,2 с |
| Вернуться к виду по умолчанию | 25 из 26 | 1 (3,8%) | 6,4 с |
Участники, дошедшие до финального вопроса, оценили только что пройденный опыт на 4,1 из 5 (n=23 из 52 – шкалу показывали в конце), выше, чем у бустов (3,6/5).
Прямого сравнения с «до» нет – baseline не снимали, но эти же проблемы пользователи упоминали в обратной связи в Discord.
Раньше первым в ряду стоял переключатель «Все / Сохранённые / Мои позиции» – то, чем пользуются реже всего, а платформа и минимальный TVL были спрятаны внутрь дополнительного меню. Получалось, что частые действия требовали больше движений, чем редкие.
Часть той же обратной связи повторялась достаточно часто, чтобы посчитать её по частоте – по открытым ответам обоих вопросов (n=26)
Дизайн-решения и информационная архитектура
Каждое решение отвечает на конкретную находку.
Буст закрепили в видимой области фильтра. Раньше он лежал внутри выпадающей панели вместе с редкими параметрами – теперь виден сразу, без её открытия.
Сортировку закрепили – но только на десктопе. Предлагал более лёгкий вариант для обоих случаев – не постоянное закрепление, а появление панели при скролле вверх, на мобильном и для фильтров на десктопе – но решили оставить постоянное закрепление, раз оно уже работало.
Контролы выстроили в порядке, в котором люди ищут. Сеть и категория актива встали первыми, тип волта – следом, редкие фильтры ушли глубже. Порядок в интерфейсе совпал с порядком в голове у пользователя.
Добавили селектор Memes – категорию попросили в открытых ответах теста фильтров («Meme vs regular alt coin selection»).
Завели адаптивность – вёрстка фильтров построена так, что вмещает максимум контролов на любой диагонали.
Cross-chain ZAP и продуктовая модель
До этой функции путь между сетями занимал 9 шагов, и почти на каждом можно было бросить. При этом, под протокол подстраиваются редко: люди вкладывают то, что у них уже есть, и часто не готовы бриджить ради пробного депозита – если волт в Arbitrum, а деньги в Ethereum, человек просто уходит.
Вот как это выглядело и во что превратилось
| Исходный флоу депозита из волта в волт9 шагов и 2 уплаты газа | Cross-chain ZAP6 шагов и 1 уплата газа |
|---|---|
| Выбрать волт для входа | Выбрать волт для входа |
| Понять, в какой сети волт | Step is Gone |
| Понять, где его собственный актив | Step is Gone |
| Перевести активы через бридж, и заплатить газ | Во вкладке депозит выбрать «From vault» |
| Найти целевой волт | Выбрать один из своих волтов из списка |
| Выбрать сеть | Step is Gone |
| Указать объем | Указать объем |
| Нажать кнопку депозит | Нажать кнопку депозит |
| Заплатить газ, и получить результат | Заплатить газ, и получить результат |
Только в процессе стало понятно, что барьера между сетями пользователь видеть не должен: для него это просто перевод денег в другой волт. Интерфейс подстроился под пользователя, а не наоборот.
Отдельно проработаны edge cases – ситуации, когда ZAP просто не показываем, и почему:
| Условие | Почему так |
|---|---|
| Слишком маленькая сумма относительно комиссии | Риск для пользователя выше пользы – ZAP скрываем, а не предлагаем |
| Неподдерживаемый маршрут | Технически невозможно – ZAP скрываем |
| Высокое проскальзывание | Риск для пользователя выше пользы – ZAP скрываем |
| Экспериментальный волт | Риск для пользователя выше пользы – ZAP скрываем |
| Partial failure state – часть транзакции прошла, вторая нет | В блокчейне нет отмены – показываем статус, чтобы не запаниковали и не повторили попытку, потеряв газ дважды |
| Долгое ожидание в блокчейне | Write-анимация в Rive держит пользователя в моменте, экран не выглядит зависшим |
Эта задача – показательный пример цикла целиком. Исследование существующего лейаута, отдельная страница референсов, затем сценарии использования, разложенные по состояниям: уведомления, анимация ожидания и предельный вариант, когда нужно показать всё сразу. И dev. ревью в конце. Отдельная страница на каждое состояние – так отчётливо видно, что умеет фича и зачем она создана. Не бюрократия.
Тот же паттерн пригодился снова, в других обстоятельствах. 8 апреля 2026 Binance объявила делистинг BIFI, токена проекта. За сутки токен потерял треть стоимости. Уходила не только цена – уходило доверие: пользователю становилось дороже входить, выходить и перекладываться между волтами. Vault to Vault ZAP вышел в релиз на четвёртый день после анонса – тот же перенос без выхода в промежуточный актив, применённый к кризису, а не к рутинному трению.
