top of page

Wireframe of 2.0 Search Screen

  • Whitehole Kong
  • Mar 20, 2017
  • 2 min read

Identify the proposed content, structure, functional behaviours of 2.0 Search Screen.

WIREFRAME AND ANNOTATIONS OF SEARCH SCREEN

Wireframe of 1.0 Home Page

  1. Search Navigate button back to 1.0 Home screen.

  2. WINES Screen title let user know which tab is showing.

  3. BY STYLE Search wine by style. There will have Light-body Red, Medium-body Red, Full-body Red, Light-body White, Full-body White, Aromatic White, Sparking, Rośe and Dessert.

  4. Light-body Red Click on this wine style button to select specific wine style.

  5. OLD WORLD List out countries and regions of old world after click on this button.

  6. NEW WORLD List out countries and regions of new world after click on this button.

  7. BY PRICE range Search wine by price range. To simply the action, we divide price into four buttons; Below HK$200, HK$201-$500, HK$501-$1500 and Over HK$1501. These buttons will control the price slider after click on it.

  8. Lower price range control Adjust the lower price range by dragging the control.

  9. Upper price range control Adjust the upper price range by dragging the control.

  10. Lower price range label Shows the lower price range after adjust.

  11. Upper price range label Shows the upper price range after adjust.

  12. BY GRPAES Search wine by grapes variety. This is depends on the stock. Normally, it will have Cabernet Sauvignon, Merlot, Pinot Noir, Syrah/Shiraz, Chardonnay…

  13. Cab. Sau. Click on this grapes variety button to select specific grapes variety.

  14. WINES Jump to WINES tab after click on it.

  15. SPIRITS Jump to SPIRITS tab after click on it.

  16. OTHERS Jump to OTHERS tab after click on it.

  17. FOOD PAIRING Jump to FOOD PAIRING tab after click on it.

  18. EVENTS Jump to EVENTS tab after click on it.

WIREFRAME AND ANNOTATIONS OF SEARCH FULL-BODY WINE SCREEN

Wireframe of Search Full-body Red Screen

  1. Reset Clear the selection of BY STYLE.

  1. Full-body Red Display the selected style only.

  2. Reset (at the bottom toolbar) Clear all the search criteria of WINES tab.

  3. Show me (570) Display the number of search result in the “()”. This will help to reduce data transmission. In this case, it will list the 570 search result on the 2.1 Search Result screen after click on this button.

WIREFRAME AND ANNOTATIONS OF SELECTING OLD WORLD REGION

Wireframe of selecting old world region

  1. OLD WORLD Hide another world after click on a world. In this case, hide NEW WORLD after click on OLD WORLD.

  2. La Rioja This Picker contain countries and regions of selected world. In this case, the Picker contain countries and regions of OLD WORLD.

WIREFRAME AND ANNOTATIONS OF SELECTED OLD WORLD REGION

Wireframe of Selected Old World Region

  1. La Rioja After a country or region selected, this section display the country icon and the name of country or region.

  2. Reset Clear selected country or region.

  3. Show me (20) List the search result on 2.1 Search Result after click on this button.

Comments

bottom of page