Getting Back on Track: Redesigning the Amtrak User Experience (A Case Study)

Intro
Alrighty, so I passed the General Assembly initiation hazing, also known as the first UX project. What comes after, you ask?
No break, no celebration. Just your next project. Doing the Double Diamond, all over again, but bigger. And this time, with a group!

The What:
We were assigned to look at the intercity railroad company Amtrak, and to resolve usability issues occurring on their responsive website for their primary persona. In addition, we had to incorporate a feature on their website to meet the expectations of more socially conscientious consumers.
Amongst other things, we ended up redesigning their search results page, from a rickety, near-unnavigable interface to something cleaner, clearer, and easier to use:

What was our process to get there? Let’s do a case study:
The Problem Space
As mentioned, we were assigned to find and fix usability issues on Amtrak.com’s website, an also introduce a new feature to address a corporate social responsibility initiative.
Users and Audience

For this project, we wanted to talk to people who were familiar booking trips online, and who might respond to a social initiative feature.
So we created our first screener survey (left) and sent it out to our network. Of the 50 respondents, 33 qualified as per our selection criteria of:
- Having booked travel online at least twice a year,
- Donated/volunteered for an organization recently, and,
- Together, made up a range of age, gender*, socioeconomics.
*Right around this time, I also attended a lightly-heated UX panel discussion on inclusion, and how screening by gender is an outdated marketing methodology that is losing relevance and reinforces prejudiced stereotypes. Sooo, perhaps this particular screening category isn’t the best one. Thoughts for next time.
Out of those 33 qualifying candidates, we interviewed six (6) respondents to see what made them tick, and built a persona and problem statement for which we could solve through Amtrak’s redesigned user experience.
Roles and Responsibilities
As mentioned earlier, this was our first group project, the very mention of which can instil fear and dread in any otherwise-competent and -confident human being. But we’re in UX, so we have to work together, right?
It helped that I had the best group you could possibly ask for. By the end of our 11-day sprint, we were telepathically reformatting each others slides in real-time, sending each other images a second before they were needed, dotting each other’s Is and crossing each others Ts.
Pro tip before working with any team: We were handed a conversation guide right at the start, where we had to lay out our individual strengths, weaknesses, communications needs, and stressors up front, to see how we could support each other best.
As uncomfortable as this conversation might be with a handful of strangers, being as up front and honest about this as soon as possible is the best thing you can do to set yourself up for a good working relationship built on trust. So, do it!
Broadly speaking, I focused much of my efforts on the research questions, interview structure, prototype animations, and peppering our presentation with puns. S was our resident design master, converting and resizing images, formatting our slides for consistency, creating templates, and making all of our redesign heirarchies sensible. M was our documentarian, taking all the notes, scoring all the usability tests, writing reports, and massaging our design journey into a tangible narrative. But we all had a hand in every step! And everyone was amazing! So just disregard this paragraph. We carried this beast of a project together:

Scope and Constraints
The entirety of our budget was pooling together $20 for a Starbucks gift card for a draw to entice some people to talk to us, because we were rushed and terrified about not having enough research to do everything in time.
We had about a week and a half to come up with a low-fi, mid-fi, and high-fi redesign for Amtrak.com’s purchase path, sturdily backed by exhaustively documented research at every step. We’ll get into that next:
Our Process
- Research:
As a recent Canadian transplant, I had only heard about Amtrak on the periphery. When we started interviewing people, I was shocked by the vitriol people have reserved for this little train company, particularly for their website. So I guess we had our work cut out for us.
As mentioned above, we interviewed six of our 33 qualified survey respondents, and asked them about their behaviors and pain points around booking travel online (ie. what devices they use, do they book for vacation or commuting, how they research their options, what influences their decision, etc.).
On one occasion, without being prompted or knowing that we were working on Amtrak, an interviewee went on an 8-minute tirade against all of the issues he has had with Amtrak’s online website, which gave us some great starting points on where to start looking!
Lastly, to suss out insights around the mysterious, new “socially conscious” feature we had to add, my approach was to come up with questions around their recent volunteer and donation habits. Our screener survey asked about which organizations they volunteered for or donated to within the past year, and in our phone interviews, we asked them how and why they got involved. These insights were particularly interesting, as we found all six got involved through organizations that their friends, family, and coworkers were part of. More on that later.
All of our interview insights were compiled and — you got it — affinity mapped.
Pro Tip for Affinity Mapping: Try making a digital affinity map! It takes just as long to draw everything out on a million post-its as it does to do some computer data entry. And afterwards, you can drag-and-drop your digital post-its ad infinitum with your group in a shared document. And it just photographs so much nicer too:


The “I” Statements generated from the affinity map then informed our subsequent Persona, Journey Map, and Problem Statement, which was a collaborative process to make sure we were all on the same page before moving to the design:


With all that, our Problem Statement to design a solution for was:
Travellers compare many options before booking a trip. Mike is frustrated by the online booking process. How might we streamline his experience?
2. Design
To get an idea of where to start, we had to see what already existed — we wanted to know what the Amtrak online booking experience was today, before we proposed any changes. Based on the anecdotes from our interview subjects and some of the shorter trips they’ve booked on Amtrak, we came up with the following scenario and task for some test users to try completing:
SCENARIO: You have an upcoming business trip to a conference in Philadelphia. The conference begins on Thursday, Nov. 14 at 9pm and ends on Sunday, November 17th. You want to get there on time at the best price possible.
TASK: Purchase a ticket on the Amtrak website.
Simple enough, right?
Turns out even trying to book that basic weekend getaway on Amtrak’s website is riddled with issues. Two users missed the Round Trip toggle. All three couldn’t find the “Add to Cart” button until they had some assistance. There were even some web bugs, where one user ended up with two one-way tickets from NYC to PHL, and another system crash. Here’s a peek at our first Usability Testing Report:

As hinted at in the report above, one user grew so confused and frustrated they began opening new tabs to find options on other travel sites. This was definitely not in the scope of our hypothetical scenario and task, but it was a behavior we could understand and empathize with.

Part of these usability issues may be due to Amtrak’s unwieldy Sort & Filter menu, which, when expanded, takes up the entire page, obscuring your search results below the fold. Couple that with this bug that doesn’t let you see more than one option at a time, and you’ve got users backing out and opting to hitchhike.
Not only that, but what was the main filter category taking up all that space? A toggle to search by TRAIN TYPE. None of our users knew the difference between the Silver Meteor train vs. the Silver Star train. Do you?!

So now that we knew some of the issues with the search page, we had to come up with some potential solutions. Being a group project, we tried a few sessions of Design Studios. We each spent some time individually sketching out some quick solutions, then sharing them with each other. We gave each other critiques, and then tried drawing a better solution, taking ideas from each other, until we collectively came up with a concept that incorporated the best pieces of our sketched out ideas.
We talked about moving the Sort & Filter section to the left side as a faceted navigation feature, allowing for more visibility for the actual trip options.
But we also had to figure out where to put the compare button. We tried a few ideas before settling on one:


These experimentations and iterations from the Design Studio helped us pick and choose components we liked, until we built out a tentative layout of the entire results page:

This became the basis of our mid-fidelity prototype! So let’s compare what exists to what we made. Here’s the current search results page:


Based on user feedback, our design changes consisted of:
- Moving the “Add to Cart” button from top left to the right of each trip option (all three of our test users struggled to find the button on the left).
- Consolidating all pricing information down to one area (the black bars).
- Hiding the confusing icons behind a click, where you can find out more about your train.
- Increasing the visibility of the purchase path stage the user was at.
- As mentioned, moving the Sort options to the side and adding the Compare feature.
This was a step in the right direction, and we tested this prototype a few times, and people were a little happier. However, there were still issues:
- They didn’t understand this sharp contrast between the time and the price. It still made each ticket option seem a little overwhelming.
- Even though we tried simplifying the pricing options, test users still didn’t understand the difference between, say, a “Saver” ticket and a “Value” ticket.
- Discoverability of the Sort and Compare features were low. None of our users were trying out our new features!
Some users mentioned that different colors might help draw their eyes to areas of importance, so we focused on finding the right colours. Taking a cue from Amtrak’s brand identity, we ended up with this:

- Each trip option was a single colour-tone “block”.
- We hid the pricing details even more, putting all our emphasis on the dollar value, and hiding the details behind a (?) button.
- We colorized the Sort and Compare options on the side to hopefully increase discoverability.
The results? In our existing website test, zero users could find the “Add to Cart” button until they scrolled around and got some help.
After our design changes, all four test users easily found the button and checked out. Here’s a quick breakdown of our different stages of design on a single trip result:

And here’s a zoomed-out before-and-after of a full roster of search results on the existing website vs. our redesign:

Our test users liked a lot of these changes, but there was still confusion around the price options. That told us that it stems from the names themselves. Users didn’t know the difference between a “Value” and a “Saver” seat. At this point, we just wanted to host a new naming convention session with Amtrak’s marketing team.
But we’ll talk about that in next steps. Right now we also need to cover our new Compare feature. With our persona being a research-intensive trip planner, and our test users opening up new tabs to search, we took a heavy cue from Kayak (also mentioned by our interviewees), and basically incorporated a widget on Amtrak’s search results that pulls those alternate travel options for you:

This feature is not only more convenient for the user, but signals transparency and trustworthiness from Amtrak to its users. It implies that they believe in their product so much that they can show you the alternatives and still expect you to come back.
3. Adding a Corporate Social Responsibility feature
Did you forget about our socially conscientious consumers? We almost did. We couldn’t think of a natural way to incorporate yet another feature into the search result.
So we regrouped, looked at the data we had, and pivoted:
As mentioned during our user interviews, our interviewees tended to donate small amounts ($1 to $5), and supported causes that their friends, family, or co-workers were involved.
We also looked at some other choice quotes from our interviews and tests:
“So many unnecessary clicks.”
“The endless accounts drive me bonkers”
“You gotta put this in every time, and they don’t remember your information. It’s a pain.”
That was the seed for an idea that could kill two birds with one stone. But we needed to hold a mini-design studio to figure it out:

Test users complained about having too many accounts. So what if we added Google and Facebook login functionality?
Not only that, but what if we connected it to Facebook’s Fundraiser feature, and encouraged people at checkout to donate to a cause that their friends were already involved in?

It’s a bit of a roundabout solution, sure, but it is still entirely backed by user behavior and data points. It was further validated when we tested the final design, when the 2 test users who logged in through Facebook expressed surprise and delight at the feature, and happily donated. Here’s the high-fidelity result of the concept:

Outcomes and Next Steps
Here’s some heartwarming quotes from our testing of the updated website:
“I know exactly what to do, usually these sites are pretty cluttered.”
“Way easier than I remember it being before.”
“That was fast! Everything I need is here.”
As mentioned earlier, we went from 0/3 users being able to find the “Add to Cart” button to 4/4 finding it right away.
Our test users also rated the overall transaction experience, and the score they gave also went up from an average of 2/5 for the existing website, to a 4.5/5 for the updated design. Total success, right?
There were still a few issues we would need to address going forward:
Next Steps
- The new Sort and Compare features had a disappointingly low discoverability. Only 1 out of 4 testers used each of the features. We talked about maybe trying to take another cue from Kayak and move it unobtrusively back to the top of the search results, but that would definitely require another round of research:

- As mentioned, pricing points are still confusing. We want to revisit how we can make that as unambiguous for the user as possible, because none of our users knew the difference between a “Value” and a “Saver” ticket. Does the whole pricing structure need a revamp?
- We want to explore PayPal and other payment options. Some test users were cautious about giving their credit card to yet another company, as web security is increasingly on peoples’ minds.
- We want to expand the mobile experience! We created a few screens that showed how our new designs would translate to the mobile browsing experience, but we haven’t tested any of it yet. That could be an exciting project:

That’s it for now. Thanks for reading!
If you made it to the bottom of this, you’re probably our instructor. Hi!
We’re already onto our next project now, where we’re going to try our hand at Heuristic Evaluations, Card Sorting, and more. Let’s see where it takes us.

