Работа над этими интерфейсами шла параллельно с работой над интерфейсом самой игры.

Ворлд Чесс начал работу над геймингом ещё до того, как пригласил нас, — сначала его прикручивали к старому сайту на скорую руку. Изучаем, как выглядел интерфейс регистрации:

Есть проблема: из‑за деления экранов пополам (на цветную и серую части) непонятно, что обе они — это одна форма, где нужно и слева, и справа что‑то выбирать и заполнять. Кажется, что слева просто иллюстрация. Если даже понять, что слева выбор, сходу неясно, что такое Про и Премиум — нужно переключаться, читать. Для подключения паспорта ФИДЕ (для онлайн‑игры) — не очень заметный чекбокс снизу.

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

Смотрим в существующий личный кабинет:

Тут не очень понятно, что сейчас подключено, и ничто не мотивирует проапгрейдиться.

В главном меню все пункты тоже с маленькой. Надо будет это обсудить!

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

Выглядит пока скучно и тоже ничего не продаёт, но для начала надо всё распутать по смыслу.

Снова смотрим на то, как было сделано до нас, какие там следующие шаги. Левую половину просто прикрываем плашкой — она явно уйдёт:

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

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

Хотим избавиться от экрана поздравления, после которого надо ещё отдельно идти логиниться, — хочется сразу оказаться залогиненным и попасть в личный кабинет.

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

И в ситуации «Заплатит другой», и если выбрать «Заплатить позже», ты попадёшь в личный кабинет, где платные услуги у тебя как бы выбраны, но не оплачены. Есть ощущение, что эти ситуации не должны отличаться. Ты ведь можешь захотеть заплатить сам даже после того, как при регистрации выбрал, что заплатит другой, и наоборот.

Накидываем форму для тех, кто выбрал подключить официальную онлайн‑игру с рейтингом ФИДЕ. Им нужно завести паспорт ФИДЕ, а для этого нужно заполнить разное, загрузить фотку. И тут надо учесть тех, кто уже «фидешник»:

Возвращаемся к первому экрану регистрации. Вот версия, где показаны четыре способа зарегистрироваться — бесплатно, только платные трансляции, только платный гейминг, платное всё:

Очень сложно и не видно двух главных услуг явно.

Ещё пробуем вариант спросить всё сразу одной формой, без шагов:

Даже если сделать красиво, есть бизнес‑проблема: человек ещё не заплатил, а мы уже его пугаем анкетой на американскую визу. Он просто уйдёт. Должно быть легко.

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

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

Фиолетовым, как обычно, подписываем сами себе все мысли и комментарии к макетам.

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

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

В платилке у нас как раз есть кнопка «Заплатит другой», и экран после этого уже предусмотрен, и поздравление с подключением можно сделать такое же, как после регистрации.

Смотрим на существующий интерфейс редактирования профиля:

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

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

Если услуга ещё не подключена, то есть кнопка «Подключить», а если уже подключена, то её половинка выглядит подключённой. У подключённой услуги пишем, до каких пор она подключена и всё такое.

Но есть ещё класс ситуаций, когда услугу ты хотел подключить, например, при регистрации, но потом почему‑то не подключил (платёж не прошёл или ты сорвался после подтверждения почты). Придумываем чёрную полоску:

Перерисовываем экран оплаты под ту же ширину, как у других всплывающих экранов. Так, сяк:

Теперь внятно перечислены варианты оплаты — «плачу я», «платит другой», «заплатить потом».

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

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

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

Экран оплаты переделываем для поддержки промокода:

Заодно тут варианты «платит другой» и «заплатить потом» окончательно объединили в один: «Я или кто‑то другой заплатит потом» и постановили, что это действительно одно и то же для нас — такой вот платный акаунт в подвешенном, пока не оплаченном состоянии.

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

Ещё улучшаем вёрстку, делаем выбор вариантов более явным, делаем загрузку фотки красивее и заметнее:

Рисуем картинку с зачёркнутым поздравительным экраном, чтобы показать во время презентации клиенту и разработчикам, что хотим показывать поздравления прямо в личном кабинете:

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

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

Мечты об унификации потихоньку начинают реализовываться.

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

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

Получается, что все эти многочисленные комбинации статусов не влияют на общий вид личного кабинета. Знание о каждой услуге локализовано в районе её тумблера‑галочки.

Часть с поздравлением после регистрации делаем просто путём замены заголовка и фона, чтобы прям железобетонно такая же вёрстка была:

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

Параллельно начинаем мобилизацию всего:

Фиолетовый градиент с узорами, который мы поставили как фон под поздравлением, мы просто взяли из каких‑то старых элементов сайта. Нам он не очень нравится, да и не вяжется он с нашим дизайном. Хотим сделать поздравление по‑богатому, на чёрном фоне. И думаем, что нужны бы хоть какие‑то обложки‑иллюстрации для наших двух тумблеров. Рисуем:

Иллюстрации пока не нравятся.

Чтобы наш интерфейс замкнулся, осталось сделать, чтобы тумблеры можно было включить и после регистрации и чтобы при этом интерфейс тоже попадал в состояние «ожидает оплаты». То есть не важно: не прошла карта, я пропустил шаг оплаты, пропал интернет на полпути регистрации; я попросил апгрейда, но слился на этом; я попросил апгрейда, но не сделал пока ничего — во всех этих случаях я вижу включённый тумблер и стрелку‑призыв завершить оплату:

Чтобы передумать, достаточно отключить тумблеры — апгрейдиться будет некуда, и тогда вместо кнопки апгрейда снизу появится кнопка подарка, а чёрная стрелка пропадёт. Красота!

На последнем экране уже придумали более разноцветные картинки, которые, по идее, будут работать и на цветном, и на чёрном фоне.

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

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

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

Выдохнув после презентации, упрощаем цвета, допиливаем мелочи, дорисовываем чёрный экран поздравления с успешной регистрацией. Показываем, как макет тянется в ширину:

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

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

Придумываем кинопостер из гроссмейстеров. Вдохновляемся:

Крутим:

Ставим лейбак «Лайв» в угол. Примеряем к первому шагу регистрации это же:

Собираем для разработчиков контролы во всех состояниях:

Дорабатываем разные сценарии, подкручиваем мобилу и убеждаемся, что ничего не забыли. Собираем вообще всё вместе и передаём в разработку:

Сопровождаем внедрение. Списки замечаний сгруппированы по нашим экранам:

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