Проектирование сайта и мобильного приложения для проката велосипедов

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

Обнаружив, что мне очень нужно структурировать свои разрозненные блоки информации по UX (из лекций и открытых источников), чтобы понять, как же проходить этот путь от А до Я, не спотыкаясь, я пришла на курс с личным менторством к Александру Волошину на UX/UI digital product design. Камерный, четкий курс, в лучших традициях “учиться дизайну нужно только у практикующих дизайнеров”.

UX-case study

Постановка задачи и формулировка первых требований к продукту

На начальном этапе были заявлены такие требования к продукту:

  • Что нужно сделать? Спроектировать продукт, который позволяет пользователю арендовать велосипед в том городе, в котором он находится (в том числе в поездках, путешествиях).
  • Зачем? Какая цель проекта? Мы организовываем все официальные городские прокаты в сеть, тем самым покрывая не только города РФ, но и другие страны мира. Пользователи получают широкую географию, мы профит по партнерской программе (для прокатов).
  • Для кого? Люди в возрасте от 18-ти до 70-ти лет, которые любят активный отдых и мобильность и свободу передвижения и являются активными пользователями мобильных технологий.

После постановки задачи я проверила сайты городских прокатов разных стран, провела конкурентный анализ, основываясь на подходе Jobs-to-be-done.

UX-анализ пути пользователя на сайтах 6 велопрокатов (Россия, Франция, Нидерланды)

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

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

Прочитала отзывы на приложения в Google Play market, потому что на стадии опроса увидела, что в процессе у Пользователя много сложных мест в тех сценариях, которые существуют сейчас.

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

Таблица с выводами по итогам проведенных исследований.

Выводы на основе полученных результатов

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

На данном этапе мне кажется важным отработать не только понятный user-flow, но и усилить связь пользователь-техподдержка, продумать функционал репорта о неисправностях и систему уведомлений (один из фокусов сделать на своевременном информировании Пользователя).

После проведенного анализа проект был разбит на две части:

Сайт для презентации сервиса (информационный ресурс с переходом в мобильное приложение)

Мобильное приложение (информирование в режиме реального времени, поиск велопроката и само ключевое действие — аренда велосипеда).

Также до этапа прототипирования были выписаны выявленные проблемы и идеи по их решению:

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

Функциональные требования к сайту велопроката

Описание функциональных требований помогает четко определить объем работы, чтобы не сбиться с пути, не растянуть сроки и сдать первую версию продукта вовремя.

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

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

User-flow мобильного приложения по прокату велосипедов

Была определена структура приложения (из расчета, что с большинством пользователей будет работать принцип Mobile first)

Структура приложения по прокату велосипедов (разрабатывалась в программе X-Mind)

Также была определена структура важной части продукта — сайта

Структура сайта по прокату велосипедов (реализована в программе X-Mind)

После того, как был определен ключевой сценарий и стало понятно, какие в него входят страницы, была разработана сначала версия интерактивного прототипа для сайта, а после для приложения

Прототип основого и дополнительных сценариев приложения для проката велосипедов
Прототип основного сценария для информационного сайта по прокату велосипедов

Для дальнейшей реализации были разработан дизайн основных страницы приложения и сайта, дизайн элементы были собраны в UI-kit. Был подготовлен кликабельный прототип для связки сайт-приложение.

Покликать можно тут (серо-голубые блоки) и тут (часть с дизайном).

Связи прототипа, где видно переходы с сайта в приложение (кликабельный прототип в Figma)

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

Дизайн сайта и приложения

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

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

Спасибо за внимание) В первый и, надеюсь, не последний раз.

--

--