Редизайн флоу перевода денег в цифровом кошельке, построенный вокруг одной конкретной проблемы: что происходит с деньгами сразу после отправки.
Я пользуюсь такими приложениями, как PayPal, Venmo и Wise, как и большинство людей — и момент, который всегда раздражает, это сразу после нажатия «отправить». Экран обычно просто показывает «Pending» — без таймлайна, без объяснений, без ничего. Деньги уже списаны со счёта, а ты понятия не имеешь, всё ли в порядке или это просто так и должно быть.
Вместо того чтобы гадать, я проверил, чувствуют ли то же самое другие люди. Я прошёлся по недавним отзывам о PayPal, Venmo и Wise, конкретно ища жалобы на процесс перевода, и несколько вещей повторялись снова и снова:
Это подтвердило, что дело не только во мне. Поэтому я выбрал один флоу, чтобы сделать его по-настоящему хорошо, вместо попытки редизайнить весь кошелёк целиком: отправка денег другому человеку, от момента открытия приложения до момента, когда деньги доходят.
Порядок на экране отправки. Получатель, потом сумма, потом кнопка отправки. Звучит очевидно, но в моей первой версии кнопка была выше поля суммы — то есть пользователь видел «Отправить» ещё до того, как вообще что-то ввёл. Мелочь, но это разница между экраном, который ведёт тебя за руку, и экраном, который просто бросает элементы в случайном порядке.
Экран статуса — это и есть настоящее решение. Всё, что до него — отправка, подтверждение — довольно стандартные вещи, которые есть в любом кошельке. Экран, который я реально спроектировал для решения проблемы — это трекер перевода: четыре шага (Отправлено → Подтверждено → В пути → Доставлено), с галочками на том, что уже произошло, выделенной точкой на том, что происходит прямо сейчас, и простым примерным временем под этим. В этом вся идея — заменить «Pending» на «вот где именно находятся твои деньги».
Одна цветовая система, четыре экрана. Матовая сине-серебристая палитра, единый стиль карточек (белые, скруглённые углы 16px), одна шкала типографики на всём протяжении. Я сам однажды нарушил это правило — карточка с деталями вышла чуть иначе, чем остальные — и пришлось вернуться и поправить отступы и радиус скругления, чтобы всё совпало. Такие мелкие несоответствия — именно то, что делает дизайн незаконченным, даже если никто не может сразу сказать почему.
Хочу быть честным насчёт этой части, потому что считаю, что это важнее, чем притворяться иначе.
Я новичок в UI/UX — это действительно мой первый настоящий проект в этой области. Я использовал Claude на всех этапах: чтобы исследовать реальные жалобы людей на флоу переводов, чтобы превратить мои решения в точные спецификации (цвета, отступы, размеры), которые я сам вводил в Figma, а позже — чтобы направлять собственные AI-инструменты Figma, когда уже достаточно понимал основы, чтобы проверять их результат, а не просто принимать его. Первые два экрана я построил вручную, поле за полем, изучая Auto Layout в Figma по ходу дела — включая несколько ошибок, прежде чем всё щёлкнуло. Последние два экрана я построил быстрее с помощью AI, когда у меня уже была система, которую можно было ей передать, и я поймал и исправил несоответствие в стиле, которое она внесла. Финальная интерактивная версия сделана как рабочий код, а не статичные макеты, так что флоу реально кликабелен от начала до конца.
Ни одно из решений выше — порядок полей, концепция экрана статуса, цветовая система, что считается «завершённым» — не пришло от инструмента. Это были мои решения. Инструменты помогли мне двигаться быстрее и научили ремеслу по ходу дела — и именно это я хочу продолжать делать.
Это один флоу, сделанный по-настоящему, а не целое приложение сделанное наполовину. Если бы я продолжил, следующая проблема в этом же приложении — история транзакций: сейчас, если проверить «Доставлено: мгновенно», у тебя нет способа реально это подтвердить.