Редизайн карт других банков
в PWA банка
«Открытие»
в PWA банка
«Открытие»
📁 Задача
Появилась необходимость в редизайне карт других банков
и различных состояний раздела в PWA «Открытия»
в соответствии с новым UI-китом.
📈 Цель
Проверить все элементы раздела.
Обновить дизайн состояний раздела и карт.
💻 Ход работы
В ходе проверки выяснилось,
какие состояния раздела требуют редизайна:
• Состояние добавления карты стороннего банка
• Заполненная форма
• Нотификация об успешном добавлении карты
• Предупреждение о неправильном номере карты
• Предупреждение об ошибке сервера+загрузка
• Удаление привязанной карты
• Детали по карте другого банка+дизайн дефолтной карты
+истекший срок действия карты
Появилась необходимость в редизайне карт других банков
и различных состояний раздела в PWA «Открытия»
в соответствии с новым UI-китом.
📈 Цель
Проверить все элементы раздела.
Обновить дизайн состояний раздела и карт.
💻 Ход работы
В ходе проверки выяснилось,
какие состояния раздела требуют редизайна:
• Состояние добавления карты стороннего банка
• Заполненная форма
• Нотификация об успешном добавлении карты
• Предупреждение о неправильном номере карты
• Предупреждение об ошибке сервера+загрузка
• Удаление привязанной карты
• Детали по карте другого банка+дизайн дефолтной карты
+истекший срок действия карты
Продукт овнер уточнил, что дизайн многих карт сторонних банков отсутствует, я разработал
для обновлённого UI-кита мультикомпонент с дизайнами карт популярных банков, которые
в дальнейшем можно было дополнять по необходимости, и далее приступил к самому разделу
в PWA. Сначала было сделано состояние добавления карты стороннего банка (дизайн до/после):
для обновлённого UI-кита мультикомпонент с дизайнами карт популярных банков, которые
в дальнейшем можно было дополнять по необходимости, и далее приступил к самому разделу
в PWA. Сначала было сделано состояние добавления карты стороннего банка (дизайн до/после):
Далее заредизайнил заполненную форму:
Нотификация об успешном добавлении карты:
Предупреждение о неправильном номере карты:
Предупреждение об ошибке сервера, загрузка дизайна карты, а так же состояния «Не удалось загрузить историю операций» и «Нет операций по карте»:
И, наконец, чуть позже были заредизайнены детали по карте другого банка, дизайн дефолтной карты и состояние истекшего срока действия карты (с адаптивами):
💰 Что в итоге
После успешного ревью редизайн был запущен на прод, скорость прогрузки раздела возросла, исправлены ux-проблемы типа низкого контраста и размеров элементов.
После успешного ревью редизайн был запущен на прод, скорость прогрузки раздела возросла, исправлены ux-проблемы типа низкого контраста и размеров элементов.