Fluid Configure Wireframes

Transcript

1. FLUID CONFIGURE v1.2 Last Updated 10/31/2012 | - 1
2. TABLE OF CONTENTS Multiple Pages BASIC FLOW Overview Basic Flow Diagram Landing Page Variations -Basic Landing Page (Single Starting Point) -Inspiration Landing Page (Multiple Starting Points) -Inspiration Landing Page (Social Catalogue ) -Integrated Landing Page Basic Configure Page 3 4 5 6 7 8 9 10 WORKFLOW VARIATIONS 12 13 14 15 16 17 Variation 1 / Pre-Configure Steps - Pre-Configure Steps Workflow - Sample Gender & Size Page - Sample Product Selection Page - Sample Starting Point Page Variation 2 / Virtual PDP -Virtual PDP Workflow -Virtual PDP Page LAYOUT OPTIONS 19 23 28 32 Single Product / Multiple Selections Product Set / Single Selections Product Set / Multiple Selections Review and Purchase Overview INTERACTIONS & VARIATIONS 34 35 36 37 Print More Info Snap Shot Share | - 2
3. OVERVIEW LANDING PAGE FLUID CONFIGURE MODULE CHECKOUT The landing page is the main entry point into the configuration experience. Landing pages provide a way for the retailer to lead the user into the configuration experience by showing things such as inspirational starting points, hero images of product configurations, seasonal product configurations and even socially generated designs. The configure module is the main user interface for making changes to a product to customize it. This includes things such as colors, text personalization, materials and product options. Users can also zoom in on their design, print the design, share design with friends, save a snapshot and if Social Catalog in implemented - post their design to the Social Catalog. After finishing configuration the user can then add the configured product into the cart and check-out utilizing the ecommerce site’s checkout flow. The client works with the Fluid team in providing the needing API’s to integrate the add to cart function. The required information for the product’s configuration is hosted by Fluid in one central location under a unique recipe ID. Multiple Pages | - 3
4. BASIC FLOW OVERVIEW Multiple Pages KEY CONCEPTS F LU ID C O N F IG U RE MO D U LE - The core configuration experience is served as a fully-skinnable, hosted user interface. This self-contained module can handle all aspects of the core configuration process: attribute selection, rotation, price management, add-to-cart, etc. Typically, ecommerce integration is achieved by the Configure Module sending a minimum of a recipe ID, price and product image to the cart page. The recipe ID can be used by subsequent systems to retrieve configuration details via the Fluid Configure Recipe Server (see below). C O N F IG U RE AP I - Fluid Configure APIs are used outside of the context of the core configuration experience to 1) expose product starting points and recipes through the ecommerce site and 2) integrate with cart, account and manufacturing systems. • STARTING POINTS / SOCIAL CATALOG - Business users can create starting points within the admin tools, group these as appropriate (What’s New!, Men’s/Women’s, etc.) and publish them. Custom HTML pages can then use these datafiles (XML, JSON) to create dynamic pages. • RECIPE SERVER - Each time a user saves a recipe or adds it to cart, the Fluid Configure Recipe Server assigns a recipe ID. This ID can be used to retrieve any and all details about a given recipe including: price, attribute selections, imagery, etc. Oftentimes, the ecommerce system does not need to understand the full details of a recipe and instead just passes a recipe ID to the manufacturing system for later retrieval. SO C IAL C O MP O N EN T - Fluid Configure enables users to share designs via tools such as Email, SMS, Facebook, and Pinterest. When saving, a user is also able to save their custom configuration to the Social Catalog in which their unique design is posted to a gallery page that other users can browse and purchase from. These user-generated designs can also be viewed on a ‘virtual PDP’ and used as starting points for new configurations. KEY Custom based on APIs Included Social Component </> LANDING PAGE CONFIGURE API </> FLUID CONFIGURE CHECKOUT CONFIGURE API (Starting Points / Social Catalog) | - 4
5. LANDING PAGE VARIATIONS BASIC LANDING PAGE (SINGLE STARTING POINT) INSPIRATION LANDING PAGE (MULTIPLE STARTING POINTS) INSPIRATION LANDING PAGE (SOCIAL CATALOG) INTEGRATED LANDING PAGE | - 5
6. Hom e BASIC FLOW BASIC LANDING PAGE (SINGLE STARTING POINT) [ Image ] Lorem ipsum dolor sit amet START YOUR DESIGN > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris leo, adipiscing vel ultricies in, fringilla ut massa. Nam varius, felis a eleifend mollis, dui purus rhoncus odio, sit amet blandit dui felis vel erat Need Inspiration? View Our Favorites 1 NOTES: 01. BASIC LANDING P AGE (SINGLE STARTING POINT) A simple landing page that contains tw o main calls to action: 1. Start Your Design - When selected w ill take customers into the main configuration experience. 2. View Our Favorites - When selected w ill take customers to an inspiration gallery page. | - 6
7. BASIC FLOW INSPIRATION LANDING PAGE (MULTIPLE STARTING POINTS) Start designing from one of our recommendations Our Favorites Inspirational Starting Points Hom e > I ns pirat ion Gallery 1 2 NOTES: 01. INSPIRATION LANDING P AGE (MULTIPLE STARTING POINTS) This page contains a grid of multiple ‘starting points’ that have three calls to action: 1. Buy Now - allow s the customer to add the ‘starting point’ product design to their cart. If the product requires sizing or other information prior to purchase, then clicking ‘Buy Now ’ should take the customer to a step w here they can select the necessary options to add to cart. This functionality can be built using Fluid Configure APIs. 3. Customize - w ill take the customer directly to the configure experience w ith the ‘starting point’ recipe selected in the design options. This functionality can be built using Fluid Configure APIs. Clicking on the “Starting Point Title” takes the customer to the main Configure Module w ith the selected recipe pre-loaded. 02. STARTING POINTS (RECIPES) Business users can create starting points w ithin the admin tools, group these as appropriate (What’s New !, Men’s/Women’s, etc.) and publish them to a landing page. | - 7
8. BASIC FLOW INSPIRATION LANDING PAGE (SOCIAL CATALOG) Design your own using one of the customized products below. START HERE Custom Design Gallery Inspirational Starting Points Hom e > I ns pirat ion Gallery 1 2 NOTES: 01. INSPIRATION LANDING P AGE (MULTIPLE STARTING POINTS) This page contains a grid of multiple ‘starting points’ that have three calls to action: 1. Start Here - w hen the customer hovers over a ‘starting point’, Start Here messaging w ill display and w hen selected w ill take the user to a ‘Virtual PDP’ . The Virtual PDP is a product detail page w ith a ‘starting point’ recipe that has been designed bya customer. 2. Buy Now - allow s the customer to add the ‘starting point’ product design to their cart. If the product requires sizing or other information prior to purchase, then clicking ‘Buy Now ’ should take the customer to a step w here they can select the necessary options to add to cart. 3. Customize - w ill take the customer directlyto the configure experience w ith the ‘starting point’ recipe selected in the design options. Clicking on the “Starting Point Title” takes the customer to the “Virtual PDP” w here they can choose to buy or customize the product. 02. SOCIAL COMPONENTS Designs that have been created by other users can display social data such as the creator’s Facebook profile picture and name, how many ‘likes’ a particular design has had, etc. | - 8
9. [ Image ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris leo, adipiscing vel ultricies in, fringilla ut massa. Nam varius, felis a eleifend mollis, dui purus rhoncus odio, sit amet blandit dui felis vel erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris leo, adipiscing vel ultricies in, fringilla ut massa. Nam varius, felis a eleifend mollis, dui purus rhoncus odio, sit amet blandit dui felis vel erat Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris leo, adipiscing vel ultricies in, fringilla ut massa. START YOUR DESIGN > Design your own using one of the customized products below. Custom Design Gallery Inspirational Starting Points BASIC FLOW INTEGRATED LANDING PAGE Hom e 2 1 START HERE NOTES: 01. INTEGRATED LANDING P AGE An integrated landing page contains a single main entry point into the configuration experience as w ell as a grid of starting point recipes. 02. STARTING POINTS The grid of multiple ‘starting points’ has three interaction options: 1. Start Here - w hen the customer hovers over a ‘starting point’, Start Here messaging w ill display and w hen selected w ill take the user to a ‘Virtual PDP’ . The Virtual PDP is a product detail page w ith a ‘starting point’ recipe that has been designed bya customer. 2. Buy Now - allow s the customer to add the ‘starting point’ product design to their cart. If the product requires sizing or other information prior to purchase, then clicking ‘Buy Now ’ should take the customer to a step w here they can select the necessary options to add to cart. 3. Customize - w ill take the customer directlyto the configure experience w ith the ‘starting point’ recipe selected in the design options. Clicking on the “Starting Point Title” takes the customer to the “Virtual PDP” w here they can choose to buy or customize the product. ‘Starting points’ can display social data such as the creator’s Facebook profile picture and name, how many ‘likes’ a particular design has had, etc. | - 9
10. FLUID CONFIGURE CONFIGURE Hom e > C us t om Produc t D es ign [ Image ] start over Select an attribute to customize View Product Details Product Title is displayed here $140.00 ADD TO CART SIZE Post to Gallery Save To Fleece Logo Stitching Zippers Trim Name Zipper Pulls 1 2 3 4 5 6 NOTES: 01. FLUID CONFIGURE This is an example of the Fluid Configure main page. These are tw o separate components of Fluid Configure that can be displayed together as a single seamless experience. A set of accordion panes on the right show the customizable attributes of a product, and a large product image w ith on the left reflects the custom choices made by the user. 02. DESIGN OPTION ACCORDION P ANE The user can customize the product image to the left by clicking on an accordion pane, w hich contains configurable options for the product. When the user clicks on an option to select it, their choice is reflected in the hero image. 03. IMAGE CONTROLS The user can zoom in and zoom out, as w ell as rotate a product 360 degrees horizontally and vertically. 04. SNAP SHOT FEATURE The user can take a snap shot of a design in progress, allow ing them to track their design decisions and to easily go back to a previous stage in the customization process. 05. SHARE DESIGN (SOCIAL COMPONENT) Fluid Configure integrates social sharing via Facebook, Tw itter, Pinterest, email and SMS. Users can also print out their designs. 06. POST TO DESIGN GALLERY AND/OR SAVE TO WISHLIST/MY CLOSET 1. Users can post their custom designs to a public Design Gallery page on the w ebsite 2. In addition users can do one of the follow ing: SAVE TO WISHLIST: Could also be ‘ADD TO WISHLIST’ - this action adds the design to the user’s ecom w ishlist SAVE TO MY CLOSET: Is similar to the Wishlist feature but the My Closet w ishlist is hosted by Fluid and utilizes the login function from the ecom system to get the user’s ID to store the information w ith a unique name. | - 10
11. WORKFLOW VARIATIONS VARIATION 1 / OPTIONAL PRE-CONFIGURE STEPS VARIATION 2 / VIRTUAL PDP | - 11
12. VARIATION 1 / OPTIONAL PRE-CONFIGURE STEPS OVERVIEW The pre-configuration templates outline different pre-configuration options and layouts. Pre-configuration steps allow customization of the configuration flow so that key pieces of information are gathered prior to the product configuration or that choices are narrowed down prior to configuration. These could be selections such as Size, Gender, product choices, etc... Optional Pre-Configure Steps SELECT Size, Gender Product etc. KEY Custom based on APIs Included Social Component </> CONFIGURE API FLUID CONFIGURE CHECKOUT CONFIGURE API LANDING PAGE </> (Starting Points / Social Catalog) | - 12
13. VARIATION 1 / PRE-CONFIGURE STEPS SELECT GENDER & SIZE Hom e > Gender & Size SELECT YOUR GENDER & SIZE NEXT > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris leo, adipiscing vel ultricies in, fringilla ut massa. Nam varius, felis a eleifend mollis, dui purus rhoncus odio, sit amet blandit dui felis vel erat SELECT YOUR SIZE SELECT YOUR GENDER [ IMAGE ] 6 MEN 10 7 11 8 WOMEN 12 9 13 1 NOTES: 01. SELECT GENDER & SIZE Fluid Configure allow s the customer to narrow dow n a particular item by gender and size prior to customization. Gender and/or size could be selections on the Starting Point page or appear as a separate step or steps in the w orkflow. Size can also be selected on the main configuration page. | - 13
14. Lorem ipsum dolor sit amet CHOOSE YOUR PRODUCT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris leo, adipiscing vel ultricies in, fringilla ut massa. Nam varius, felis a eleifend mollis, dui purus rhoncus odio, sit amet blandit dui felis vel erat [ Product 2 ] [ Product 3 ] [ Product 1 ] CUSTOMIZE > VARIATION 1 / PRE-CONFIGURE STEPS SELECT PRODUCT Hom e > Produc t s 1 NOTES: 01. SELECT A PRODUCT This page displays an list of customizable products. Clicking on an item takes the customer into the main configuration experience. | - 14
15. SELECT YOUR STARTING POINT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris leo, adipiscing vel ultricies in, fringilla ut massa. Nam varius, felis a eleifend mollis, dui purus rhoncus odio, sit amet blandit dui felis vel erat SELECT YOUR STARTING POINT [ IMAGE ] [ IMAGE ] [ IMAGE ] [ IMAGE ] < BACK | NEXT > VARIATION 1 / PRE-CONFIGURE STEPS SELECT STARTING POINT Hom e > St art ing Point s 1 NOTES: 01. SELECT A STARTING POINT Within a multi--step experience, starting points can be integrated into the guided experience to provide models of a product or particular design recommendations. | - 15
16. VARIATION 2 / VIRTUAL PDP OVERVIEW Multiple Pages A Virtual PDP page mirrors a standard product detail page, but is injected with a user-generated design from the Social Catalog and social data from social data/links. From the vPDP the user can choose to buy the product or go into the configurator to personalize the design. There is also the option to save the design to the user’s wishlist. Buy Buy / Customize Customize CONFIGURE API Virtual PDP </> KEY Custom based on APIs Included Social Component </> CONFIGURE API FLUID CONFIGURE CHECKOUT CONFIGURE API Social Catalog Product Design LANDING PAGE </> (Social Catalog) Buy | - 16
17. CONFIGURE VARIATION 2 / VIRTUAL PDP VIRTUAL PDP Zoom Rotate t u Hom e > I ns pirat ion Gallery > Virt ual PD P [ Image ] start over View Product Details Custom Product Title is displayed here $140.00 ADD TO CART CUSTOMIZE SIZE Save To 1 2 3 NOTES: 01. VIRTUAL PDP A Virtual PDP page mirrors a standard product detail page, but is injected w ith a user-generated design from the Social Catalog and social data from social data/links. 02. SOCIAL DATA The Virtual PDP contains the follow ing social data/links: -name and Facebook picture of the design’s creator -number of Facebook likes the design has received -Google + shares -Pinterest link -ability to share design via email or SMS -Facebook Add a comment field, w ith published comments in a chronological list. 03. CTA BUTTONS The Virtual PDP has three call to action buttons: 1. Save -adds the design to the customer’s Wishlist or My Closet. 2. Add to Cart -takes the user to the shopping cart page. 3. Customize - opens the custom design in Fluid Configure w ith the customized options pre-selected. | - 17
18. CONFIGURE LAYOUT OPTIONS SINGLE PRODUCT / MULTIPLE SELECTIONS PRODUCT SET / SINGLE SELECTIONS PRODUCT SET / MULTIPLE SELECTIONS | - 18
19. CONFIGURE LAYOUT / SINGLE PRODUCT MULTIPLE ATTRIBUTE SELECTIONS The template layout for a single product allows configuration of multiple attributes for a single product. This includes things such as text personalization, option selection, size selection, social sharing. Fluid Configure can also support adding items to a wishlist or saving the design to a social catalog. | - 19
20. CONFIGURE LAYOUT / SINGLE PRODUCT MULTIPLE ATTRIBUTE SELECTIONS Product Title is displayed here $140.00 CONFIGURE Hom e > D es ign start over SIZE Choose trim color + + + + + Zippers Fleece Zipper Pulls Logo Stitching Name Ice - Trim View Product Details ADD TO CART Save To 1 NOTES: 01. SINGLE PRODUCT LAYOUT This template demonstrates the ability to configure multiple attributes at a time for a single product Each attribute is configured independently and a single price is calculated for all selections. Customers can purchase the item by selecting the ‘Add To Cart’ button. To save a configuration to a Wishlist or My Closet, customers can select the ‘Save’ button. | - 20
21. 1 2 3 4 5 CONFIGURE LAYOUT / SINGLE PRODUCT ATTRIBUTE ACCORDION PANE VARIATIONS A. Single Selection B. Single Selection With Filters Color Family D1. Hierarchical Selection Template (0/2) Dropdown D2. Hierarchical Selection Template (0/2) - Selected E1. Hierarchical Selection Template (Not Included) E1. Hierarchical Selection Template (Included) C1. Hierarchical Selection Template (Yes/No) Dropdown C2. Hierarchical Selection Template (Yes/No) - Selected Choose fleece color Ice Blue Choose fleece color Ice Blue Choose fleece color Ice Blue - - Fleece Fleece Include Patch? Choose fleece color Ice Blue - Fleece Include Patch? Include Patch? Include Patch? - Fleece 0 2 Choose fleece color Ice Blue - - Fleece Fleece Choose patch color Choose patch color Color name is displayed here No Yes Choose trim color + Fleece Not Included w ith selected fleece color - Trim Choose trim color + Fleece Color name is displayed here - Trim Choose fleece color Ice Blue Color name is displayed here NOTES: 01. A. SINGLE SELECTION TEMPLATE All sw atches are displayed in the accordion pane. Clicking on a sw atch w ill change the color in the master Configure image and display the color name above the sw atch grid. 02. B. SINGLE SELECTION WITH FILTERS Sw atches can be grouped by category. In this example it is by Color Family. Selecting the Color Family from the dropdow n menu displays all the sw atches in that Color Family. Clicking on a sw atch w ill change the color in the master Configure image and display the color name above the sw atch grid. 03. C. HIERARCHICAL SELECTION TEMPLATE (YES/NO) Selecting ‘Yes’ or ‘No’ from the dropdow n menu influences the actions of a hide/show content module w ithin the accordion pane. C1. If the customer chooses ‘No’ form the Include Patch? dropdow n menu, the only choices displayed in the accordion pane are Fleece colors. C2. If the customer chooses ‘Yes’ from the dropdow n menu, the Choose patch color module is displayed in the accordion pane. Customers can now select both patch and fleece colors. 04. D. HIERARCHICAL SELECTION TEMPLATE (0/2) Selecting a numerical value from the dropdow n menu influences the actions of a hide/show content module w ithin the accordion pane. D1. If the customer chooses ‘0’ form the Include Patch? dropdow n menu, the only choices displayed in the accordion pane are Fleece colors. D2. If the customer chooses ‘2’ from the dropdow n menu, the Choose patch color module is displayed in the accordion pane. Customers can now select both patch and fleece colors. 05. E. HIERARCHICAL SELECTION TEMPLATE (NOT INCLUDED/INCLUDED) In this template, selections from a preceding accordion pane influence choices that are available in the next accordion pane. E1. Displays messaging w hen a sw atch is selected that is not included w ith a choice made in the preceeding accordion page. E2. Displays the color name above the sw atch grid w hen a color is available based on the choice made in the preceeding accordion pane. | - 21
22. [Optional Copy Area ]  Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing amet, consetur adipiscing elit. Selection name is displayed on multiple lines CONFIGURE LAYOUT / SINGLE PRODUCT ATTRIBUTE TOOLTIP 1 CONFIGURE [ Image ] Hom e > D es ign start over SIZE Choose trim color + + + + + Zippers Fleece Zipper Pulls Logo Stitching Name Ice - Trim View Product Details ADD TO CART Save To Product Title is displayed here $140.00 NOTES: 01. ATTRIBUTE TOOLTIP Hovering over the “i” symbol displays a tooltip w ith more information about an attribute. | - 22
23. CONFIGURE LAYOUT / PRODUCT SET SINGLE ATTRIBUTE SELECTIONS The template for Product Set Layout - Single Attribute Selections allows for the configuration of multiple items/products at a time within a single experience, with a single attribute value per item/product. Each individual item is configured independently, but a single price is calculated for all items within the collection. | - 23
24. CONFIGURE LAYOUT / PRODUCT SET SINGLE ATTRIBUTE SELECTIONS CONFIGURE [ Image ] Hom e > D es ign start over Select an Item to customize Duvets Throw Blanket Euro Deck Pillows Sheets Bed Blanket Sheets Product Title is displayed here $140.00 QTY CONFIGURE 1 + + + + + + + View Product Details ADD TO CART Save To Product Title is displayed here $140.00 NOTES: 01. PRODUCT SET LAYOUT - SINGLE ATTRIBUTE SELECTIONS This template demonstrates the ability to configure multiple items at a time w ithin a single experience. This template supports configuring a single attribute value per item. Each individual item is configured independently, but a single price is calculated for all items w ithin the collection. Customers can purchase selected items w ithin the collection by selecting the ‘Add To Cart’ button. | - 24
25. [ Image ] Hom e > D es ign start over Select an Item to customize Duvets Euro Sheets Sheets Color name is displayed here Choose a color DUVETS X Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, nisl eget tristique hendrerit, neque neque imperdiet eros, a placerat mi leo non felis. CONFIGURE LAYOUT / PRODUCT SET SINGLE ATTRIBUTE SELECTION OVERLAY 1 CONFIGURE NOTES: 01. SINGLE ATTRIBUTE SELECTION OVERLAY The overlay panel displays the configurable attributes for an individual item that is contained w ithin a collection. This template is for items that contain only a single customizable attribute. When the customer is finished customizing they can close out of the overlay by either selecting “X” link at the top right or the “OK” button at the bottom of the pane. | - 25
26. [ Image ] Hom e > D es ign start over Select an Item to customize Duvets Euro Sheets Sheets Color name is displayed here Choose a color DUVETS X Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, nisl eget tristique hendrerit, neque neque imperdiet eros, a placerat mi leo non felis. [Optional Copy Area ]  Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing amet, consetur adipiscing elit. Selection name is displayed here on multiple lines CONFIGURE LAYOUT / PRODUCT SET ATTRIBUTE SELECTION OVERLAY TOOLTIP 1 CONFIGURE NOTES: 01. TOOLTIP As a customer rolls over a sw atch the tooltip displays additional sw atch information. The pointer arrow “>” w ill correspond to the row that the customer’s mouse is currently located w ithin. Tooltips can dynamically resize to accommodate different sizes of content. The tooltip can contain the follow ing: - Larger Image of the selected sw atch - Selection title - Optional copy section. | - 26
27. 2 1 3 4 5 Color name is displayed here Color name is displayed here Choose a color Choose a color Include Throw Pillow s? Include Duvet? Include Duvet? Include Throw Pillow s? DUVETS DUVETS Throw Pillows DUVETS DUVETS DUVETS DUVETS Throw Pillows X X X X X X X X Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, nisl eget tristique hendrerit, neque neque imperdiet eros, a placerat mi leo non felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, nisl eget tristique hendrerit, neque neque imperdiet eros, a placerat mi leo non felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, nisl eget tristique hendrerit, neque neque imperdiet eros, a placerat mi leo non felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, nisl eget tristique hendrerit, neque neque imperdiet eros, a placerat mi leo non felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, nisl eget tristique hendrerit, neque neque imperdiet eros, a placerat mi leo non felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, nisl eget tristique hendrerit, neque neque imperdiet eros, a placerat mi leo non felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, nisl eget tristique hendrerit, neque neque imperdiet eros, a placerat mi leo non felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, nisl eget tristique hendrerit, neque neque imperdiet eros, a placerat mi leo non felis. A. Single Selection Template B. Single Selection With Filters Template D1. Hierarchical Selection Template (0/2) D2. Hierarchical Selection Template (0/2) - Selected C1. Hierarchical Selection Template (Yes/No) C2. Hierarchical Selection Template (Yes/No) - Selected E1. Hierarchical Selection Template (Not Included) E2. Hierarchical Selection Template (Included) 0 2 No Yes Choose pillow colors Color name is displayed here Color name is displayed here Not Included Color name is displayed here Choose a color Choose a color Choose a color Color Family CONFIGURE LAYOUT / PRODUCT SET SINGLE ATTRIBUTE SELECTION OVERLAY VARIATIONS NOTES: 01. A. SINGLE SELECTION TEMPLATE All sw atches are displayed in the accordion pane. Clicking on a sw atch w ill change the color in the master Configure image and display the color name above the sw atch grid. 02. B. SINGLE SELECTION WITH FILTERS Sw atches can be grouped by category. In this example it is by Color Family. Selecting the Color Family from the dropdow n menu displays all the sw atches in that Color Family. Clicking on a sw atch w ill change the color in the master Configure image and display the color name above the sw atch grid. 03. C. HIERARCHICAL ATTRIBUTE TEMPLATE (YES/NO) Selecting ‘Yes’ or ‘No’ from the first attribute affects the display of a linked attribute and it’s values. C1. In this example, w ith the default selection of ‘No’ there are no additional color attributes to select. C2. Selecting “Yes” w ill display associated colors for the duvet item. 04. D. HIERARCHICAL SELECTION TEMPLATE (0/2) Selecting a numerical value from the dropdow n menu influences the actions of a hide/show content module w ithin the accordion pane. D1. If the customer chooses ‘0’ form the Include Throw Pillow s? dropdow n menu, there are no sw atches displayed below. D2. If the customer chooses ‘2’ from the dropdow n menu, the Choose pillow colors module is displayed in the accordion pane . 05. HIERARCHICAL ATTRIBUTES - INLINE The default “NO” selection is displayed inline w ith the other attribute values. If this value is selected, then the corresponding attribute is not displayed w ithin the main image. | - 27
28. CONFIGURE LAYOUT / PRODUCT SET MULTIPLE ATTRIBUTE SELECTIONS The template for Product Set Layout - Multiple Attribute Selections allows for the configuration of multiple items/products at a time within a single experience, with multiple configurable attributes within each item. Each individual item is configured independently, but a single price is calculated for all the items within the collection. | - 28
29. CONFIGURE LAYOUT / PRODUCT SET MULTIPLE ATTRIBUTE SELECTIONS 1 2 3 4 5 CONFIGURE [ Image ] Hom e > D es ign start over Select an Item to customize Product Title is displayed here Product Title is displayed here Product Title is displayed here $99.99 $299.99 $199.99 Qty. 4 Qty. 2 Qty. 1 CUSTOMIZE CUSTOMIZE CUSTOMIZE View Product Details Product Title is dispalyed here $140.00 ADD TO CART QTY Save To NOTES: 01. PRODUCT SET - MULTIPLE ATTRIBUTE SELECTIONS This template demonstrates the ability to configure multiple items at a time w ithin a single experience. This template supports items that have multiple configurable attributes w ithin each item. Each individual item is configured independently, but a single price is calculated for all items w ithin the collection. Customers can purchase selected items w ithin the collection by selecting the ‘Add To Cart’ button. 02. CUSTOMIZE SHARED CHOICES Clicking the global custom button w ill open the configuration panel and display attribute values that are shared across all products in the set. 03. INCLUDE IN MY SET By default, all Include In My Set check boxes are selected. Unselecting the check box w ill remove the item from the main image and subtract the item’s price from the customer’s set total. 04. QUANTITY The quantity of the individual product displayed can be edited w ithin the Customize configuration panel. 05. CUSTOMIZE BUTTON Clicking the ‘Customize’ button opens a configuration overlay displaying all of the available configurable attributes for each item. | - 29
30. [ Image ] Hom e > D es ign start over Select an Item to customize Product Title is displayed here Product Title is displayed here Product Title is displayed here $99.99 $299.99 $199.99 Qty. 4 Qty. 2 Qty. 1 Product Title is displayed here 7 Total Items included $1,140.00 ADD TO CART QTY Save CONFIGURE LAYOUT / PRODUCT SET MULTIPLE ATTRIBUTE SELECTION PANEL OVERLAY Product Title is displayed here Your Configuration Price: $8,349.00 Quantity $1,000 - $500 X Choose duvet color Grass Border + + + Attribute Label Attribute Label Attribute Label - Attribute Label 1 2 2 3 CONFIGURE NOTES: 01. MULTIPLE ATTRIBUTE SELECTION P ANEL OVERLAY The overlay panel displays the configurable attributes for an individual item that is contained w ithin a collection. When the customer is finished customizing they can close out of the overlay by either selecting “X” link at the top right or the “OK” button at the bottom of the pane. 02. MORE INFO Clicking the “Info” link opens an informational overlay above the configuration that contains additional information about an item or the selection. 03. PRICE & QUANTITY The price of the product collection can update based on selections made by the customer. If necessary, the quantity of the item w ithin the configuration panel can be reflected in the main image area. (i.e., selecting a quantity of 4 w ill display 4 items) | - 30
31. [ Image ] Hom e > D es ign start over Select an Item to customize Product Title is displayed here Product Title is displayed here Product Title is displayed here $99.99 $299.99 $199.99 Qty. 4 Qty. 2 Qty. 1 CUSTOMIZE CUSTOMIZE CUSTOMIZE CONFIGURE LAYOUT / PRODUCT SET REVIEW & PURCHASE - MULTIPLE ATTRIBUTE SELECTIONS 1 CONFIGURE NOTES: 01. REVIEW & PURCHASE To purchase the items from this template, a customer must select the ‘Review & Purchase’ before adding the items to cart. | - 31
32. Edit selections Review & Purchas e REVIEW & PURCHASE / VERSION 2 SINGLE PAGE [ Configured Image ] Hom e > D es ign > R ev iew & Purc has e start over The fresh palette and graphic medallion print make this duvet a dynamic neutral. Fabric-covered button closures and w hite piping add the finishing details. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris leo, adipiscing vel ultricies in, fringilla ut massa. Nam varius, felis a eleifend mollis, dui purus rhoncus odio, sit amet blandit dui felis vel erat Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris leo, adipiscing vel ultricies in, fringilla ut massa. Nam varius, felis a eleifend mollis, dui purus rhoncus odio, sit amet blandit dui felis vel erat Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris leo, adipiscing vel ultricies in, fringilla ut massa. Nam varius, felis a eleifend mollis, dui purus rhoncus odio, sit amet blandit dui felis vel erat Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris leo, adipiscing vel ultricies in, fringilla ut massa. Nam varius, felis a eleifend mollis, dui purus rhoncus odio, sit amet blandit dui felis vel erat Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris leo, adipiscing vel ultricies in, fringilla ut massa. Nam varius, felis a eleifend mollis, dui purus rhoncus odio, sit amet blandit dui felis vel erat Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris leo, adipiscing vel ultricies in, fringilla ut massa. Nam varius, felis a eleifend mollis, dui purus rhoncus odio, sit amet blandit dui felis vel erat Product name displayed here Duvet Sheet Set Sheet Set Euro Throw Blanket Bed Blanket Deck Pillows Product name displayed here Product name displayed here Product name displayed here Product name displayed here Product name displayed here Product name displayed here Quantity: Quantity: Quantity: Quantity: Quantity: Quantity: Quantity: $230.00 $XXX.xx $XXX.xx $XXX.xx $XXX.xx $XXX.xx $XXX.xx 1 1 1 1 1 1 0 1 NOTES: 01. REVIEW & PURCHASE P AGE The review and purchase page is a custom experience that can be utilized w hen increased functionality is necessary. Fluid Configure can pass all of the appropriate information to the page including (recipe ID, all attributes names, values and sku numbers) and a rendered image. | - 32
33. INTERACTIONS & VARIATIONS PRINT MORE INFO SNAP SHOT SHARE COLOR SWATCH STATES | - 33
34. PRINT Your Design Selections LOGO http://www.website.com/custom/#1234 View Online at: www.website.com Print Quilt/Throw Blanket Product title displayed here Bed Blanket Product title displayed here Throw/Deck Pillows Product title displayed here Euro Product title displayed here Standard Product title displayed here Sheets Product title displayed here Duvets Product title displayed here Lorium Ipsum Design 1 NOTES: 01. PRINTED VERSION / FACTORY APP The printer friendly version of the customer’s configuration includes a rendered image of the configuration and an itemized list of the customer’s selections. This page could also generate a url that w ould communicate the checklist of a custom design to the manufacturer. | - 34
35. MORE INFORMATION Customization Help Close x Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel diam sit amet quam dignissim aliquet. Ut purus arcu, aliquam sed fermentum nec, bibendum non ligula. Phasellus et dui eget tellus pharetra ullamcorper. Curabitur at bibendum sem. Morbi sit amet dolor nisl. Duis et lacus magna. Donec augue dolor, tempus quis varius eget, ultrices in libero. Ut sit amet tellus massa, at gravida velit. • Aliquam tristique dapibus neque tincidunt volutpat. • In molestie, neque non elementum mollis, tortor massa ultricies justo, in aliquam nisl elit ac nisi. • Quisque in lectus lectus. • Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duvets Choose duvet color Grass Border 1 NOTES: 01. MORE INFORMATION OVERLAY Clicking the more info icon, displays an informational overlay above the page. The overlay can contain any type of relevant content include description text, images and videos. | - 35
36. SNAP SHOT FUNCTIONALITY add your current design Mouse Over Add Button - Tool Tip is displayed When an item is added to Snap Shot for the FIRST time only, an information message is displayed. This w ill only be presented once per brow sing session. On Click - Design is added to history and draw er is revealed Remove 11:30 am Your design history Mouse Over Main Area - Tool Tip is displayed On Click - Draw er is revealed On Click - Previous design is loaded back in to the configurator Remove Remove 11:30 am 11:23 am Remove 11:20 am Remove Remove 11:30 am 11:23 am Remove 11:20 am Attention Adding designs to snap shot is a great w ay to capture a design in progress. How ever, if you navigate aw ay from this page, you w ill no longer have access to your designs. Tip: To permanently save your current  selections, click the ‘save’ button. + Snap Shot + Snap Shot + Snap Shot + Snap Shot + Snap Shot + Snap Shot | - 36
37. 1 2 3 SHARE DESIGN share your current design Mouse Over - Tool Tip is displayed Email Overlay Email Message Confirmation Message On Click - Menu is opened - Clicking email opens up the email overlay - Clicking Facebook & Tw itter opens up the  selected w ebsite in a new tab. Share Design Tw itter Facebook Email SMS Pinterest Share Design Your email was succesfully sent. Share your Bed Your Name Recipient Name Recipient Email Message (Optional) Close (x) Product Title is Displayed here Hello <recipient name>, <your name> has sent you a custom <product name> design. <your name>’s message to you: <optional message> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla augue eu purus porta suscipit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla augue eu purus porta suscipit. Help is always available at 1-800-555-1234 | www.website.com View the customized design. LOGO NOTES: 01. EMAIL FORM OVERLAY The Email form overlay is displayed above the page w hen a customer selects the share via email icon. 02. EMAIL SENT CONFIRMATION MESSAGE When a customer submits a valid email message a confirmation message is displayed. 03. EMAIL MESSAGE Clicking either the image or the link w ill navigate the user to the brand’s w ebsite and load the selected recipe into the configurator. | - 37
38. 1 SWATCH STATES *Rolling over a swatch displays the tooltip Selected Swatch Default State Choose Selection NOTES: 01. SWATCH STATES The sw atch values may have up to 4 different states: 1. Default state 2. Selected state 3. Roll-over state (not show n) - This displays the tool tip. | - 38