IMD123 Dr. Hruska 8 August 2014 The Healthy Vine

Table of Contents Stakeholder Overview Stakeholder Goals/Objectives User Demographics Goals/Needs User Personas User Scenario Meeting the Objectives Features/Content Specifications Architectural Map Wire Frames Style Guide Mock-up/Prototype References (Works Cited) Contact Information

Stakeholder Overview Phillip and Nancy Parsons are farmers who own and operate The Healthy Vine, a local produce market. The Parsons would like to develop a website that would benefit persons which may find it difficult to obtain the fresh produce they need in order to stay healthy. The idea is to design a user-friendly website that is easy to navigate. Phillip and Nancy met at a local food bank. Phillip was a farmer delivering produce to be distributed to the needy and Nancy was a volunteer handing out food and other supplies as requested. The two began dating and eventually tied the knot. Nancy began helping Phillip with chores around the farm when she was not caring for her disabled grandmother. Her grandmother had a stroke in 1987 which left her unable to use the left side of her body. Nancy was the only family member available to help her grandmother with errands and such. Along with doing chores around the farm, taking care of a household and volunteering at the food bank, this began to take a toll on Nancy. The Parsons begin thinking about ways to ease the load for Nancy. She definitely did not want to stop volunteering and she had to make sure her grandmother was getting the proper nutrition she needed by purchasing and delivering her healthy food each week. She obviously needed to do her share around the house and farm as well. That is when it dawned on the couple that other people faced these same kinds of dilemmas every day. Thus, The Healthy Vine was established in The elderly, disabled and handicapped or a chosen family member could call and order fresh produce and have it delivered to their home with no delivery fee. The Parsons would like a website designed to suit the needs of these types of individuals. 3

Stakeholder Goals/Objectives The Healthy Vine is opened to the general public and a website with the same name would help promote the business but, the main goal, as mentioned earlier, is to have a website design geared toward physically challenged individuals. The site should showcase fresh produce and be user–friendly, well- organized and easy to navigate. Individuals should be able to access, from the home page, a tutorial which explains the steps involved in the ordering process. The target group/user is any physically challenged male or female aged 18 and older. The website should be designed to cater towards individuals of all education levels from elementary school and up. Very little computer experience or knowledge should not be a hindrance to the user. There should be a tutorial which guides the user through the ordering process. Contact information should also be easily accessible. The website should be a great asset for an individual that is unable to leave his or her home in order to grocery shop. Family members, designated by the individual, should also be able to place orders for their elderly, handicapped or disabled relative. This should be especially helpful for blind individuals. Food banks and homeless shelters should be able to place orders as well. A majority of the target audience is low-income earners or non-profit organizations. The goal of The Healthy Vine website is to boost income and raise awareness of the need for healthy food while at the same time, helping these low-income individuals and non-profits save money by providing discounts and not charging delivery fees. These things should be emphasized. 4

User Demographics/Goals & Needs Target Group/User 18 Years and Older Male or Female Low-Income Earners Non-Profit Organizations All Education Levels Computer Knowledge/Use Varies The target group/user is any physically challenged male or female aged 18 and older, relatives of these individuals, homeless shelters and food banks. The website should be designed to cater towards individuals of all education levels from elementary school and up. Very little computer experience or knowledge should not be a hindrance to the user. There should be a tutorial which guides the user through the ordering process. Contact information should also be easily accessible. 5

User Persona 1 “I need the convenience of ordering online for my elderly mother.” Cathy works full time and has a family of her own. Her mother is unable to drive. Therefore, Cathy helps with errands. Technical Profile: Very Computer oriented hours/week online. Internet Use: 80% of use is work related; 20% is personal use. Cathy Age: 43 Occupation: Office Manager Education: Business Degree Demographics: Louisville, KY Family: Married, three children Household Income: $150,000/year Favorite Websites 6

User Persona 2 “I would like to have a little more independence. I often have to ask my son to do my grocery shopping and run errands for me.” Arnold is confined to a wheelchair due to a spinal injury. Therefore, he does most of his shopping online. Technical Profile: Comfortable with placing orders on familiar websites, but not much more than that. Internet Use: 50% shopping; 50% is used for Bible Study Tools. Arnold Age: 72 Occupation: Retired/Disabled Education: High School Diploma Demographics: Houston, TX Family: Widower Household Income: $18,000/year Favorite Websites 7

User Persona 3 “I volunteer at a food bank and would like the convenience of ordering food supplies online.” Davis is enrolled in college full time. a part-time waiter and a volunteer at his local food bank. Technical Profile: Very comfortable with computers. Daily Use. Internet Use: 60% school use; 40% is used for volunteer work and personal interests. Davis Age: 28 Occupation: Waiter Education: Enrolled in College Demographics: Charlotte, NC Family: Single Household Income: $15,000/year Favorite Websites 8

User Scenario Cathy had spent all day in the office. It was finally time to go home. However, she still had a lot to do. Cathy had to stop by the day care center and pick her two youngest children up before heading home. Once home, supper had to be cooked and served not to mention helping the children with their homework. Then, there was bath time. Cathy desperately needed to do some grocery shopping for her mother, but time would not today. Cathy’s mother, Evelyn, is confined to a wheel chair because of a stroke she suffered a few years back. Evelyn relies on Cathy for many things, grocery shopping included. While giving her son a bath, Cathy was building tomorrow’s schedule in head. She had to work her mothers shopping in somewhere. If only her mother were able to buy her own groceries, it would take a small load off Cathy. Then Cathy thought, Mother could buy her own groceries, she just could not leave the house to do it. Later that night, after the children were in snug in their beds, Cathy began surfing the internet looking for sites that made home deliveries. There were several grocery stores and fresh produce markets that provided that service. Cathy also found a local farm that delivered fresh vegetables and fruit to their clients each week with no delivery charges. Orders could be placed online and scheduled for delivery. Cathy was eager to try it out. She placed an order to be delivered to her mothers house the next day! This saved Cathy the time of having to travel to and from the store, shopping for items and then taking them to her mother. The delivery driver placed the order on the kitchen table for Evelyn so that it would be within reach. She was able to put the things away on her own which gave her a sense of independence. Both Cathy and her mother would benefit from this arrangement. 9

The proposed website would be designed so people could utilize the site to order fresh produce and have it delivered to them with no delivery fee. Stakeholders would be local farmers and farmer’s markets. This would help those businesses move their product which would enable them to have fresh produce at all times. This would possibly eliminate the need to dispose of any products because of them being out of date. Non-profit organizations such as food banks and homeless shelters, would be able to buy fresh produce and have it delivered to them free of charge. This food could then be disbursed to their clients. Having produce delivered to them at no cost allows them to save time and money that could be spent serving those in need. Disabled, handicapped and elderly persons would benefit the most from this website. These people would be able to buy and receive fresh produce from the comfort of their home, with no delivery fee. This would be especially beneficial for him or her if they had no family members living close by to help with running errands such as grocery shopping. This individual’s family may also benefit from the website. If a family member is responsible for taking care of this individual, he or she would be able to keep up with his or her responsibilities by placing orders for the individual and having it delivered. This would free up time for them to take care of other responsibilities. This website would be well-organized and user –friendly making it easy to navigate and understand. A site tutorial would be available within the website. If the tutorial fails to answer any questions the user may have, contact information will be available as well. Meeting the Objectives 10

Features/Content Written Specifications – Home The home page contains a close-up image of celery stalks. The header has a white background and holds The Healthy Vine logo and name which is situated to the left and contains various greens and reds. A search bar is located to the far right of the header. Situated just to the left of the search bar is a shopping cart. This cart will hold items for the user until they are ready to check out. When ready to check out, the user will click on the cart and be carried to the review and check out process. The navigation bar has a dark green background with true type fonts in white. The main navigation contains buttons/links to the interior pages. Those pages are: Home, Non-Profits, Individuals, Volunteers, Testimonials, Site Tutorial and About Us/Contact Us. Users may click on a selected buttons to view the corresponding page. The first button “Home” is a link back to the home page being described. The second button “Non-Profits” links to information for non-profit organizations such as food banks, homeless shelters and soup kitchens. These organizations will learn how they can obtain fresh fruits and vegetables and discounted rates no delivery charges. They will also be able to place an order from this page. The third button is a links to information for individuals. These individuals may be disabled, handicapped or elderly. Individuals may also be a family member designated by an eligible individual, to place orders for that individual. This section explains the eligibility requirements for individuals. They will also be able to place orders from this page if eligible. The fourth button “Volunteers” highlights the current volunteers and includes information about what each volunteer does such as, sort items, box or bag items, take telephone orders, deliver orders, etc. There is also a link which opens a form for individuals to apply if they would like to volunteer their time.. 11

Features/Content Written Specifications - Home The fifth button “Testimonials” links to a page with testimonials from current and past users. The sixth button “Site Tutorial” links to a video which explains how to easily navigate the site, demonstrates how to place and submit orders, etc. The seventh button “About Us/Contact Us” links to a page which gives the history of how and why the company along with introduction to some of the staff members and volunteers. There is a “Login/Register” button located just below the header and to the far right of the navigation bar. When the button is clicked a smaller window opens. If the user has a username and password, they may sign in to gain access to the other pages. If the user is new to the site, there is a short form which can then be filled out and submitted by the user. A “Submit” button is included at the bottom of the form. They will then be asked to create a username and password. The user will now be able to login and use the website. The main content of the page is written in a true type font in black. This text explains the purpose of the website. Within the text, there is an explanation of how to use the website along with a link to the site tutorial which demonstrates the ordering process. The footer has a white background and holds The Healthy Vine logo and name which is situated to the left and contains various greens and reds. Contact us and volunteer links are contained within the footer as well as links to all privacy policies and terms of use and copyright information. 12

Features and Content Tables – Home Page Project Feature How will the feature be implemented What concerns do we have about this feature Content The Healthy Vine Logo The functional logo will be located to the far left in both the header and footer of the home page. When clicked on, this will direct you to the home page of The Healthy Vine website. If the user will realize it is a link back to the home page from within any of the interior pages. Text / HTML coding and CSS Styling Login / Register Button This button will be located on the home page and situated to the far right of the navigation. When clicked on, this will open a new window to be filled out with a user ID and password or an option to register for those new to the site. Ensuring User ID and password security. Ensuring security for registration information. Database PHP HTML coding and CSS Styling Search Bar The search bar can be used by the user to input specific words or strings of words related to their interests. This will save the user time by them not having to navigate through the website trying to find the information they desire. Potential spelling errors by users. Need to provide a solution of likely words. Text/HTML coding and CSS Styling Javascript Database, PHP Shopping Cart This feature will hold the users choices for purchase and may be referenced at any time. This will also be the route to check out submit payment information. Feedbacks screens will notify the user of an error during checkout as well as inform them their order was successful Database, PHP Text/HTML coding and CSS Styling 13

Features and Content Tables – Home Page, Cont. Project Feature How will the feature be implemented What concerns do we have about this feature Content Main Navigation Bar The navigation bar will be horizontal and placed just below the header and feature links that correspond with the information contained within the site. These links will take users to the following interior pages of the site: Home Non-Profits Individuals Volunteers Testimonials Site Tutorial About Us/Contact Us A navigation bar is an asset to any website. It makes it possible to target certain information and narrows information down to a specific topic. Links should be the most relative and important links. HTML Coding and CSS Styling Javascript Footer Links Links contained within the footer will include: Privacy Policy, Terms of Use, Volunteer, Contact Us The user realizing these links are available. HTML / CSS Javascript 14

Asset Tables – Home Page AssetFormatDescriptionAssociated Assets /Media (if any) Other Information The Healthy Vine Logo.png or.gif Located on the left of header and left of footer. Returns user to home page. Text / HTML CSS Click to navigate to home page Images.png or.jpg Background ImageJavascript Login Button.png Used to gain access to the site. Located on the home page to the far right of the navigation. Database PHP HTML coding and CSS Styling Search Bar.png The search bar can be used by the user to input specific words or strings of words related to their interests. Database PHP Javascript Text / HTML coding and CSS Styling This will save the user time by them not having to navigate through the website trying to find the information they desire. Shopping Cart.jpg or.png Hold user selections for purchase Database PHP Text / HTML coding and CSS Styling 15

Asset Tables – Home Page, Cont. AssetFormatDescriptionAssociated Assets /Media (if any) Other Information Main Navigation Buttons HTML Javascript Will take users to categorized pages of the site CSS Style Sheet Navigate to different areas of the site Home Page Text Text Javascript Written content, true type fonts CSS Style SheetIntroduction Footer Links HTML Javascript Links to pagesCSS 16

Features/Content Written Specifications – Site Tutorial The site tutorial page is set up much the same as the home page with the addition of a tutorial. The page contains the same close-up image of vertical celery stalks in the background. The header has a white background and holds The Healthy Vine logo and name which is situated to the left and contains various greens. A search bar is located to the far right of the header. Situated just to the left of the search bar is a shopping cart. This cart will hold items for the user until they are ready to check out. When ready to check out, the user will click on the cart and be carried to the review and check out process. The navigation bar has a dark green background with true type fonts in white. The main navigation contains buttons/links to the other interior pages and links back to the home page as well. Users may click on a selected button to view the corresponding page. The main content of the page is a video which explains how to easily navigate the site. Each button included on the navigation bar, the page it links to and the purpose of that page is discussed. Different ways of utilizing the search tool is discussed. The user is walked through the process of how to place an order by watching a demonstration which shows how to select items as well as place them in the cart and submit the order. The video mentions the fact that at any time, the user may click on the logo located at the top left of all site pages in order to be directed back to the home page of the website. The footer has a white background and holds The Healthy Vine logo and name which is situated to the left and contains various greens. Contact us and volunteer links are contained within the footer as well as links to all privacy policies and terms of use. 17

Features and Content Tables – Site Tutorial Project Feature How will the feature be implemented What concerns do we have about this feature Content The Healthy Vine Logo The functional logo will be located to the far left in both the header and footer of the home page. When clicked on, this will direct you to the home page of The Healthy Vine website. If the user will realize it is a link back to the home page from within any of the interior pages. Text / HTML coding and CSS Styling Search Bar The search bar can be used by the user to input specific words or strings of words related to their interests. This will save the user time by them not having to navigate through the website trying to find the information they desire. Potential spelling errors by users. Need to provide a solution of likely words. Text/HTML coding and CSS Styling Javascript Database, PHP Shopping Cart This feature will hold the users choices for purchase and may be referenced at any time. This will also be the route to check out submit payment information. Feedbacks screens will notify the user of an error during checkout as well as inform them their order was successful Database, PHP Text/HTML coding and CSS Styling 18

Features and Content Tables – Site Tutorial, Cont. Project Feature How will the feature be implemented What concerns do we have about this feature Content Main Navigation Bar The navigation bar will be horizontal and placed just below the header and feature links that correspond with the information contained within the site. These links will take users to the following interior pages of the site: Home Non-Profits Individuals Volunteers Testimonials Site Tutorial About Us/Contact Us A navigation bar is an asset to any website. It makes it possible to target certain information and narrows information down to a specific topic. Links should be the most relative and important links. HTML Coding and CSS Styling Javascript Video Will Explain and demonstrate how to navigate the site, place and submit orders. User may have wary about downloading Flash if not already installed on his or her computer Adobe Flash Footer Links Links contained within the footer will include: Privacy Policy, Terms of Use, Volunteer, Contact Us The possibly of the user not realizing these links are available. HTML / CSS Javascript 19

Asset Tables – Site Tutorial AssetFormatDescriptionAssociated Assets /Media (if any) Other Information The Healthy Vine Logo.png or.gif Located on the left of header and left of footer. Returns user to home page. Text / HTML CSS Click to navigate to home page Images.png or.jpg Background ImageJavascript Search Bar.png The search bar can be used by the user to input specific words or strings of words related to their interests. Database PHP Javascript Text / HTML coding and CSS Styling This will save the user time by them not having to navigate through the website trying to find the information they desire. Shopping Cart.jpg or.png Hold user selections for purchase Database PHP Text / HTML coding and CSS Styling Main Navigation Buttons HTML Javascript Will take users to categorized pages of the site CSS Style Sheet Navigate to different areas of the site 20

Asset Tables – Site Tutorial, Cont. AssetFormatDescriptionAssociated Assets /Media (if any) Other Information Video Adobe Flash Website Tutorial May have the capability of being downloaded as MP3 file Footer Links HTML Javascript Links to pagesCSS 21

Features/Content Written Specifications – About Us The about us/contact us page is also set up much the same as the home page with a few additions. The page contains the same close-up image of vertical celery stalks in the background. The header has a white background and holds The Healthy Vine logo and name which is situated to the left and contains various greens. A search bar is located to the far right of the header. Situated just to the left of the search bar is a shopping cart. This cart will hold items for the user until they are ready to check out. When ready to check out, the user will click on the cart and be carried to the review and check out process. The navigation bar has a dark green background with true type fonts in white. The main navigation contains buttons/links to the other interior pages and links back to the home page as well. Users may click on a selected button to view the corresponding page. The main content of the page is written in a true type font in black. This text is situated in a section just below the navigation and gives a brief explanation of how and why The Healthy Vine was formed. In a second section, just beneath the first, there is an introductory biography and image for a select few of the staff members and volunteer members. Each introductory biography and image is grouped together and placed two-wide within that section of the page. Remaining staff and volunteers are listed alphabetically, by last name, at the bottom of this section. The third and final section would contain a contact form which could be filled out and then submitted by the click of a button. Contact information such as mailing and address along with the company telephone number would be provided here as well. The footer has a white background and holds The Healthy Vine logo and name which is situated to the left and contains various greens. Contact us and volunteer links are contained within the footer as well as links to all privacy policies and terms of use. 22

Features and Content Tables – About Us/Contact Us Project Feature How will the feature be implemented What concerns do we have about this feature Content The Healthy Vine Logo The functional logo will be located to the far left in both the header and footer of the home page. When clicked on, this will direct you to the home page of The Healthy Vine website. If the user will realize it is a link back to the home page from within any of the interior pages. Text / HTML coding and CSS Styling Search Bar The search bar can be used by the user to input specific words or strings of words related to their interests. This will save the user time by them not having to navigate through the website trying to find the information they desire. Potential spelling errors by users. Need to provide a solution of likely words. Text / HTML coding and CSS Styling Javascript Database, PHP Shopping Cart This feature will hold the users choices for purchase and may be referenced at any time. This will also be the route to check out submit payment information. Feedbacks screens will notify the user of an error during checkout as well as inform them their order was successful Database, PHP Text / HTML coding and CSS Styling 23

Features and Content Tables – About Us/Contact Us Project Feature How will the feature be implemented What concerns do we have about this feature Content Main Navigation Bar The navigation bar will be horizontal and placed just below the header and feature links that correspond with the information contained within the site. These links will take users to the following interior pages of the site: Home Non-Profits Individuals Volunteers Testimonials Site Tutorial About Us/Contact Us A navigation bar is an asset to any website. It makes it possible to target certain information and narrows information down to a specific topic. Links should be the most relative and important links. HTML Coding and CSS Styling Javascript Footer Links Links contained within the footer will include: Privacy Policy, Terms of Use, Volunteer, Contact Us The possibly of the user not realizing these links are available. HTML / CSS Javascript 24

Asset Tables – About Us/Contact Us AssetFormatDescriptionAssociated Assets /Media (if any) Other Information The Healthy Vine Logo.png or.gif Located on the left of header and left of footer. Returns user to home page. Text / HTML CSS Click to navigate to home page Images.png or.jpg Background ImageJavascript Search Bar.png The search bar can be used by the user to input specific words or strings of words related to their interests. Database PHP Javascript Text / HTML coding and CSS Styling This will save the user time by them not having to navigate through the website trying to find the information they desire. Shopping Cart.jpg or.png Hold user selections for purchase Database PHP Text / HTML coding and CSS Styling Main Navigation Buttons HTML Javascript Will take users to categorized pages of the site CSS Style Sheet Navigate to different areas of the site Footer Links HTML Javascript Links to pagesCSS 25

Architectural Map 26

Wireframe – Home 27

Wireframe – Inner 1 28

Wireframe – Home 2 29

Wireframe – Inner 2 30

31

Type Styles THE HEALTHY VINE LOGOEXAMPLE: The Healthy Vine Tempus Sans ITC, Size: 30 pt. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz NAVIGATIONSEARCH, LOGIN/REGISTRATIONVerdana, Size: 12 pt.ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz EXAMPLE: VolunteersEXAMPLE: Search 32

Type Styles, Continued PAGE TITLESEXAMPLE: Home Tempus Sans ITC, Size: 24 pt. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz BODY COPYFOOTER LINKS Georgia, Size: 12pt. Verdana, Size: 12 pt. ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz EXAMPLE: Lorem ipsum dolar EXAMPLE: Privacy Policy 33

Images Site Tutorial Page Volunteers PageHome Page 34

35 Mock-up

36 Mock-up

37 Mock-up

Works Cited Asian businesswoman holding paperwork. Photography. Encyclopædia Britannica ImageQuest. Web. 3 Aug Baskets of fresh produce. Photography. Encyclopædia Britannica ImageQuest. Web. 1 Aug Businesswoman holding folder. Photography. Encyclopædia Britannica ImageQuest. Web. 15 Jul Celery background. Photography. Encyclopædia Britannica ImageQuest. Web. 30 July Close up of a young man posing. Photography. Encyclopædia Britannica ImageQuest. Web. 15 Jul Cortland, Nebraska, United States of America.. Photography. Encyclopædia Britannica ImageQuest. Web. 15 Jul Farmer Man Holding Red Onions. Photography. Encyclopædia Britannica ImageQuest. Web. 4 Aug

Works Cited, Continued Grapevine leaf. Photograph. Encyclopædia Britannica ImageQuest. Web. 30 July Hispanic woman carrying grocery bags. Photography. Encyclopædia Britannica ImageQuest. Web. 5 Aug Jean Talon Market with young woman displaying produce. Photo. Encyclopædia Britannica ImageQuest. Web. 4 Aug Man Holding Bramley Cooking Apples. Photography. Encyclopædia Britannica ImageQuest. Web. 4 Aug Turnips. Photography. Encyclopædia Britannica ImageQuest. Web. 3 Aug Work. Photography. Encyclopædia Britannica ImageQuest. Web. 3 Aug "Yahoo Image Search Results Page." Produce Youtube Video Image. N.p., n.d. Web. 03 Aug

Contact Information Kim Faile PO Box 1234 Anywhere, USA (555)