2 factor verification — проектирую фичу

Привет-Привет!

Давайте сегодня поговорим о новой фиче, которую я делаю на новой (кстати да:) работе, в DSX.UK

Two Factor Authorisation — Security Card

Мы хотим дополнительно защитить наших пользователей, поэтому через некоторое время введем новый метод двухфакторки, с помощью Security Card:

Сейчас у нас уже работает Google Authenticator, а также двухфакторка через SMS.

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

Выясняем цели фичи:

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

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

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

Аудит текущего интерфейса:

После этого я посмотрел, а как сейчас устроены интерфейсы двухфакторки:

Да, сюда очень легко добавить новый метод, но маркетинговые и "просветительские" задач мы так боюсь не решим.

Заскриншочиваю то, как сейчас работает сценарий:

Удобно потом вернуться к любому куску, не прокликивая интерфейс.

Дальше — смотрим примеры двухфакторки на известных сайтах. Смотрим ютьюбчик. Набираем какое-то количество примеров:

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

Рисуем схему

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

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

Вроде бы все готово, можно проектировать сам интерфейс:)

Наконец-то интерфейсики

Как видите, из обычного селектора выбор превратился в набор карточек.

А в окошке подтверждения будет картиночка.

А подключение GA стало чуть более структурированным.

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

Пробуем:

А что, да :)

Ну я ряд других доделок, которыми я вас грузить не буду:)

Допиливаем логику

Самое время проверить, насколько цельный сценарий получается, допилить недостающее и поправить непоправленное :)

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

Если на первой схемке было пользовательское, была постановка задачи и прочее-разное, то здесь именно скрины и логика переходов.

Понимаю, чего именно недостает, дорисовываю несколько состояний, готов двигаться дальше.

Немного расширяем дизайн-систему

Теперь в ней есть компоненты карточек:

Пока немного (включенная и выключенная), со временем набор дополнится.

Ускоряемся

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

И у меня совсем четко отделилось от разработки фичи:

  • ТЗ на метрики,
  • ТЗ на копирайтинг,
  • ТЗ на дизайн,
  • маркетинговая обвязка

Все эти вещи можно делать уже после, когда фича отдана и команда загружена.

Понравился мой подход к работе?

Приходи на наш онлайн-интенсив по конверсии для дизайнера.

Там можно будет научиться:

  • рисовать юзерфлоу,
  • разбивать его на цели,
  • настраивать метрики
  • да много еще чему, читай уже лендинг :)

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

@Serebrennikov_i

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