Правильный процесс редизайна продукта

Джесси Чен, UI/UX дизайнер из Сан-Франциско, рассказала о том, как правильно подойти к редизайну продукта. Перевод ее статьи опубликован на сайте SketchApp.me, который профессионально рассказывает про дизайн и протипирование.

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

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

Сложность редизайна

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

Недостаток доводов

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

1. Наша команда разработчиков не сможет выделить время для этого редизайна; они и так загружены на разработке нового функционала.
2. Зачем нам этот редизайн? Я не вижу здесь проблем.
3. Ты уверена, что твоя идея хорошая? Стоит ли это потраченных усилий и времени?

Проблемы понятны! Я поняла, что для убеждения отъявленных скептиков необходимо иметь мощные доводы. Поверьте, это очень упростило мой процесс редизайна от начала и до конца.

Процесс редизайна

Исследование

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

Зачем нужен редизайн?

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

Макеты

Основываясь на предложениях, которые я нашла в сообществе, я начала зарисовывать идеи на бумаге (показано ниже). Я прошла через несколько этапов работы с идеями и решила, что вариант 4 был самым лучшим на первом этапе. Я исключила выпадающий список и заменила его кнопками меню, которые переключали типы контактов. Также, я добавила фильтр и сортировку под кнопкой “все фильтры”.

Вариант 1

Вариант 2

Вариант 3

Вариант 4 — победитель

Пользовательское тестирование — Раунд 1

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

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

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

Больше макетов

Из-за необходимости добавления дополнительных фильтров, мне нужно было продумать их размещение без усложнения юзерфлоу. Далее, я провела еще один этап создания макетов для определения лучшего варианта дизайна (см. ниже).

Раунд 2. Вариант 1

Вариант 2А

Вариант 2Б

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

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

Вариант 3

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

1. Экономия места по-вертикали, особенно на планшетах.
2. У нас нет данных о том, какие опции фильтров следует показывать вверху.
3. Группировка является более логичным решением и упрощает процесс поиска.

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

Вариант 4

Больше фильтров!

Пользовательское тестирование — Раунд 2

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

Внесите правки в дизайн, опять

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

Разработка

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

Последний шаг

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

Вывод

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

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

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

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