Designing The Phenology of Place App

Project Management


I'd like to create a responsive, mobile-friendly, accessible web page / app

  • which can act as an interface to access the phenological database I created
  • use native plant photos I've taken while a student at UVic since 2009
  • act as a teaching tool for identifying native plant species
  • map some of the native plant locations on the UVic campus

Time Log

  • 2015-02-13: added Stat Counter to each of the PoP pages to help determine any use by test users
  • 2015-02-13: Trying to get small back button and header/footer to work on map (map-2b)
    • this was requested by one user, and I noted is awkward for all users to return to species list from map without a backbutton
    • had to add data-ajax="false" to the back button code, in order for the app search text intro to align to left
    • added small back button and header/footer to each of the individual species maps (map-2b)
  • 2015-02-13: Change background colour of headers & footers; making id vs class to ensure colour takes
  • 2015-02-10: Testing app, with feature suggestions by Ken Josephson and Brenda Beckwith
  • 2015-02-05: add a separate map page for each species
  • 2015-02-04: Google Maps: add user location; create some visualizations usind d3.js; created a git hub user account and repository for version control
  • 2015-02-04: fmp: add to geoJSON script the precipitation; add to map1.html, correct undefined dayLength
  • 2015-02-03: Google Maps
    • add different markers
    •{icon: ''});
    • create separate geoJSON file for Swamp Lantern in fmp (just find species, and export xls file for only that species; copy and save to text JSON file, adding the beginning and ending code)
    • created KML code in fmp, no info windows yet ...
  • 2015-02-03: Images: created multi-page for viewing image, with Arbutus as an example - testing didn't view in Windows explorer (didn't check version yet)
  • 2015-02-02: met with Supervisors Eric Higgs & Yvonne Coady
    • get lots of user ideas for functions to add
    • present to potential users
  • 2015-01-28: created JSON file in fmp for species description info; reformat fmp species check-box lists which won't export to JSON
  • 2015-01-28: formatted Google Map InfoWindow into table with bordered cells, centring image with colspan td
  • 2015-01-28: Google Map is responsive to screen size, but centre wouldn't respond, until I found code at Center google maps on responsive browser resize
  • 2015-01-25: added infoWindow for geoJSON file points, adding image tb and link to web size, using data-ajax="false" to make sure the large image will be linked to ...
  • 2015-01-22: created webpage to parse JSON data
  • 2015-01-21: Yvonne's office hours:
    • manual should be "breadcrumb", so reader can follow my path
    • be willing to challenge myself: i.e. client-side: JSON; server-side: apache/php/mysql; node.js
    • I explained how I created geoJSON file
    • wants me to go see I.C.E. about my app
  • 2015-01-19: created geoJSON file for all 931 of phenology image records in fmp (created script in fmp); created google maps page with all 931 records as an icon
  • 2015-01-16: sent draft ProForma Directed Studies Course Registration info for feedback from co-supervisors
  • 2015-01-15: add new single page for field guide app, as link to share with others, removing navigation links
  • 2015-01-15: choose/add photos for those missing; sorted species by latin name, and put latin name before common
  • 2015-01-13: add new species and additional info to app
  • 2015-01-13: went link app to King Menu (Geog 101A lab) & Nancy Turner
  • 2015-01-12: create concept map for proposal
  • 2015-01-11: create new website for popII, based on mobile presentation site created for CSC 130
  • 2015-01-09: talk to Kinga Menu, about Geog 101A students using my field guide to native plants
  • 2015-01-06: ask both Yvonne & Eric if they would consider being co-supervisors for a directed studies this term
  • 2015-01-06: ask both Yvonne & Eric if they would consider being co-supervisors for a directed studies this term

Track Issues

Issue #1: GeoJSON file makes full data set publicly available

  • must be on same server as html file calling it ...
    • all file paths are absolute, using the full uvic server path
    • FIX: make all file paths relative, so they could also be served more entire on a local apache server e.g. have full access my photos for demonstration purposes,
  • creating an apache web server with an sql database structure, into which pop datab .csv file could be imported, and then served via php & html
    • is it possible to translate into geoJSON bits without the whole file becoming publicly available - ie to place on google maps

Proposal Concept Maps & Planning Diagrams

I Wonder What Kind of Tree That Is?

Concept Maps

Phenology of Place II Proposal Concept Map

Phenology of Place II Proposal Concept Map

Sequence Diagram

The Sequence Diagram shows the timing and interaction of function calls and webpage elements.

Sequence diagram showing the timing and interaction of function calls and webpage elements

Design Versions

Different design versions will be showcased here

Mobile Friendly

Awesome Mobile Friendly

v.1.1 tp 1.3


















Species Map - all records

Species Map - all

Herbarium Example

Herbarium Example App

Herbarium Example

Herbarium Example

Design Versions

v. 1.1 – 1.3-lively
v. 1.1 – 1.3-lively

v.1.0: Native Plant Field Guide App with drop-down "Responsive" list

  • The Native Plant Field Guide App has a drop-down list of native plant species found at UVic, and was created as a final project in December 2014 for Dr. Yvonne Coady's CSC 130

v.2.0: Searchable Native Plant Photo link "Mobile" list Prototype

  • Before re-creating a new website for Phenology of Place Part II, I'd already started to update, and reformat the Mobile Species List Design Prototype, one of my test projects in Gallery page, created as an extra add-on to my final project in December 2014 for Dr. Yvonne Coady's CSC 130
  • Original Test Field Guide: linked directly to image, with no back button

(screen shot)
v.2.0 for mobile

V.3 is the current working version

v.4.0: Using JSON to populate the species list and information details

Testing website ...


  • without JavaScript
  • different browsers: Safari, Firefox, Chrome, Explorer
  • in older browser versions
  • Windows Explorer 13 in Herbarium ... jquery mobile 2nd page wasn't showing when clicke
    • FIX: ajax true vs false
  • Test Mobile Friendliness with Google Developers’ Mobile-friendly test webpage


  • in older browsers, and computers
  • in mobile devices: tablet, smart phone
    • iPhone 6: app show well
    • needs back button on maps
  • different computer screen sizes: iMac 27", MacBook Pro 13" laptop
  • OS: windows, mac, linux

Test User Suggestions:

  • Be sure to correctly label Native and Introduced (non-native) plants
  • Make note if plants have edible or poisonous parts
  • Add more photos of different phenophases
  • Order List View by common name, adding Latin scientific name for extra info
  • Add Back Buttons to photo & map pages to make navigation easier to return to Species List View
  • Get lots of Testing done by lots of Users
  • Use versioning control software e.g. Git
  • Using List View to link to photos of different phases and plant parts, and different levels of explanations, e.g. like iBird
  • Don’t show everything on map – let user explore to find species
  • Add section “What to expect to see When/Where”, using a seasonal chart and map
  • Add Glossary – don’t use technical terms (e.g. phenophase)
  • Explore potential for possible use as framework/template by other user groups
  • Add crowd-sourced, user uploaded photos of different phenophases
  • Add other info. e.g. Traditional use, Compare to similar species, especially Native vs Invasive
  • Make downloadable app to use in field without Wi-Fi
  • Include other locations with similar species
  • Include other locations with native species found locally, but not at UVic
  • A list view of records in database, aggregated by species
  • Give users app’s webpage URL address to check the app out more thoroughly
  • Make app accessible through UVic website to be available for student use
  • All users appreciate that the app is responsive to different screen sizes
  • Add watermarks to photos, and if considering the future marketing potential of the app, don’t offer all photos in the pilot project version
  • Use proximity of user’s changing location on Google Maps in relation to species location marker when user is moving along a trail

To Do ...

1. Make a mobile-first/mobile-friendly, responsive website app to utilize Phenology photo database

  • figure out how to access data JSON
  • ... OR ...
  • utilize CSV/Php/MySQL
  • Mobile navigation
    • media css: change to square navigator; smaller font
    • back button

2. Add Image Gallery of Species' Phenophases

3. Add more species

  • go through phenology database to choose more species
  • find different phenophases of each species
  • add invasive species
  • add species that are similar, for comparison
    • Trailing vs Himalayan Blackberry
    • Oregon Grape Tall vs Dull
    • Oregon Grape vs English Holly
  • add margins/padding/space around images so they're not stuck up at top of list entry, with lots of space at bottom
  • ... OR ... make larger thumbnail images?

4. Place Plant Species on GoogleMaps (geoJSON)

5. Reformat Header & Footer & Nav Bar ... in progress

  • Need back button for images/page for images
  • Make Header & Footer a lighter colour of green
  • Make Heading text easier to read
  • Make footer link text easier to read
  • Figure out how to keep top of header square
  • Figure out how to keep bottom of footer square
  • Figure out how to make text larger in nav bar - both at page top & footer

6. Add more information to About Webpage ... in progress

  • More About The Phenology of Place Project

7. Create custom.css file

  • clean up the css stragglers in app files
  • place after the jQuery and other css file libraries

8. Figure out image loading

  • why you have to reclick browser URL when viewing large photo image from Species Search
  • ? pre-fetch ?
  • ? AJAX ? ... I think I figured it out ... add to link: data-ajax="false"

Wish List: Crowd-Sourcing Geolocated Photos; Native Plant Trail Map; User-Testing

Crowd-Sourcing Geolocated Photos Concept

(screen shot)
Original Crowd-Sourcing Geolocated Photos Concept

Native Plant Trail Map

Show a trail, with markers of linked photos in specific native plant gardens at UVic

Trail Map
(screen shot)
field guide screenshot - trail guide

User Testing Wish Lists

  • Add more species photos
  • More phenophase photos
  • Photos from different locations at UVic
  • Photos from different locations with similar species
  • Photos from different locations with species not found at UVic
  • User input e.g. Use current location for Google Maps trail guide, Upload crowd-sourced photos from smart phone to contribute to database
  • Add Map for What to expect to see When/Where
  • Google Maps location proximity based on movement of user and device
  • Add other info e.g. Trad use, compare to similar species
  • Make downloadable app to use in field without Wi-Fi
  • Use JSON to populate species photos
  • Add Glossary - don't use technical terms (e.g. phenophase)