Дизайн-система Zeeves обеспечила единый стиль и ускорила запуск продуктов

Мы получили от клиента набор референсов и приступили к работе, ориентируясь на максимальную удобность и сохранение фирменного стиля Zeeves.

Шаг 1. Анализ требований и референсов

На старте проекта мы глубоко погрузились в бизнес-цели клиента и изучили все сценарии использования. Вместо сухого ТЗ команда сосредоточилась на реальных нуждах пользователей и особенностях продукта:

• провели аудит существующих решений в Telegram-боте;
• разобрали предоставленные референсы и определили ключевые принципы бренда;
• выявили основные сценарии: авторизация, обзор счетов, операции с картами, обработка ошибок и успешных действий;
• зафиксировали требования к печати конвертов и безопасности персональных данных.

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

Шаг 2. Создание дизайн-системы

Мы начали с фундамента — полноценного UI-кита. В него вошли:

• базовые компоненты: кнопки, поля ввода, переключатели, карточки, иконки;
• цветовая палитра, типографика и сетка;
• правила поведения элементов в разных состояниях (hover, active, disabled, loading, error, success);
• готовые шаблоны для часто используемых блоков.

UI-кит стал единой библиотекой стилей, которая гарантирует единый визуальный стиль во всех продуктах Zeeves и существенно упрощает работу дизайнеров и разработчиков.

Шаг 3. Проектирование интерфейсов

На основе дизайн-системы были созданы десятки страниц и экранов. Особое внимание уделили:

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

Это позволило избежать типичных проблем при разработке и сразу получить реалистичные прототипы.

Шаг 4. Дизайн конвертов для карт

Отдельной задачей стало создание макетов упаковки. Конверт представляет собой сложенный лист формата А4 с продуманной технологией сгиба. Мы:

• учли безопасные зоны для печати;
• разместили брендинг, инструкции по активации и персональные данные;
• предусмотрели защиту от повреждений при доставке.

Результат — стильная и функциональная упаковка, которая усиливает первое впечатление от продукта.

Шаг 5. Тестирование и передача материалов

Перед финальной сдачей провели тщательную проверку:

• на соответствие всем состояниям и сценариям;
• на техническую реализуемость;
• на соответствие требованиям к печати.

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

Шаг 6. Дальнейшее сотрудничество и масштабирование

Проект не закончился на этапе сдачи. Наша команда продолжает поддерживать клиента: консультирует по использованию UI-кита, помогает с новыми компонентами и следит за развитием продукта.