1. Amanda Fick Arif Hussain John Casiello GREEN TEAM ECT 455 Deliverable G 3/15/2011 Deliverable G

2. COMPANY OVERIEW: HiddenAudio! offers a unique home audio product. Unlike traditional speakers, which get placed on a shelf, the floor or even hung on the wall, HiddenAudio converts the wall itself into a giant speaker. Intro VALUE PROPOSITION: HiddenAudio! is a new company with an innovative product with very limited (if any) market presence. A website will allow HiddenAudio to leverage online channels and marketing to reach their niche audience. The website’s main objective will be to educate potential customers about the company and its products.

3. ATTRACT: Marketing and Advertising: Web Advertising and Affiliate Marketing Social Media (bloggers, online communities) SEO/SEM Customer Type: Analytical, product requires customization, 10-15 year life span INTERACT: Tools, Features and Content: E-Commerce Value Chain Product Description Technical Specs of engineering of device Diagram of how product works Video of installation Testimonials: Video and Written Photos (Product, installation, etc..) Product guarantee and warranty Ask Questions, Request Live Demo, and In-person consultation Frequently Asked Questions page Interactive tool to enter dimensions to receive quote Company Overview and History

4. Intro ACT: Order Placement and Delivery: No online orders - Product require in-person consultation for orders Returns or service requests require manual interaction Conversion = Request for consultation or more information REACT: Customer Service and Support: Contact Us form Phone number listed E-Commerce Value Chain

5. Application Architecture

6. Site Structure and Navigation Clear toolbar at the top of each page Search text box very clearly and noticeable at top right hand side of all pages All information architecture flows in order that makes reading content very easy Contact Us form placed with easy navigation Testimonials very noticeable on all pages Quote feature is currently in the “Products” page but can also be on the homepage All content is position in relevant tabs which makes locating information more easy Site Structure & Navigation

7. Detail Design Requirements Logo should be on top left. There should be search functionality. Search box should be ideally on top/bottom right. Facebook and twitter links must be on the home page Navigation should be horizontal on the top and must stay on all pages of the site. The site must have white background as the primary background. Body text font should not be black. Should be more towards a darker shade of grey. Taglines in the html should be in Heading tags. Testimonials box should be placed on the home page. Ideally there should be 1 random testimonial that should be displayed in that box. Design of the site should be full width. It should not be centered. Home page must not be very cluttered. Should have 6-8 lines describing the c company. We like the combination of Dark Blue with the white background. Would prefer if Dark blue is used on the site where possible. Header would be good place to use blue as that can make the header stand out from the rest of the site. Design Requirements Design

8. Class Diagram Design

9. Database Structure and ERD Diagram Design

10. Database The database server used by the web application is MSAccess. We selected it due to its great compatibility with other Microsoft technologies. Data Layer The data layer is implemented as a C#.NET 3.5 assembly using Linq To Sql as the ORM. Linq To Sql is an ORM that works specifically with SQL Server 2005. It allows us to query the database from within the development environment without resorting to error prone SQL or Stored Procedures. Business Layer The business layer is implemented as a C#.NET 3.5 assembly and encompasses all the business rules of the application. Site Interaction with Database Design

11. V Validation Process for Forms Validation on the site is currently being done on the server side. When the form submit button is clicked we validate the controls on the server side to check if all the necessary fields are filled and if some of the necessary fields are not filled or if there is any other validation error we show the error message in a label in red color on the page. An Alternative Approach – Could have been to use the built in ASP.NET client/server side validation controls. Using those controls would have done the validation on the client side for the controls and would have saved the page from posting. A disadvantage of using the controls is that it adds a lot of overhead script and markup which increases the size of the markup of the page. Design

12. V Use of CSS Global CSS files is maintained which has all the CSS classes that are used in the site. The Global CSS file can be accessed on the below URL http://ectweb2.cs.depaul.edu/green45/hiddenaudio/global.css http://ectweb2.cs.depaul.edu/green45/hiddenaudio/global.css Inline CSS is not used on the site. This makes future changes to the CSS and color scheme easy and also keeps the size of the html markup page on the client end smaller as the CSS file will only be downloaded once and then cached in the browser cache. Design

13. V Site Content Home, About Us, Products, and News pages all have content Short and concise to allow users to read and digest only the most important info Diagram in Products section that details the specification of the Hidden Audio product New section is developed to provide heavy content to users interested in Audio and is used as a strategy to drive website traffic Site ContentDesign

14. V Primary Persona Educated Male in 30s Employed in various professions with annual income of $75k or higher; Career Oriented Individual Homeowner in city or suburban area More gear towards Single male; however, also targeted towards married males Progressive Thinking Enjoys Social Gatherings Avid Music Listener Usability

15. USABILITY TEST SCENARIOS: Task 1 - Submit Message: find and submit a question using the Contact form Results: 1.Overall: Easy to find and use 2.City lookup lists all cities, too many, perhaps Technical issue 3.Too many required fields, don’t like giving this much Task 2 - Perform on-site Search: submit on-site search for keyword of their choosing, select best result Results: 1.Overall: Easy to find and use 2.Technical issue, no search results. 3.Main navigation is so bold and prominent, expected to search there Task 3 - Register for eNewsletter: find and submit information necessary to register Results: 1.Overall: Difficult to find 2.Easy form to fill out Usability Testing

16. USABILITY TEST RESULTS: Site Overall: Layout was simple and easy to find things Appealing look and feel Needs more content and media about the product Marketing: – Newsletter on homepage, not something for users to search for – Clearer Call to Action: Schedule Consultation, Request a Quote Technical Issues: Search and “City” drop – down Various Contact Us forms for different uses Usability Testing

17. Demo http://ectweb2.cs.depaul.edu/green45/hiddenaudio http://ectweb2.cs.depaul.edu/green45/hiddenaudio/mobile Demo of the Web and Mobile Site

18. Questions & Answers