Как проводить редизайн продуктов: исследования, тестирования, макеты — Советы дизайнера из Сан-Франциско

Разработчик интерфейсов Джесси Чейн из Сан-Франциско написала в своём блоге на Medium заметку о том, как построить процесс редизайна продукта.

Команда SketchApp подготовила перевод заметки Чейн.

Более чем 48 тысяч агентов по недвижимости используют нашу программу для управления по взаимодействию с клиентами (CRM) и для управления контактами. Хорошая CRM должна улучшать возможность управления контактами, но наша программа не позволяла фильтровать или совершать поиск контактов на странице.

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

Наша CRM работала уже более года, и пользователи уже успели привыкнуть к традиционной системе. Не так-то просто попросить пользователей перейти на использование новой системы без сильных, убедительных доводов.

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

Самый лучший способ предлагать идеи — это иметь под рукой серьёзные доводы в пользу их необходимости. Я привыкла предлагать редизайны без доводов, и обычно получала отказ. Почему? Самые частые причины:

«Наша команда разработчиков не сможет выделить время для этого редизайна: они и так загружены на разработке новой функциональности».
«Зачем нам этот редизайн? Я не вижу здесь проблем».
«Ты уверена, что твоя идея хорошая? Стоит ли это потраченных усилий и времени?».
Проблемы понятны. Я осознала, что для убеждения отъявленных скептиков необходимо иметь мощные доводы. Поверьте, это очень упростило мой процесс редизайна от начала и до конца.
Процесс редизайна
Исследование


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

Я разбила всё на категории, отфильтровала и отсортировала предложения от пользователей, а также прикрепила ссылки на посты. Далее мы собрались с менеджерами продукта и прошлись по моему списку, обсудили предложения касательно редизайна. Зачем нужен редизайн

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

Однако пользователи зачастую не до конца понимают, что означает категория «помеченные контакты». Поэтому они, скорее всего, выберут «все контакты». Более того, пользователи не могут искать и сортировать свои контакты. Макеты

Основываясь на предложениях, которые я нашла в сообществе, я начала зарисовывать идеи на бумаге. Я прошла через несколько этапов работы с идеями и решила, что вариант 4 оказался лучшим на первом этапе. Я исключила выпадающий список и заменила его кнопками меню, которые переключали типы контактов. Также, я добавила фильтр и сортировку под кнопкой «все фильтры». Вариант 1 Вариант 2 Вариант 3 Вариант 4 — победитель Пользовательское тестирование — раунд 1

Создание прототипа. Я создала мокапы на основе варианта 4 и собрала прототип в Invision App.
Создание гайдлайнов. Я составила список целей обучения и определила вопросы для пользователей.
Выбор участников. Я сегментировала группу участников и пригласила их на прохождение обучения, основанного на фильтрации и сортировке. И использовала Intercom для поиска пользователей и трекинга их активности.
Тест прототипа. Я протестировала прототип на коллегах и друзьях, чтобы убедиться в том, что всё работает корректно.
Удаленное пользовательское тестирование. Я пообщалась с пользователями, чтобы выяснить, что, по их мнению, работает хорошо, а что нуждается в улучшении и использовала Validately для запуска пользовательских тестов.
Анализ пользовательских тестов. Я проанализировала все данные с членами своей команды для того, чтобы отметить самые важные моменты.

Анализ отзывов с командой Ключевые моменты пользовательского тестирования

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

Правки в дизайне

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

Из-за необходимости добавления дополнительных фильтров мне нужно было продумать их размещение без усложнения пользовательского потока. Далее я провела ещё один этап создания макетов для определения лучшего варианта дизайна (см. ниже). Раунд 2. Вариант 1 Вариант 2А Вариант 2Б

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

Это была прекрасная возможность применить наши новые «Принципы дизайна» на практике. Я решила поставить ясность и чёткость выше эффективности. Это означало, что пользователи смогут понять увиденную информацию и совершать действия без дополнительных подсказок. Вариант 3

Я решила сделать все фильтры выпадающими списками по следующим причинам:

Экономия места по вертикали, особенно на планшетах.
У нас нет данных о том, какие опции фильтров следует показывать вверху.
Группировка является более логичным решением и упрощает процесс поиска.
Дополнительно я убрала вкладки с разными видами контактов и сгруппировала их под опциональным выпадающим списком. Вариант 4 «Больше фильтров» Пользовательское тестирование — раунд 2

Создание прототипа. Я создала новый прототип на основании варианта 4.
Повторение всего, что делали во время первого раунда.

Анализ пользовательского тестирования. Раунд 2. Внесение правок в дизайн (опять)

Лучший дизайн не создается за одну ночь. Он должен пройти через цикл пользовательского тестирования, дизайна и правок. Разработка

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

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

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

Данные — это лучшие друзья дизайнера. Проведите исследование прежде чем окунуться в процесс редизайна.
Пользовательские тесты — ключ к успеху. Конечно, проведение пользовательских тестов утомляет, но конечный результат того стоит.
Задокументируйте всё, чему вы научились и чего достигли. Не просто говорите, что вы можете сделать, а покажите, что вы сделали.
Будьте организованными. Убедитесь в том, что вы знаете, чем можно подкрепить ваше видение дизайна.
Работайте в команде. Если вы думаете, что сможете провести редизайн в одиночку — вы ошибаетесь. Никто не может и не должен отрицать важность командной работы.

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

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