This was a UX design challenge requested by a company based in San Francisco. The challenge was to design a ticketing application for the San Francisco ferry systems. I was asked to work alone on conducting user research, defining problems and project scope, and designing artifacts within 4-5 hours.
I'm a person who believes that talking with users is the best way to develop empathy. However, since I'm based in Chicago at this time, I was not able to take a ferry and chat with ferry commuters. Since I personally have not taken ferries before, I decided to talk with two of my friends in SF who recently took the ferry to the Angel Island first. Both of my friends bought their tickets at the loading dock in a high temperature. They had to wait in the line for over 30 minutes to get onboard.
In order to understand what the ferry travellers’ major pain points are, I collected 100+ reviews for two major ferry companies in San Francisco on Yelp. I put related traveller feedback closer on the white board (pictured above) and found the problems commonly fall into the following areas:
After conducting user research on Yelp, it is time to focus on user pain points and motivations. First, I sketched a more detailed user journey storyboard on a piece of paper (pictured above) to visualize the problems on ferry ticket booking journey. Then I created a basic persona to serve as an executive summary of user research..
Now, let me introduce Emmy. Emmy is a young professional who lives and works in San Francisco. She does almost everything online, inclucing finding restaurants, shopping, and booking concert tickets. She knows it’s a pain to find parking in San Francisco, so ferry became one of her favorite transportation. She usually rides her bike to the dock and take ferry to the place she wants to visit.
She likes the city of San Francisco and places around it. She recently took a ferry to the Angel Island and was amazed by the view there. From that point, she decide to take more ferry trips to explore places.
Now let’s look into her experience through the user journey map below.
So how do we solve the problems for Emmy? Let’s divide her pain points into job stories.
The job stories were set as the design requirements for further design. The two main job stories were divided into more detailed job stories. Each job story has a functional requirement and an emotional design requirement that the further design needs to meet.
With the job stories in mind, I started to draw some sketches of the screens on a piece of paper (pictured above). Since mobile devices are more accessible on the go, I chose to design a mobile app.
Screen 1 - Select Trip: Users enter their information to select their destinations, dates, and times for the ferry.
Screen 2 - Select # of Tickets: Users enter how many adults, child, junior, and seniors are taking the trip. A message tells them how many tickets are left for this trip, providing a sense of urgency and avoid overbooking.
Screen 3 - Select # of Bikes: Users enter how many bikes they have to help organize bikes better.
Screen 4 - Checkout: Users enter credit card info and confirm purchase.
Screen 5 - Payment Confirmation: Provide affordance of payment process.
Screen 6 - View My Boarding Pass: Use this page as the boarding pass for your trip group for a quick and smooth boarding experience.
2-D Barcode: Use 2-D barcode to facilitate quick and smooth onboarding.
Boarding Group: Indicate boarding group according to their time booking time. It also facilitates an organized boarding experience.
Predicted Weather: Provide weather information at departure time, so users can prepare for the hot sun or rain shower.
Real-time Status Tracking: Notify users of any delay and allow users to track the real-time location of the ferry.
After finishing the rough draft of screen sketches, we created a series of wireframes to represent the skeletal framwork of the ferry ticketing app.
Iteration 1 - Combined “select tickets” page with “select bikes” page. Selecting the number of tickets is a similar task to selecting the number of bikes. Combining the two pages reduces mental effort for travellers who do not have bikes.
Iteration 2 - Added destination street address on the “select tickets” page. Adding the address of destination helps users plan the trip after ferry.
Iteration 3 - Switched position of the 2-D barcode and trip information.
To visually present the app, I chose these following colors as the theme to give users a “ferry” feel. The colors are mainly connected with oceans. Since I did not design anything special on checkout page and payment confirmation page, to save time, those two pages were not designed in high fidelity.
Iteration 1 - Refined the form interaction on the “select your trip” page. On mobile devices, it is easier to have more intuitive interactions because of the touch screen. I changed the “select date” dropdown to a date slider and “select time” dropdown to a list so that users do not have to go back and forth between the two.
Iteration 2 - Sticked action buttons to the bottom of the screen. Making the position of the buttons consistent reduces mental effort on finding the buttons.
Iteration 3 - Added age description to adult, child, junior, and senior. Users may not be familiar with the age range of these categories.
Iteration 4 - Moved the number of bikes to the bottom of the boarding pass. Putting bikes along with travellers causes the information to be crowded.
User requirements are not the only requirements. Good design is to connect user needs and business goals. While solving the problems for users, it is important to align business goals by doing stakeholder interviews.
The game is not fair to everyone. The app provides users advantages over non-users. As a result, travelers may fail to purchase tickets at the dock more often. To find a balance between e-tickets and paper tickets, we need more operation research.
I am the filter of user pain points. Designers have their bias. When I was the only one on this project, my own bias is a factor in determining the effectiveness of the design to solve problems for users.