Сервис покупки билетов BusPass
Ахмед спроектировал сервис покупки автобусных билетов: от поиска рейса до оплаты и личного кабинета.
Спроектировать сервис, в котором пользователь сможет найти автобусный рейс, выбрать билет, оформить заказ, оплатить его и позже открыть покупку в личном кабинете.
Для этого проекта Ахмед выбрал сервис покупки автобусных билетов. Нам хотелось сделать не отдельный экран, а пройти весь путь пользователя: от поиска рейса до уже купленного билета в личном кабинете.
Сначала определили, какие страницы действительно понадобятся. В проект вошли поиск и расписание, информация о рейсе, оформление заказа, оплата, регистрация, авторизация и личный кабинет.
По мере работы макет становился всё больше, поэтому мы сразу старались строить его как систему. Кнопки, поля, карточки и другие элементы не рисовали заново на каждой странице, а собирали из общих компонентов.
Продумали путь пользователя
Сначала разобрали, что должен сделать человек, который хочет купить билет: указать маршрут и дату, выбрать рейс, посмотреть подробности, оформить заказ и оплатить его.
Под этот сценарий собрали набор экранов. Такая схема помогла не проектировать страницы отдельно друг от друга и сразу понимать, куда пользователь попадёт после каждого действия.
Собрали UI Kit
До работы над всеми страницами Ахмед собрал UI Kit. В него вошли основные цвета, текстовые стили, кнопки, поля, навигация, карточка билета и другие элементы, которые повторяются по всему сервису.
Это заметно упростило дальнейшую работу. Если нужно было изменить кнопку или цвет, не приходилось искать десятки отдельных копий на разных экранах.
Собрали основные страницы сервиса
После подготовки компонентов начали собирать сам сервис. Появились главная страница, расписание, подробная информация о рейсе, оформление заказа и оплата.
Отдельно сделали регистрацию, вход и личный кабинет. В нём пользователь может увидеть уведомления и уже купленные билеты.
На этом этапе особенно важно было следить, чтобы один и тот же элемент в разных частях проекта выглядел и работал одинаково.
Связали экраны в интерактивный прототип
Когда основные экраны были готовы, Ахмед связал их между собой. Теперь по макету можно пройти почти как по настоящему сайту: найти рейс, открыть его, перейти к оформлению и попасть на экран оплаты.
Для некоторых элементов добавили анимации и состояния. Это позволило проверить не только внешний вид страниц, но и сам сценарий работы сервиса.
Адаптировали интерфейс под телефон
После desktop-версии перешли к мобильным экранам. Их не стали просто уменьшать: часть блоков перестроили, изменили расположение элементов и оставили больше места для кнопок и полей.
При этом сохранили те же компоненты, цвета и общую логику интерфейса. В результате desktop и мобильная версия выглядят как один сервис.
Полноценный прототип BusPass
В результате Ахмед создал полноценный прототип сервиса покупки автобусных билетов BusPass, включая дизайн-систему, desktop- и мобильные экраны.
Что стало получаться самостоятельно
- Продумывать пользовательский сценарий до отрисовки экранов
- Собирать UI Kit для большого проекта
- Создавать и переиспользовать компоненты в Figma
- Работать с вариантами и состояниями компонентов
- Использовать Auto Layout
- Связывать страницы в интерактивный прототип
- Добавлять простые анимации переходов
- Адаптировать интерфейс под мобильный экран