Реверс-инжиниринг BlaBlaCar

Всем привет, во втором челлендже Ironhack предлагает задачу «reverse engineering», то есть взяв за основу несколько скриншотов выбранного нами приложения, мы создадим вайрфрейм из пользовательского потока для окончательного построения интерактивного прототипа.

Вайрфрейминг — это способ разработки сервиса веб-сайта на структурном уровне. Каркас обычно используется для компоновки контента и функций на странице, которая учитывает потребности и пути пользователя.

Мой выбор.

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

Пользовательский поток.

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

Описание пользовательского потока:

Выберите маршрут в разделе недавних поисков> Вверху нажмите, где отображаются данные поиска> Взаимодействуйте с селектором даты и откройте календарь> Изменить даты> Нажмите кнопку поиска> Выберите маршрут> Нажмите «Продолжить», и экран бронирования будет подтвержден .

Процесс.

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

Затем я нарисовал прототип с низкой точностью, показывающий элементы разных экранов и их взаимодействие.

На следующем этапе настала очередь Figma, сначала я выбрал тип сетки, который лучше всего подходит для приложения (6 столбцов для всех экранов, кроме календаря, у которого должно быть 7), затем я имитировал все элементы каждого из экранов без уделяя большое внимание деталям, поскольку это был прототип средней точности.

Файл:

https://www.figma.com/file/S9SRXYQOtyfu18jZvGOqwQ/Francisco-Muriel---Challenge-2%3A-Wireframing-(Community)?node-id=0%3A1&t=0sPqqSWOxwpboVgI-1

И, наконец, я создал пользовательский поток, чтобы показать интерактивный прототип.

Прототип:

https://www.figma.com/proto/S9SRXYQOtyfu18jZvGOqwQ/Francisco-Muriel---Challenge-2%3A-Wireframing-(Community)?node-id=12%3A12&scaling=scale-down&page-id=0%3A1&starting-point-node-id=12%3A12

Заключение.

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

В целом, это было поучительное и вдохновляющее упражнение, которое я, не колеблясь, повторю, чтобы продолжить обучение.

Не стесняйтесь включать любые вопросы или комментарии, которые могут у вас возникнуть по этому поводу