Проектирование веб-сервиса подбора экскурсовода (гида)
В данной статье я хочу рассказать о своем опыте по созданию веб-сервиса на курсе UX/UI (Digital Product Design) созданного Александром Волошиным.
Как начинающему дизайнеру мне очень хотелось понять все процессы и механизмы, которые задействованы при создании полезных, практичных и при этом привлекательных продуктов.
В рамках выбранной мною темы туризма необходимо было разработать сервис для любителей путешествовать. Кто они?
Это люди в возрасте от 18-ти до 65-ти лет, которые являются активными пользователями Интернета и считают для себя удобным с его помощью находить в других городах и странах людей, способных выступить гидом (экскурсоводом), чтобы показать и интересно рассказать о городе и его интересных местах, провести по маршрутам, которые оставили бы неизгладимые впечатления.
При этом цель создаваемого продукта вполне прагматичная — получение нами определенного процента от гида за каждую проведенную им экскурсию.
Задание содержало следующие основные бизнес-требования к продукту:
- пользователи должны иметь возможность выбирать страну, город, который они хотят посетить;
- пользователи должны иметь возможность выбирать экскурсовода по ряду параметров (страна, город, фото, отзывы);
- пользователи должны иметь возможность связаться с экскурсоводом.
Предлагаю вместе со мной пройтись по маршруту создания веб-сайта для поиска гидов и бронирования экскурсий с логическими концепциями UX и эмоциональными воплощениями UI. Маршрут будет состоять из следующих этапов:
Начал я с исследования аудитории, так как было сказано, UX без пользователей не UX. Мной были подготовлены и размещены в Google Forms определенные вопросы для понимания опыта пользователей в данной тематике:
https://docs.google.com/forms/d/1-0PGj2ZpsnuzEThTOteLlvFIlE0KKjfwQPzSqExPwrk/edit?usp=sharing
Друзья, коллеги и сокурсники активно откликнулись и помогли получить представления о волнующих путешественников моментах, за что им всем от меня БОЛЬШОЕ СПАСИБО!
Затем я принялся исследования конкурентов, чтобы понять как их продукты решают проблемы пользователей, оценивать их стратегии и определять их сильные и слабые стороны по сравнению с нашим запускаемым продуктом. Были отобраны и проанализированы 5 рейтинговых сайтов в туристической области из СНГ и зарубежья.
Анализ вышеуказанных сайтов я провел с помощью «карты пути пользователя» — Customer Journey Map. Карта представляет собой визуализацию процесса, через который проходит человек для достижения цели (в нашем случае — бронирование экскурсии и поиск гида) и включает последовательность событий и описание процессов для этого.
Ссылка: https://docs.google.com/spreadsheets/d/1tZsXkzI-L5fNj7Y31ImIx0yvzUSa389Jew2eaZvGsoQ/edit?usp=sharing
Полученные данные от исследований я использовал для анализа ситуации и разместил в такой таблице:
Функциональные и технические требования к сайту
Технические требования и ограничения
- В сервисе должен быть предусмотрен офф-лайн режим, чтобы после скачивания карты маршрута экскурсии можно было запомнить его и передвигаться по оффлайн-карте (в том числе с использованием общественного транспорта) и обратно в отель.
- Отзывы реализованы через систему Disqus.
- Сервис должно корректно отображаться и протестировано на устройствах Android device (mdpi, hdpi, xhdpi, xxhdpi).
- Дизайн сервиса должен соответствовать требованиям Google Material Design Guidelines.
Логика работы и структура сайта
На этом этапе возник соблазн приступить к проектированию страниц, сделать их первые наброски. Но ментор не позволил перепрыгнуть через важнейший этап нашего курса — Логика работы продукта, его UserFlow — разработка серий шагов пользователя для достижения им цели.
Для разработки таких логических схем мне субъективно показался удобным XMind, что из этого получилось можно посмотреть на следующих слайдах.
Общий сценарий
Ключевой сценарий
Структура сайта
Разработав структуру и сценарий можно действительно погрузиться в детализацию составляющих элементов создаваемого сайта.
Прототип
Прототипы представляют собой объединение всей работы, которая выполнялась до этого, в единую видимую функциональную часть, демонстрирует, что делает продукт в любой момент, каковы интерактивные элементы и как продукт будет функционировать в реальном мире. В этом мне помогла удобная и универсальная программа Figma.
Ссылка: https://www.figma.com/file/JoYEice4SWKFuFbjLHtO1n/VG-prototip?node-id=0%3A1
Графическое оформление интерфейса
Ссылка: https://www.figma.com/file/74wHt7N5AJfB4aowzC2O2I/VoyagerGuide-Desktop?node-id=108%3A500
Таков итог непростого марафона в результате которого я получил неповторимый и запоминающийся опыт создания практичных и полезных продуктов. Появилось правильное понимание процессов их создания и разгорелось желание их создавать.
А дальше- максимально практиковаться и продолжать обучаться по тем ориентирам, которые обозначил этот курс.
Отдельные слова благодарности организатору Alex Voloshyn за созданный курс и моим сокурсникам за поддержку!!!
