Grow It!

From Cmsc434_s10
Jump to: navigation, search

Creating a plant and gardening information portal to unite 4 distinct websites.

Team members:

Venkat, Michael, Cody, David

Project Proposal

Users and tasks

Target Users

Our target audience is composed of all ages and is divided into the following categories:

  • Master Gardeners
    • Current
    • Prospective
  • Hobbyist
    • Working
    • Retired
  • Students
    • Current
    • Prospective
  • Kids

Tasks to Support

We plan to develop a solution which handles the tasks listed below.

  • Provide general how-to's about home gardening.
  • Allow users to get answers from field experts (chat, email, FAQ, etc).
  • Provide general information on pests, diseases and types of plants.
  • Combine posts of hot topics from different technologies into one location (i.e. YouTube, Twitter, Blog, Facebook, eNewsletter).
  • A method for users to easily search for plant information.
  • Allow site administrators to easily edit and update content.

Below is a table explaining how some of these tasks are currently accomplished and the desired method using our new interface.


Existing solutions and their limitations

The following are some of the methods currently implemented by HGIC to provide their users with information:

The new application would consolidate the department's four sites into one site with a uniform interface. It will also provide a search engine with filtering capabilities. This combination of enhancements will make gardening information less scattered and easier to locate. Also, the current websites, which run on antiquated Dreamweaver technology, are difficult for the non-technical staff to update. Our website will provide a simple interface for creating content. Finally, the sites ability to assist users will become much more scalable with the elimination of personnel to answer phone calls.

Meeting notes

  • Search option to simplify finding information and
    • support search across all websites,
    • include a glossary,
    • and allow filters to be assessed for specific search.
  • Update the style of the website and simplify it's interface.
  • Develop and Embedded Gardening Diagnostic Application (EGDA) to replace the Plant Diagnostics site with the following:
    • Ability to search through all classifications and sections.
    • Pictures of each instance.
    • Detailed diagnosis explaining the instance and links to some related articles.
  • A plant of the day and how-to of the day on the home page which may be selected randomly or by site administrators.
  • Divide the site into sections such as information, diagnosis, how-to and questions.
  • Separate all information into pre-determined categories such as
    • vegetables
    • landscaping
    • outdoor gardening
    • greenhouse
    • irrigation
Mind map.jpg

User and Task Analysis


  • Interview
    • For an interview we would develop a list of questions to ask our subject. The questions would be very open ended and leave plenty of room for the subject to elaborate. They would mainly focus on how they use the site now and what their main problems are with the site. We would choose a person who is a regular visitor to the HGIC suite of sites. To record this data we would have one note taker and also voice record the entire interview.
  • Questionnaires
    • A questionnaire would allow us to get a large set of data to analyze. This would be done in the form of an online survey. Current users of the site would be directed to this survey where they would be asked questions regarding the HGIC websites. Questions would include why they visit the site, what they dislike the most, and demographic discovery questions.
  • Researching Similar Products
    • Since this is a UMD affiliated website it would be useful to know how other UMD sites are organized. This will help in developing a consistent and clear layout. As we look at these sites we would take notes on how they handle different functions. For example, knowing how other sites optimize navigation would be crucial. Placement of the navigation bar and how searching is done are also good things to learn.

What We Chose

We chose to hold an interview with our clients. One client is one of the founders of HGIC and handles the management of the websites. The other is in charge of HGIC's marketing.

User Classes

Young Adult

  • Age: 18-25
  • Education: In college
  • Job: Student
  • Computer Skill: Medium-High
  • Computer Experience: Competent
  • Location: College Campuses
  • Motivation: Getting information on a plant, connecting with others
  • Attitude: Unsure-Neutral
  • Social Context: Hobby
  • Usage Pattern: Occasional

Persona: John is a freshman at the University of Maryland. He is 18 years old. He has a basic understanding of computers and visits facebook a lot. His parents are really into gardening and is looking to get some information on gardening to see if it is something he would be interested in pursuing. He visits the website 3 times a week to check for updates.

Rookie Gardeners

  • Age: 30-50
  • Education: Varies
  • Job: Varies
  • Computer Skill: Medium-High
  • Computer Experience: Competent
  • Location: Urban/Suburban
  • Motivation: Learning how to start a garden, connecting with others
  • Attitude: Neutral
  • Social Context: Hobby, Job
  • Usage Pattern: Moderate

Persona: Mary, a 35 year old mother, would like to save money by growing her own vegetables. She has a basic understanding of computers mainly dealing with checking her email and keeping up with friends on facebook. She needs to learn about what vegetables she can grow where she lives and how to do it. This includes the materials she will need. She is also looking to get help from other gardeners who have more experience than she does. She checks the website daily for information and tutorials.

Master Gardeners

  • Age: 50+
  • Education: Varies
  • Job: Retired
  • Computer Skill: Low-Medium
  • Computer Experience: Minimal
  • Location: Suburban Areas
  • Motivation: Connecting with other master gardeners, finding information on more advanced gardening topics
  • Attitude: Eager
  • Social Context: Hobby
  • Usage Pattern: Frequent

Persona: Frances is a grandmother of 4. She has been gardening her whole life, mainly focusing on trees and flowers. Her understanding of the computer is minimal at best but her oldest grandson just helped her install a new computer in her house. She knows how to access the internet and browse websites. She is looking for ways to connect with other gardeners and if possible get updates on gardening news. She would also love to get connected with other gardeners who have similar interests. She checks the website everyday.

Potential Stake Holders

Other people who will be affected by this system are the current administrators of the website and hot line. During the growing season the 1-800 number gets a lot of activity. With a new and improved website that allows for easy information access this hot line will see a decline in activity. The administrators of the site will also have an easier time managing the website because our system will make it very easy to update and manage content.


View Hot Topics

  • Goal: Get the latest news on gardening relating to current events
  • Preconditions: Visit the website
  • Sub-tasks:
    • View home page
    • Click on current news story you want more information on
  • Complexity: Low
  • Frequency: Every Time
  • Potential Errors: User clicks on wrong news story

Search Information

  • Goal: Find information on any topic
  • Preconditions: Know what you want to search for
  • Sub-tasks:
    • Locate search bar
    • Parse search result
  • Complexity: Medium
  • Frequency: Every Time
  • Potential Errors: Enter wrong phrase in search box

Ask Questions

  • Goal: Get questions answered by other gardeners
  • Preconditions: Have a question in mind
  • Sub-tasks:
    • Find question posting area
    • Post new question
  • Complexity: Medium
  • Frequency: Some times
  • Potential Errors
    • SQL injection
    • Enter wrong question
    • Typos

Follow HGIC's Many Social Networking Sites

  • Goal: Find all the ways hgic is connecting with people
  • Preconditions: Know what facebook, twitter, youtube, and a blog is
  • Sub-tasks:
    • Locate contact area
    • Have a facebook/twitter account
  • Complexity: High
  • Frequency: Every Time
  • Potential Errors:

Find Tutorials

  • Goal: Get information on how to do something related to gardening
  • Preconditions: know what topic you want to get more information on
  • Sub-tasks:
    • Find tutorial section
    • Navigate to tutorial you want
  • Complexity: Medium
  • Frequency: Some times
  • Potential Errors
    • Unable to navigate
    • User goes down the wrong path and must backtrack

Design Sketches


One afternoon Jacob is searching the HGIC website which he often does to see what’s new in the gardening community (FREQUENT). The first thing he does is check the top news stories. He quickly finds that spring is around the corner and that a whole slew of pest outbreaks are coming with it (CONTEXT). After reading this Jacob runs out to his award winning garden to make sure he is ready (HIGHLY MOTIVATED NEED). He immediately notices holes in the leaves of his plants (PRE-CONDITION). After wiping the tears from his face he runs back inside to check HGIC for solutions (TASK). The first thing he does is search for “leaves and holes” but instead of typing “leaves” he types “leafses” (ERROR). The results page returns nothing but Jacob realizes his spelling mistake and searches again with the proper spelling (ERROR-RECOVERY). The results page is populated with numerous articles and tutorials but nothing specific to his problem. All is not lost and Jacob sees he can post his question to the question forum and get answers from the gardening community (SUB-TASK). While he’s waiting for a response he notices the contact area where he can follow HGIC through different social media’s(e.g. Twitter, Blog, Youtube, Facebook, etc.) (SUB-TASK). He decides to follow HGIC on Twitter to stay more up to date. After this, he checks the question forum and sees that someone responded to his question. It was just a simple Gypsy Moth infestation and all he needs is sticky bands to place around the tree base. DUH! Jacob’s garden is saved.

Preliminary Design Sketches

Preliminary design sketch of homepage.


Alternate preliminary design sketch of homepage.

Growit preliminary alt sketch.jpg

Conceptual Storyboard

High-level conceptual storyboard depicting Jacob and his award-winning garden.

Growit conceptual storyboard.jpg

UI Storyboard

Searching the website.

Posting a question to the forum.

Staying connected to the HGIC community.

Paper Prototype

Testing Day

Purpose of application

Grow !t is designed to provide it's users with resources relative to their home gardens provide by UMDHGIC. The main resource it will provide is a vast number of articles, publications, tuturials, etc. which will be searchable by the user. An interaction with experts is also a high priority for success and includes 2 main methods: forum like questions with voting and official UMDHGIC answers as well as instant feedback via chat.

Background of the domain

Our website is designed to provide a multitude of gardeners ranging from novice to avid hobbyist and Master Gardener's, therefore including all ages. In the design of our application the main case we will consider is the older user's whom may have less computer experience and not be aware of common interaction with web services.

Tasks to perform

  • Search the site for an article on ... using filters to refine if needed.
  • Post a question to the Q&A section to have fellow users and HGIC answer.
  • Use chat to have an expert help you classify a pest infestation you are having.


Period Round Facilitator Computer Observer/Notes User
1 1 All Pilot Users
1 2
2 1 Cody David Michael
2 2 Venkat Cody David
3 1 Michael Venkat Cody
3 2 David Michael Venkat

Writeup for pilot testing (due April 5th)

Prototype photos


Posting a question to the forum



"You are a gardener looking for information on a pest that has been infesting your garden. This website will give you the information you need. By using the chat, search, and q&a forum find out how to get rid of this pest!"

Scenario Tasks

  • Search for information:
    • Using our search feature, find information on the pest in your garden.
    • Try to limit the results to the most applicable information.
  • Inquire for information about ways to get rid of the pest that others have found useful:
    • Post a question to the Q&A and get an answer from the master gardeners
  • Chat with a Master Gardener:
    • Get an immediate answer to your pest problem by chatting with a master gardener
    • Overcome the difficulty of not being able to describe a particular pest

Risk assessment

All Scenarios

  • Knowing how to find resources for different types of interaction *Distinguish between Search, Q&A, Chat


  • Be able to find an existing article without forcefully navigating and searching sections
  • Limiting search results to better fit a scenario


  • Locating the Q&A section after a search for existing articles come's up empty
  • Distinguishing difference between other user's responses and an official response from UMDHGIC


  • Noticing functionality to assist them in conveying their issue [Picture upload]

Observations on the testing day

  • Unable to locate the chat box at the bottom of the page
  • Confusion with using search bar to ask a question and not Q&A
  • Unaware what to do if a search for an article came up empty on results page
  • Didn't notice chat layout of text area where typing, thought was a 'photo-frame' link for image upload (partly due to limit of paper prototype)

Writeup for real testing (due April 12th)

Prototype iteration

We made a few changes to try and correct the complications we observed our test users encounter with the initial paper prototype before re-testing it's usability with real users. The modifications were as follows:

  • Included link on search results page to post a question to the forum page.
  • Added a Navigation bar visible at all times to display main resources
  • Change chat 'bar' at bottom of page to a 'box' to make it more noticible and not just appear as a bar at the bottom of the page a small amount of text

Observations on the real users

Usability problems you discovered with the new prototype from testing with real users. You should include at least 3 users from outside the class.

  • Search results does not explain sorting method such as by date, relevance, title
  • Label on chat box for 'x Users Online' is not very descriptive as to it's purpose for people unfamiliar, switch to something like 'Chat with Experts'
  • No search bar within Q&A section
  • Not sure on type of content search returns

Risk resolution

With regard to the 'risky' parts of our interface, we learned the following issues and solutions:

  • Can't assume any familiarity with common layouts such as chat bar on page, have to make very obvious of it's purpose
  • Add filters for content types to search results
  • Make the main resources available and as obvious as possible (on every page)

Computer Prototype

System Requirements

To ensure the prototype run's smooth, please adhere to the following system requirements:

  • Browser Firefox (Chrome with the exception that buttons get whited out within popups) with javascript enabled
  • Platform Windows or Mac
  • Screen Resolution Our prototype scales for the most part and is viewable even on netbooks, although the greater screen resolution used the more pleasing the layout becomes with space and balance.

Start Up Instructions

To test our prototype, follow the link to our prototype Grow!t being hosted on a development server.

Some feature's require you to be an authenticated user so log in with the username and password 'team_x' where x is your team's number. (All accounts have already been created for you so there's no need to create new)


For the most part, our prototype has medium-high fidelity on all levels. All content being passed/viewed is stored in a database and can be dynamically created/edited/deleted when a user has the permission (something we did not grant your accounts). Our 3 main screens and forms of interaction are implemented but still require modifications to satisfy the particular experience the customer is looking for. Between now and our final implementation, we will analyze and include feedback suggestions regarding the interaction with the website as well as continue to improve our visual refinement.

The specifics about each of the main scenarios are listed below along with the types of tasks you should be able to carry out.


  • A search bar is available at the top of all pages for users to enter queries
  • All content within the site is made up of a title, body, and/or description which are used to select keywords
  • Results are allowed to be filtered (currenlty only 2 filters have been created)
    • Categories (when content is created, there are predefined disciplines which are selected from)
    • Node type (set types of content are allowed to be created, they currently include articles and forum 'q&a' but will later include various types including tutorials, videos, and publications)
  • Filters update the patch with AJAX and can be removed once they've been assessed

Posting a question to the forum

  • A section for asking and answering questions is available on the site
  • Registered and anonymous users can post questions, which includes a title, a detailed description, and an optional image Note: If you attempt to upload an image with a question an error will occur as the result of the memory for our site on the server being maxed out with files currenlty
  • Registered users can answer questions. (It is possible that multiple answers are posted per question.)
  • Editors (users with an editor role) can select one answer to be the official answer. The official answer will become visually distinct from the other answers.
  • Registered users can vote on answers. A vote count will be displayed next to each answer.


  • A chatbox is available for all authenticated users in the bottom right of the web-page (it is currently excluded from content pages to prevent complications)
  • User's should only be able to chat with user's having the role of 'HGIC' or 'Master Gardner' making it more of an official resource then social network and communication with friends
    • For the purposes of this assignment, an 'echo' user was created to echo back any message sent to them
    • Their response time was purposely set low not to bog down the server
    • Main purpose is to allow you to open a chat up and see the options
  • Users have the ability to enhance their chat with features beyond basic IM
    • An upload option allows you to upload a file and it will auto create a link within chat. If this is an image, the file will open in a new tab. Else wise the link will open in a new page/tab of the browser.
    • An option to 'Link Current Page' will be used to send a link in chat to the current page. Used by users to ask an expert a specific question about an article they may be reading or for an expert to provide a hobbyist with resources more simple.
  • With chat being stored in a database, history was added
    • All chat's within the past day are populated whenever a new chatbox is opened with the user
    • An additional option to view chat history will load all past conversations with a particular user.


[Some other features have been implemented with mixed levels of fidelity]

Top Stories

A queue which is editable by administrators, can be filled and will display pictures and descriptions associated with particular articles on the homepage to address current trends in the community.

RSS Feed

A widget was created for the homepage using jQuery to pull together their social networking from twitter, facebook, blogspot and youtube.


Administrators are able to create events to add to the calendar visible on some pages to coordinate event and keep the community aware of events.


With the site coming from 4 distinct websites, the customer preferred their separate identities to still exist for a sense of familiarity with users. They generally serve as a mission statement.

Plant Diagnostic

The least implemented feature currently on the website is Plant Diagnostic. This service is to find solutions to problems within the garden in an interactive site which originally had a whole website devoted to it which was hard to navigate and not search able. We are developing a flex application which is dynamically created from the sites content and sorted by category->part->symptom->cause->solution include pictures and descriptions along the way.

Comparison (Paper Prototypes & Screenshots)


View of the homepage, displaying top stories, welcome message, calendar of events, and social network feed.

Growit search 1.jpg Growit computer proto search 1.png

Search results page with filters and search from with text input box.

Growit search 4.jpg Growit computer proto search 3.png

Posting a question to the forum

List of questions that have been posted and a link to post a new question

Growit question 1.jpg Growit computer proto question 1.png

Form to submit a new question

Growit question 2.jpg Growit computer proto question 2.png

View of posted question and answers submit by users with the approved response marked

Growit question 4.jpg Growit computer proto question 3.png


Homepage view with chat box in bottom right corner of every page

Growit chat1.jpg Growit computer proto chat1.png

Basic chat interaction with a Master Gardener

Growit chat 2.jpg Growit computer proto chat 2.png

Pop-up to upload an attachment to chat for enhanced assistance

Growit chat 3.jpg Growit computer proto chat 3.png

View of an uploaded picture

Growit chat 4.jpg Growit computer proto chat 4.png

Experimental Design

Mike Donovan

Competing System

Hypothesis: Which tool allows you to find information about your gardening problems the fastest?

Independent: The Gardening website used

Dependent: Speed user finds information


  • Computer used: the same computer would be used for each experiment
  • Training given for HGIC webite: same amount of training given to each participant
  • Gardening Information: same gardening information given to each user

Task: Find solution to problem about garden

Between Subject experience in each program may lead to increase in speed

User population: Who: College Students How: Get students from our class not working on GrowIt It would be difficult to get our actual target audience to do our test. Fellow HCI students may be able to take the perspective of our target audience.

Null Hypothesis: All implementations are equal in speed

Alternative Hypothesis: Our implementation is the fastest

Cody Smith

Design Alternative

 Using our custom chat module or Google Talk chatback embedded in the site.



 Which tool allows users to get the most useful feedback from gardening experts?

Independent and Dependent Variables


 Chat technology used (Google or custom)


 If the user gets an answer and how long/how much effort it requires.


  • Computer used: the same computer would be used for each experiment
  • Training given for HGIC webite: same amount of training given to each participant
  • Resource related to issue: same pictures available on computer being used.

Experimental Protocol


 Get an answer/diagnosis from HGIC expert in real time relative to specific problem.

Between/Within Subject

 Between Subject (differences in environments may impose frustration and effect results/experience)

User population


 Visitors of original HGIC site.

How to sample?

 Random selection from past survey (varying computer skill level and experience with gardening)

Run Experiments

Only designing controlled experiment therefore no need for sections for 'Pilot Participants', 'Modify/Finalize Experiment Protocol' and 'Running the Experiment'

Analyze Results

Statistical Analysis

Null Hypothesis

 All implementations are equal in speed

Alternative Hypothesis

 Our implementation is more efficient


 If the experimental design was carried out, it would support our approach to chat.


 Everyone loved ours.



UI: Must have

  1. Better styling for Q&A Forum [Miked]
  2. Finish chat styling and convert live chat format to view like history [Cody]
  3. Find a good place for the login [Venkat]
  4. Limit what users can see by their role [Venkat]
  5. Copy content from previous websites [Dave]

UI: Nice to have

  1. Consistent headers on each page
  2. Event calender with pop-ups
  3. Plant Diagnostic Flash App to replace current Plant Diagnostic site
  4. Image gallery for users to upload pictures
  5. Article/Tip of the day
  6. Browsing capabilities beyond only searching
  7. RSS widget update via AJAX
  8. Auto correct pictures in top stories

Server: Must have

  1. Get content pages (articles) to work with panels or add chat to them directly [Cody]
  2. User roles and permissions
  3. Create custom content types
  4. Broader search algorithm (include 'garden' keyword in search for 'gardening')

Server: Nice to have

  1. Generate json for flex to use with plant diagnostic
  2. Finish switching chat from using sessions to database
  3. Establish more extensive filters for searching
  4. Send user information to Garden Mapper if selected during user profile creation

Execution of the Plan