Разработка дизайна страниц:
1. Пополнение билета электронный кошелек карты "Тройка".
2. Авторизация пользователя.
3. Для авторизованных пользователей операции привязки и удаления банковской карты.
4. Настройка авто платежей карты "Тройка" по расписанию.
5. Просмотр истории платежей.
6. Отображение тарифов по электронному кошельку карты "Тройка".

По ТЗ заказчика новый дизайн должен соответствовать брендбуку Метрополитена и вписываться в сайт mosmetro.ru.

Ограничения: запрет на изменение верхнего меню и сохранение логики и размеров левого меню.

ОСНОВОЕ НАПРАВЛЕНИЕ РАБОТЫ

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

Поэтому было принято решение оформить все функции на сайте. После нажатия кнопки «пополнить» пользователь переходил в раздел пополнения баланса.
На этот же странице пользователь мог бы сразу произвести быстрое пополнение своей карты "Тройка" и покинуть сайт.

Главная страница

Новый вариант

Было

Детали платежа

Личный кабинет нужен для хранения всех карт "тройка", возможность управлять ими, пополнять и получать отчет по каждой.

Личный кабинет

История платежей

В данном разделе позволять отслеживать все детали платежей по каждой карте, который совершил пользователь.

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

Автоплатежи

При разработке макетов часто дизайнеры забывают о таких важных экранов как "техническое облуживание" и "Нет связи".
Но в жизни мы часто сталкиваемся с ними.

Технические экраны

Конечно не забываем, что современность это 80% времени мы проводим с телефоном или планшетом. И каждый сайт по умолчанию должен иметь возможность хорошо адаптироваться.

Адаптивный дизайн