Tag-based search bar: User can search by tag, such as location, activity, or boat. Typing a comma (,) renders the query into a tag with a delete button (x), which removes the tag from the search bar. Matching queries from the database will be suggested below the search bar (see Screen 2h). Search executes when clicking ‘enter’ or the search icon from #3.
Search button: clicking executes the search based on the tags in the search bar in #2
Title. If no search is executed, title is ‘Browse Tours’. Otherwise title is [total # of results] + [search query] + ‘Tours’.
Price filter: Filters tours by price. Only 1 can be selected at a time. See 7c for ‘on state’.
Category filter: Filters tours by categories. Show icons of top selling categories. See 7c for ‘on state’. Multiple categories can be selected.
All categories dropdown menu: Put remaining categories in this menu.
a. clicking the down arrow expands the menu
b. clicking a category displays the icon in the main filter bar in highlighted state and filters the tours accordingly
Short Description: 90-character max short description
Photo slider: Photos link to Page 3: Tour Detail Page. Load up to 6 photos into slider. Photos are 3:2 aspect ratio. Show as many photos as can fit. On larger screens, 4 photos will be displayed, while on smaller screens, 2, or just 1 photo will fit.
9a. Only on desktop, show < > arrows on hover. Clicking slides through photos. Hide on mobile devices.
Tour title: Title of tour. Link to Page 3: Tour Detail Page
Tour location: Location of first activity in tour
Tour categories: Icons + Categories of the top 3 activities in the tour
Rating: Dynamic icon that ‘fills up’ according to the % of users that felt tour was ‘worth it’
Company watermark: Semi-transparent watermark of tour company. Link to company detail page
Price/Buy Now button: Show price and ‘book now’. Button links to Checkout Page
Load 10 tours by default, then auto-load 10 more as user scrolls to fifth tour.
On scroll down/swipe up, show filters in a fixed header bar.