ECT 455 E-Commerce Web Site Engineering

1. ECT 455 E-Commerce Web Site Engineering Green Team

2. Value proposition Our intention is to better serve the individuals who are interested in being an active part of our organization by enhancing their experiences. With the deployment of our e-commerce initiatives, Forever Moving Forward, Inc. will have the ability to provide a multitude of enhanced services to our various types of customers - mentors, mentees, financial donors, and the general community by offering the following features: What is the value proposition and business model of your site? Serve anyone who wants to collect or view information (organizational information, means of contact, upcoming events, and attractive multimedia presentations) Allow anyone to be an active participant in FMF’s programs by better offering convenient ways to be involved. This will connect our customers to their objectives (donating cash/time, signing up to be a mentor or mentee) Access of web 2.0 features to promote and enhance participation, and share information – further strengthening our active community by providing another forum of interactivity.

3. Business Model Forever Moving Forward, Inc. (FMF) will employ an e-commerce initiative to expand its reach in the Chicago community. The development of our e-commerce footprint will be aligned to supporting our Business Model - a Merchant of Goodwill. The successful implementation of a merchant website is critical to the growth of FMF. In an effort to engage a community and make them responsive to our objectives, our merchant model will support a virtual interface to streamline the following business practices: Provide company information and a virtual community (testimonials, blogs, mentor/mentee progress updates, multimedia of company events, calendar, contact information) Increase revenues – provide a convenient avenue for donors; create the ability to sell products. Expand communications to our target markets (mentors, mentees, donors) using capabilities to quickly send information 1:1, or to many via social web applications. Engage in web marketing strategies (good search optimization, publications, emails, collecting visitor information, post web ads)

4. Attract Customers: The web site will encourage customers to visit by proving information that is pertinent to the target audiences. The site will employ a clean concise design for clear understanding of content and easy navigation. The web site will employ a search engine to assist in site navigation. Banners and other advertisement mechanism will also be used to provide customers access to related products and services. How does the site present its content/catalogue to attract different types of users and shoppers? How does the site support different types of online purchasing behaviors? (Interact) Interact with Customers: To facilitate e-commerce the site will provide clear details of services and products and the means of purchase and donation. Registration functionality will also be provided so that customers can be tracked and targeted for specific products and services.

5. Two ways to donate • Mail-in Donation Form • For people not comfortable with online transaction • Online Payment System for Donation • For people to enjoy the convenience of online donation How does your site process order placement and payment? (Act) How does your site handle delivery, shipping and return? Delivery, shipping and return does not apply.

6. 3.2 Information Architecture Display and comment on the information architecture of the site. Home Page: This page will contain minimum content of information, this will include the Mission Statement and flash video of images. The page will include windows and links to other pages. About Us: This page will automatically open in the sub-category History page Community: This page will automatically open in the sub-category News page Donate: This page will automatically open in the sub-category How to Donate page. Contact Us: Information about how to contact FMF Login/Register: A form for members to either login to the website, or register as a user. A registered user will have access to certain items such as the message board. Information architecture

7. Navigation Layout: A navigation layout will include a horizontal navigation bar on each page that links to the 6 top line category pages (Home, About Us, Community, Donate, Contact Us, Login Register). Each top-line page will have a Left-Side Navigation to the sub-category pages for the related top-line page (only if there are sub-category pages) Example of Horizontal Navigation Bar Home | About Us | Community | Donate | Contact Us | Login/Register Describe your choice of the navigation layout, page layout and color scheme for your site. Page Layout: Home/Main page is dashboard to pertinent visitor/member user information Left Pane Buttons: Navigational elements for membership/donation promotion Sponsor Info/Messages Box: Sponsorship information and/or logo or pertinent messages Calendar/Upcoming Events Pane: Used for event promotion, easy event lookup

8. C# ASP.Net Version 3.5 with SQL Which programming language did you use to develop your site? Database Structure: TABLE FMFUser Users can register and create an account TABLE FMFEvent Events Calendar can be used effectively  TABLE Post Users view message boards, post new items TABLE Topic Topic can be added TABLE Gallery Images can be stored in the database Describe your database structure and provide a diagram of your ERD.

9. Diagram of ERD

10. Registration Users will be able to register and create an account The database can keep records Login Users can login to access privilege content Users will be able to set logged in session status The database validates the users login Calendar Users can use Events Calendar Mentees will be able to view a calendar containing mentoring events Administrators will be able to update the calendar with new events The database can keep records of calendar Search Content Users can search site content The database can maintain information in search content Donation Users can donate money, payment processing Users will be able to make online donations to FMF The database can keep records Message Board Users can view message boards, post new items Mentors and mentees will be able to post to the message boards Administrators will be able to edit the message boards Describe how your site interacts with the database.

11. Describe validation process for your forms. Paramatarized Queries Md5 all passwords White list allowable data to the following characters: : 0-9, a-z, A-Z, !, @, #, $, %, *, (, ), -, +, =, {, }, :, ;, “, ‘, ,, ., ?, / Data input that is not in the sanitized white list shown above shall be silently deleted prior to database entry Unicode is translated across HTTP as character entity references in the form of Ӓ documented here: http://www.w3.org/TR/html4/sgml/entities.html - with our requirement of white listing and not allowing for the & character, the removal of it will remove any character reference as well. However, to make sure that all Unicode is removed, prior to sanitizing by our white list, we shall also remove any character entity references with the following regular expression: /\&\#?\d{2,}\;?/

12. Describe your site’s primary personae? • Describe the five detail design requirements you selected • and implemented on your web and mobile site. Registration - Users can register and create an account Login - Users can login to access privilege content Calendar - Site Owner can update Events Calendar Search Content -Users can search site content Donation - Users can donate money, payment processing Primary Personae Middle-class and lower-class families in need of assistance with troubled youth Parents seeking positive role models for their children People who seek to fund Chicago organizations

13. Registration Login/Message board Donation Task 1: Registration Click on the top bar in the last column, Login/Register Fill in information required Complete registration Task 2: Login/Message Board Login to the account Add comments on the message board Add topic then fill in message Complete Login/Message Board Task 3: Donation Fill in the amount and other information Complete donate money process Describe the three usability test scenarios you perform on your site?

14. What were the results? What was changed in your interface based on the results? Reduce the white space around the main horizontal navigation menu. Add success stories to community page. Add mentoring and teaching content. Add explanation of password policy (e.g. how many characters long) to registration page. Add a few more interesting images to Contact Us and About Us pages. Images should be attractive to young girls.

15. Describe the structure of your site such as the navigation and page layout FMF uses horizontal navigation bar on each page that links Home, About Us, Community, Donate, Contact Us, Login Register. Also, left-Side Navigation to the sub-category pages for the related top-line page This is the example of left-Side Navigation of page layout

16. Describe the content for each page. • Home Page: This page will contain minimum content of information, this will include the Mission Statement and flash video of images. The page will include windows and links to other pages. • About Us: This page will automatically open in the sub-category History page. • History • An overview of the organization • Left-Side Navigation – About Us • Photos and Testimonials • Photos of events and activities • Testimonial quotes from various members of the organization • Left-Side Navigation – About Us • Meet our Team • Bios and photos of the organization leaders • Left-Side Navigation – About Us • Mentors • Bios and photos of the Mentors • Left-Side Navigation – About Us • Partners • List of partners and sponsors, includes links to their websites and information about how to become a partner/sponsor • Left-Side Navigation – About Us

17. Describe the content for each page. • Join our Team • Information about how to become a mentor • Left-Side Navigation – About Us • Becoming a FMF • Information about how to become a mentee • Left-Side Navigation – About Us • Community: This page will automatically open in the sub-category News page • News • Information about the program; reports; notices • Left-Side Navigation – Community • Activities and Events • Information about past and future events. Photos of past events. • Left-Side Navigation – Community • Calendar • Event Calendar • Left-Side Navigation – Community • Message Board • A community forum with several topics to post messages about; available for all registered members. • Left-Side Navigation – Community

18. Describe the content for each page. • Donate: This page will automatically open in the sub-category How to Donate page. • How to Donate • Information about how to donate and where the donations go towards • Left-Side Navigation – Donate • Submit a Cash Donation • A PayPal cash donation form • Left-Side Navigation – Donate • Donate your Time • Information about volunteering, a contact form • Left-Side Navigation – Donate • Thank Yous • A list and tribute to individuals/groups who have donated to the organization • Left-Side Navigation – Donate • Contact Us: Information about how to contact FMF • Login/Register: A form for members to either login to the website, or register as a user. A registered user will have access to certain items such as the message board.

19. Website Information Main Website http://ectweb2.cs.depaul.edu/green40a/ Mobile Site http://ectweb2.cs.depaul.edu/green40a/mobile/ Login: demo/demo

20. Green Team Adam BarrJake LakeKristina WuMartha FittPatarika TipwongSiebert Keith Hardeman