Ворлд Чесс

Регистрация, оплата и личный кабинет

В бюро спроектировали инфраструктурные интерфейсы на сайте Ворлд Чесс: регистрацию, выбор тарифа, настройку паспорта ФИДЕ, оплату и продление подписки, личный кабинет. Чтобы ускорить внедрение и тестирование, мы унифицировали десятки разрозненных ситуаций и сценариев.

chessarena.com
· 8 февраля 2021

Раньше на сайте была одна платная услуга: доступ к трансляциям.

Недавно появилась вторая: гейминг с онлайн‑рейтингом ФИДЕ.

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

С появлением гейминга в регистрации и оплате появилось множество сложных сценариев.

Человек может просто регистрироваться, может хотеть смотреть платные трансляции или платно играть с официальным онлайн‑рей­тин­гом ФИДЕ, и может хотеть подключить обе услуги.
Человек мог быть зарегистрирован до появления у Ворлд Чесс платного гейминга — ему нужно как‑то узнать о нём и при желании подключить.
При регистрации в зависимости от выбранных услуг может понадобиться оплата и создание паспорта ФИДЕ.
Регистрироваться может действующий игрок ФИДЕ, тогда надо связать его существующий паспорт ФИДЕ с акаунтом Ворлд Чесс, перенести его существующий рейтинг.
Если оплата не пройдёт, надо не потерять человека, а создать ему бесплатный акаунт в «подвешенном состоянии» и напоминать о его намерениях, помогать завершить процесс.
Может не оказаться карточки под рукой — шаг оплаты нужно дать пропустить и выполнить потом.
Важный сценарий — когда родители платят за детей. Нужно, чтобы при регистрации можно было сказать «За меня заплатят», и шаги оплаты прошёл родитель.
Можно и наоборот: сказать «Я плачу за кого‑то», и тогда остальную регистрацию пройдёт ребёнок.
Есть промокоды для оплаты. Они должны работать и в сценариях, когда один платит за другого.
При создании или привязке паспорта ФИДЕ, база данных ФИДЕ может «лежать» — тогда надо тоже не потерять человека, а запомнить, что именно пошло не так.
Человека может оттолкнуть необходимость заполнять анкету на паспорт ФИДЕ. Надо, чтобы он не ушёл, а мог просто пропустить этот шаг.
У человека с акаунтом в «подвешенном состоянии» должна быть возможность передумать: отказаться от намерений платить или подключаться к ФИДЕ.
Человек может регистрироваться, не сказав, что он игрок ФИДЕ. Если мы его найдём, стоит спросить:  «Это, случаем, не ты?».
В базе ФИДЕ могут найтись несколько человек с одинаковыми именами и годами рождения — тогда нужно разобраться, кого из них мы регистрируем.
Иногда игрока нет в базе ФИДЕ, потому что данные в ней отстают от реальности на пару недель.
Что, если человек назвал себя действующим игроком ФИДЕ и пытается привязать к своему акаунту паспорт ФИДЕ, но он не тот, за кого себя выдаёт? Проверка документов может занять время — это ещё одно «подвешенное состояние».
Если ребёнок сказал, что за него заплатит родитель, а родитель всё никак не платит? Может, он потерял платёжную ссылку, где её тогда снова взять?
А если родитель так и не оплатил, как потом попросить другого родителя?
Родитель должен убедиться, что он правда платит за своего ребёнка, а не за самозванца.
А если родитель просто подошёл к компьютеру и говорит: «Давай я прям тут заплачу», куда нажимать ребёнку?
Должно быть легко проапгрейдиться до большего числа платых услуг.
При апгрейде возникают те же сценарии, что и при регистрации — оплата не прошла, карточка далеко, лень заполнять анкету ФИДЕ. Всегда нужно помнить намерение человека.
Платные услуги должны отключаться. Подписка на год, так что надо корректно показывать ситуацию, когда человек отказался, но ещё продолжается ранее оплаченный период.
Нужно предусмотреть замену истекшей платёжной карты.
Что происходит с онлайн‑рейтингом ФИДЕ, если человек перестаёт за него платить? А потом возобновляет через год?
Как продлить подписку, если за тебя платили родители? Если ты вырос и дальше платишь за себя сам? Если ты сам родитель?
Если одну платную услугу подключить сразу, а вторую — потом, то даты их продления рассинхронизируются.

Решением «в лоб» был бы дизайн полусотни экранов и состояний для всех случаев, блок‑схема со множеством стрелочек и условий.

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

Решением «в лоб» был бы дизайн полусотни экранов и состояний для всех случаев, блок‑схема со множеством стрелочек и условий.

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

Человек может просто регистрироваться, может хотеть смотреть платные трансляции или платно играть с официальным онлайн‑рейтингом ФИДЕ, и может хотеть подключить обе услуги.
Человек мог быть зарегистрирован до появления у Ворлд Чесс платного гейминга — ему нужно как‑то узнать о нём и при желании подключить.
При регистрации в зависимости от выбранных услуг может понадобиться оплата и создание паспорта ФИДЕ.
Регистрироваться может действующий игрок ФИДЕ, тогда надо связать его существующий паспорт ФИДЕ с акаунтом Ворлд Чесс, перенести его существующий рейтинг.
Если оплата не пройдёт, надо не потерять человека, а создать ему бесплатный акаунт в «подвешенном состоянии» и напоминать о его намерениях, помогать завершить процесс.
Может не оказаться карточки под рукой — шаг оплаты нужно дать пропустить и выполнить потом.
Важный сценарий — когда родители платят за детей. Нужно, чтобы при регистрации можно было сказать «За меня заплатят», и шаги оплаты прошёл родитель.
Можно и наоборот: сказать «Я плачу за кого‑то», и тогда остальную регистрацию пройдёт ребёнок.
Есть промокоды для оплаты. Они должны работать и в сценариях, когда один платит за другого.
При создании или привязке паспорта ФИДЕ, база данных ФИДЕ может «лежать» — тогда надо тоже не потерять человека, а запомнить, что именно пошло не так.
Человека может оттолкнуть необходимость заполнять анкету на паспорт ФИДЕ. Надо, чтобы он не ушёл, а мог просто пропустить этот шаг.
У человека с акаунтом в «подвешенном состоянии» должна быть возможность передумать: отказаться от намерений платить или подключаться к ФИДЕ.
Человек может регистрироваться, не сказав, что он игрок ФИДЕ. Если мы его найдём, стоит спросить:  «Это, случаем, не ты?».
В базе ФИДЕ могут найтись несколько человек с одинаковыми именами и годами рождения — тогда нужно разобраться, кого из них мы регистрируем.
Иногда игрока нет в базе ФИДЕ, потому что данные в ней отстают от реальности на пару недель.
Что, если человек назвал себя действующим игроком ФИДЕ и пытается привязать к своему акаунту паспорт ФИДЕ, но он не тот, за кого себя выдаёт? Проверка документов может занять время — это ещё одно «подвешенное состояние».
Если ребёнок сказал, что за него заплатит родитель, а родитель всё никак не платит? Может, он потерял платёжную ссылку, где её тогда снова взять?
А если родитель так и не оплатил, как потом попросить другого родителя?
Родитель должен убедиться, что он правда платит за своего ребёнка, а не за самозванца.
А если родитель просто подошёл к компьютеру и говорит: «Давай я прям тут заплачу», куда нажимать ребёнку?
Должно быть легко проапгрейдиться до большего числа платых услуг.
При апгрейде возникают те же сценарии, что и при регистрации — оплата не прошла, карточка далеко, лень заполнять анкету ФИДЕ. Всегда нужно помнить намерение человека.
Платные услуги должны отключаться. Подписка на год, так что надо корректно показывать ситуацию, когда человек отказался, но ещё продолжается ранее оплаченный период.
Нужно предусмотреть замену истекшей платёжной карты.
Что происходит с онлайн‑рейтингом ФИДЕ, если человек перестаёт за него платить? А потом возобновляет через год?
Как продлить подписку, если за тебя платили родители? Если ты вырос и дальше платишь за себя сам? Если ты сам родитель?
Если одну платную услугу подключить сразу, а вторую — потом, то даты их продления рассинхронизируются.

Мы придумали линейную последовательность из пяти экранов, которые покрывают все перечисленные выше сценарии, причём регистрация — это просто последовательное прохождение трёх, четырёх или пяти из них:

1
Выбор платных услуг и ввод почты
2
Проверка почты
3
Придумы­ва­ние пароля
4
Оплата
4
Оплата, если выбраны платные услуги
5
Привязка аккаунта ФИДЕ
5
Привязка аккаунта ФИДЕ, если выбрана игра с официальным рейтингом
1
Выбор платных услуг и ввод почты
2
Проверка почты
3
Придумы­ва­ние пароля
4
Оплата
4
Оплата, если выбраны платные услуги
5
Привязка аккаунта ФИДЕ
5
Привязка аккаунта ФИДЕ, если выбрана игра с официальным рейтингом

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

Экран 1: выбор платных услуг

На экране 1 мы наглядно объясняем пользу обеих платных услуг и предлагаем их подключить. Здесь же просим указать почту:

Экраны 2 и 3: проверка почты и придумывание пароля

Если платных услуг не выбрано, остаётся 2: подтвердить почту и 3: придумать пароль.

Экран 4: оплата

Если есть платные услуги, следует экран 4: оплата. Можно заплатить сразу или отложить оплату:

Экран 5: привязка аккаунта ФИДЕ

Чтобы играть с официальным онлайн‑рейтингом, нужен паспорт ФИДЕ. Шахматисты получают его перед участием в офлайн‑соревнованиях по всему миру. Если паспорта ФИДЕ ещё нет, самое время его создать:

Если паспорт ФИДЕ есть, нужно указать имя и год рождения, и мы его найдём
Если нашлось несколько шахматистов с одним именем, нужно выбрать себя — или всё же создать новый паспорт
Если паспорт ФИДЕ есть, нужно указать имя и год рождения, и мы его найдём
Если нашлось несколько шахматистов с одним именем, нужно выбрать себя — или всё же создать новый паспорт

И снова экран 1

После регистрации — поздравление. На самом деле, это не отдельный экран, а уже личный кабинет, просто в заголовке написано «Поздравляем!». Если страницу перезагрузить, поздравление пропадёт, а остальное останется на месте:

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

Из этих пяти экранов собраны все возможные сценарии регистрации, оплаты, привязки паспорта ФИДЕ, работы в личном кабинете и апгрейда.

Все сценарии регистрации

Регистрация
без платных услуг
Регистрация без платных услуг
Регистрация с подпиской
на трансляции
Регистрация с подпиской на трансляции
Регистрация с подпиской
на онлайн‑рейтинг ФИДЕ
Регистрация с подпиской на онлайн‑рейтинг ФИДЕ
Регистрация
с подпиской на всё
Регистрация с подпиской на всё

Все действия в личном кабинете

Раз личный кабинет — это тот же экран 1, что и в регистрации, то здесь точно так же можно подключать платные услуги. Только место главной кнопки «Зарегистрироваться» тут занимает кнопка «Сделать подарок»:

Пока платных услуг нет, фон личного кабинета серый, а тумблеры отключены — как и на первом шаге регистрации
Пока платных услуг нет, фон личного кабинета серый, а тумблеры отключены — как и на первом шаге регистрации

Включаешь любой тумблер, например правый, — кнопка превращается в «Завершить апгрейд», а чёрная стрелка призывает её скорее нажать:

При выборе платных услуг, фон сиреневеет — тоже как при регистрации
Пока платных услуг нет, фон личного кабинета серый, а тумблеры отключены — как и на первом шаге регистрации

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

У подключённой услуги вместо тумблера — галочка. Под ней показано, когда предстоит следующая оплата:

Если карта истекла или пользователь отключил платный онлайн‑рейтинг ФИДЕ, здесь же объяснят про заморозку рейтинга и дадут подключить услугу обратно
Состояния, когда личность пользователя нужно проверить, потому что он выдаёт себя за действующего игрока ФИДЕ — все отличия локализованы в одном блоке
Если карта истекла или пользователь отключил платный онлайн‑рейтинг ФИДЕ, здесь же объяснят про заморозку рейтинга и дадут подключить услугу обратно
Состояния, когда личность пользователя нужно проверить, потому что он выдаёт себя за действующего игрока ФИДЕ — все отличия локализованы в одном блоке

К подключению официального онлайн‑рейтинга мы также ведём из игровых интерфейсов.

Все сценарии подарка

Когда всё, что человек захотел, у него уже подключено, место главной кнопки в личном кабинете снова занимает приглашение сделать подарок:

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

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

По этой платёжной ссылке — только интерфейс оплаты:

Если ребёнок при регистрации не заполнял данные для паспорта ФИДЕ, вместо имени и фотографии здесь будет только адрес электронной почты, и нужно будет подтвердить, что ты знаешь человека с таким адресом
Если ребёнок при регистрации не заполнял данные для паспорта ФИДЕ, вместо имени и фотографии здесь будет только адрес электронной почты, и нужно будет подтвердить, что ты знаешь человека с таким адресом

 — Но вы просто показываете одни и те же картинки с разными подписями!

 — В этом и состоит достижение этого проекта.

О проекте

Арт‑директор и ведущий дизайнер

Илья Бирман

Дизайнер

Константин Мозговой

Разработчики компании «Юзтех»

Евгений Клепнёв

Юрий Лобанов

Николай Пасынков

Зорикто Самбялов

Александр Синичкин

Станислав Стасенко

Павел Шведов

Дмитрий Шиловский

Благодарим Илью Мерензона за активное участие в работе.

Отправить
Поделиться
Запинить

См. также: интерфейс игры

Когда выйдет новый проект

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

Расскажите о своём продукте команде бюро