Breakdown of the Pain Points
- Similarity to Competitors: The web and mobile application were too similar to those of Traworld’s competitors.
- Component Hierarchy Issues: The hierarchy of components (Product Display Name, Product Features, Product Pictures, etc.) needed reconfiguration.
- Photo Visibility: Product photos were not highlighted once travelers scrolled past them.
- Excessive Scrolling: Navigating to different sections required too much scrolling.
Research
- Our research revealed that travelers prioritized "Product Photos > everything else" They were more inclined to read about the product if they were satisfied with the photos. Although we had high-quality photos, we lacked an effective placeholder. Thus, we decided that the new design should consistently highlight the product photos throughout the user's time on the page.
- The previous design used many accordions, making the page longer and requiring travelers to scroll frequently to access different sections. This also affected the add-to-cart conversion rate as call-to-action buttons were not always visible due to excessive scrolling.
Our solutions
Streamlined Navigation: To avoid long pages, we introduced a slide-in feature for package selection and details, allowing travelers to navigate seamlessly and complete purchases with fewer clicks.
Highlighting Product Photos: We experimented with various designs to emphasize product photos but found they took up too much space, restricting the display of other product information. We settled on a top section for photos to keep them visible.
E-commerce Layout: We shifted from a classic travel website layout to an e-commerce style, using a 2-column layout with a sticky left column to keep product photos always visible.
Tab Component: We replaced drop-down accordions with a tab component to reduce scrolling and simplify navigation, making call-to-action buttons more visible and accessible.
You can view the revised user flow here:
Feedback
Initially, the package details pop-up was designed solely to display information. However, based on feedback sessions, we enhanced it to allow travelers to complete their purchase activities (e.g., selecting packages and quantities) directly from the pop-up.
User testing showed that travelers loved viewing photos alongside product information, as it helped them better visualize and understand the experience. This feedback validated our design choices and confirmed the improved user experience.