Проектирование интерфейса автомата для Киевского метро

История об одном тестовом задании, которое превратилось в интересный дизайн-проект

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

Задача

В тестовом задании суть задачи была сформулирована следующим образом (вольный перевод с английского):

Вас попросили проанализировать и предложить лучшее решение для службы оплаты проезда в Киевском метро.

  • Опишите этапы проектирования нового сервиса.
  • Охарактеризуйте цели и ожидаемые результаты для каждого этапа.
  • Опишите основные проблемы и основные пользовательские сценарии.
  • Спроектируйте взаимодействие для предлагаемого решения (может быть киоск самообслуживания или любой другой вариант).

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

1. Исследования

Любой процесс должен начинаться с исследований, иначе дизайнер будет долго и мучительно тыкать мышкой в небо, что превращает дизайн-процесс в нечто похожее на игру в русскую рулетку… Главное для этого этапа грамотно подобрать инструменты и способы которые помогут получить необходимые для работы данные. В моем случае были использованы один источник и три метода получения информации:
- сайт Киевского метрополитена;
- онлайн-опрос созданный с помощью Google Forms и опубликованный в Facebook;
- интервью с пассажирами метро;
- полевые исследования непосредственно в подземельях.

Сайт Киевского метрополитена

Это отличный источник который дал понимание о том, какие существуют способы оплаты проезда, о тарифах и автоматических средствах оплаты, которые призваны облегчить жизнь пассажирам. Всю эту информацию можно найти на странице Оплата проезда.

Онлайн-опрос

Благодаря Google Forms и Facebook достаточно легко провести онлайн-опрос. Метро использует практически каждый пользователь фейсбука, а это значит, что он является представителем целевой аудитории. Этот факт позволяет получить достоверные качественные и количественные данные. Я создал онлайн-опрос в котором было два простых вопроса.

Первый вопрос “Как вы оплачиваете проезд?” предлагает выбрать один из четырех вариантов ответов. Вопрос является закрытым и помогает получить количественные данные, статистику о том каким образом пользователи оплачивают проезд.

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

Этот метод оказался весьма эффективным. Я закончил изучать данные когда было получено 139 ответов, и это в течение двух дней! Посмотреть онлайн-опрос и страницу с результатами.

Интервью с пассажирами метро

Так же я провел несколько коротких интервью с живыми людьми. Это помогло лучше понять суть нескольких проблем которые были указаны в онлайн-опросе а так же причины выбора того или иного способа оплаты проезда. Это не так уж сложно, не страшно и совсем не больно, юикс-дизайнер должен уметь это делать.

Полевые исследования в подземельях

Что бы испытать все проблемы на себе дизайнер должен пойти и все проверить лично. Поход в метро помог окунуться в атмосферу став одним из пассажиров, ощутить “дружественный” настрой обслуживающего персонала, осознать мотивы поведения и причины возникновения некоторых проблем.

Важно!

Этап исследований является фундаментальным, от него зависит в каком направлении пойдет дизайнерская мысль. Поэтому на исследования нужно тратить столько времени сколько нужно, что бы там не говорили менеджеры проекта и клиенты.

2. Определение проблем

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

Способы оплаты проезда

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

Жетон
Старый добрый жетон все еще в деле, это простой и понятный способ оплаты проезда. Используется в основном пассажирами которые не часто ездят на метро. Жетон можно приобрести в кассе а так же воспользоваться одним из трех типов автоматов. Опрос показал, что этот способ используют 41% респондентов.

Основные проблемы при покупке жетона:
- медлительный кассир;
- грубость сотрудников кассы;
- работают не все окна в час пик.

Пополняемая пластиковая карта
Достаточно удобный способ оплаты, купил карточку многоразового использования и по мере необходимости пополняешь. Картой пользуются пассажиры которые довольно часто ездят на метро, практически каждый день. Карту можно приобрести в кассе или с помощью универсального автомата; пополнить карту можно как в кассе так и с помощью двух типов атоматов. Этот способ используют 45.1% респондентов.

Основные проблемы при покупке и использовании карты связаны с работой кассы и интерфейсом автомата (об этом ниже). Для того что бы пользоваться картой ее нужно купить заплатив 12 гривен, но никто из респондентов не посчитал это проблемой.

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

Проездные бывают трех типов:
1. Без ограничений по кол-ву поездок.
2. С ограниченным кол-вом поездок 62/31 (месяц/пол месяца).
3. С ограниченным кол-вом поездок 46/23 (месяц/пол месяца).

Проездной можно приобрести в кассе или с помощью универсального автомата; пополнить можно как в кассе так и с помощью двух типов атоматов. Весьма странный способ оплаты, наследие старой системы, пользуются проездными всего 9% респондентов.

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

Кроме этих основных типов проездных только для метро существуют так же комбинированные, то есть дающие право на проезд и в других типах транспорта (таблица с тарифами ниже).

PayPass
Счастливые обладатели карт MasterCard и Maestro с бесконтактной технологией проведения платежа PayPass могут легко и просто оплатить свой проезд просто поднеся свою карточку к турникету обородуванному считывающим терминалом. Этим способом пользуются менее 5% респондентов.

Проблема при использовании карт с PayPass только одна: не все станции оборудованы терминалами.

Казалось бы, чем больше вариантов выбора тем лучше. Но, как говорит старая дизайнерская поговорка, “Больше сущностей — больше проблем”, то есть чем больше способов оплаты тем больше проблем сваливается как на пассажиров так и на работников метрополитена.

Точки соприкосновения

Для того что бы купить жетон и карточку, а так же пополнить карточку, пассажир должен воспользоваться кассой или автоматом. Рассмотрим связанные с этим проблемы.

Касса
Все проблемы обусловлены человеческим фактором и лежат в плоскости взаимодействия человек-человек:
- медлительный кассир;
- грубость сотрудников кассы;
- работают не все окна в час пик;
- карточки пополняются в кассе, что отнимает много времени;
- очередь в конце/начале месяца за месячными проездными.

Касса с одним работающим окном, кассир как всегда отлучился позвонить

Казалось бы, это не самые страшные проблемы, однако это не значит, что на них стоит закрывать глаза и не пытаться от них избавиться. Грубость неудовлетворенной во всех планах кассирши способна испортить настроение на целый день, со всеми вытекающими…

Автоматы
К услугам пассажиров предоставлены 4 типа автоматов, и все с разными интерфейсами! С помощью автоматов можно покупать жетоны и карточки, а так же пополнять их и продлевать месячные проездные. Ниже фотографии этих фантастических устройств с коротким описанием возможностей.

Автомат выдачи жетонов. Можно обменять купюру в 20 гривен на 5 жетонов (4 грн за жетон).
Автомат продажи жетонов. Можно купить жетоны за бумажные деньги разного номинала (но не больше 20 гривен) с возможностью получить сдачу.
Автомат дозаписи пополняемых пластиковых карточек. Можно пополнить карту а так же проверить остаток на ней.
Универсальный автомат. Можно купить жетоны и пополняемые карты, а так же пополнять карты и проверять остаток средств.

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

Интерфейс автомата дозаписи пополняемых пластиковых карточек
Интерфейс универсального автомата

Основные проблемы связанные с использованием автоматов лежат в плоскости взаимодействия человек-компьютер и весьма стандартны. Не буду описывать отдельно проблемы каждого типа автоматов, они весьма схожи, просто перечислю основные сложности которые были выявлены благодаря онлайн-опросу и при личном тестировании:
- ограничения по принимаемым купюрам (не более 50 гривен);
- долгая процедура оплаты;
- купюры загружаются по одной после чего нужно подтверждать;
- двойное подтверждение для зачисления средств на карту;
- почти одинаковые прорези для карты и купюр;
- тарифы для разного количества поездок;
- ограничения по количеству проездов;
- убогий и запутанный интерфейс;
- автомат не дает сдачу;
- иногда деньги не попадаю на карту;
- нельзя пополнять пластиковой картой;
- плохое расположение атоматов.

Другие проблемы

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

Таблица с ценами и типами проездных документов с сайта http://www.metro.kiev.ua/node/106#2

Судя по этой статье, ввод разных тарифов обусловлен желанием руководства метрополитена стимулировать пассажиров полностью перейти на пластиковые карты, что бы снизить затраты, однако в результате все это многообразие тарифов только путает пассажиров. Благодаря собранной статистике можно сделать вывод, что эта затея не привела к желаемому результату: 45.1% пассажиров перешли на пополняемые карты а 41% продолжают пользоваться жетонами (по официальной статистике жетоны использует 40%).

Собираем все вместе

Если количество способов оплаты умножить на количество способов покупки/оплаты, и умножить на количество связанных с ними проблем мы получим весьма внушительный список, и это уже подводная часть айсберга (в этой схеме я обобщил проблемы каждого типа автомата).

Все проблемы в виде структуры

3. Фокусировка

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

Бизнес-требования

На данный момент метрополитену нужно снизить свои расходы путем отказа от использования жетонов, о чем и говорит эта статья. Для этого и были введены пластиковые карты, которые должны были стимулировать пассажиров. Однако, чтобы полностью отказаться от использования жетонов нужно решить проблемы с автоматами на которые указали пассажиры.

Пользовательские требования

Используем профили пассажиров что бы лучше понять их проблемы и потребности. Благодаря собранной статистике мы получаем три типа пассажиров:
1. Используют пополняемые пластиковые карты — 45%.
2. Используют жетоны — 41%.
3. Используют месячные проездные — 9%.
4. Другие способы оплаты (PayPass) — 5%.

Профили
Составим профили трех основных типов пассажиров и сфокусируемся на их проблемах.

На основе собранных данных я собрал простую Customer Journey Map для одного персонажа, чтобы увидеть картину полнее.

Потребности
По сути, у пассажиров есть две основные потребности:
1. Простой и быстрый способ оплаты проезда при не частых поездках в метро.
2. Простой, быстрый и экономичный способ оплаты проезда при регулярном использовании метро (каждый день).

Основные проблемы

Больше всего пассажиры жалуются на очереди в кассу и проблемы при использовании автомата.

Очереди
Перечислим причины возникновения очередей в кассу:
- медлительный кассир;
- работают не все окна в час пик;
- карточки пополняются в кассе, что отнимает много времени;
- очередь в конце/начале месяца за месячными проездными.

Проблемы с автоматом
Перечислим проблемы возникающие при использовании автомата:
- ограничения по принимаемым купюрам (не более 50 гривен);
- долгая процедура оплаты;
- купюры загружаются по одной после чего нужно подтверждать;
- двойное подтверждение для зачисления средств на карту;
- почти одинаковые прорези для карты и купюр;
- тарифы для разного количества поездок;
- ограничения по количеству проездов;
- убогий и запутанный интерфейс;
- автомат не дает сдачу;
- иногда деньги не попадаю на карту;
- нельзя пополнять пластиковой картой;
- плохое расположение автоматов.

4. Генерация идей

После фокусировки на всех проблемах и потребностях можно приступить к поиску решений. Включаем генератор идей и записываем все, что приходит в голову:
- мобильное приложение с помощью которого можно пополнять пластиковую карту или продлевать проездной;
- добавить на пластиковую карту уникальный номер для пополнения/продления через Интернет;
- все автоматы заменить одним универсальным с улучшенным интерфейсом;
- продавать и пополнять карты (и жетоны) не только в кассах метро но и в киосках прессы, троллейбусах (кондукторы могут продавать), ларьках;
- принимать все купюры, не давать сдачу а зачислять все средства, остаток сохранять на будущее в виртуальном кошельке (такая система работает только для месячных проездных);
- отменить жетоны, оставить карты двух типов: на количество проходов и количество дней;
- ввести абонплату за использование метро и выставлять счет пассажиру в конце месяца (как за коммунальные услуги).

Идея с абонплатой может быть весьма перспективной, но пока она слишком инновациона… отложим на будущее.

Проработка идеи

А что если действительно заменить жетоны пластиковыми картами двух типов и продавать/пополнять их только через автоматы одного типа с одним улучшенным интерфейсом?

Бесконтактные карта на количество поездок дизайн которой разработала общественная формация “Агенты перемен” под руководством Игоря Скляревского. Эти карты появились в кассах Киевского метрополитена с 22 мая

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

Оплата кредитной картой
Этот способ оплаты может быть весьма удобным, и многие пассажиры жалуются на отсутствие такой возможности. Оплата проезда кредитными картами с помощью автоматов должна потерять свою актуальность в связи с распространением карт с бесконтактной технологией проведения платежа PayPass. В данной итерации я решил проработать возможность оплаты/пополнения карт через Интенет.

Проблема сдачи
Пассажиры жалуются на то, что автоматы не выдают сдачу а так же на то, что автоматы не принимают крупные купюры (не более 50 гривен), хотя многие хотели бы иметь возможность пополнить карту сразу на большое количество поездок. Проблему возможно решить если:
- дать возможность использовать купюры любого номинала и зачислять всю сумм на карту;
- при внесении суммы не кратной стоимости поездки/дня зачислять остаток на виртуальный кошелёк и учитывает ее при следующем продлении (такая система уже внедрена и называется Транспортный кошелек).

Отказ от сдачи так же решает проблему наличия нужных купюр в автомате, что при большом потоке пассажиров достаточно критично. Частично эту проблему решает возможность оплаты/пополнения карт через Интернет.

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

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

Карта на количество поездок
Карта этого типа подойдет пассажирам которые не пользуются метро каждый день, или не более 2-х раз в день. Основными факторами при выборе данного типа карты должны стать удобство покупки и пополнения.

Основные характеристики карты и решаемые проблемы:
- позволяет оплачивать каждый отдельный проезд;
- минимальная стоимость карты равна стоимости одного проезда (нет залоговой стоимости), эта сумма сразу зачисляется при покупке карты в автомате;
- на карту вносится любая сумма, при внесении суммы не кратной стоимости проезда остаток зачисляется на виртуальный кошелёк и учитывается при следующем пополнении;
- карта обладает уникальным номером благодаря которому можно отслеживать остаток и пополнять ее через Интернет.

Карта на количество дней
Такая карта подойдет пассажирам которые ежедневно пользуются метро (и ездят больше 2-х раз в день) а так же туристам. Основными факторами при выборе данного типа карты должны стать очевидная выгода при оплате на большое количество дней и неограниченность по количеству проездов.

Основные характеристики карты и решаемые проблемы:
- позволяет оплачивать пользование метрополитеном по дням;
- нет ограничения по количеству проездов в день (или на период использования);
- минимальная стоимость карты равна стоимости одного дня проезда (нет залоговой стоимости), эта сумма зачисляется при покупке карты в автомате;
- может быть на разное количество дней (указывается при покупке в автомате), и чем больше дней оплачивается за раз тем дешевле стоимость одного дня пользования метрополитеном;
- нет привязки к определенному месяцу, покупается/пополняется в любой день (отсчет дней начинается в день покупки, при чем так же учитывается и время), таким образом убираем проблему очередей в конце/начале месяца;
- на карту вносится любая сумма, при внесении суммы не кратной стоимости одного дня остаток зачисляется на виртуальный кошелёк и учитывается при следующем продлении;
- карта обладает уникальным номером благодаря которому можно отслеживать остаток и продлевать через ее Интернет.

Выгода

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

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

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

5. Моделирование

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

Использование карты на количество поездок

Покупка карты
Утро, Сергей спешит по делам. Он пользуется метро не так часто но сегодня ему нужно съездить в другой конец города решить несколько проблем. Обычно он пользуется жетонами однако зайдя на станцию Сергей обнаружил, что с сегодняшнего жетоны отменили а кассы работают как справочные и разменивают деньги. Что бы оплатить проезд нужно купить магнитную карту в автомате, и уже с помощью карты пройти через турникет.

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

На экране автомата Сергей видит надпись “Что бы пополнить карту вставьте ее в картоприемник” и две опции: “Купить карту на количество поездок” и “Купить карту на количество дней”. Сергей выбирает “Купить карту на количество поездок” после чего автомат предлагает вставить купюры в купюроприемник. Минимальная стоимость карты равняется стоимости одного проезда. На карту можно внести любую сумму, при этом автомат сдачи не дает. При внесении суммы не кратной стоимости одной поездки остаток зачисляется на виртуальный кошелёк и учитывается при следующем пополнении.

У Сергея в кошельке есть мелкими банкнотами только две купюры по 5 гривен и он решает оплатить сразу несколько поездок. Сергей вставляет в купюроприемник купюры одна за одной и подтверждает оплату. Стоимость проезда 4 гривны, это значит что Сергей оплатил 2 проезда и еще 2 гривны сохраняются в виртуальном кошельке, об этом информирует экран автомата. После подтверждения из картоприемника появляется карта а на экране надпись “Возьмите вашу карту”.

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

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

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

Пополнение карты через Интернет
День, Сергей находится в своем офисе. От коллег он узнает, что теперь можно пополнять карты через Интернет с помощью кредитных карт. Оказывается, каждая карта содержит свой уникальный номер введя который можно посмотреть статистику по карте а так же пополнить ее.

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

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

Использование карты на количество дней

Покупка карты
Утро, Людмила едет на работу. Она пользуется метро каждый рабочий день, и иногда по выходным, по этому покупает проездной на месяц. За месяц до этого на всех станциях появилось объявление в котором говорилось о введении нового типа проездных — карт на количество дней, которые должны заменить проездные на месяц. Сегодня настал день когда нужно перейти на новую систему.

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

Людмила подходит к автомату рядом с которым висит подробная инструкция об использовании а так же информация о тарифах и типах карт. Автомат представляет собой небольшой блок с сенсорным экраном, купюроприемником и картоприемником.

На экране автомата Людмила видит надпись “Что бы пополнить карту вставьте ее в картоприемник” и две опции: “Купить карту на количество поездок” и “Купить карту на количество дней”. Людмила выбирает “Купить карту на количество дней”, после чего автомат предлагает выбрать количество дней которые Людмила хочет оплатить. Людмила переводит взгляд на информацию с тарифами и понимает, что ей выгоднее оплатить сразу месяц. Людмила выбирает 30 дней после чего автомат предлагает внести сумму в размере 250 грн. У Людмилы в кошельке есть купюры только по 100 и 20 гривен. На карту можно внести любую сумму, при этом автомат сдачи не дает. При внесении суммы не кратной стоимости одного дня остаток зачисляется на виртуальный кошелёк и учитывается при следующем пополнении.

Людмила вставляет в купюроприемник одна за одной две купюры по 100 гривен и три по 20 гривен, и нажимает “Подтвердить” после чего из картоприемника выходит карта, на экране появляется подтверждение о покупке карты на 30 дней, и информация о том, что остаток в 10 гривен зачислен на виртуальный кошелек.

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

Продление карты через автомат
День, сегодня Людмила пораньше освободилась с работы и спешит домой. Зайдя на станцию она вспоминает, что на ее карточке остался всего один день и решает продлить свою карту. Людмила подходит к автомату и вставляет карточку в картоприемник. Автомат определяет тип карты, показывает информацию о том, что карта действительна до 9–15 следующего дня и остаток 10 гривен в виртуальном кошельке.

Людмила нажимает “Продлить карту”, после чего на экране выбора количества дней выбирает 30. Стоимость составляет 250 грн, но так как в виртуальном кошельке есть 10 гривен Людмила вносит 240 гривен и нажимает “Подвердить”. Из картоприемника появляется карта, на экране появляется подтверждение о продлении карты еще на 30 дней. Людмила забирает карту и довольная едет домой размышляя о том, что бы вкусного приготовить на ужин.

Продление карты через Интернет
Вечер, Людмила беседует со своим сыном и узнает, что теперь можно пополнять карты через Интернет с помощью кредиток. Каждая карта содержит свой уникальный номер благодаря которому можно посмотреть статистику а так же пополнить ее. Людмила решает ознакомиться с этим способом пополнения на будущее, сегодня днем она уже пополнила карту на 30 дней.

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

Ознакомившись с этим способом Людмила закрывает сайт и решает в следующий раз продлить карту через Интернет, ведь это может быть гораздо удобнее.

6. Прототипирование

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

Упрощенное представление функционала будущего интерфейса

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

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

Новый интерфейс унаследовал расположение и предназначение слотов

Покупка карты на количество поездок

Экран автомата по умолчанию
Сергей выбрал “Купить карту на количество поездок”
Сергей вносит деньги
Оплаченная карта появляется из картоприемника

Пополнение карты на количество поездок

Сергей вставил карту в автомат
Сергей вносит деньги
Карта пополнена

Покупка карты на количество дней

Экран автомата по умолчанию
Людмила выбрала “Купить карту на количество дней”
Людмила хочет купить карту на 30 дней, цена вполне выгодная
Людмила готова оплатить карту
Людмила вносит деньги
Вся сумма внесена, сдача сохраняется в виртуальном кошельке
Карта оплачена

Пополнение карты на количество дней

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

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

Карта навигации в виде сценариев

Подведем итоги

Дизайнер должен потратить туеву хучу времени на анализ проблемы для того чтобы найти оптимальное решение и достичь желаемого результата. В нашем случае после отказа от жетонов и внедрения автоматов одного типа ожидается следующее:
- снижение затрат метрополитена на производство жетонов;
- снижение затрат на обслуживание автоматов разного типа;
- избавление пассажиров от проблемы очередей;
- сокращение времени на покупку и пополнение карточки;
- предоставление более гибкой системы оплаты пассажирам которые часто пользуются метро.

Работа над каким либо продуктом или сервисом — это бесконечный итеративный процесс, закончиться может только одна итерация после которой начинается следующая. В рамках одной итерации проводятся исследования, делается анализ полученных данных, строятся гипотезы и предлагается и реализуется оптимальное решение. Потом это решение нужно протестировать на живых людях, провести анализ результатов и выявить проблемы, предложить новое решение и протестировать его, и так до бесконечности…

P. S. Моей целью при написании данной статьи было рассказать об этапах работы. Для того чтобы действительно решить проблему нужно проводить более глубокие исследования и прорабатывать больше идей.

Хочешь изучить UX/UI Design и научиться проектировать сайты и приложения?

Приходи на онлайн-курс DIGITAL PRODUCT DESIGN, который помогает изучить методику и прямо во время обучения сделать проекты для портфолио. ИНФО о курсе по ссылке 👉 https://dpdschool.org/uxuicourse

--

--

Alex Voloshyn
Блог-портфолио Александра Волошина

Проектирую сложные сайты, веб-сервисы и мобильные приложения, обучаю в своей онлайн-школе Open Design School.