2 factor verification — проектирую фичу
Привет-Привет!
Давайте сегодня поговорим о новой фиче, которую я делаю на новой (кстати да:) работе, в DSX.UK
Two Factor Authorisation — Security Card
Мы хотим дополнительно защитить наших пользователей, поэтому через некоторое время введем новый метод двухфакторки, с помощью Security Card:
Сейчас у нас уже работает Google Authenticator, а также двухфакторка через SMS.
Когда задачу принесли ко мне, она выглядела как "хотим добавить новый метод, в принципе все интерфейсы для этого есть, но может ты предложишь что-то заимпрувить?".
Выясняем цели фичи:
Я стал выяснять, а каковы бизнес-цели фичи. В целом, мы хотим обезопасить пользователей, повысить их лояльность и привязанность к нам, а также получить маркетинговый повод.
Для таких целей нужно хорошо все объяснять, нужны привлекательные яркие интерфейсы, а также нужно работать над мракетинговой обвязкой, а не только над самой фичей. Учту это и не забуду в дальнейшей работе:
По каждой фиче храню и цель и описание текущего интерфейса, и задачи текущие, и планы на будущее. Удобно.
Аудит текущего интерфейса:
После этого я посмотрел, а как сейчас устроены интерфейсы двухфакторки:
Да, сюда очень легко добавить новый метод, но маркетинговые и "просветительские" задач мы так боюсь не решим.
Заскриншочиваю то, как сейчас работает сценарий:
Удобно потом вернуться к любому куску, не прокликивая интерфейс.
Дальше — смотрим примеры двухфакторки на известных сайтах. Смотрим ютьюбчик. Набираем какое-то количество примеров:
Которые обогащают нас не только в плане интерфейса, но и наводят на идеи по функционалу (например, может дать пользователю подключать сразу несколько методов?)
Рисуем схему
Как обычно, я рисую схемку, чтобы понять путь пользователя, скрины, данные и пр. Она помогает не упускать состояния скринов и делать интерфейс полнее и точнее.
В этот схема выглядела очень просто, и я даже засомневался в ее необходимости :) Потом посмотрите, во что она выросла.
Вроде бы все готово, можно проектировать сам интерфейс:)
Наконец-то интерфейсики
Как видите, из обычного селектора выбор превратился в набор карточек.
А в окошке подтверждения будет картиночка.
А подключение GA стало чуть более структурированным.
Я прошелся в целом по всему сценарию и проработал следующие картинки. Наш дизайн-подрядчик посоветовал перенести отключение метода двухфакторки в саму карточку, а не располагать отдельно. А также добавить описания.
Пробуем:
А что, да :)
Ну я ряд других доделок, которыми я вас грузить не буду:)
Допиливаем логику
Самое время проверить, насколько цельный сценарий получается, допилить недостающее и поправить непоправленное :)
И для этого я нарисовал уже более детальную и привязанную к интерфейсам схемку. Всю показать не могу, покажу верх:
Если на первой схемке было пользовательское, была постановка задачи и прочее-разное, то здесь именно скрины и логика переходов.
Понимаю, чего именно недостает, дорисовываю несколько состояний, готов двигаться дальше.
Немного расширяем дизайн-систему
Теперь в ней есть компоненты карточек:
Пока немного (включенная и выключенная), со временем набор дополнится.
Ускоряемся
Эту фичу нужно выпустить до Нового Года. Поэтому мне потребовалось немного поправить и подускорить мой процесс.
И у меня совсем четко отделилось от разработки фичи:
- ТЗ на метрики,
- ТЗ на копирайтинг,
- ТЗ на дизайн,
- маркетинговая обвязка
Все эти вещи можно делать уже после, когда фича отдана и команда загружена.
Понравился мой подход к работе?
Приходи на наш онлайн-интенсив по конверсии для дизайнера.
Там можно будет научиться:
- рисовать юзерфлоу,
- разбивать его на цели,
- настраивать метрики
- да много еще чему, читай уже лендинг :)
и в результате находить в интерфейсе узкие места и точки роста. Влияя на них, можно принести много ценности бизнесу и пользователю :)
И не забывай подписываться на мой канал о UX!