• Add to Collection
  • About

    About

    The redesign of the American Tours International (ATI) & AAA shopping cart was part of a complete ecommerce website redesign I did in 2012 with i… Read More
    The redesign of the American Tours International (ATI) & AAA shopping cart was part of a complete ecommerce website redesign I did in 2012 with in-house product managers, designers, business stakeholders and an overseas development team. Read Less
    Published:
Introduction
The redesign of the American Tours International (ATI) & AAA shopping cart was part of a complete ecommerce website redesign I did in 2012 with in-house product managers, designers, business stakeholders and an overseas development team.
Cart: Before
The cart before my redesign had an outdated look and was missing key functionality in assisting users with the checkout process.
Cart: After
In my cart redesign I updated the information architecture, prioritizing the most important information, clearly labeling prices and making calls to action clear and easy to find, at the top and bottom of the page. I also reduced a 5 step process into 3 steps and created a progress bar to always let the user know where they were in the process.
AB Testing and User Research
Before I committed to my final designs, I ran different AB tests on different versions of the UI to make sure users understood the new designs. In this AB test, participants preferred a cart progress bar that clearly showed in green, where they were in the checkout process.
User Flow Diagram
I created a user flow diagram to show, pages, accordions and state changes and the user actions to get from page to page.
Wireframe: Cart
In the wireframing process I designed accordions that had detailed information on the tours and hotels in the user's travel package.
Mockup: Cart
ATI tours often had several segments, with each segment having multiple hotels in different cities. I used accordions to collapse this detailed information by default but if the user needed to review all the final details before checkout, they could open them up.
Wireframe: Traveler Information
The Traveler Information page was the most important in the cart process because it required the user (travel agent) to provide traveler and payment information. I wanted to get all necessary fields on 1 page to limit the entire checkout to only 3 pages.
Mockup: Traveler Information
I added a trip summary module in the right of the screen, so that the user could rest assured that all the dates and locations were correct before booking their tour.
Wireframe: Booking Confirmation
The Booking Confirmation page confirmed the purchase of the tour, informing the user that an email was sent and that tour documents could be downloaded as PDFs.
Mockup: Booking Confirmation
The Booking Confirmation page also allowed users to review their trip itinerary one last time and print out tour documents.
Styleguides
Styleguides of the final mockups were created and delivered to the development team. I worked closely with the dev team to verify that the code and designs matched and assure a successful product launch.