UX/UI Designers, Developers, Product Manager, QA
Date
2024
Project / Client
AAT Kings (Travel & Tour)
The goal was to design a seamless online brochure experience for AAT Kings that allows users to search, customize, and create their own brochures from available tours. I designed two journey variations for desktop to explore interaction depth, user clarity, and reduced friction.
Flow Version 1: Off-Drawer Canvas Experience
Objective: Create a layered, progressive journey where the brochure interaction feels like an added feature rather than a redirect.
🔹 Key Steps:
Search Page Interaction:
Clicking “Add a brochure” triggers an alert notification + a red dot indicator.
Once selected, text turns red and a tick icon confirms selection.
Brochure Summary (Off-Drawer Canvas):
Clicking the Brochure icon slides in a side drawer.
Users can add more tours or proceed to create their brochure.
Registration Step:
Upon clicking “CREATE YOUR BROCHURE”, users enter a form within the drawer, tailored for customer or trade.
Brochure Viewer – Australia 2024/25:
A loading stencil is used for better perceived performance.
Full interaction once loaded: zoom, download, print, search, page thumbnails.
A progress bar shows navigation (e.g., Page 2 & 3 / 41).
Highlight Text Search (concept): Allows keyword search with result highlighting.
🚀 Flow Version 2: Streamlined Interaction (Fewer Clicks)
Objective: Provide a quicker path to brochure creation using modal interactions and fewer steps.
🔸 Key Steps:
Search Page Interaction:
Clicking “Add a brochure” or the Brochure icon triggers the registration modal directly.
On submit, user returns to the search page and can begin selecting brochures.
Alert notification appears with updated styling.
“Added to Brochure” shows red text and a tick.
Brochure Summary (Off-Drawer Canvas):
Similar to Flow 1, clicking the Brochure icon opens a summary drawer.
Users can add more tours or click to create the brochure.
Brochure Viewer – Australia 2024/25 (Streamlined):
Maintains the current UI pattern but introduces a loading animation for a smoother transition.
Reduces unnecessary clicks compared to the existing platform.
- Outcomes & Considerations
- Created two journeys to balance interactivity vs. efficiency.
Integrated real-time feedback through alerts and visual confirmations.
Established a scalable brochure viewer for multiple assets and formats.
Mobile design is still under consideration to align with responsive behaviour.