Huron River Watershed Council Bioreserve Information Portal

I was part of a team of four students who partnered with the Huron River Watershed Council (HRWC), a local nonprofit environmental conservation organization, to develop an internal web application to be used by its staff and volunteers to input data from field assessments of different bioreserves as well as query the database to find relevant bioreserve site information to be used in report for grants and other purposes. Data gathered by volunteers during field assessments was recorded on paper "bioreserve worksheets" for each site, which was then manually entered into HRWC's Access database. The bioreserve site data being recorded was inconsistent and redundant, making it difficult for querying and organizing. Our team used a sample of data from the HRWC's Access database as well as the information from the bioreserve worksheets to develop a new database schema for a MySQL database with relational, normalized tables, using PHP to dynamically generate standardized web forms for data input. We created wireframes for the UI using HotGloo, an interactive wireframing and prototyping tool. Utilizing Twitter Bootstrap, we customized the UI of the web application so that it would be simple and easy to understand for HRWC staff and volunteers, regardless of their computer experience.

Back to Gallery

Featured Project Artifacts:

• Wireframes
• User Interface Screenshots
• Final Presentation

Wireframes

Once we had the database schema worked out, we used information from communications with the client and saved queries on the Access database to identify the most important facets for search. Another teammate and I worked on developing the wireframes for the application's user interface, using the interactive wireframing and prototyping tool Hotgloo.

Data Review Page - Wireframes

After inputting data, users can review their selections for each category of questions on the worksheet.

If users want to change their selection for a category, they click the "Edit Data" button and are able to select/deselect options and save, or cancel the changes.

Back to Gallery

User Interface Screenshots

Once the MySQL database had been created, and the PHP code written to dynamically generate site information and worksheet forms, I used Twitter Bootstrap with modifications to the HTML and CSS to develop a user interface that was simple and straightforward. Additionally, I used Adobe Illustrator to recreate HRWC's logo in vector form so that it could be resized for various uses.

After logging into the application, users can add information about a new site for field review.

From the Site Details page, users can see existing bioreserve worksheets for a site, edit those worksheets, or add a new worksheet.

Back to Gallery

Final Presentation

This is the final presentation given to the class, which summarizes our team's goals, process and issues in creating the web application for HRWC.

HRWC Final Presentation

Back to Gallery