top of page

Peter Pan

Reimagining the interface for Peter Pan Bus Lines

Peter Pan Interface Images


As a frequent traveler, I have used Peter Pan Bus Lines countless times. I decided to redesign their mobile application to align their services with their customer experience of using Peter Pan.

Project Team

Individual Project

My Role

User Research
Visual Identity
Interaction Design


Summer 2021 (Updated)
4 weeks

Getting Started

The old Peter Pan app experience felt dated and generic. The disconnect between the customer experience of the Peter Pan Bus Lines and the mobile platform indicated a need for an overhaul in its digital experiences.

Audit 1
Audit 2

Identifying actions and elements of competitor products

Key UI elements in Moovit and Google Maps

The common features within these applications helped create an effective framework for the app based on ease of use and navigational efficiency. The UI needed to be clean and direct. And the users should spend less time figuring out how to navigate the application, in order to quickly book their tickets, or find old trip details.

Early IA and Navigation

After an extensive UI and user flow audit of the existing Peter Pan application, I found that the workflow needed to be reorganized and streamlined to improve the navigation.

Workflow Streamlining

Streamlined workflow to improve user navigation

The core experience was simplified into three sections: the ticket booking process, the user profile, and the trips section with past and upcoming travel details.

IA and User Flow

I tested out the screen flows using paper prototypes with a few users who had used Peter Pan. Some users were instructed to perform the task of booking a ticket, while others were instructed to also verify their trip details. For both tasks, the users were told to talk about their thoughts as they navigated the prototype.

User I
  • Confused by the back arrow present on the confirmation screen.

  • Was not able to see the details tab clearly.

  • Wanted to see the older trips as soon as he opened the app.

User II
  • Thought the recommendation tab was redundant.

  • Confused by the details on the checkout screen.

  • Wanted an option for downloading PDF ticket due to familiarity.

User III
  • Wanted the trip details screen to be replaced with a popup to make it more intuitive.

  • Questioned the position of the menu for a large screen phone.

  • Wanted to know the nearest stop from their home.

IA Modification

After gathering the user feedback, the workflow was modified to include some user suggestions as well as pain points observed in the Wizard of Oz tests.

The navigation process was further simplified into two activities-

  • Primary Activity which involved the entire end-to-end ticket booking process.

  • Secondary Activities which involved the trips, locations, user profile and additional information related to the app.

Workflow Distribution

Workflow breakdown to prioritize user screens

Final design

One of the challenges was to present the necessary information without overwhelming the user. The lists were changed to a card-based format for better hierarchy, improved scannability and information recognition.

Improve Peter Pan UI for the primary user workflow
The hamburger menu was replaced by the bottom navigation bar for ease of navigation and better content structure. Additionally, the More section was added to help the user edit personal information or address any queries or questions about the app.

Redesigned bottom navigation bar for secondary user workflows

Remote user testing

Main task

The task is to successfully book a trip from New York to Providence as a first-time user of Peter Pan Bus Lines.

Sub tasks
  • Identifying the given location and selecting the recommended option

  • Looking at the trip details before selecting the appropriate time

  • Scrolling to look at additional information after the trip has been confirmed


The first-time user will easily identify the desired location and select the option from provided list rather than inputting the location. They will look at the trip details before booking their journey.
The user will only glance at trip confirmation options and scroll for other details about the journey.
The complete time taken by the user will be approx 2-3 mins to complete the task of booking a trip.

Feedback and Metrics

The users spent more time on subtask 1 which indicates that it was not intuitive. The users also spent less time on subtask 2 which affirmed the hypothesis. All the users spent around 3 mins completing the main task which affirmed the hypothesis.
  • The users felt more stuck at subtasks 1 and 2

  • The misclicks for subtask 1 were around 66%

  • Users were confused while selecting details


Based on the feedback, the details component was one of the problem areas. Users preferred details in card interaction over the alternatives, as seen below.
Task 1 - Details.gif

Task 3 - Details on Card.gif

Details in Card
Task 2 - Card.gif



Creating a design system from scratch

Removal of superfluous components

Prioritizing interactions over screens

This redesign of Peter Pan's mobile app includes a design system to help prioritize user workflows over visual design.

Having a card-like visual system helped simplify the necessary content for the user.

User testing with metrics provided insight into how to improve component interactions rather than adding additional screens.

bottom of page