[Tree Taxonomy - Design] Tree pages for unique trees

[zoobot]

Tree pages should have common, scientific, size, evergreen/deciduous, Native, watering needs, How to care for, debris, and other data similar to calscape.org and usda.gov

Example - https://www.tynursery.com/plant-library/shade-trees/brachychiton-populneus-sterculia/
https://www.purrweb.com/portfolio/cubbiq/

Roadmap

• List of all items we want to add per tree
  • MVP items
  • Future implementation items
• Mockup

Create a Tab system (Ex: Google Docs Sections)

MVP Category Items

• Tree Common Name
• Tree Scientific Name
• Tree Genus
• Pronunciation
• Other names
• Tree Source
• Deciduous / Evergreen
• Height
  • Small - Large (Give Range)
• Notes (description)
• Allowed Neighborhoods (San Francisco)
  • Allowed Region (State)
• Image of Tree (Carousel)
  • View all photos
  • Add photo
• How to care for Tree (Landscape Description) / Habitat / Ecology
  • Required Sun
  • Required Water (Amount of water required)
  • Type of Care (Easy / Hard)
  • Cold Tolerance
  • Soil Drainage
  • Season to plant
• Add to my list
• Climate Type
• Summary (Color, Toxicity, Taxonomy)
• Cultural
• Print description
• Request Tree to be Planted (To City / Organization)
• Similar Trees
• Sources

Nice to Have Items

• Map with location of tree
• Nurseries that carry the tree
• Butterflies & moths
• Wildlife
• Buy Tree (To Plant)???
• Pop Culture
• History
• Cultivation (Medicine, Dietary Supplement, Traditional Medicine, Other Uses)
• Contact (for questions)
• See tree on map (as in WTT Map)
• Adoptable Trees (Show list of trees plus address of tree)
• Alert when tree is planted
• Users leave comments on tree???
• FAQ regarding the tree???
• Request Maintenance on Tree (To City)

[zoobot]

[ri0nardo]

@zoobot for each specific tree, I looked at the links and one thing I thought was nice was the map that shows each location that the tree is planted at. But seems like a task that can be pushed for later. Is the idea to album of tree photos that acts as a carousel as a hero image?
This seems like a task that can go a long way with native bugs, birds, and other creatures that live in the tree. Could we break down what we want to see for an MVP? USDA has 8 sections for just one tree which is a lot of information.
On this page what do we want to highlight? Requesting and Maintenance? the tree information? I ask since I can center the design for the key element.
Theres a lot of potential to make this look real cool!

[zoobot]

The map of the locations is super nice. I think we can have that, maybe easily, with a map filter!

Album of tree photos with carousel sounds good.

I don't think we should have maintenance on this, but a generic tree request with a city/source dropdown would be good. It would have to have address info for the request location.

Mainly tree-taxonomy should be for tree information, for people to research trees and characteristics of specific trees so they will know what to pick to plant.

Like this

https://www.laspilitas.com/nature-of-california/plants/43--arctostaphylos-densiflora-howard-mcminn-manzanita

or this is my favorite:

https://calscape.org/loc-California/Sambucus-mexicana-(Blue-Elderberry)?srchcr=sc642110e4ac778

https://en.wikipedia.org/wiki/Sambucus

[ri0nardo]

Where exactly does the data come from? Do we just take it from Calscape site and just have it update when it updates? Or it updates from FUF SF data? I guess we should figure out how to automate it first? Or I can focus on the design, but also research other sites would be good sources?

[zoobot]

We can pull from Wikipedia via api, maybe calscape but not sure how to do that automatically.
I'll try to hunt around for more apis that have available data. It's not going to change that often so once we create it, we can probably just leave it, except for nurseries and mapping.

[zoobot]

calscape is just for California

[zoobot]

Tree request api
https://wiki.open311.org/GeoReport_v2/

[ri0nardo]

@zoobot i started a list of items we want to add for the mvp per tree. What else are we missing? Also feel free to move items in and out of the MVP. The description is in the summary of the ticket.

We can base the filters and what the preview card off the mvp on this ticket.

[zoobot]

Need help with this for the mvp if you have time @ri0nardo !! Looks too basic currently.

[ri0nardo]

Need help with this for the mvp if you have time @ri0nardo !! Looks too basic currently.

i have an idea of what to do. I was thinking of having a cool animation from the card search to the specific tree.

These look good for card prints for a museum. Not sure if we can use this as the default print view? I actually see potential with this design for other uses.

[ri0nardo]

@zoobot both screenshots give different information. Can you give me a list of all categories that could potentially appear on a tree?

[zoobot]

• common
• scientific
• genus
• popularityRanking
• plantType
• height
• dbh(width at breast height)
• growthRate
• deciduousEvergreen
• flowers
• floweringSeason
• sun(shade, part shade, sun)
• soil
• drainage
• waterRequirement
• easeOfCare
• maxSummerIrrigation
• commonUses
• availabilityInNurseries
• url
• QRCode
• notes
• wikipediaLink
• USDA zones
• USPP#

[ri0nardo]

@zoobot for the qr code, from what I remember. the member from FUF said that it was for scanning when in the field? So its supposed to be a way to directly go to the tree information?

Regarding the USDA zone, I found this website https://www.monrovia.com/marina-strawberry-tree.html which shows a map and a cool circle with the zone range. Do we want to show the area the tree can potentially be planted on a map, or the specific locations that the tree is currently planted (similar to calscape)?

[ri0nardo]

@zoobot here is the first version of the tree specific page. This can be the MVP, but I am looking at how to integrate the map and other features.
I like the idea of adding birds, bugs, etc. for a later implementation.

I have yet to design the mobile version of this. I am not too sure how often people will see it on mobile, but want to get on it soon.

Let me know what you think about this first version.

Other links I looked at Monrovia & calscape & USDA

[zoobot]

Thank you for cranking this out!! Great start. The card looks excellent! Can we compact the Plant Details, Region and Climate, and other Details and fit it on there somehow?

Is there a way to make the the tags look different than rounded buttons? Are they buttons?

People can print a pdf if they want, so probably can save space with not having the download page button.

[zoobot]

@zoobot for the qr code, from what I remember. the member from FUF said that it was for scanning when in the field? So its supposed to be a way to directly go to the tree information?

Regarding the USDA zone, I found this website https://www.monrovia.com/marina-strawberry-tree.html which shows a map and a cool circle with the zone range. Do we want to show the area the tree can potentially be planted on a map, or the specific locations that the tree is currently planted (similar to calscape)?

It would be nice to have a qr code but we don't currently. I think if the data doesn't have the fields, we just don't show it.
Unless we get allowed neighborhood data, we are not going to be able to show allowed planting area. It would be nice tho!!
The calscape map is also awesome. It would be great to show that, we need some mapbox filters for that.

[ri0nardo]

Thank you for cranking this out!! Great start. The card looks excellent! Can we compact the Plant Details, Region and Climate, and other Details and fit it on there somehow?

That is something i was going to move towards, but just wanted a way to give you an idea of what is going on.

Is there a way to make the the tags look different than rounded buttons? Are they buttons?

The tags are badges not buttons.

[ri0nardo]

Will need to update the bottom card section to the updated card design with tags. Create more sections / Map addition, plus research if any other sections need to be added.
Potentially other leaf colors?

[ri0nardo]

icons website https://www.svgrepo.com/vectors/sunset/

[ri0nardo]

updated design that I don't like at the moment. there is potential, but need to rearrange the design and potentially play with other ideas.

[ri0nardo]

looking at a pelotons career page as an example of how we can setup our unique tree page. https://careers.onepeloton.com/en/all-jobs/

[ri0nardo]

looking at a two column design from yelp. the left side would be the primary information with the right column being secondary scanning / glancing over information that is quick to digest the information. https://www.yelp.com/biz/qdoba-mexican-eats-san-diego-4

[ri0nardo]

@zoobot here is the updated unique tree page. there are sections that wont be added since we dont have the content, but the overall design is complete. I mainly changed the hero section.

can start on breaking down the tasks for this ticket.

[zoobot]

Looks really nice!

To make the hero text so it's easier to read, do you like any of these:

something like this: https://i.stack.imgur.com/SOq33.png
https://i.stack.imgur.com/JEeZm.jpg
https://spin.atomicobject.com/wp-content/uploads/atomic-footer1.png

Alternately we could just choose our image wisely so it's darker where the txt is, or make the text larger?

[ri0nardo]

Looks really nice!

To make the hero text so it's easier to read, do you like any of these:

something like this: https://i.stack.imgur.com/SOq33.png

https://i.stack.imgur.com/JEeZm.jpg

https://spin.atomicobject.com/wp-content/uploads/atomic-footer1.png

Alternately we could just choose our image wisely so it's darker where the txt is, or make the text larger?

The image you references seems harder to read since its blurry in the background. I was thinking we just add a black overlay onto of the image. If its too hard to read then just make the black overlay darker.

[zoobot]

There's more than one example. Your plan sounds good, if its hard to read after darkening it, we can always go with a colored overlay like the last one.
https://spin.atomicobject.com/wp-content/uploads/atomic-footer1.png