Design Project Fall 2021
Fall is a season filled with a great many holidays which also means that a great deal of travelling is being done. This means that travel apps are subsequently being used extensively. Partnering with a group of two other designers with different strengths we took a deep dive into Amtrak’s website and were able to identify and address these pain points that we found in a redesign of the website.
Design Problem:
Our team first began by doing a thorough analysis of the Amtrak website. In order to see the functionality issues with the website we conducted some usability testing.
Usability Testing
When beginning our usability testing we first had to choose appropriate users for the tests. In order to do this we had to formulate some initial user testing questions in order to make sure that the users we select are appropriate for the testing that we were going to conduct.
Do you use a computer or smartphone to arrange for travel plans? If so how experienced are you in this matter?
How often do you do intercity travel?
Have you used Amtrak before?
a) If so, are you experienced with it?
b) How was your experience?
After posing this question to a number of appropriate users each member of our design team was able to gather a single user to conduct the testing with.
Description of Participants
A description of the participants has been provided below:
Participant A
The first participant is a second year undergraduate student at UCSD who uses various technologies including but not limited to cell phones and computers on a daily basis. During the interview questions, she stated that before the pandemic she will make intercity travel around twice a month and use the train as a transportation method. She clarified that she did not specifically use Amtrak before but she used to buy a ticket from a similar New York version of it. Considering she is a potential customer of Amtrak, I think she will be a good participant of choice for this study
Participant B
The second participant is a fifth year undergraduate student at UCSD who travels across California frequently via Amtrak. He explained that he has family is scattered around Southern California and because he does not own a car he frequently resorts to using the Amtrak. The participant clarified, during the interview questions, that they would often book Amtrak over the laptop or the phone. Seeing as the participant often uses Amtrak and is familiar with the desktop version, they will provide an interesting perspective for user testing.
Participant C
The third participant is a fourth year at UCSD who is not familiar with Amtrak. This student was new to using the website, which offers extremely unbiased input since they are approaching the user test with no prior background knowledge.
Testing Procedure:
After having determined an appropriate assortment of users we were then formulate a testing procedure in order to ensure that fair, unbiased testing was being conducted:
Testing Plan -- List of Tasks (expected 45 minutes):
Open the main page of the Amtrak online website. Without going to any other sub-pages, ask the participants to describe:
a) What is the company about?
b) What impression do you have from the first page
c) What information is confusing you? What do you want to be clear?
i) What is auto train?
ii) As a student it is difficult to find pricing because you have to book train tickets with the student discount in a separate window
Scenario: Last weekend you watched a Youtube video about how amazing the scenery on the zephyr line (some background here: Zephyr runs between Chicago and San Francisco). You want to book a single train ticket from San Francisco to Chicago any time around next month. What will be the price for that?
Try to book a one way trip with a student discount from SD to LA
Book a single train ticket specifying a departing and return date one week from today, without specifying a time of day
a) Filter out the type of Train to use
You recently booked a trip on the Pacific Surfliner 587 but can’t find your digital ticket. Check your train’s status on the website.
Top Three Usability Problems:
After conducting user testing with our participants we were able to identify three recurring major usability problems that the Amtrak Website is facing:
Participant A
Helping the user recognize, diagnose, and recover from errors:
While the user (participant A) was trying to finish the task of finding a train ticket status of the pacific Surfliner 587, the prompted tiny windows only allow users to input a number digit other than the alphabet. This confuses the participant by not being responsive to the user input, even with a wrong input. Specifically, the prompted box is asking for the number without any clarification. Participants even question the functionality of the keyboard they used by asking “did my keyboard die?”. This violates the #9 rules -- help users to recognize, diagnose, and recover from errors by not prompting them to the correct input validation. In the end, the participant could not finish the “checking train status” task that we assigned to this participant and ended up with endless confusion. This error can be potentially fixed by providing more explicit instructions for the system's input validation under the hood. In details, we can use highlighted and bold text for the user to understand what the user did wrong and how to fix it.
The annotated image above, highlights the first usability issue that participant A encountered
2. Recognition rather than Recall
The site does not explicitly state whether a certain promotion, like student discount, is applied or not. The only method that the user can discern whether they have a promotion applied is through remembering the price of a ticket before the promotion and comparing it with the later price. This action violates the usability principle of “Recognition rather than Recall” by forcing the user to remember the different prices only to get a sense of whether they have a promotion applied. This greatly confused the participant with “is this price different from the original price?” This usability error can be fixed by providing more detailed information about the prices of tickets when the promotion is applied. Specifically, by explicitly showing how prices change in different stages, including taxes, promotion, and any additional charges that might let the user to pay. Transparency in the prices is crucial when users are eventually going to pay for them.
3. Match Between System and the Real World
The site does not show the information from the shopping cart logically. Specifically, the shopping cart at the top right is just an icon showing what is contained in the shopping cart. Logically speaking, when the user clicks the shopping cart icon on the upper right of the webpage, the user wants to do a final sanity check about the item they have added to the shopping cart to avoid any error. That is the state that the user is ready for checkout if everything is correct. Nevertheless, nothing on the shopping cart is clickable other than selecting plain text. This violates the usability rules of “match between system and the real world” by not presenting the shopping cart with the checkout button in a logical sequence and locality. To fix this usability problem, a more intelligent and logically sound shopping cart should be implemented. There should be a checkout button at the bottom of the shopping cart for users’ convenience to proceed to checkout. In addition, if the user wants to make any revision to their shopping cart, there should also be hyperlinks to each item included in the shopping cart for ease of revision and deletion.
Participant B
1. Helping the user recognize, diagnose, and recover from errors:
When the user was attempting to complete the task of booking a ticket from San Diego to Chicago, the user was faced with the result, “No Trains Available” . After giving this error message to the user, the Amtrak website does not provide any alternative way for the user to find different times. The website does not offer any kinds of solutions when the user is being faced with this type of error. This error is a violation of the 9th usability heuristic. A possible solution that the website could implement to fix this solution would be to do something along the lines of providing the user with alternative times around the same date.
2. Recognition rather than Recall
When participant B was tasked with being able to find information about the status of the train, they were asked by the website to enter the departure date, station, as well as which station the train is departing from and going to. This is a violation of the usability heuristic ‘Recognition Rather than Recall’ because the website is expecting the user to be able to recall prior information regarding their trip in order to figure out the status of their train. This particular usability error can be fixed easily by providing the user with some kind of recent trip booking history on the website which, when accessed, would have some kind of indicator that would tell the user about the status of the trip (maybe a red bar near the trip details indicating that the trip is delayed and a green one that lets the user know the train will arrive as scheduled. This would then allow the user to be able to simply search through the trips they planned and find the associated status.
3. Match Between System and the Real World
When asking the Participant to complete the task of booking a trip, with a student discount I noted that the participant asked out loud, “I am not sure what the BOOK NOW button does’. This is because the Book Now button is clickable no matter if the participant was trying to book a ticket, find a discount, or even find guest rewards . When clicking the Deals tab the student is taken to the deal page, however the Book Now button is still clickable but does not have any clear effect. The user also noted that when completing the task of booking a single train ticket from San Francisco to Chicago it was not clear initially what the difference between the Book Now and Find Trains button is. This is a clear issue of natural mapping and a violation of the Match between System and Real World heuristic because the student does not truly know the intended effect of the button as the outcome of clicking it is unclear. To remedy this situation, the book now button should only be made clickable after the user has finalized all of the other details of booking a trip (with certain discounts/deals etc.).
Participant C
1. Helping the user recognize, diagnose, and recover from errors:
When trying to book a ticket, the user could not find a student discount. So, after scrolling through the booking page for a few minutes, the user finally decided to use the help bar, at the top, titled “Ask Julie.” The user mentioned feeling off-put by this, asking “who’s Julie?” Julie turned out to be an automated live chat assistant. The user explained that it’s frustrating to think you are being helped by a real person with a picture, only to find out its a bot. The user typed in “Student Discount,” which gave an automated response from Julie. Clicking the link to CA student discounts, a new page opened. On this page was a bunch of information about the student discount program and how it worked - but no way to actually book a ticket with mentioned discount. The user ended up not being able to find the discount in this exercise. This issue can be seen in detail below:
2. Recognition Rather Than Recall
In the top portion of the home screen, the user could not figure out what many of the buttons meant. They were about to book a train ride that they didn’t know had connecting buses.
3. Match Between System and the Real World
Here we saw that the user was presented with the input for booking a one way trip. However this was confusing for this participant. We see here quite clearly, that the website is not aligning its booking feature with the definition of a ‘one-way’ trip.
Redesign #1
To smooth the user experience, we have specifically decided to focus on departure/return dates input validation of the booking page of the Amtrak website. This choice is a result of the feedback during our usability testing on this site where participants are tasked to interact with the webpage in a specified way. In detail, participants are confused when they are prompted with two date inputs (departure date / return date) when they are tasked to book a one way ticket from Sacramento to San Diego. To better improve the usability of the booking page, we are targeting the input section of booking a round trip and one way ticket.
When choosing the user is faced with the home page. They are then presented with several different tabs: ‘One-Way’, ‘Round-Trip’, ‘Rail Passes’, ‘Auto Train’, ‘Other Options’.
In the above image we see that the round-trip tab gives the user the ability to specify a departing and return date.
Here we clearly present the user with different tabs for booking a Round-Trip and One-Way trip. Specifically, when the user selects the “One-Way” option from the bar, there is only one “Depart Date” option for the user to input the departure date on the right hand size of the destination boxes. Similar to Amtrak’s implementation, we are putting the date inputs near the destination boxes since the locality of input is logical in the sense that the user will naturally want to input dates after specifying the start and destination of their trips. Unlike the Amtrak website, we are only presenting the essential input of the specific departure date for the user to avoid any potential confusions without the extra demanding input of “Return Date” in the case of One-Way Trip. This redesign now follows the usability heuristics of match between the real world and system as we ensure the logical flows of user input is smooth and reasonable.
Redesign #2
In addition to this redesign , we also created a distinct second redesign. The second redesign implements a slightly different approach than the first redesign. We simply shift the bar option and collapse them into a drop down window near the destination input box.
The redesign essentially limits the amount of information gathering processes to the user to create a flatten and clean design. Since only the essential elements and questions are presented to the user in this logical order. We condense all the input prompts, including trip types, destination, start and return date together in an elongated bar. This approach minimizes the travel distance of the user's cursor when they want to specify the information they want to input. In real life, users' attention starts from the upper left corner of the input bar and shifts toward the lower right corner. We request the user information in those logical orders -- start with the trip type, number of passengers, destination, and the dates depending on which type of trips. Since each essential piece of information is spatially closed and logically connected to each other, users can input that information with greater efficiency.
Below we can see how the changes would look for the user:
