Ottri — Продуктовый дизайнер

2025-2026

Сайт

Ottri — финансовая платформа, которая позволяет компаниям предоставлять финансирование от своего имени. Она упрощает весь процесс: от подачи заявки на кредит до одобрения и получения денег.

Клиентский интерфейс

Клиентский интерфейс открывается по ссылке, которую компания отправляет своим клиентам. По ней они вводят свои данные и подают заявку на финансирование.

  • Страница по клиентской ссылке на телефоне, под логотипом компании: ползунок суммы кредита установлен на 40 000 долларов, ниже — готовые варианты сумм и пояснение, что проверка доступности кредита не повлияет на кредитный рейтинг
  • Следующий шаг: форма с полями для имени, электронной почты, домашнего адреса и даты рождения
  • Выбор условий кредита: заголовок «Вам предварительно одобрено 50 000 долларов» и выбранный вариант с ежемесячным платежом, типом кредита, годовой ставкой и сроком

В конце клиент видит экран с подтверждением, что его заявка одобрена.

Финальный экран: галочка, заголовок «Кредит одобрен!» и карточка одобренного кредита на 50 000 долларов сроком на 15 месяцев с годовой ставкой и ежемесячным платежом

Брендинг

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

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

Оттенки, созданные на основе одного оранжевого цвета: от самого светлого к самому тёмному, с обозначениями от 100 до 500 и HEX-кодами
Палитра создаётся с помощью UI Colors API, который работает и в Figma, и в коде

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

  • Экран предварительного одобрения в малиновом фирменном цвете: выбранный вариант кредита обведён рамкой, кнопка залита тем же цветом
  • Тот же экран предварительного одобрения в оранжевом фирменном цвете: все акценты используют новую палитру
  • Тот же экран предварительного одобрения в синем фирменном цвете, под логотипом другой компании

Настройки

Я также работал над настройками профиля и настройками админа, которые позволяют управлять аккаунтам и менять настройки компании.

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

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

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