Challenge Summary
Ferguson is looking to rework their corporate website. The goal of this contest is to create a clean and professional Flash interaction between the user and the Ferguson Showroom Vignette's.
Please read the contest specification and watch the forums for any questions or feedback concerning this contest. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.
Ferguson will be holding a series of contests in the next few weeks to design and update their existing website (Ferguson.com). One of the main goals is to drive more traffic to the Ferguson stores/showrooms by allowing customers the ability to find showrooms easily and also create an engaging online experience. The Ferguson Showroom page will be the main landing page for customers to find out about Ferguson Showrooms, services available and new products. Showroom Page Requirements: For this contest you will be taking the Ferguson Showroom Storyboard (Showrooms.psd) and the provided "Kitchen" and "Bathroom" vignettes images and design Flash interactions between the User and the vignette. Example: When a user goes to the Showroom Landing page the first image they will see is the "Kitchen" vignette. The user will see "hotspot" icons on the image indicating they should mouseover a specific product and learn more about it. The most important aspect of this page is providing a very easy to understand user experience. The user should not have to think about what to click, where to go or how to find information. They should be focused on the information displayed and not the interactions themseleves. All animations, transistions and interactivity should be sharp and engaging graphically. What we are looking for: 1) A Graphic icon that indicates a "hotspots" on the vignette. (A hotspot would be highlighting a product) These should have a subtle animation to them. 2) Two Tabs - One that says "Kitchen" and another that says "Baths" (see Showroom-Wireframe.jpg) (The tabs can be image based or Flash based) 3) When the user hovers over a "hotspot" (product) they should see some type of modal, tooltip, flyout, layer that showcases the product information and provides links to additional information. (see Modal Requirements below) 4) The entire page should be rendered as an HTML file with your Flash piece embedded. The page should be centered with a repeating background. 5) Nice sharp graphics and Flash interactions - clean corporate design and proper text spacing and padding. Modal Requirements See Kitchen Vignette.doc and Bath Vignette.doc for product hotspot information. 1) Thumbnail image of the product 2) Product Code, Product Name, Color, Manufacturer, Price 3) Description: A short paragraph explaining the product (provided) 4) Additional Product Details link 5) This should be simple and cool looking Modal Examples: - Google Maps (The tooltip you see on the location you are looking for) - Reference Link Click on Master Bath and you will see sample hotspots. Contest Deliverables Showroom.html - Your design and Flash files embedded into an HTML page the renders properly in IE6, IE7, Firefox 3 and Safari. You can make modifications to the storyboad design - this design is not final. Design Considerations - Research! Research other hotspot image treatments - Showing an intuitive interface. - Creating a clean, simple and professional design. Judging Criteria Your submission will be judged on the following: - The smoothness of the animations and transitions. - The creative approach considering the flash experience. - Organization and cleanliness of the Actionscript code. You MUST use AS3 in this contest. Submission & Source Files Preview Image For this contest, please use a screenshot that demonstrates some interaction or transition. Do NOT alter, skew or add dramatic effect to this image. The client will need to review the look and feel of the submission as is. Submission File One (1) SWF file embedded in one (1) HTML file and any/all files that are needed to make your Flash design work. The only files you should not include here are the layered original graphic files and/or font files, if applicable (which belong in your "source" folder). Any Flash or actionscript source files provided as part of your submission will not be made available as downloads from the studio site. Source Files Same as "submission" folder PLUS any original graphic files used in the widget creation from Adobe Photoshop, GIMP, Adobe Illustrator or Inkscape must be provided in the zip file in a folder named "original graphics" Final Fixes As part of the final fixes phase you may be asked to modify fonts (sizes or colors) overall colors, or a specific Flash animation.
Ferguson will be holding a series of contests in the next few weeks to design and update their existing website (Ferguson.com). One of the main goals is to drive more traffic to the Ferguson stores/showrooms by allowing customers the ability to find showrooms easily and also create an engaging online experience. The Ferguson Showroom page will be the main landing page for customers to find out about Ferguson Showrooms, services available and new products. Showroom Page Requirements: For this contest you will be taking the Ferguson Showroom Storyboard (Showrooms.psd) and the provided "Kitchen" and "Bathroom" vignettes images and design Flash interactions between the User and the vignette. Example: When a user goes to the Showroom Landing page the first image they will see is the "Kitchen" vignette. The user will see "hotspot" icons on the image indicating they should mouseover a specific product and learn more about it. The most important aspect of this page is providing a very easy to understand user experience. The user should not have to think about what to click, where to go or how to find information. They should be focused on the information displayed and not the interactions themseleves. All animations, transistions and interactivity should be sharp and engaging graphically. What we are looking for: 1) A Graphic icon that indicates a "hotspots" on the vignette. (A hotspot would be highlighting a product) These should have a subtle animation to them. 2) Two Tabs - One that says "Kitchen" and another that says "Baths" (see Showroom-Wireframe.jpg) (The tabs can be image based or Flash based) 3) When the user hovers over a "hotspot" (product) they should see some type of modal, tooltip, flyout, layer that showcases the product information and provides links to additional information. (see Modal Requirements below) 4) The entire page should be rendered as an HTML file with your Flash piece embedded. The page should be centered with a repeating background. 5) Nice sharp graphics and Flash interactions - clean corporate design and proper text spacing and padding. Modal Requirements See Kitchen Vignette.doc and Bath Vignette.doc for product hotspot information. 1) Thumbnail image of the product 2) Product Code, Product Name, Color, Manufacturer, Price 3) Description: A short paragraph explaining the product (provided) 4) Additional Product Details link 5) This should be simple and cool looking Modal Examples: - Google Maps (The tooltip you see on the location you are looking for) - Reference Link Click on Master Bath and you will see sample hotspots. Contest Deliverables Showroom.html - Your design and Flash files embedded into an HTML page the renders properly in IE6, IE7, Firefox 3 and Safari. You can make modifications to the storyboad design - this design is not final. Design Considerations - Research! Research other hotspot image treatments - Showing an intuitive interface. - Creating a clean, simple and professional design. Judging Criteria Your submission will be judged on the following: - The smoothness of the animations and transitions. - The creative approach considering the flash experience. - Organization and cleanliness of the Actionscript code. You MUST use AS3 in this contest. Submission & Source Files Preview Image For this contest, please use a screenshot that demonstrates some interaction or transition. Do NOT alter, skew or add dramatic effect to this image. The client will need to review the look and feel of the submission as is. Submission File One (1) SWF file embedded in one (1) HTML file and any/all files that are needed to make your Flash design work. The only files you should not include here are the layered original graphic files and/or font files, if applicable (which belong in your "source" folder). Any Flash or actionscript source files provided as part of your submission will not be made available as downloads from the studio site. Source Files Same as "submission" folder PLUS any original graphic files used in the widget creation from Adobe Photoshop, GIMP, Adobe Illustrator or Inkscape must be provided in the zip file in a folder named "original graphics" Final Fixes As part of the final fixes phase you may be asked to modify fonts (sizes or colors) overall colors, or a specific Flash animation.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.