[Epic - Tree Details Redesign] Tree Details Container Redesign / Additions Project

[mwpark2014]

Quick summary:

The Tree Details Container is the sidebar component that pops open upon selecting a tree marker on waterthetrees.com. It contains information about a tree including health, core details, maintenance history, photo, carbon stats. It is also the primary way users interact with existing trees where the maintenance, adopt, and like actions live. This design revamp will seek to improve the UI and UX so that: 1) Users can understand what maintenance actions they can do and what maintenance a tree is in dire need of 2) Users can intuitively find the information they're looking for

Issues:

The current UI isn't the most appealing. We want it to be modern and sleek. Other issues include mobile has a tree details menu that works, but is frustrating if you are searching for a tree since you have to open and close it until you find the tree you want to investigate further. This is solved by the new preview for mobile.

Example of current state of the Tree Details Container:

Design of completion of first milestone of the tree details container:

UX Flow:

Get Started:

To get started looking at the front-end code, start looking at client/src/pages/Tree/Tree.js The front-end code makes a couple calls per tree id to https://waterthetrees.com/api/trees?${tree_id} and https://waterthetrees.com/api/treehistory?id=${tree_id} endpoints that live in https://github.com/waterthetrees/wtt_server

Resources:

• Design git issue with discussion https://github.com/waterthetrees/wtt_front/issues/283
• Design Figma: https://www.figma.com/file/5C3v1LUNwMPQy9JOgnKEtr/Water-the-Trees?node-id=1355%3A9085

What's out:

• The menu redesign (https://github.com/waterthetrees/wtt_front/issues/262) is not part of this project
• The new photos component (the photo gallery and uploaded photos) https://github.com/waterthetrees/wtt_front/issues/482

Bugs

• [ ] #559
• [x] #550
• [ ] #792

Milestone 0 - Redesigning Tree Details

• [x] #494
• [x] #540
• [x] #446
• [x] #541
• [x] https://github.com/waterthetrees/wtt_front/issues/543
• [x] https://github.com/waterthetrees/wtt_front/issues/544
• [x] https://github.com/waterthetrees/wtt_front/issues/545
• [x] #547
• [x] #549
• [x] #551
• [x] #552
• [x] #553
• [x] #555
• [x] #557
• [x] #558
• [x] #562
• [x] #554
• [x] #560
• [x] #563
• [ ] #564
• [x] #566
• [x] #725
• [x] #692
• [x] #710
• [x] #723
• [x] #719
• [x] #720
• [x] #726
• [x] #722
• [x] #724
• [x] #721
• [x] #734
• [x] #733
• [x] #728
• [x] #735
• [x] #732
• [x] #736
• [x] #727
• [ ] [Tree Details - Design] Maintenance Report Button (if something is broken or a suggestion)
• [ ] [Tree Details - Design] Redo geolocate for trees already planted?
• [ ] [Tree Details - Design] Maintenance Renamed to Tree Care
• [ ] [Tree Details - Design] Button for reporting Pictures to lead to report questionnaire
• [x] #746

Milestone 1 - Restyling the overall tree details to match All Tree Tab mocks, without adding tab components yet

• [ ] #484
• [ ] #486
• [ ] #485
• [ ] #487
• [ ] #488
• [ ] #556

Milestone 2 - Break components into tabs, and add improvements to mobile experience

• [ ] #483
• [ ] #493
• [ ] #495
• [ ] #546
• [ ] #575
• [ ] [Tree Details - Design Implementation V2] Tabs to be a shortcut
• [ ] [Tree Details - Design Implementation] Maintenance tags (Do we have a timer or a system to know when to give a tree a tag?)

Milestone 3 - Maintenance Features - Multiple Actions (City Request, Maintenance, Modify Info)

• [ ] [Tree Details - Design Implementation]

Milestone 4 - New features (Extras)

• [ ] #489
• [ ] #548
• [ ] #280
• [ ] #425
• [ ] #576
• [ ] [Tree Details - Design Feature] Confetti when adopting / liking a tree
• [ ] [Tree Details - Design] Weather within Tree Details
• [ ] [Tree Details - Design Feature] Responsiveness per Screen Resolution

Milestone ??? - Photos Implementation

• [ ] [Tree Details - Design Implementation] Photo Tab Sections
• [ ] [Tree Details - Design Implementation] Photos Only (No other sections)
• [ ] [Tree Details - Design Implementation] Create Related Albums of Photos Only (Section by common types)
• [ ] [Tree Details - Design Implementation] Street View Photos
• [ ] [Tree Details - Design Implementation] Video Implementation
• [ ] [Tree Details - Design Implementation] Main Photo and Select Photo Hover
• [ ] [Tree Details - Design Implementation] Full Screen Photo Select
• [ ] [Tree Details - Design Implementation] Image Tag Component
• [ ] [Tree Details - Design Implementation] Tree Detail Header, Replace close with camera when in photos
• [ ] [Tree Details - Design Implementation] Delete Photo
• [ ] [Tree Details - Design Implementation] Delete Video
• [ ] [Tree Details - Design] Message for "Banned Photos" (Eventually Banned Videos)
• [ ] [Tree Details - Design] Upload Image Flow
• [ ] [Tree Details - Monetization] Filtering out unwanted photos / videos
• [ ] [Tree Details - UX] Information Architecture per milestone

Milestone ??? - Future Implementation

• [ ] #791
• [ ] [Tree Details - Design] Tree Reviews
• [ ] [Tree Details - Design] Tree Information section to be redesigned with icons
• [ ] [Tree Details - Design] Animate the Tree Maintenance icons when maintenance occurred
• [ ] [Tree Details - Design] Tree Facts Section - Historical / Cultural Section
• [ ] [Tree Details - Design] Incorporate Search Bar within Tree Details Container
• [ ] [Tree Details - Design] In "All" view, photos component to animate with text swiping up

[ri0nardo]

@mwpark2014 To add to this epic, where should we plan to add the sticky component, animations for mobile, and I need to add the carbon section. For mobile, rather than having the tree details just fade in the screen, I would like to see it slideup from the bottom of the screen. Function as a swiping section. Would like to help out on the planning of this feature.

[mwpark2014]

Great call-outs. I'll add these tasks to the overall project.

[ri0nardo]

@zoobot I may be missing a few categories / information that isn't present on the tree information sidebar. Could you list all possible categories / sections of the tree info sidebar? Initially I didn't know there was a plant date (Date of plant) but added it into the sticky section of the tree info menu.

Also FUF wanted a comment / notes section which seemed like a comment thread that is similar to what you see on reddit, youtube, and end of articles. I dont know if that is what you are thinking, but seems like a large task to moderate as well (if we want it child friendly).

I sort of see some flaws in the design especially the photo upload and how I designed photo preview which I want to resolve soon since paul is working on it.

I believe I have to design out more of the photos since its very bare.

Anything else am I missing regarding the tree info sidebar?

[zoobot]

Best place to look for all the fields on the front end so far is when you click the plant button and the form pops up.

This is all possible ones: https://github.com/waterthetrees/wtt_db/blob/main/tables/public.treedata.sql

Will look over this more later. Everyone just got home.