Tayyab

Редизайн Tayyab в команде: home, карты, переводы, платежи, состояния и UI-kit

Задача

Обновить home, карты, переводы и платежи и использовать общие UI-паттерны во всех разделах

Мой вклад

Работал над home, картами, переводами и платежами. Проработал основные состояния. Участвовал в развитии light/dark UI-kit

Разбор кейса

Home и карты

В home собраны баланс, карты, быстрые действия и сервисы. Карточные сценарии охватывают выпуск, первый запуск, настройки, блокировку, лимиты и реквизиты

Tayyab: Home для разных наборов продуктов и тем — Home для разных наборов продуктов и тем

Tayyab: Основные состояния и действия карты — Основные состояния и действия карты

Переводы и платежи

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

Tayyab: Основной путь, подтверждение, результат, ошибка и лимит — Основной путь, подтверждение, результат, ошибка и лимит

Tayyab: Садака, автоплатёж и закят — Садака, автоплатёж и закят

Состояния

Для ключевых операций предусмотрены loading, disabled, лимиты, ошибки и повтор. Каждое состояние объясняет, что произошло и какое действие доступно дальше

Tayyab: Loading, ошибка и результат в основных сценариях — Loading, ошибка и результат в основных сценариях

UI-kit

В light/dark UI-kit вошли типографика для кириллицы, латиницы и арабского, цветовые роли, компоненты и их состояния. Общие паттерны используются в разных разделах продукта

Tayyab: Один интерфейс в light и dark — Один интерфейс в light и dark

Tayyab: Шкала для кириллицы, латиницы и арабского — Шкала для кириллицы, латиницы и арабского

Tayyab: Кнопки, поля, списки, карточки и их состояния — Кнопки, поля, списки, карточки и их состояния

Tayyab: Иконки и цветовые роли — Иконки и цветовые роли

Результат

Основные сценарии собраны в светлой и тёмной темах, общие элементы перенесены в UI-kit

Следующий кейсQ-POS