Проектирование сайта-агрегатора по аренде авто
В статье рассказываю, как я проводила UX-исследования и создавала интерактивный прототип веб-сервиса.
Привет! Я Мария, UX/UI-дизайнер, интернет-маркетолог.
На курсе по UX-дизайну от Дэна Потапова и Алекса Волошина разработала веб-сервис, с помощью которого люди находят и арендуют автомобили во время путешествий в разные города и страны. Результат шести недель серьёзной, скрупулёзной работы — интерактивный прототип будущего сайта, который решает проблему клиента. В этой статье хочу поделиться своим опытом, наблюдениями и результатом.
UX, юзабилити, юзАбельный интерфейс — слова, смысл которых не все понимают. Шаг за шагом я опишу все этапы, которые проходит UX-дизайнер при проектировании сайтов, разложу всё по полочкам и расскажу, что же всё-таки представляет собой «магическое юзабилити».
Некоторые этапы UX-исследования сидели у меня на подкорке и зачастую я их использовала в проектах интуитивно. Не было единой картины, структуры. Моя цель на курсе — научиться создавать сайты в мире клиента, которые решат задачи бизнеса и принесут прибыль. А ещё проектировать удобные, функциональные интерфейсы сайтов, приложений и программ. Теперь пазл сошёлся и появилась система, которую нужно сразу внедрять: целиком или частями.
«Когда погружаешься в UX, ты становишься крутым дизайнером, который думает сценариями. А именно: как человек попал на сайт, какую проблему он хочет решить, через какие шаги он должен пройти, чтобы достичь цели, и что в итоге он должен получить».
Итак, начнём.
Подготовительный этап
Во время работы важно всё фиксировать, визуализировать и ничего не забывать. Поэтому, чтобы распланировать весь процесс, я создала доску в Trello с карточками по этапам работы и задачами на каждом из них. Кроме этого, завела Проектный документ в Гугл-док, где также отобразила все шаги и куда вносила все выводы, анализы, важные ссылки, скриншоты.
Главное преимущество Trello и Гугл-доков — возможность поделиться ими с другими людьми. А самое важное — с заказчиком, чтобы он не волновался, а видел объём работ, какая задача на каком этапе выполнения находится и результаты.
1. Цели и потребности бизнеса
Чётко сформулировав цели и потребности бизнеса, а также бизнес-требования к продукту, я понимаю, что в конечном итоге должна получить. А именно: веб-сервис, с помощью которого человек может выбрать и взять автомобиль напрокат. Это агрегатор, на котором собрана информация из разных источников. Благодаря удобному веб-сервису, мы помогаем легко и просто взять авто напрокат, а с каждой аренды получаем процент от компаний, которые предоставляют эту услугу.
Бизнес-требования к продукту
- пользователи должны иметь возможность искать авто по городам/странам;
- пользователи должны иметь возможность выбирать автомобиль по типу;
- пользователи должны иметь возможность получить всю необходимую информацию об условиях аренды: цена, условия, какие нужны документы.
2. Исследования и сбор информации
Наиболее важный и трудоёмкий этап. Без погружения и качественно проведённых исследований не достигну цели. Зачастую дизайнер не понимает ту предметную область, для которой разрабатывает сайт или приложение. И ему обязательно нужно «въехать в тему», чтобы предложить эффективные решения.
Поэтому первое, что я анализировала — конкуренты и похожие проекты. Вникала, изучала, как устроены их сервисы, как и что они предлагают, на каком языке разговаривают со своей целевой аудиторией, проходила путь пользователя. Определяла сильные и слабые стороны, плюсы и минусы интерфейса, отмечала для себя идеи, которые можно взять на заметку для вдохновения.
Исследования целевой аудитории
На этом этапе я воспользовалась следующими инструментами:
- онлайн-анкетирование,
- полевые исследования или личный опыт,
- живые интервью.
Онлайн-анкета
Онлайн-анкету с открытыми вопросами опубликовала в своих соцсетях и за 2–3 дня её заполнили 37 человек.
Следующая задача — проанализировать полученные результаты.
И тут я для себя поняла, что желательно давать вопросы с вариантами ответов. Плюс добавлять графу «Прочее», чтобы дать респонденту возможность ответить, если ни один из предложенных вариантов не подходит. В таком виде люди охотнее проходят анкетирование. + так легче собрать данные и сделать анализ.
В итоге я проанализировала и отдельно выделила следующие пункты:
- основные цели аренды авто в путешествиях,
- основные цели аренды авто для рутинных дел,
- какими критериями руководствуются люди при выборе онлайн-сервиса или сайта по аренде авто,
- проблемы, с которыми сталкивались респонденты при выборе авто онлайн, бронировании и оплате аренды онлайн,
- какая информация об авто и условиях аренды, по мнению респондентов, наиболее важна на сайте.
Всё это даёт понимание, в каком направлении двигаться дальше после завершения этапа исследования целевой аудитории.
Полевые исследования или личный опыт
Тут всё просто. Я смоделировала ситуацию и представила, что отправляюсь в путешествие и мне нужно найти и арендовать авто в другой стране. Я наугад выбрала 2 сервиса конкурентов и прошла весь путь бронирования. Описала процесс, результаты и выводы, которые также помогут мне при проектировании.
Живые интервью
Всё не так страшно, как кажется. Главное — заранее подготовить вопросы.
Провела 6 живых интервью и результаты каждого из них расписала по параметрам:
- цель аренды,
- как искали компанию по аренде авто,
- основной критерий выбора компании и авто,
- как проходил процесс бронирования,
- какой информации не хватало на сайте компании,
- что не понравилось/ понравилось,
- проблемы — если были,
- рекомендации или идеи — если есть.
По итогу этапа исследований целевой аудитории я поняла, что цели аренды могут быть разные. Например, добраться из центра города до дома, не быть привязанным к общественному транспорту, чувствовать себя удобно и свободно передвигаться, ни от кого не зависеть, в путешествии самостоятельно объехать и осмотреть окрестности. А это значит, что на ситуацию начинаешь смотреть под другим углом и глубже понимать. А также сможешь предложить релевантные решения.
Итак, анализ бизнес-требований, проблем пользователей, конкурентов нужны, чтобы понять реальную ситуацию.
3. Систематизация и анализ полученных данных
Профиль пользователя
Проработав, проанализировав и подытожив всю полученную информацию, я приступила к описанию профиля пользователя. Это некий общий, вымышленный персонаж, который будет решать свою проблему с помощью моего сервиса. Также на основе выводов прописала основные и эмоциональные цели, основные проблемы и как сейчас наш пользователь решает проблемы. Если вообще решает. Всё это даёт понимание, на чём стоит сконцентрироваться при проектировании.
Customer Journey Map, CJM, или карта пути пользователя
Карта пути пользователя даёт возможность систематизировать полученную информацию, разбить процесс решения задачи на чёткие шаги и сфокусироваться на главном:
- какая задача стоит на каждом шаге,
- что человек делает на каждом шаге,
- что важно на каждом шаге,
- какие есть проблемы на каждом шаге,
- какие есть идеи — если есть.
Всего я выделила 6 шагов:
- переход на сайт компании,
- поиск авто,
- выбор конкретного авто,
- заполнение данных водителя, оплата, подтверждение,
- получение авто,
- сдача авто и отзыв.
4. Анализ проблем и генерация идей
Чтобы более наглядно разложить проблемы и предложить решения, я оформила данные в майндмэп. Туда вынесла шаги, на которых есть проблемы у пользователей, и там же буду прописывать решения. А чтобы это сделать, снова возвращаюсь к конкурентам и смотрю, какие варианты предлагают они, но уже с точки зрения существующих проблем. И на основе этого начинаю генерировать собственные идеи.
В этот же майндмэп внесла свои идеи по решению каждой проблемы и отмечаю те, которые планирую внедрять в текущей версии сайта.
Для дополнительного понимания процесса бронирования и проблем, возникающих во время него, загуглила сервисы, выбрала наугад один и прошла полностью весь путь поиска и резервации авто.
После такого глубокого анализа необходимо сразу фиксировать всё, что приходит в голову. И не важно, какие это идеи: от самых дурацких и кажущихся невыполнимыми до крутых. Впоследствии неудачная идея, коей казалась изначально, может оказаться самой гениальной.
5. Формирование требований и ценности продукта
Функциональные требования включают в себя требования бизнеса и требования пользователей. По сути, здесь я описываю весь необходимый функционал, который должен входить в текущую версию сайта. Этот документ позволяет избавиться от бесконечных правок и затягивания сроков, поскольку согласовываем и утверждаем его с клиентом. В таблицу внесла только те идеи, которые решают задачу наилучшим образом и технически реализуемы.
После формирования функциональных требований описываю ценность продукта. Это своеобразная напоминалка для себя самой о продукте. Всего лишь одно предложение, которое позволяет ответить на три вопроса: что это, для кого это и как это работает:
«Аренда авто» — веб-сервис, с помощью которого люди, которым нужен автомобиль во время путешествий в другие города и страны, могут легко и просто выбрать и взять его напрокат.
6. User Flow, или проектирование логики работы продукта. Пользовательские сценарии
Логические схемы, которые по-другому называются User Flow, помогают определить ключевую логику работы пользователя с сайтом. Они показывают путь пользователя при решении задач.
В User Flow выделяю задачу, которая стоит перед пользователем. Она же — название сценария. Далее обозначаю шаги, то есть этапы, через которые проходит человек, чтобы решить задачу. Прописываю, что на каждом шаге должно быть, какая информация и какие действия человек должен совершить. Обозначаю конечный результат.
Шаги, которые пользователь проходит по сайту, в схеме обозначены зелёным цветом, а шаги вне сайта — голубым. Например, получение, сдача авто.
7. Детализация и структура
Благодаря всем пройденным этапам, в голове уже была картинка интерфейса и функционала будущего веб-сервиса. Осталось только вывалить всё в майндмэп сначала в виде структуры. А потом детализации, то есть детального описания наполнения каждой страницы.
8. Прототипирование
Прототипирование — также достаточно объёмный этап, но занимает гораздо меньше времени по сравнению с исследованиями. Перед глазами уже есть готовая структура и детализация, которую собрала на основании исследований, а не из головы и не пальцем в небо.
Прототип нужен, чтобы сфокусироваться на смысле и продумать интерфейс на концептуальном уровне, прежде чем переходить к графическому оформлению. Тут же можно «безболезненно» вносить правки.
Над прототипом работала в Фигме. Этот инструмент мне хорошо знаком, но прежде никогда не делала интерактивные прототипы. А это оказалось очень увлекательно. И, кроме того, считаю серьёзным шагом, ростом и выходом на новый уровень работы.
Вот что получилось:
9. Эвристическая оценка, юзабилити и пользовательское тестирование
В ходе эвристической оценки поняла, что не хватает страницы с картой сайта. Поэтому достаточно оперативно запилила её и поставила в ряд с другими страницами прототипа. По остальным пунктам проект соответствует всем эвристикам.
Тестирование прототипа нового цифрового продукта, пожалуй, самый волнительный и интересный момент, потому что видишь результат своего труда в действии.
Итак, для тестирования я создала сценарии взаимодействия посетителей с сайтом и просила по ним пройти.
В целом, у пользователей не возникло трудностей с интерфейсом. Все без проблем прошли путь пользователя: от момента попадания на сайт до завершения бронирования.
Но были и два интересных комментария, которые заставили задуматься и внести корректировки в прототип.
- Кнопка «Сохранить» в карточке авто, которая позволяет отправить конкретное предложение себе на почту для того, чтобы можно было вернуться к нему позже. Пользователя эта кнопка ввела в замешательство. Поэтому я решила дополнить формулировку — «Сохранить предложение».
- Один из респондентов предложил добавить в личный кабинет функцию скачивания ваучера, чтобы не искать его на почте или в личном кабинете сервиса. Тут я также безболезненно дополнила этим нюансом свой прототип.
Подытожу.
Пазл сложился, появилась система. За 6 недель напряжённой работы я прошла все шаги, которые проходит UX-дизайнер, работая над крупным проектом. Теперь я знаю, что такое магическое юзабилити, юзАбельный интерфейс и UX. Жизнь уже не будет прежней, как до курса.
Создавать сайты, программы и приложения для пользователей, а не для себя или клиента. Разговаривать с ними на одном языке. Это те вещи, которые прочно должны осесть в голове.
Спасибо кураторам Alex Voloshyn и Den Potapov, за продуктивное обучение, за возможность стать на уровень выше и серьёзнее, за возможность взглянуть на одни и те же вещи с разных ракурсов.
