Before Redesign
After Redesign
Introduction
The redesign of the AmericanTours International (ATI) & AAA Websites was an eight month project that I worked on with in-house product managers, designers, business stakeholders and an overseas development team. ATI is a B2B service used by travel agents that specialize in booking large group tours (e.g. groups from China would often use ATI to book tours to the Grand Canyon). I served as lead UX/UI Designer on the project doing user research, AB testing, designing wireframes and high fidelity comps and managing local junior designers and overseas front-end developers throughout the process.
The redesign of the AmericanTours International (ATI) & AAA Websites was an eight month project that I worked on with in-house product managers, designers, business stakeholders and an overseas development team. ATI is a B2B service used by travel agents that specialize in booking large group tours (e.g. groups from China would often use ATI to book tours to the Grand Canyon). I served as lead UX/UI Designer on the project doing user research, AB testing, designing wireframes and high fidelity comps and managing local junior designers and overseas front-end developers throughout the process.
Step 1: User Research & Personas
User interviews were conducted with travel agents in America, Europe and Asia to understand how they used ATI's current tools and their frustration with the experience. After a team analysis of the findings, personas were created to help guide the design and product ideation stage.
User interviews were conducted with travel agents in America, Europe and Asia to understand how they used ATI's current tools and their frustration with the experience. After a team analysis of the findings, personas were created to help guide the design and product ideation stage.
Step 2: Requirements Gathering & Documentation
Guided by the user research, nearly 700 different business, design and technical requirements were created to guide the design process and development schedule. I coordinated with project leads and business stakeholders to consult and define the project requirements and then documented the requirements to serve as a blueprint for the development and business teams.
Step 3: User Flow Diagrams
Because of the multitude of user paths in the ATI & AAA websites, User flow diagrams were created to show the user flow process from login and homepage, searching and reviewing details of a product and making a final purchase.
Because of the multitude of user paths in the ATI & AAA websites, User flow diagrams were created to show the user flow process from login and homepage, searching and reviewing details of a product and making a final purchase.
Step 4: Wireframing and Prototyping
Based upon the research gathered in the Business Requirements Document and the Personas, along with employing UX/UI best practices, I began constructing wireframes in Omnigraffle. The wireframes addressed primary user scenarios and the PDF prototypes I created were interactive allowing developers to click through the documents to understand key functionality. In addition, detailed annotations were written describing each new design element.
Based upon the research gathered in the Business Requirements Document and the Personas, along with employing UX/UI best practices, I began constructing wireframes in Omnigraffle. The wireframes addressed primary user scenarios and the PDF prototypes I created were interactive allowing developers to click through the documents to understand key functionality. In addition, detailed annotations were written describing each new design element.
Step 5: A/B and Click Through Testing
During the wireframing process I also ran A/B and click through tests to gauge user's feedback on the new designs and how they measured up to the previous web design. The testing helped inform areas for improvement and add further evidence to my project leaders that the design choices we had made were receiving positive feedback from users.
During the wireframing process I also ran A/B and click through tests to gauge user's feedback on the new designs and how they measured up to the previous web design. The testing helped inform areas for improvement and add further evidence to my project leaders that the design choices we had made were receiving positive feedback from users.
Step 6: Mockup Designs
After the wireframes were finalized, I began designing detailed mockups in Photoshop and Fireworks, while our LA and India based development teams began their work. Because I had been involved with the website redesign from the beginning, I intimately understood the new designs and could focus my energy on making the designs come to life with pixel perfect renderings. I worked closely with business-stakeholders and the Vice President of the company to define marketing goals and present a consistent message for ATI's brand.
After the wireframes were finalized, I began designing detailed mockups in Photoshop and Fireworks, while our LA and India based development teams began their work. Because I had been involved with the website redesign from the beginning, I intimately understood the new designs and could focus my energy on making the designs come to life with pixel perfect renderings. I worked closely with business-stakeholders and the Vice President of the company to define marketing goals and present a consistent message for ATI's brand.
Step 7: Style Guides
Detailed style guides were created to provide my front-end developers with pixel by pixel measurements that they then implemented in their CSS to make the final site match the comps, pixel perfect. Because the developers were in India, communication and language barriers were often a challenge and the documentation greatly helped in facilitating the development work.
Detailed style guides were created to provide my front-end developers with pixel by pixel measurements that they then implemented in their CSS to make the final site match the comps, pixel perfect. Because the developers were in India, communication and language barriers were often a challenge and the documentation greatly helped in facilitating the development work.
Step 8: Building the Test Site
In addition to managing the overseas team of front-end developers, I worked with foreign language experts to translate the site into French and German. In addition, I assisted the QA team with multi-platform browser testing and making sure the designs were working in every major browser.
In addition to managing the overseas team of front-end developers, I worked with foreign language experts to translate the site into French and German. In addition, I assisted the QA team with multi-platform browser testing and making sure the designs were working in every major browser.
Step 9: Usability and User Acceptance Testing
After the test site had been nearly built out I conducted usability and user acceptance testing. I recorded our sessions via Morae on PC and Silverback on Mac. I lead users through a series of tasks and recorded areas of success and failure. I then put together a usability report that detailed key areas for improvement, tracked defects and recorded when the defects were resolved.
After the test site had been nearly built out I conducted usability and user acceptance testing. I recorded our sessions via Morae on PC and Silverback on Mac. I lead users through a series of tasks and recorded areas of success and failure. I then put together a usability report that detailed key areas for improvement, tracked defects and recorded when the defects were resolved.
Step 10: Launch and Analytics
When the final launch came it was a big day for everybody involved. But the celebration didn't last long because then it was on to analyzing google analytics to understand where users were clicking, page views and how users were converting and making purchases.
When the final launch came it was a big day for everybody involved. But the celebration didn't last long because then it was on to analyzing google analytics to understand where users were clicking, page views and how users were converting and making purchases.
Here are some additional Wireframes and Mockups
ProMode Hotel Search Results: Wireframe
ProMode Hotel Search Results: Mockup
Hotel Details Page: Wireframe
Hotel Details Page: Mockup
Destination Landing Page: Wireframe
Destination Landing Page: Mockup
