top of page

Screen Scenarios

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

Grouping a sequence of screens to tell meaningful stories.

SEARCH WINE BY TEXT

Wireframe of 1.0 Home Page

ANNOTATIONS

  1. Tap and make focus on the Search Field.

  2. Input the text you want to search. e.g. “Pinot Noir”

  3. Tap <Search> button.

  4. Search result show.

SEARCH WINE BY TAKING A PHOTO

Wireframe of Search Full-body Red Result Screen

ANNOTATIONS

  1. Tap the <Camera> button next to search field.

  2. To search wine by taking a photo of wine label, locate the wine label at the centre of screen. And then tap the <Take Photo> button at the bottom of screen.

  3. There a list of wine show on search result screen. Tap the wine you want to know more.

  4. Detail of the wine will be shown.

SEARCH WINE BY STYLE

Search wine by style

ANNOTATIONS

  1. Tap the <Search> tab.

  2. Tap the wine style you want. e.g. Full-body Red

  3. The toolbar at the bottom will change to show <Reset> and <Show me ({the number of search result})> button. In this scenario, there are 570 bottle of wines found. Tap the <Show me (570)> button to get the search result.

  4. Search result shown.

ADD CRITERIA TO SEARCH RESULT

Add criteria to search result

ANNOTATIONS

This is very confusing if there are too many search result comes up. To solve this problem, we designed to allow user add search criteria easily. In this scenario, we will add “La Rioja” to Full-body Red search result.

  1. Tap <Configure Search Criteria> button at the top right of screen.

  2. The search screen will pull down from top. Tap <OLD WORLD>.

  3. A Picker of countries and regions from old world will be shown. Find the country or region you want. And than tap the <OLD WORLD> once to confirm.

  4. The OLD WORLD will be changed to La Rioja with Spain country flag. The number of search result also changed to <Show me (20)> button. Tap <Show me (20)> button to get the search result.

  5. Search result shown.

SELECT WINES TO COMPARE

ANNOTATIONS

  1. To show the menu of item, drag the item to left.

  2. Menu item <Compare> and <Cart> will be shown. In this scenario, we tab <Compare>.

  3. There up to 4 wines in the compare list. If there wine(s) added to the compare list, the navigation bar at the bottom will be changed to Compare List.

  4. To start compare, you can tab the <Compare> button in the Compare List or rotate the mobile phone anti-clockwise.

Comments

bottom of page