sch0087 consumer mobile web ui functional specifications final

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)


2/70




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.5. Products: Secondary Landing Page: List View ................................................................................................. 14

1.5.1. Wireframe ................................................................................................................................................. 14


1.6. Secondary Landing Page: Gallery View ........................................................................................................... 16

1.6.1. Wireframe ................................................................................................................................................. 16


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.9. Filtered Results ................................................................................................................................................ 20

1.9.1. Wireframe ................................................................................................................................................. 20


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.12. Knob: Finish Selection List ............................................................................................................................. 26

1.12.1. Wireframe ............................................................................................................................................... 26


1.13. Knob: Lock Type Selection List ...................................................................................................................... 27


3/70




1.13.1. Wireframe ............................................................................................................................................... 27


1.14. Compare Products: One ................................................................................................................................. 28

1.14.1. Wireframe ............................................................................................................................................... 28


1.15. Product Detail: Selected Compare ................................................................................................................. 30

1.15.1. Wireframe ............................................................................................................................................... 30


1.16. Compare Products: Two ................................................................................................................................. 32

1.16.1. Wireframe ............................................................................................................................................... 32


1.17. Descriptive Category Landing Page ............................................................................................................... 34

1.17.1. Wireframe ............................................................................................................................................... 34


1.18. Descriptive Category Landing Interactive ....................................................................................................... 35

1.18.1. Wireframe ............................................................................................................................................... 35


1.19. Search ............................................................................................................................................................ 36

1.19.1. Wireframe ............................................................................................................................................... 36


1.20. Search Results ............................................................................................................................................... 37

1.20.1. Wireframe ............................................................................................................................................... 37


1.21. Where to Buy .................................................................................................................................................. 39

1.21.1. Wireframe ............................................................................................................................................... 39


1.22. WTB: Nearest Store ....................................................................................................................................... 40

1.22.1. Wireframe ............................................................................................................................................... 40


1.23. WTB: Zip Code ............................................................................................................................................... 42

1.23.1. Wireframe ............................................................................................................................................... 42


1.24. WTB: Order Online ......................................................................................................................................... 44

1.24.1. Wireframe ............................................................................................................................................... 44


1.25. Contact Us ...................................................................................................................................................... 46

1.25.1. Wireframe ............................................................................................................................................... 46


1.26. Contact Us: Online request ............................................................................................................................ 47

1.26.1. Wireframe ............................................................................................................................................... 47


1.27. One column secondary page layout ............................................................................................................... 49


4/70




1.27.1. Wireframe ............................................................................................................................................... 49

1.28. How to Choose ............................................................................................................................................... 50

1.28.1. Wireframe ............................................................................................................................................... 50


1.29. The Right Style ............................................................................................................................................... 51

1.29.1. Wireframe ............................................................................................................................................... 51


1.30. Knobs, Levers, Handlesets ............................................................................................................................. 52

1.30.1. Wireframe ............................................................................................................................................... 52


1.31. Finishes .......................................................................................................................................................... 53

1.31.1. Wireframe ............................................................................................................................................... 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.35. FAQs .............................................................................................................................................................. 58

1.35.1. Wireframe ............................................................................................................................................... 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.2. Footer_Home_noWTB...................................................................................................................................... 67

2.2.1. Wireframe ................................................................................................................................................. 67



5/70




2.3. Footer_secondary_noWTB ............................................................................................................................... 68

2.3.1. Wireframe ................................................................................................................................................. 68


2.4. Footer_ProductDetail_WTB .............................................................................................................................. 69

2.4.1. Wireframe ................................................................................................................................................. 69


2.5. Utility Navigation Drop-Down Menu .................................................................................................................. 70

2.5.1. Wireframe ................................................................................................................................................. 70


6/70




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


7/70




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/70




1.2. Product Quick Finder

1.2.1. Wireframe


9/70






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


10/70




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


11/70






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.


12/70




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


13/70






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.


14/70




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


15/70






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.


16/70




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


17/70






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


18/70




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



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.


19/70




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).


1.8.1. Wireframe


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.


20/70




1.9. Filtered Results

1.9.1. Wireframe


21/70






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


22/70




1.10. Product Detail: Knob

1.10.1. Wireframe

2

10


23/70






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.


24/70




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


25/70






1 ProductFinishSelection List

Takes user to configuration option selection list. OnClick:Case 1:

Open Knob:Finish SelectionList in CurrentWindow

2 Product LockTypeConfigurationSelection List


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.


26/70




1.12. Knob: Finish Selection List


1.12.1. Wireframe



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.


27/70




1.13. Knob: Lock Type Selection List


1.13.1. Wireframe



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.


28/70




1.14. Compare Products: One

1.14.1. Wireframe

11

12

14


10


29/70






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


9 Browse byLock Type


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.


30/70




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


31/70






1 Product FinishSelection List


Open Knob:Finish SelectionList in CurrentWindow

2 Product LockTypeConfigurationSelection List


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.


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.


32/70




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



33/70





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.


34/70




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



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


35/70




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



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.


36/70




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 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.


37/70




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


38/70






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.


39/70




1.21. Where to Buy

This schematic demonstrates the Where to Buy page.

1.21.1. Wireframe



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


40/70




1.22. WTB: Nearest Store

This page demonstrates the layout for the Nearest Store results.

1.22.1. Wireframe

11

14


41/70






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.


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.


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.


42/70




1.23. WTB: Zip Code

This page demonstrates the layout for the location results based on a zip code.

1.23.1. Wireframe


43/70






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


44/70




1.24. WTB: Order Online

1.24.1. Wireframe

3


45/70






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)


46/70




1.25. Contact Us

This schematic demonstrates the Contact Us landing page.

1.25.1. Wireframe



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


47/70




1.26. Contact Us: Online request

This schematic demonstrates the Contact Us online form.

1.26.1. Wireframe


48/70






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.


49/70




1.27. One column secondary page layout

This schematic demonstrates a one column secondary page layout.

1.27.1. Wireframe


50/70




1.28. How to Choose

1.28.1. Wireframe


Footnote Description

1-3 Demonstration links to sub-pages


51/70




1.29. The Right Style

1.29.1. Wireframe





52/70




1.30. Knobs, Levers, Handlesets

1.30.1. Wireframe





53/70




1.31. Finishes

1.31.1. Wireframe





54/70




1.32. Home Security

1.32.1. Wireframe


55/70




1.33. Replacing Existing Hardware

1.33.1. Wireframe


56/70




1.34. Installation

1.34.1. Wireframe


57/70






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


58/70




1.35. FAQs

1.35.1. Wireframe



1-5 Demonstration links to lower level pages


59/70




1.36. Hardware

1.36.1. Wireframe


60/70




1.37. Design and Finishes

1.37.1. Wireframe


61/70




1.38. Electronic Products

1.38.1. Wireframe


62/70




1.39. Security