Date post: | 06-Apr-2018 |
Category: |
Documents |
Upload: | balaji-ravi |
View: | 222 times |
Download: | 0 times |
of 70
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
1/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 1 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
Client Name: SchlageProject Name: Schlage Consumer Mobile Web Site
Job #: SCH0086ABAuthors: White Horse User Experience Team
Last Modified: 9/9/2011
UI Functional SpecificationsThis document contains Consumer Mobile Web Site schematics annotated with functional notes
related to information presentation and interactions.
This document accompanies
SCH0086 Site Map v2
Interactive wireframes accessible via:
http://comps.whitehorse.com/axure/SCH0087_consumer_Mobile/SCH0087_v2
Feature Matrix (SCH0086AB_FeatureMatrix)
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
2/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 2 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
Table of Contents
1.1. Home .................................................................................................................................................................. 6
1.1.1. Wireframe ................................................................................................................................................... 6
1.1.2. Wireframe Element Details ......................................................................................................................... 7
1.2. Product Quick Finder .......................................................................................................................................... 8
1.2.1. Wireframe ................................................................................................................................................... 8
1.2.2. Wireframe Element Details ......................................................................................................................... 9
1.3. Bar Code Scan: No Results .............................................................................................................................. 10
1.3.1. Wireframe ................................................................................................................................................. 10
1.3.2. Wireframe Element Details ....................................................................................................................... 11
1.4. Products: Primary Landing Page ...................................................................................................................... 12
1.4.1. Wireframe ................................................................................................................................................. 12
1.4.2. Wireframe Element Details ....................................................................................................................... 13
1.5. Products: Secondary Landing Page: List View ................................................................................................. 14
1.5.1. Wireframe ................................................................................................................................................. 14
1.5.2. Wireframe Element Details ....................................................................................................................... 15
1.6. Secondary Landing Page: Gallery View ........................................................................................................... 16
1.6.1. Wireframe ................................................................................................................................................. 16
1.6.2. Wireframe Element Details ....................................................................................................................... 17
1.7. Finish Selection List ......................................................................................................................................... 18
1.7.1. Wireframe ................................................................................................................................................. 18
1.7.2. Wireframe Element Details ....................................................................................................................... 181.8. Lock Type Selection List................................................................................................................................... 19
1.8.1. Wireframe ................................................................................................................................................. 19
1.8.2. Wireframe Element Details ....................................................................................................................... 19
1.9. Filtered Results ................................................................................................................................................ 20
1.9.1. Wireframe ................................................................................................................................................. 20
1.9.2. Wireframe Element Details ....................................................................................................................... 21
1.10. Product Detail: Knob ...................................................................................................................................... 22
1.10.1. Wireframe ............................................................................................................................................... 22
1.10.2. Wireframe Element Details ..................................................................................................................... 23
1.11. Product Detail: Fully Expanded ...................................................................................................................... 241.11.1. Wireframe ............................................................................................................................................... 24
1.11.2. Wireframe Element Details ..................................................................................................................... 25
1.12. Knob: Finish Selection List ............................................................................................................................. 26
1.12.1. Wireframe ............................................................................................................................................... 26
1.12.2. Wireframe Element Details ..................................................................................................................... 26
1.13. Knob: Lock Type Selection List ...................................................................................................................... 27
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
3/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 3 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.13.1. Wireframe ............................................................................................................................................... 27
1.13.2. Wireframe Element Details ..................................................................................................................... 27
1.14. Compare Products: One ................................................................................................................................. 28
1.14.1. Wireframe ............................................................................................................................................... 28
1.14.2. Wireframe Element Details ..................................................................................................................... 29
1.15. Product Detail: Selected Compare ................................................................................................................. 30
1.15.1. Wireframe ............................................................................................................................................... 30
1.15.2. Wireframe Element Details ..................................................................................................................... 31
1.16. Compare Products: Two ................................................................................................................................. 32
1.16.1. Wireframe ............................................................................................................................................... 32
1.16.2. Wireframe Element Details ..................................................................................................................... 33
1.17. Descriptive Category Landing Page ............................................................................................................... 34
1.17.1. Wireframe ............................................................................................................................................... 34
1.17.2. Wireframe Element Details ..................................................................................................................... 34
1.18. Descriptive Category Landing Interactive ....................................................................................................... 35
1.18.1. Wireframe ............................................................................................................................................... 35
1.18.2. Wireframe Element Details ..................................................................................................................... 35
1.19. Search ............................................................................................................................................................ 36
1.19.1. Wireframe ............................................................................................................................................... 36
1.19.2. Wireframe Element Details ..................................................................................................................... 36
1.20. Search Results ............................................................................................................................................... 37
1.20.1. Wireframe ............................................................................................................................................... 37
1.20.2. Wireframe Element Details ..................................................................................................................... 38
1.21. Where to Buy .................................................................................................................................................. 39
1.21.1. Wireframe ............................................................................................................................................... 39
1.21.2. Wireframe Element Details ..................................................................................................................... 39
1.22. WTB: Nearest Store ....................................................................................................................................... 40
1.22.1. Wireframe ............................................................................................................................................... 40
1.22.2. Wireframe Element Details ..................................................................................................................... 41
1.23. WTB: Zip Code ............................................................................................................................................... 42
1.23.1. Wireframe ............................................................................................................................................... 42
1.23.2. Wireframe Element Details ..................................................................................................................... 43
1.24. WTB: Order Online ......................................................................................................................................... 44
1.24.1. Wireframe ............................................................................................................................................... 44
1.24.2. Wireframe Element Details ..................................................................................................................... 45
1.25. Contact Us ...................................................................................................................................................... 46
1.25.1. Wireframe ............................................................................................................................................... 46
1.25.2. Wireframe Element Details ..................................................................................................................... 46
1.26. Contact Us: Online request ............................................................................................................................ 47
1.26.1. Wireframe ............................................................................................................................................... 47
1.26.2. Wireframe Element Details ..................................................................................................................... 48
1.27. One column secondary page layout ............................................................................................................... 49
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
4/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 4 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.27.1. Wireframe ............................................................................................................................................... 49
1.28. How to Choose ............................................................................................................................................... 50
1.28.1. Wireframe ............................................................................................................................................... 50
1.28.2. Wireframe Element Details ..................................................................................................................... 50
1.29. The Right Style ............................................................................................................................................... 51
1.29.1. Wireframe ............................................................................................................................................... 51
1.29.2. Wireframe Element Details ..................................................................................................................... 51
1.30. Knobs, Levers, Handlesets ............................................................................................................................. 52
1.30.1. Wireframe ............................................................................................................................................... 52
1.30.2. Wireframe Element Details ..................................................................................................................... 52
1.31. Finishes .......................................................................................................................................................... 53
1.31.1. Wireframe ............................................................................................................................................... 53
1.31.2. Wireframe Element Details ..................................................................................................................... 53
1.32. Home Security ................................................................................................................................................ 54
1.32.1. Wireframe ............................................................................................................................................... 54
1.33. Replacing Existing Hardware ......................................................................................................................... 55
1.33.1. Wireframe ............................................................................................................................................... 55
1.34. Installation ...................................................................................................................................................... 56
1.34.1. Wireframe ............................................................................................................................................... 56
1.34.2. Wireframe Element Details ..................................................................................................................... 57
1.35. FAQs .............................................................................................................................................................. 58
1.35.1. Wireframe ............................................................................................................................................... 58
1.35.2. Wireframe Element Details ..................................................................................................................... 58
1.36. Hardware ........................................................................................................................................................ 59
1.36.1. Wireframe ............................................................................................................................................... 59
1.37. Design and Finishes ....................................................................................................................................... 60
1.37.1. Wireframe ............................................................................................................................................... 60
1.38. Electronic Products ........................................................................................................................................ 61
1.38.1. Wireframe ............................................................................................................................................... 61
1.39. Security .......................................................................................................................................................... 62
1.39.1. Wireframe ............................................................................................................................................... 62
1.40. Installation ...................................................................................................................................................... 63
1.40.1. Wireframe ............................................................................................................................................... 63
1.41. Why Schlage .................................................................................................................................................. 64
1.41.1. Wireframe ............................................................................................................................................... 64
2. Common Page Template Components................................................................................................................. 65
2.1. Header_Basic ................................................................................................................................................... 66
2.1.1. Wireframe ................................................................................................................................................. 66
2.1.2. Wireframe Element Details ....................................................................................................................... 66
2.2. Footer_Home_noWTB...................................................................................................................................... 67
2.2.1. Wireframe ................................................................................................................................................. 67
2.2.2. Wireframe Element Details ....................................................................................................................... 67
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
5/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 5 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
2.3. Footer_secondary_noWTB ............................................................................................................................... 68
2.3.1. Wireframe ................................................................................................................................................. 68
2.3.2. Wireframe Element Details ....................................................................................................................... 68
2.4. Footer_ProductDetail_WTB .............................................................................................................................. 69
2.4.1. Wireframe ................................................................................................................................................. 69
2.4.2. Wireframe Element Details ....................................................................................................................... 69
2.5. Utility Navigation Drop-Down Menu .................................................................................................................. 70
2.5.1. Wireframe ................................................................................................................................................. 70
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
6/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 6 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.1. Home
Site is optimized for 320 width in portrait orientation. However, if possible, implement site to scale to viewport (screenviewing area). If user changes orientation to landscape, scale viewport width and increase text size proportionally.Also, in landscape orientation only, add Menu drop-down to Home Page global utility navigation area.
ENTIRE SITE: Refer to Design deliverable for all button states and corresponding visual treatments.
1.1.1. Wireframe
13
12
1
6 7 8 9
10
11
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
7/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 7 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.1.2. Wireframe Element Details
Footnote Label Description Interactions
1 Schlage Logo(Home)
Clicking on Schlage logo returns user to home page. If onhome page, clicking on logo reloads the page.
2-5 ImageCarouselIndicators
See Carousel notes in footnote 12 below.
6 ProductQuick Finder
Takes user to corresponding landing page within site. OnClick:Case 1:Open Product Quick Finder in
Current Window
7 Why Schlage Takes user to corresponding landing page within site. OnClick:Case 1:Open Why Schlage in Current
Window
8 How to
Choose
Takes user to corresponding landing page within site. OnClick:
Case 1:Open How to Choose in CurrentWindow
9 Ready toInstall
Takes user to corresponding landing page within site. OnClick:Case 1:Open Installation in Current
Window
10 Search Takes user to search term entry page. OnClick:Case 1:Open Search in Current Window
11 Where to Buy Takes user to corresponding landing page within site. OnClick:Case 1:Open Where to Buy in Current
Window
12 Home PageCarousel
Carousel can include from 1 to 4 images; if only one image donot show carousel buttons. Carousel images will auto-rotateat a set frequency or users can manually navigate through theimages.
TECHNICAL CONSIDERATION: Evaluate Sencha Touch'scarousel control for built-in functionality. Does control easilyallow "swipe" to navigate through carousel images or does itrequire navigation such as right/left arrows and/or tapablegallery buttons (as shown)?
Carousel images will include text with calls to action that deeplink to pages within the site or link to unique promotionallanding pages.
13 Home Page:Footer
Home page footer is unique from secondary pages in that itdoes not include a Why Schlage link. Note that secondary
pages and product detail pages have specific footertreatments.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
8/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 8 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.2. Product Quick Finder
1.2.1. Wireframe
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
9/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 9 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.2.2. Wireframe Element Details
Footnote Label Description Interactions
1 Products: ByCategory
Takes user to the By Category Primary Landing Page. OnClick:Case 1:
Open Products: PrimaryLanding Page in CurrentWindow
2 Search Takes user to search results landing page. OnClick:Case 1:
Open Search Results inCurrent Window
3 Initiate BarCode Scan
Clicking on button launches integrated bar code scanner. Functionalitywould allow user to use mobile device's built-in camera to capture a barcode image and initiate search.
If device does not have a bar code scanner, take user to Bar CodeResults Page where user can manually enter in the bar code.
TECHNICAL CONSIDERATION: If not possible to integrate a bar codescanner, replace button with a text entry field and corresponding searchbutton to allow user to manually enter in the bar code.
OnClick:Case 1:
Open Bar Code Scan:No Results in CurrentWindow
4 Instructionaltext
Link takes user to a single page that includes instructional text andimages related to where to find the product bar code to scan.
5 Products: ByFinish
Takes user to the By Finish Primary Landing Page, which lists allavailable product finishes. See current full site, Products landing page,left channel for all possible options.
OnClick:Case 1:
Open Products: PrimaryLanding Page in CurrentWindow
6 Products: ByLock Type
Takes user to the Lock Type Primary Landing Page, which lists all locktypes available. See current full site, Products landing page, left channelfor all possible options.
OnClick:Case 1:
Open Products: PrimaryLanding Page in Current
Window
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
10/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 10 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.3. Bar Code Scan: No Results
This page demonstrates the Bar Code Scan results page when no items are found that match the scanned bar code,or if bar code scan does not register properly or if device does not have integrated camera.
1.3.1. Wireframe
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
11/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 11 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.3.2. Wireframe Element Details
Footnote Label Description Interactions
1 BrowseProductsLinks
Same links as on Product Quick Finder landing page; links take user tocorresponding primary landing pages.
OnClick:Case 1:
Open Products:Primary LandingPage in CurrentWindow
2 Search Takes user to search results page. OnClick:Case 1:
Open SearchResults in CurrentWindow
3 Instructionaltext
Link takes user to a single page that includes instructional text and images onwhere to find the product bar code to scan.
4 Bar CodeSearch
If user enters bar code, system should search for corresponding products. If noresults are returned, take user back to this page. If a product is found, present
results list (similar format to search results page with Products filter) to allowuser to confirm that system found correct product. User would navigate toproduct page by tapping on product name link.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
12/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 12 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.4. Products: Primary Landing Page
This page layout can be used to list and link to landing pages for specific Product Categories, Finishes, or LockTypes. This is similar to the behavior on the current full site Products landing page where users can click on acategory (center channel), finish or lock type (right channel) to view a page listing the filtered view of all related
products.
1.4.1. Wireframe
5
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
13/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 13 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.4.2. Wireframe Element Details
Footnote Label Description Interactions
1 Demonstration Link Note that blue color is left over artifact from interactiveschematics and is intended to show clickable link fordemonstration purposes.
NOTE: refer to design comps for button selected states
OnClick:Case 1:
Open Products: SecondaryLanding Page: List View in CurrentWindow
2 View Toggle Allows user to toggle between list view and gallery view.Default is List View (Shown); See corresponding schematicfor gallery layout.
Area below page title is the area that changes when view istoggled between list and gallery.
3 Primary LandingPage Title
This page layout should be used for Products: By Category;Products: By Finish; and Products: By Lock Type.
4 Breadcrumbs Breadcrumbs should reference the previous page only.
5 List Item links Tap anywhere on horizontal list item takes user tocorresponding Category Landing Page. List items should bedynamically populated.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
14/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 14 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.5. Products: Secondary Landing Page: List View
On landing the category landing page shows all available related products in a list view. Users can apply filters to thepage which results in a modified page layout showing filtered results only (see Filtered Results Page wireframe).Users can also toggle the view between a list and gallery presentation (see corresponding Gallery view schematic).
Tap on horizontal list item takes user to corresponding product detail page.
1.5.1. Wireframe
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
15/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 15 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.5.2. Wireframe Element Details
Footnote Label Description Interactions
1 View Toggle Allows user to toggle between list view and gallery view.Default is List View (Shown); See corresponding schematic forgallery layout.
Area below page title is the area that changes when view istoggled between list and gallery.
OnClick:Case 1:
Open Secondary LandingPage: Gallery View in CurrentWindow
2 Finish Filter Allows user to filter presented list items by finish. Seecorresponding schematics for finish selection list page format(Page Layout 6a: List Page).
For Products: By Finish--narrow by filters include Category andLock TypeFor Products: Lock Type--narrow by filters include Category andFinish
OnClick:Case 1:
Open Finish Selection List inCurrent Window
3 Lock Type Filter Allows user to filter presented list items by lock type. Seecorresponding schematics for lock type selection list page
format.
For Products: By Finish--narrow by filters include Category andLock TypeFor Products: Lock Type--narrow by filters include Category andFinish
OnClick:Case 1:
Open Lock Type Selection Listin Current Window
5 DemonstrationLink
Note that blue color is left over artifact from interactiveschematics and is intended to show clickable link fordemonstration purposes.
OnClick:Case 1:
Open Product Detail: Knob inCurrent Window
6 Number of filteredresults
Present number of related products based on applied filters. Inthis view no filters have been applied.
7 List Sub-titles
(optional)
In cases where subtitles are needed (eg, to differentiate
Schlage locks from Dexter locks), include a subtitle to break uplist items appropriately.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
16/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 16 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.6. Secondary Landing Page: Gallery View
Demonstrates Gallery view of Specific Category Landing page.Tap on image or product name takes user to corresponding product detail page.
1.6.1. Wireframe
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
17/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 17 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.6.2. Wireframe Element Details
Footnote Label Description Interactions
1 Demonstration Link Note that blue color is left over artifact frominteractive schematics and is intended to showclickable link for demonstration purposes.
OnClick:Case 1:
Open Secondary Landing Page: GalleryView in Current Window
2 Finish Filter Allows user to filter presented list items byfinish. See corresponding schematics forfinish selection list page format (Page Layout6a: List Page).
For Products: By Finish--narrow by filtersinclude Category and Lock TypeFor Products: Lock Type--narrow by filtersinclude Category and Finish
OnClick:Case 1:
Open Finish Selection List in CurrentWindow
3 Lock Type Filter Allows user to filter presented list items by locktype. See corresponding schematics for locktype selection list page format.
For Products: By Finish--narrow by filtersinclude Category and Lock Type
For Products: Lock Type--narrow by filtersinclude Category and Finish
OnClick:Case 1:
Open Lock Type Selection List in CurrentWindow
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
18/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 18 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.7. Finish Selection List
If the user selects to narrow the Landing Page by Finish the user will be presented with this list of available finishes.User selects a finish by touching on the corresponding name or surrounding horizontal area; selection automaticallyreturns user to Specific Product Category Landing Page showing filtered results. Present results in last preferred
view (eg, list or gallery). List must demonstrate what the currently selected finish is (shown here in Bold).
Note that Selection List pages do not include breadcrumbs.
Note that blue color is left over artifact from interactive schematics and is intended to show clickable link fordemonstration purposes.
1.7.1. Wireframe
1.7.2. Wireframe Element Details
Footnote Label Description Interactions
2 Demonstration Link Note that blue color is left over artifact from interactive schematics and isintended to show clickable link for demonstration purposes.
OnClick:Case 1:Open Filtered
Results in CurrentWindow
3 Selected List Item Highlight current selection in list with different visual treatment.
4 Landing Page FinishFilter Selection List
Note that when user selects a finish as a filter, the number of productscorresponding to that finish is displayed to the left of the finish name.This applies also to Lock Type and category selection lists.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
19/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 19 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.8. Lock Type Selection List
If the user selects to narrow the Specific Product Category Landing Page by Lock Type the user will be presentedwith this list of available lock types. User selects a type by touching on the corresponding name or surroundinghorizontal area; selection automatically returns user to Specific Product Category Landing Page showing filtered
results. Present results in last preferred view (eg, list or gallery). List must demonstrate what the currently selectedtype is (shown here in Bold).
Note that Selection List pages do not include breadcrumbs.
1.8.1. Wireframe
1.8.2. Wireframe Element Details
Footnote Label Description
1 Lock Type FilteredResults Selection List
Note that when user selects lock type as a f ilter, the number of products corresponding to thatlock type is displayed to the left of the finish name. This applies also to finish and categoryselection lists.
2 Selected List Item Highlight current selection in list with different visual treatment.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
20/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 20 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.9. Filtered Results
1.9.1. Wireframe
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
21/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 21 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.9.2. Wireframe Element Details
Footnote Label Description Interactions
1 Applied Filters Demonstrates specific product category landing page showing appliedfilters. User can change corresponding filter by touching the changebutton, which takes user to corresponding selection list (finish or locktype).
Note that if a filter is applied, it is shown under current filters and notin the narrow by area.
OnClick:Case 1:
Open Finish SelectionList in Current Window
2 DemonstrationLink
Note that blue color is left over artifact from interactive schematics andis intended to show clickable link for demonstration purposes.
OnClick:Case 1:
Open Product Detail:Knob in Current Window
3 Lock TypeSelection List
Take user to lock type selection list. OnClick:Case 1:
Open Lock TypeSelection List in CurrentWindow
4 View Toggle(Gallery)
Gallery view is currently shown in schematic. Allow users to use viewtoggle to change page content visual presentation.
OnClick:Case 1:
Open SecondaryLanding Page: Gallery Viewin Current Window
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
22/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 22 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.10. Product Detail: Knob
1.10.1. Wireframe
2
10
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
23/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 23 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.10.2. Wireframe Element Details
Footnote Label Description Interactions
1 Product FinishSelection List
Takes user to configuration option selection list.
2 Product Lock Type
ConfigurationSelection List
Takes user to configuration option selection list.
3 Share: Text Share content would include at a minimum a link to the mobile page being shared.
If integrated with native phone capability, user would remain on this page after shareis complete; no separate confirmation messaging.
TECHNICAL CONSIDERATION: Schlage request is integration with phones nativefunctionality; confirm ability to integrate with native text functionality. If both sharefeatures cannot integrate with native capabilities, WH recommends implementingforms within the mobile site for each capability.
4 Share: Email Share content would include at a minimum a link to the mobile page being shared;recommendation is to use current email formatting / messaging business rulessimilar to those used on full site for sharing the shopping list via email (inclusion ofproduct photo, short description, link to product page). Ensure that "sender" contentidentifies Schlage. Subject should reflect Schlage Product Details.
If integrated with native phone capability, user would remain on this page after shareis complete; no separate confirmation messaging.
TECHNICAL CONSIDERATION: Schlage request is integration with phones nativefunctionality; confirm ability to integrate with native text functionality. If both sharefeatures cannot integrate with native capabilities, WH recommends implementingforms within the mobile site for each capability.
5 Compare Takes user to compare page and adds item to compare list. See correspondingschematic.
6 User Reviews Incorporate average user rating and number of reviews averaged for this rating.TECHNICAL CONSIDERTION: Implementation will depend on capabilities ofselected review aggregation service.
7 Share toFacebook
Like should be unique to each detail page. (ie, like applies to specific product beingviewed). Follow standard like posting functionality.
8 Share: Twitter Tweet should be unique to each detail page. (ie, tweet applies to specific productbeing viewed). Follow standard tweet posting functionality.
9 ProductConfigurationOptions
"As Shown" links demonstrate current configuration selected and being shown inimage. Touching on link takes user to corresponding selection list. Number next toconfiguration name represents the number of options available.
10 Product Model Change image, model number and Feature list description to correspond to selectedconfiguration options selected. (This is current full site behavior)
11 Product Features Description changes to correspond to selected configuration options selected. (Thisis current full site behavior)
12 DetailExpand/Collapse
Item areas with an arrow expand down to reveal related content. Default state is allcollapsed.
User can touch anywhere in related horizontal bar area to expand section (See"Product Detail: Fully Expanded wireframe for complete formatting)
13 Available Finishes Available Finishes section: Include number of available finishes in title. Allow userto select a new finish by touching on a finish thumbnail once section is expanded. Ifuser changes the finish, refresh image and finish name to the right of the image (top)to show new finish. Visually indicate which finish is currently selected (being shown)by showing relevant finish swatch with blue box outline.
14 Related Products Related products section is always shown in an expanded view. Include up to tworelated products. (For related products, use same logic as on full site).Touching on product name takes user to corresponding product detail page.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
24/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 24 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.11. Product Detail: Fully Expanded
This wireframe demonstrates a product detail page with all sections fully expanded. Default landing state is allcollapsed. User should be able to expand all sections without other sections collapsing when a new section isopened.
REFER TO PRODUCT DETAIL: KNOB for additional details about content shown on this page.
1.11.1. Wireframe
Page Continues Below
Page Continues Right
2
12
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
25/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 25 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.11.2. Wireframe Element Details
Footnote Label Description Interactions
1 ProductFinishSelection List
Takes user to configuration option selection list. OnClick:Case 1:
Open Knob:Finish SelectionList in CurrentWindow
2 Product LockTypeConfigurationSelection List
Takes user to configuration option selection list. OnClick:Case 1:
Open Knob:Lock TypeSelection List inCurrent Window
3 Share: Text Share content would include at a minimum a link to the mobile page being shared. Ifintegrated with native phone capability, user would remain on this page after share iscomplete; no separate confirmation messaging.
TECHNICAL CONSIDERATION: Schlage request is integration with phones nativefunctionality; confirm ability to integrate with native text functionality. If both share featurescannot integrate with native capabilities, WH recommends implementing forms within themobile site for each capability.
4 Share: Email Share content would include at a minimum a link to the mobile page being shared;
recommendation is to use current email formatting / messaging business rules similar to thoseused on full site for sharing the shopping list via email (inclusion of product photo, shortdescription, link to product page). Ensure that "sender" content identifies Schlage. Subjectshould reflect Schlage Product Details. If integrated with native phone capability, user wouldremain on this page after share is complete; no separate confirmation messaging.
TECHNICAL CONSIDERATION: Schlage request is integration with phones nativefunctionality; confirm ability to integrate with native text functionality. If both share featurescannot integrate with native capabilities, WH recommends implementing forms within themobile site for each capability.
5 Compare Takes user to compare page and adds item to compare list. See correspondingschematic.
6 FindRetailers:
CurrentLocation
When this button is selected, user will be prompted by mobile device to allow ordisallow web site from using current location information. If user selects allow,
present users with results (see supporting schematic). If user selects dont allow,keep user on this page and prompt user to enter a zip code.
OnClick:Case 1:
Open WTB:Nearest Store inCurrent Window
7 FindRetailers: ByZip Code
Take users to results view on the Where to Buy page. If zip code is not recognizedor no results are found, present text error message on line below zip code entryfield that states No retail locations were found for that zip code. Please check thezip code or try using the Use Current Location feature
8 OnlineRetailers
Take user to Online retailer page to display the list of retailers. OnClick:Case 1:
Open WTB:Order Online inCurrent Window
9 Where to Buy This schematic demonstrates the presentation of the expanded Where to Buysection within a product detail page. Content and formatting is applicable to thissection for all products.
10 InstallationDocuments
List PDF manuals and related videos only (do not include template files.) Forvideos, the box shown is supposed to be an icon indicating that the link is a video(purposely placed in front of the link).
11 ProductDetail: Footer
Footer in Products is different than other secondary pages in that it includes aWhere to Buy link and does not include a Why Schlage link. Likewise this isdifferent than the Home page.
12 SelectedFinish
Visually indicate which finish is currently selected (being shown) by showingrelevant finish swatch with blue box outline.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
26/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 26 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.12. Knob: Finish Selection List
Note that Selection List pages do not include breadcrumbs.
1.12.1. Wireframe
1.12.2. Wireframe Element Details
Footnote Label Description Interactions
2 Productdetail: FinishSelection List
If user is on a product detail page and selects to change a product configuration option(finish options shown), user is shown a selection list view. User selects a f inish bytouching on the corresponding name or surrounding horizontal area; selectionautomatically returns user to product detail page showing updated content correspondingto configuration selection chosen. List must visually demonstrate what the currentlyselected finish is (shown here in Bold).NOTE: Images show selected product in corresponding finish.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
27/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 27 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.13. Knob: Lock Type Selection List
Note that Selection List pages do not include breadcrumbs.
1.13.1. Wireframe
1.13.2. Wireframe Element Details
Footnote Label Description Interactions
2 Product detail:
Lock TypeSelection List
If user is on a product detail page and selects to change a product configuration option
(lock type options shown), user is shown a selection list view. User selects a lock type bytouching on the corresponding name or surrounding horizontal area; selectionautomatically returns user to product detail page showing updated content correspondingto configuration selection chosen. List must visually demonstrate what the currentlyselected lock type is (shown here in Bold).
NOTE: Images show selected product in currently selected lock type and finish.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
28/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 28 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.14. Compare Products: One
1.14.1. Wireframe
11
12
14
Page Continues Right
10
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
29/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 29 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.14.2. Wireframe Element Details
Footnote Label Description Interactions
1 ProductDetail PageLink
Link takes user to corresponding product detail page.
2 Share: Text Share content would include at a minimum a link to the mobile page being shared. Ifintegrated with native phone capability, user would remain on this page after share iscomplete; no separate confirmation messaging.
TECHNICAL CONSIDERATION: Schlage request is integration with phones nativefunctionality; confirm ability to integrate with native text functionality. If both sharefeatures cannot integrate with native capabilities, WH recommends implementing formswithin the mobile site for each capability.
3 Share: Email Share content would include at a minimum a link to the mobile page being shared.Ensure that "sender" content identifies Schlage. Subject should reflect Schlage ProductComparison. If integrated with native phone capability, user would remain on this pageafter share is complete; no separate confirmation messaging.
TECHNICAL CONSIDERATION: Schlage request is integration with phones nativefunctionality; confirm ability to integrate with native text functionality. If both share
features cannot integrate with native capabilities, WH recommends implementing formswithin the mobile site for each capability.
4 Search Button takes user to search results page.
5 Share All share options are contextual: shared content corresponds to the items selected in theCompare page at the time of share.
6 Remove Item Remove link removes item and all corresponding information from list. There is noconfirmation before the item is removed.
7 Browse bycategory
Link takes users to corresponding product primary landing page.
8 Browse byFinish
Link takes users to corresponding product primary landing page.
9 Browse byLock Type
Link takes users to corresponding product primary landing page.
10 CompareProducts
Allow any combination of product comparison (eg, do not limit to one product category)
Validate if available content types for all product categories are comparable. If not, limitproducts that can be included in comparison.
11 CompareDetailSections
Recommended sections, in order (top to bottom), for comparison: Features; AvailableFinishes (when applicable); Customer Reviews; Product Specifications.
12 Formatting Include equal amounts of horizontal rows for each product to accommodate maximumproduct features. If one item has fewer features than the comparison item, leave theempty rows blank for that product.
13 SelectedFinish
Visually indicate which finish is currently selected (being shown) by showing relevantfinish swatch with blue box outline.
14 CustomerReviews
Modify content shown in the customer reviews section based on capabilities/functionalityof review service selected (eg, Bazaar Voice)
15 FeatureDetails
Recommend optimizing compare content for optimized mobile presentation.
16 ProductSpecifications
Recommend optimizing compare content for optimized mobile presentation.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
30/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 30 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.15. Product Detail: Selected Compare
Template recommendation: This page is identical to the product detail page with the exception of the comparisonreference (ID=6). Recommend building one product detail page that includes everything, including the comparisonreference, but hiding the comparison reference until triggered by the Compare button.
1.15.1. Wireframe
6
2
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
31/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 31 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.15.2. Wireframe Element Details
Footnote Label Description Interactions
1 Product FinishSelection List
Takes user to configuration option selection list. OnClick:Case 1:
Open Knob:Finish SelectionList in CurrentWindow
2 Product LockTypeConfigurationSelection List
Takes user to configuration option selection list. OnClick:Case 1:
Open Knob:Lock TypeSelection List inCurrent Window
3 Share: Text Share content would include at a minimum a link to the mobile page beingshared. If integrated with native phone capability, user would remain on thispage after share is complete; no separate confirmation messaging.
TECHNICAL CONSIDERATION: Schlage request is integration with phonesnative functionality; confirm ability to integrate with native text functionality. Ifboth share features cannot integrate with native capabilities, WH recommendsimplementing forms within the mobile site for each capability.
4 Share: Email Share content would include at a minimum a link to the mobile page beingshared; recommendation is to use current email formatting / messagingbusiness rules similar to those used on full site for sharing the shopping list viaemail (inclusion of product photo, short description, link to product page).Ensure that "sender" content identifies Schlage. Subject should reflectSchlage Product Details. If integrated with native phone capability, userwould remain on this page after share is complete; no separate confirmationmessaging.
TECHNICAL CONSIDERATION: Schlage request is integration with phonesnative functionality; confirm ability to integrate with native text functionality. Ifboth share features cannot integrate with native capabilities, WH recommendsimplementing forms within the mobile site for each capability.
5 Inactive CompareButton If item has already been selected for comparison, Compare button should beshown in inactive state. OnClick:Case 1:Open Compare
Products: One inCurrent Window
6 Item selected forcomparison
This page demonstrates a product detail page when the item being viewed hasalready been selected for comparison. View comparison page takes user tothe Compare Products page (1.10, 1.10.1, 1.10.2)
Remove item from comparison list link removes item from comparison list.User is kept on product detail page. User is not prompted with confirmationmessage before item is removed.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
32/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 32 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.16. Compare Products: Two
This page demonstrates the Compare Products view when two products have been selected for comparison.
If user selects a third product for comparison, direct user to interstitial Compare Products page that displays
message that only two items may be shown at a time and allows user to remove one of the two items or choose notto include the third item for comparison. Interstitial page should include page header, followed by message, followedby current items for comparison in list view. If user chooses not to add third item to comparison, return user to thirditem product detail page (ie, previous page).
1.16.1. Wireframe
Page Continues Right
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
33/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 33 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.16.2. Wireframe Element Details
Footnote Label Interactions
1 ProductDetail PageLink
Link takes user to corresponding product detail page.
2 Share: Text Share content would include at a minimum a link to the mobile page being shared. If integrated withnative phone capability, user would remain on this page after share is complete; no separate confirmationmessaging.
TECHNICAL CONSIDERATION: Schlage request is integration with phones native functionality; confirmability to integrate with native text functionality. If both share features cannot integrate with nativecapabilities, WH recommends implementing forms within the mobile site for each capability.
3 Share:Email
Share content would include at a minimum a link to the mobile page being shared. Ensure that "sender"content identifies Schlage. Subject should reflect Schlage Product Comparison. If integrated with nativephone capability, user would remain on this page after share is complete; no separate confirmationmessaging.
TECHNICAL CONSIDERATION: Schlage request is integration with phones native functionality; confirmability to integrate with native text functionality. If both share features cannot integrate with nativecapabilities, WH recommends implementing forms within the mobile site for each capability.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
34/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 34 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.17. Descriptive Category Landing Page
For high margin, innovative, and technical products, include an introductory area within the category landing page(below the page title) and incorporate interactive hot spots that highlight key features and benefits. (See supportingschematic for hot spot behavior)
This is a secondary landing page where you want to include some additional introductory text and possibly an imageor image with interactive elements. A good example where this would be used would be the Decorative Collectionspage where you may want to include an interactive piece that calls out the elements of the collection that can becustomized by the user, such as the rose. There is an example of this page layout for this in the wireframes.
1.17.1. Wireframe
1.17.2. Wireframe Element Details
Footnote Label Description Interactions
2 Interactive HotSpots
Use interactive hot spots to provide users with access to additional detail aboutspecific product attributes. Hot spots launch interactive detail window (seecorresponding wireframe).
OnClick:Case 1:
Open Link inCurrent Window
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
35/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 35 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.18. Descriptive Category Landing Interactive
If user taps on interactive hot spot that highlight key features and benefits, use this window overlay to showadditional details. Allow user to close window to return to original image with hot spots. The detail window mayinclude text only or text and imagery.
A good example of where this would be used would be the Decorative Collections page where you may want toinclude an interactive piece that calls out the elements of the collection that can be customized by the user, such asthe rose. In this example the user could click on the hot spot on the rose to reveal additional detail about that piece ofthe lock.
1.18.1. Wireframe
1.18.2. Wireframe Element Details
Footnote Label Description Interactions
2 Interactive HotSpot Detail
This schematic demonstrates the behavior of the interactive hot spot. The x closesthe specific hot spot detail window and returns the user to the previous view showingthe overall image and all hot spot areas.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
36/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 36 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.19. Search
This is the Search landing page if the user selects search from the upper right in the utility navigation. This is thepage shown when the user is going to enter their search term.
1.19.1. Wireframe
1.19.2. Wireframe Element Details
Footnote Label Description
1 Search Field Search field should exhibit search-as-you-type functionality. Include up to five possible search termsin list overlay as user types. (Refer to mobile.usa.gov for example)
TECHNICAL NOTE: search-as-you-type functionality may be omitted from first release depending onimplementation effort.
If no search result matches are returned, below search field present user with message stating:
"Your search did not match any pages or documents.
Suggestions:
Make sure all words are spelled correctly.
Try different keywords.
Try more general keywords."
2 Popular SearchTerms
Present top 5 search keywords. Links initiate search based on corresponding keyword and take userto search results page.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
37/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 37 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.20. Search Results
This is the search results page. This wireframe demonstrates the layout of search results after the user has initiateda search.
1.20.1. Wireframe
7
8
4
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
38/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 38 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.20.2. Wireframe Element Details
Footnote Label Description Interactions
4 ProductsFilter
When filtered by products incorporate product images (left justified) in channel to the left ofthe numbered results.
5 Search Field Retain search terms entered to generate results presented below.
6 SearchResultsFilter
Provide one touch filters to narrow results shown based on primary use site sections(products; service & support). When user selects a filter, show that filter as selected(shown here as bold text) and refresh results list to show only related result items.
7 Number ofresults
Display results in groups of 10; present results group being viewed and total number ofresults. (Schematic demonstrates page 2 of results)
8 SearchResult Item
Result title should link to corresponding page.For products, include product functionality summary, model number, and customer reviewrating.
WHEN PRODUCTS ONLY FILTER IS APPLIED: Include product image with results.
9 Pagination Include pagination at bottom of results page if more than one page of results. Only showfour page numbers within pagination area. In this example, when user is on page 4,numbers would advance so 4 would be the left most number and user would see 4 5 67. Previous and Next advance one page back or forward, respectively.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
39/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 39 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.21. Where to Buy
This schematic demonstrates the Where to Buy page.
1.21.1. Wireframe
1.21.2. Wireframe Element Details
Footnote Label Description Interactions
1 Find aretailercurrentlocation
When this button is selected, user will be prompted by mobile device to allow ordisallow web site from using current location information. If user selects allow,present users with results (see supporting schematic). If user selects dontallow, keep user on this page and prompt user to enter a zip code.
OnClick:Case 1:
Open WTB:Nearest Store inCurrent Window
2 Find a
retailerzipcode
Take users to results view on the Where to Buy page. OnClick:
Case 1:Open Link in
Current Window
3 View onlineretailers
Take user to Online retailer page to display the list of retailers. OnClick:Case 1:
Open WTB: OrderOnline in CurrentWindow
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
40/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 40 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.22. WTB: Nearest Store
This page demonstrates the layout for the Nearest Store results.
1.22.1. Wireframe
11
14
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
41/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 41 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.22.2. Wireframe Element Details
Footnote Label Description Interactions
1 Where to Buy:Online Retailers
Take user to corresponding page within site. OnClick:Case 1:Open WTB:
Order Online inCurrent Window
2, 4, 6, 8 Share: Text Phone icon (text): Text content should include store name, address, city,state, zip, and phone number.
If integrated with native phone capability, user would remain on this page aftershare is complete; no separate confirmation messaging.
TECHNICAL CONSIDERATION: Schlage request is integration with phonesnative functionality; confirm ability to integrate with native text functionality. Ifboth share features cannot integrate with native capabilities, WH recommendsimplementing forms within the mobile site for each capability.
3, 5, 7, 9 Share: Email Envelope icon (email): Email content should include store name, address,city, state, zip, and phone number. Ensure that "sender" content identifiesSchlage. Subject should reflect Local Schlage Retailers.
If integrated with native phone capability, user would remain on this page aftershare is complete; no separate confirmation messaging.
TECHNICAL CONSIDERATION: Schlage request is integration with phonesnative functionality; confirm ability to integrate with native text functionality. Ifboth share features cannot integrate with native capabilities, WH recommendsimplementing forms within the mobile site for each capability.
10 Update Location Button retrieves the users current location from phone data and refreshesresults list.
11 Result DetailsandFunctionality
Phone number (when phone number is available see note 14 below): touchingon number uses phones nat ive capabilities to call store.
12 Order of results Present results in order of increasing distance with the closest store shown
first. Display first four results.
13 Additional retaillocations
Reveal next set of four additional locations. Additional locations append tobottom of existing list.
14 Contact Details If the retail location does not have a phone number, allow remaining items inline (map and share items) to move to left.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
42/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 42 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.23. WTB: Zip Code
This page demonstrates the layout for the location results based on a zip code.
1.23.1. Wireframe
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
43/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 43 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.23.2. Wireframe Element Details
Footnote Label Description Interactions
1-9 Same functionality as in 1.22.1
10 Use CurrentLocation
Button
User can choose to re-present results based on current location. OnClick:Case 1:
Open WTB: NearestStore in CurrentWindow
11 Zip CodeResults
When results are based on user-entered zip code, present zip code beforeresults list.
Results information presentation is identical to the results shown for thecurrent location search.
If zip code is not recognized or no results are found, present text errormessage on line below zip code entry field that states No retail locations werefound for that zip code. Please check the zip code or try using the UseCurrent Location feature
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
44/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 44 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.24. WTB: Order Online
1.24.1. Wireframe
3
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
45/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 45 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.24.2. Wireframe Element Details
Footnote Label Description Interactions
1, 2, 7 Share Ability to text or email link to this Web site page with the selected view. Forexample, if user is viewing retailers in Mexico, emailed link would return user tothis page with Mexico as the selected tab. Integrate with devices native text andemail capabilities.
OnClick:Case 1:Open Link in
Current Window
3 Order Online Results shown should default to USA unless mobile phone location correspondsto Canada, Mexico, or Europe, in which case the corresponding country resultslists should be shown. Confirm possible as part of implementation.
4 Find Retailers:Use CurrentLocation
Find a retailercurrent location: when this button is selected, user will beprompted by mobile device to allow or disallow web site from using currentlocation information. If user selects allow, take users to results view on theWhere to Buy page. If user selects dont allow, keep user on this page andprompt user to enter a zip code.
OnClick:Case 1:Open WTB:
Nearest Store inCurrent Window
5 Find Retailers:Zip Code
Find a retailerzip code: take users to results view on the Where to Buy page. OnClick:Case 1:Open Link in
Current Window
6 OnlineRetailers byCountry
Links act like tabs: touching on a link changes the online retailer logos shownbelow.
8 Online RetailerLogos
Images are of online retailer logos; touching on a logo opens correspondingretailer site in a new mobile browser window. (Identical to current full sitefunctionality)
Image sizes: Medium Thumbnail (98x78 px)
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
46/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 46 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.25. Contact Us
This schematic demonstrates the Contact Us landing page.
1.25.1. Wireframe
1.25.2. Wireframe Element Details
Footnote Label Description Interactions
1 Online ContactForm
Link takes user to online contact us form. OnClick:Case 1:Open Contact Us: Online
request in Current Window
2 PhoneNumbers
On mobile phone, phone number will be tapable; taping onnumber uses phones native capabilities to place call.
3 Selected State Demonstrate "selected" state on link when user is within theContact Us section.
2
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
47/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 47 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.26. Contact Us: Online request
This schematic demonstrates the Contact Us online form.
1.26.1. Wireframe
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
48/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 48 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.26.2. Wireframe Element Details
Footnote Label Description
1 Drop-downoptions
Drop-down field options should match current full site options. Note that drop-down options will presentthemselves in the native phone list presentation.
2 Drop-down
options
Drop-down field options should match current full site options. Note that drop-down options will present
themselves in the native phone list presentation.
3 SendConfirmation
Upon send, present confirmation message under header (remove all form fields) include link underconfirmation message that says Return to the home page; link should take users to mobile site homepage; retain page footer.
Email should be routed on the backend based on current business rules used for this form on the liveFull Consumer site.
4 Selected State Demonstrate "selected" state on link when user is within the Contact Us section.
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
49/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 49 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.27. One column secondary page layout
This schematic demonstrates a one column secondary page layout.
1.27.1. Wireframe
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
50/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 50 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.28. How to Choose
1.28.1. Wireframe
1.28.2. Wireframe Element Details
Footnote Description
1-3 Demonstration links to sub-pages
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
51/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 51 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.29. The Right Style
1.29.1. Wireframe
1.29.2. Wireframe Element Details
Footnote Description
1-2 Demonstration links to sub-pages
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
52/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 52 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.30. Knobs, Levers, Handlesets
1.30.1. Wireframe
1.30.2. Wireframe Element Details
Footnote Description
1-3 Demonstration links to sub-pages
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
53/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 53 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.31. Finishes
1.31.1. Wireframe
1.31.2. Wireframe Element Details
Footnote Description
1-2 Demonstration links to sub-pages
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
54/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 54 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.32. Home Security
1.32.1. Wireframe
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
55/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 55 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.33. Replacing Existing Hardware
1.33.1. Wireframe
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
56/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 56 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.34. Installation
1.34.1. Wireframe
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
57/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 57 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.34.2. Wireframe Element Details
Footnote Label Description Interactions
1 Products: ByCategory
Takes user to the By Category Primary Landing Page.
2 InstructionalContent Search
Returns list of links to related installation content (Videos/Documents); clicking on linkopens corresponding asset file. (use search results landing page layout).
3 Initiate Bar CodeScan
Clicking on button launches integrated bar code scanner. Functionality would allowuser to use mobile device's built-in camera to capture a bar code image and initiatesearch.
If device does not have a bar code scanner, take user to Bar Code Results Pagewhere user can manually enter in the bar code.
Returns list of links to related installation content (Videos/Documents); clicking on linkopens corresponding asset file. (use search results landing page layout).
TECHNICAL CONSIDERATION: If not possible to integrate a bar code scanner,
replace button with a text entry f ield and corresponding search button to allow user tomanually enter in the bar code.
4 Instructional text Link takes user to a single page that includes instructional text and images on whereto find the product bar code to scan.
5 FAQ Cross-link Takes users to FAQ landing Page
6 ProductRegistration
Takes user to Product Registration Form page
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
58/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 58 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.35. FAQs
1.35.1. Wireframe
1.35.2. Wireframe Element Details
Footnote Description
1-5 Demonstration links to lower level pages
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
59/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 59 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.36. Hardware
1.36.1. Wireframe
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
60/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 60 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.37. Design and Finishes
1.37.1. Wireframe
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
61/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 61 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.38. Electronic Products
1.38.1. Wireframe
8/3/2019 SCH0087 Consumer Mobile Web UI Functional Specifications Final
62/70
SCH0087_ConsumerMobileWeb_UI_Functional_Specifications_v2 4_24Aug2011.docx
2011 White Horse Productions, Inc. Proprietary and Confidential. Page 62 of 70
www.whitehorse.com 503-471-4200 Updated: September 9, 2011
1.39. Security