Amanda Fick Arif HussainJohn Casiello

GREEN TEAM

ECT 455Deliverable G3/15/2011

Deliverable G

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

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

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

Application Architecture

Application Architecture

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

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 RequirementsDesign

Class Diagram

Class DiagramDesign

Database Structure and ERD Diagram

AdminUserId

LoginName

Password

LastLoginDate

CityId

CityName

StateId

IsActive

NewsletterEmailId

EmailAddress

Name

DateAdded

RequestQueryId

Name

Address

CityId

Phone

Email

Message

RequestQuoteId

Name

RequestDate

Comments

NumberOfRooms

NeededByDate

StateId

Name

ShortName

IsActive

UserCommentId

UserName

Comment

RatingId

Approved

DateAdded

DateApproved

Design

• 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

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

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

• 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

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

VPrimary 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

USABILITY TEST SCENARIOS:

Task 1 - Submit Message: find and submit a question using the Contact form

Results:1. Overall: Easy to find and use2. City lookup lists all cities, too many, perhaps Technical issue3. 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:– Overall: Easy to find and use– Technical issue, no search results.– 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 find2. Easy form to fill out

Usability Testing

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

Demo

• http://ectweb2.cs.depaul.edu/green45/hiddenaudio• http://ectweb2.cs.depaul.edu/green45/hiddenaudio/mobile

Demo of the Web and Mobile Site

Questions & Answers