UX Case Study: Redesigning Amtrak Experience
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).
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.
1. GOAL
To find people who plan their travel online, specifically Amtrak
2. OPENING QUESTIONS
- What is your gender?
- Select your age range: (ranges from 18 to 55+)
- What city do you live in?
- What is your occupation?
- What is your household income?
3. PRIMARY QUESTIONS (BEHAVIORAL AND TOPICAL)
- 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.
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.
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.
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.
Here is more of a visual report on how users that we tested the original site on responded with their actions and feelings.
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.
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).
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.
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:
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.
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.
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.
Usability Testing Report
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.
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
