Group Members: Dorian Anderson, Eric Chiu, Wayne Hosley, Julie Rochelle
Amtrak is a rail service that offers regional and cross-country transportation in the United States. With hundreds of unique visitors daily, amtrak.com’s primary function is conveying Amtrak’s travel service offerings and allowing customers to purchase tickets.
Our team analyzed the information architecture (IA) of amtrak.com by performing a card sort as well as comparing it to other travel sites that have similar goals. After our analysis we proposed a more intuitive structure and produced new wireframes for several user tasks.
My Role: All team members took part in analyzing all parts of the project. My individual contributions to this project include: developed site inventory, produced travel site comparison analysis, recruited participants for the card sort, proposed a new information structure (sitemap), designed an initial wireframe, built final wireframe by consolidating all member’s individual wireframes, created all wireframes for user tasks.
The prominent feature on the homepage is a carousel-like promotional banner. The design of this particular element obscures the top navigation (Destination, Experience, Schedules, Deals) by sharing a continuous aesthetic with the navigation.
Buying tickets seems to be a second-tier function as this element is placed further down the page and can easily go unnoticed by the dominance of the promotional ads surrounding it.
Homepage with menus
The homepage consists of four different menus: the main navigation menu across the top of the page, a rewards menu in the top right-hand corner, the tabbed menu in the middle of the page where users can buy tickets and modify their trips, and an extensive footer menu.
Having four different menus to navigate through can be frustrating when trying to perform a specific task. Also, the organization of the dropdown menus within the main menu seem to highlight specific pages for no apparent reason.
City Guides & Walking Tours page
Redundant Content Flows
While creating a content inventory of the entire site we noticed there are many different ways to get to a specific page. This was likely an attempt to make navigation easier; however, it ends up creating cluttered pages with too many menus to browse through.
The City Guides page houses links to different guides and attractions. It also contains a left-hand menu with duplicated links from the main menu as well as a window where the user can purchase tickets or check the status of their trip.
The redundant content flows end up overcrowding every page on the website. A simplified IA structure will allow users to navigate the site with ease while also creating a more aesthetically pleasing experience.
Partial dendrogram results from card sort
To establish sortable content for a card sorting exercise we developed an inventory by gathering every link from amtrak.com, resulting in 72 terms. From here we entered these terms into OptimalSort, where participants can perform card sorts electronically. After collecting 13 completed results, we analyzed the results and discussed the general patterns in the data.
Travel Site Comparisons
Our team felt it was necessary to consider industry standards in order to create an intuitive IA structure. Therefore, we analyzed several other travel websites. In the image below the light blue color represents main menu items, light green is a footer item and the blue-green color is anything mid-page that seemed relevant to note.
Analysis of other travel site structures
Sitemaps & Wireframes
After agreeing upon patterns in the card sorting results, we worked separately to generate proposed information structures, eventually combining them into a final sitemap. With a new information architecture, we produced and annotated low-fidelity wireframes individually then consolidated our best ideas into a final homepage wireframe.
To maintain a goal-oriented approach, we simplified the “above the fold” section of the homepage to prominently display the ticket purchasing element. The main menu has been adjusted to take the full width of the page, making its presence more evident. A smaller utilitarian menu is placed above the main menu bar.
The more exploratory elements like user testimonials and links to secondary Amtrak.com pages are placed further down the page. The use of contrasting colors used for element backgrounds will help visually break down the organization of the page.
Prototypes (Desktop & Mobile)
After updating the layout of the homepage, the group selected two functions that would be most relevant and compelling for conceptual redesign. We chose:
Task 1: booking tickets (Desktop)
Task 2: login to the membership account to view (Mobile) or modify (Desktop) upcoming trips