2. Tour Listing Page

Wireframes and specs for the tour listing page
Step 1

2a-2b: Tour Listing 1170px

Screen 2a:

  1. Logo. Links to Page 1: Home Page
  2. 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.
  3. Search button: clicking executes the search based on the tags in the search bar in #2
  4. Title. If no search is executed, title is ‘Browse Tours’. Otherwise title is [total # of results] + [search query] + ‘Tours’.
  5. Price filter: Filters tours by price. Only 1 can be selected at a time. See 7c for ‘on state’.
  6. Category filter: Filters tours by categories. Show icons of top selling categories. See 7c for ‘on state’. Multiple categories can be selected.
  7. 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
  8. Short Description: 90-character max short description
  9. 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.
  10. Tour title: Title of tour. Link to Page 3: Tour Detail Page
  11. Tour location: Location of first activity in tour
  12. Tour categories: Icons + Categories of the top 3 activities in the tour
  13. Rating: Dynamic icon that ‘fills up’ according to the % of users that felt tour was ‘worth it’
  14. Company watermark: Semi-transparent watermark of tour company. Link to company detail page
  15. Price/Buy Now button: Show price and ‘book now’. Button links to Checkout Page
  16. Load 10 tours by default, then auto-load 10 more as user scrolls to fifth tour.

Screen 2b:
On scroll down/swipe up, show filters in a fixed header bar.

Step 2

Screen 2c/d: Tour Listing Default 768x1024 Tablet Portrait

Screen 2c:
Load up to 6 photos per tour and allow user to swipe left/right through photos.

Screen 2d:
On scroll down/swipe up, title bar and filters convert to fixed position. On scroll up/swipe down, restore state from Screen 2c.

Step 3

Screen 2e/f: Tour Listing Default 569x320 16:9 Phone Landscape

Screen 2e:
Increase size of photo to fit 100% width of screen.

Screen 2f:
On scroll down/swipe up, used fixed position for the title bar and filters. On scroll up/swipe down, restore state from Screen 2e.

Step 4

Screen 2g-k: Tour Listing Default 320x569 9:16 Phone Portrait

Screen 2g:

  1. Render search bar as icon.
  2. Center logo.
  3. Hide category filters.
  4. Move title, location, and buy button above the photo.
  5. Move the description below the photo.

Screen 2h:
Auto suggest results from tag database. Example matches for a query of ‘GRE’ could be ‘Greece’, ‘Great white shark cage diving’, or ‘Green eco-tours’

Show results of search query

On scroll down/swipe up, fix the title bar of the tour to the top of the screen.

When 80% of the tour height has been scrolled, change the position of the that tour’s title bar from fixed to relative.

Step 5

Visual Design

Visual design for the tour listing page.

Scrolled state:

Tutorial Forum

There are no posts here yet. Add the first post