UX Case Study: Redesigning Amtrak Experience

Image for post
Image for post

Overview

My team received a client brief that stated that the Amtrak wants resolve any usability issues occurring on their responsive website for their primary persona. In addition, client was interested in incorporating a feature to their website in order to meet the expectations of more socially conscientious consumers. What follows below is my team presentation on changing how users interact with Search Results page on both desktop and mobile devices, as well as adding Social Media login to donate certain amount of dollars to a charity, based on their (users’) friends who donated money as well via Facebook platform.

Users & Audience

Users who will be using these updates and the new feature are somewhat experienced travelers, who book their travel online. Most of the users find traveling sites outdated, cluttered and confusing. Most of the users who take Amtrak have used the site before on both desktop and mobile and find the whole experience frustrating. They believe that update to the desktop experience, as well as mobile, will create a better experience for themselves and make purchasing a ticket easier than it is right now.

Roles & Responsibilities

Originally my team consisted of 4 people at the start of the project, but in very few first days, 4th member of the team had to leave the team and we continued as a three-member team: Richard L Lam, Marilyn Shi and me (Sergey Bestuzhev).

Image for post
Image for post
Original Lineup (left) and Final Lineup (right)

During the very first phase of the project (research), my whole team worked as one whole unit in Design Studios: we were all doing user interviews via the phone, compiling data from those during Research Synthesis , creating a person and journey map, as well as coming up with a Problem Statement as last step in E1.

During E2, we tested users on existing site on desktop version only, created a report to see what users of the current website say about it and then have created a Mid-Fidelity doc with Annotations to explain what has been updated on our new proposed version of changes that need to be done. We have also created a Clickable Prototype and later wrote a Usability Report on users who used the Mid-Fi clickable prototype to see how users interact with new changes. During E2, my team realized what are our strengths and weaknesses and each of us contributed in the area where they were most useful. For example Richard is a very organized person, as well as he has a lot of interviewing experience and it helped us to get more data during interviews, because he had a very good understanding on how to ask questions based on a lead question. Marilyn is a very good documenter and she added a lot of data in normal language that was easy to understand and use as supporting facts for our presentation documentations. I, being a Graphic Designer, has taken a role of making sure all data is actually consistent, makes sense visually and all of our documentation looks presentable. I’ve also helped with adding some data to the deliverables as well.

So to conclude: Richard is a team leader, who gave us a good foundation to work with his interviewing skills and organizational skills in terms of providing data and structure of the team, Marilyn, our team’s talented documenter and me, the designer with extensive knowledge of presentation design process, creative software and design principles. During E3, we pretty much followed the same structure of who does what in E3, with exception of Richard, who have worked with Marilyn together to put data we were gathering into understandable presentable content.

The tools we’ve used during our Unit 2 process were Sketch, Figma, Google Slides and Docs, as well as Photoshop and some online free image/video editing tools.

Scope & Constraints

Our timeframe for the project ran from October 24th, 2019 (getting the assignment) to November 5th, presenting our possible solution to the stakeholders. First week was spent doing user research, creating lo-fi wireframes, overlooking user testing and compiling data from all of these sources. Second weak was spent working mid-fi clickable prototypes, doing more user testing with the prototype and creating final hi-fi mockups in Figma. By the end of second week we had to create a presentation that would be shown to the client

We did not have a budget for this project.

The roadblocks that we hit were short deadlines, with time spent on the weekend both at home and at General Assembly.

Process

To star off the project we had to create screener survey to find users that have taken the Amtrak before and interview them. My team created a Google Form that we share across our social media, as well as friends. Within 24 hours we have received 50 submissions, while 33 qualified for the interview. We only needed about 3–5 actual interviews, so we interviewed 6 in the process via the phone (an extra one was by the team member who had to leave next day). Below you can see their survey information that they filled out and we later based our affinity mapping and lo-fi paper prototypes during Synthesis stage of the process.

Image for post
Image for post

1. GOAL

To find people who plan their travel online, specifically Amtrak

2. OPENING QUESTIONS

  1. What is your gender?
  2. Select your age range: (ranges from 18 to 55+)
  3. What city do you live in?
  4. What is your occupation?
  5. What is your household income?

3. PRIMARY QUESTIONS (BEHAVIORAL AND TOPICAL)

  1. How often do you use a website to arrange for your travel?

2. What do you use travel websites for?

3. Which of these websites have you used in the last year?

4. Switching gears a bit, have you volunteered for any organizations in the past year?

5. Have you donated to any charities or non-profit organizations in the past year?

We also provided them with Closing Questions that were more related to personal contact information.

Affinity Mapping

After we interviewed 6 people, we have worked on Affinity Map in Sketch (we were working at home over weekend, so we couldn’t meet face to face those days). Sketch really helped us to work together using Stickies-type idea in Sketch files that we later combined for actual “I” statements that we encountered the most and combined into final 6 statements. It helped my team to understand what were the similar trends and create a Persona based on that later on.

Image for post
Image for post
My Own Affinity Map
Image for post
Image for post
“I” Statements that we wrote after creating final Affinity Map as a team at GA

From there on, each of us have created a Persona that we combined into a Google Doc first, then itinerated into final Persona with everything easy to read and understand.

Image for post
Image for post
Amtrak Persona First Team Draft
Image for post
Image for post
Final Persona my team came up with

Meet Mike. Mike is the result of the trends we saw in the user data collected from interviews, so his profile is a combination of majority of users we interviewed.

Creating this Persona really helped us to provide a common understanding and get a deeper understanding of the user. With Mike in head, my team came up with clear Problem Statement below:

Mike and his fellow travelers compare many options before booking a trip.

People are frustrated by the online booking process.

How might we streamline the online travel booking experience?

From there we have also worked on creating a Journey Map that helped to understand Mike’s paint points even better visually, going from very first step of trying to find a good deal on his phone to the final purchase made online via desktop computer.

Image for post
Image for post
Original Journey Map
Image for post
Image for post
Revised Journey Map
Image for post
Image for post
Final Journey Map

Design

With everything I’ve discussed above, we had to do a user testing on existing Amtrak site to see how users interact with the websites and find their pain points during the test.

Image for post
Image for post
Original Site Screenshot

Here is more of a visual report on how users that we tested the original site on responded with their actions and feelings.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

After we’ve completed the user testing on existing site, we have worked in Design Studio 1 where we had to create our own versions of how the nw site should look like and then go over them in group, discuss, redo them with feedback in mind, create another version and then come up with final version of the features we want to implement based on user research, user testing and client needs. Below are our ideas and final lo-fi paper prototypes.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Final Draft Version for Lo-Fi Paper Prototypes

We created a paper prototype using regular letter sized paper that resembled a desktop screen and came up with 3 different paths users can take while using Sort Filter (see our scans below).

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

After we went over what each user went through on the existing site, we started to work on creating mi-fi prototypes that will help user to better understand how the new features will work and we will see if we still need to add other steps in hi-fo mockup stage. The mid-fi prototypes were clickable and users could actually interact with the prototype, as they would with an actual site. For the sake of not putting over 40 frames we came up by using Figma, I will just put the main ones with annotations.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

ANALYSIS
● Most users did not notice the option to donate to a charitable organization. Those who did notice opted to donate.
● Users who opted to log-in tended to choose the Amtrak account log-in over their personal accounts from either Google and Facebook.
● Users wanted to review their purchase after booking.
● Users did not want to be tricked into getting an Amtrak credit card.

Here is a report on the mid-fi user testing with scores on each page and functionality that needed an update as well as analysis and recommendations:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Final Design (Hi-Fi Clickable Mockups)

After all of that testing, analyzing, recommending and prototyping, we finally got to a final stage of this project — Delivery!

Our team came up with the design that closely resembles the mid-fi designs, but of course is more colorful and much easier to read because of different contrast.

Here is the combined flow from original design to mid-fi prototype to hi-fi clickable prototype mockup.

Image for post
Image for post
Original Search Results on existing site
Image for post
Image for post
Mid-fi prototype
Image for post
Image for post
Final hi-fi prototype

When we finally got a hi-fi clickable prototype ready, we started our final user testing of the site. We have tested it on 4 people, who haven’t yet seen the updated design to see how would they interact with the prototype and what may still be confusing to them. After that, we have created final report on how have users interacted with final design and what we have learned from that.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

We have also created a mobile version of the website, because current mobile version is it’s own entity and not a part of the original desktop site. If on desktop you can start booking your tickets right from the home page, on mobile you have to click at CTA button to go to another page and only then you can start your booking process. Below are is the documentation for how the new mobile version should function.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Mobile View of Search Results page

Usability Testing Report

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Analysis

So to summarize:

2 out of 3 users on original site — able to go from beginning to end of purchase path but with difficulty. 1 of 3 users quit the original user testing of the site, because she got so frustrated with the process and didn’t want to continue.

4 out of 4 users on the new site — able to complete their purchase all the way through without any roadblocks.

Recommendation

Make feature more prominent, maybe have a bit of color for users to see it right away or move the Add Content dropdown a bit higher in hierarchy of fields.

Ease of Use and Satisfaction

Satisfaction ratings for the experience went from 2 out of 5 on the existing website to 4.5 out of 5 on the new site!

All users said it was very easy to do everything they wanted and satisfied how the feature performs. Here are some quotes what some of the users said after the testing.

Image for post
Image for post

Outcome

Overall we increased the number of users completing the purchase and lessened their frustrations with the path of the purchase process itself. Of course there are some things that we have to work on new site pages, but those will be discussed in Next Step section below.

Next Steps

1. Continue testing Sort & Compare feature discoverability

2. Host session to explore and refine ticketing types, price points, and naming conventions

3. Explore additional payment options (ie. PayPal)

4. Expand mobile experience

Leanings:

After finishing up this project, we can definitely improve the original site and can increase the number of users buying an Amtrak ticket. There is so much more we can find and improve on the website and we just ran out of time!

Where did the project leave off?

Project was left off at us making a presentation to the stakeholders and seeing how can we proceed after the approval for implementation of the new features and updates.

You can download our final presentation here: http://tiny.cc/aastfz

Change is the law of life. And those who look only to the past or present are certain to miss the future.— John F. Kennedy

Written by

UX Designer with passion for product design and the history of the world.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store