[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 Implement new Design of Tree Menu with Maintenance, Tree History, Photos #283
• Design Figma: https://www.figma.com/file/5C3v1LUNwMPQy9JOgnKEtr/Water-the-Trees?node-id=1355%3A9085

What's out:

• The menu redesign (Implement new Design of menu bar - Sidebar #262) is not part of this project
• The new photos component (the photo gallery and uploaded photos) [Epic - Photos] Tree photos project #482

Bugs

• [Tree Details - Bug] Maintenance Delete Maintenance Performed (Accidents) #559
• [Tree Details - Bug] Double Adopting the same tree #550
• [Tree Details - Bug] Maintenance Mobile View Clipped Title #792

Milestone 0 - Redesigning Tree Details

• [Tree Details - Design] Redesigning the carbon section #494
• [Tree Details - Design] Mobile Tree Default Preview #540
• [Tree Details Sidebar] Add & Design C02 calculations #446
• [Tree Details - Design] Mobile Tree Details Full Screen #541
• [Tree Details - Design] Once removed a tree, confirmation screen #543
• [Tree Details - Design] Redesign Maintenance Tags #544
• [Tree Details - Design] Photo section tags #545
• [Tree Details - Design] Change wording on "remove tree section" #547
• [Tree Details - Design] Add More Tree History Sections #549
• [Tree Details - Design] Create Like / Adopt Component #551
• [Tree Details - Design] Create separate spacing diagram for sticky component #552
• [Tree Details - UX] Information Architecture #553
• [Tree Details - Design] Maintenance Confirmation Screen #555
• [Tree Details - Design] Design Tabs for future use #557
• [Tree Details - Design] Edit Maintenance (Completed Maintenance, but wanted to add more to the same session) #558
• [Tree Details - Design] Submit Maintenance Button #562
• [Tree Details - Design] Remove image upload on maintenance for v1 and add it for v2 when photos are added #554
• [Tree Details - Design] C02 Tab Section #560
• [Tree Details - Design] History Section #563
• [Tree Details - Design] Maintenance Section #564
• [Tree Details - Design] Add the Date the Tree was Planted to know its age #566
• [Tree Details - Design] Nickname Button #725
• [Tree Details - Design] Tree History Overview on "All" View Redesign #692
• [Tree Details - Design] Add profile photo for "adopter" / organization photo #710
• [Tree Details - Design] C02 Section combine the calcs to one row #723
• [Tree Details - Design] No Image Tree Filler + Photo Upload #719
• [Tree Details - Design] Redesign Link Section #720
• [Tree Details - Design] Other Trees people looked / searched #726
• [Tree Details - Design] C02 References to match new link design #722
• [Tree Details - Design] Tree Links (C02 and City) to have edit / broken button #724
• [Tree Details - Design] Include Tree Statistics Section that exist from the "planting feature" #721
• [Tree Details - Design] Upload Image Redesign - Change to say what images are preferred (leaf, fruits, selfie, etc.) within description #734
• [Tree Details - Design] Delete Image Button - Only for user who uploaded image #733
• [Tree Details - Design] Notes Page with a log and key section that is present for the tree #728
• [Tree Details - Design] Redesign "Request to Remove Tree" Panel #735
• [Tree Details - Design] Report Tree Image (sort of like a survey) #732
• [Tree Details - Design] Update Design for Maintenance - Open a second tab for performed #736
• [Tree Details - Design] Suggest edit page to modify content #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
• [Tree Details - Design] Adopt Tree from Maintenance #746

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

• [Tree Details - Design Implementation] Applying new Tree.js styles and updating the header #484
• [Tree Details - Design Implementation] Redesigning TreeNotes component #486
• [Tree Details - Design Implementation] Redesigning the TreeMaintenance component #485
• [Tree Details - Design Implementation] Redesigning TreeInfo and TreeLinks component #487
• [Tree Details - Design Implementation] Redesigning the TreeHistory component #488
• [Tree Details - Design Implementation] Restyling Adopt / Like Component #556

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

• [Tree Details - Design Implementation V1] Create tabs component and break out content #483
• [Tree Details - Design Implementation] Make header a sticky component #493
• [Tree Details - Design Implementation] Adding animations to the mobile dialog #495
• [Tree Details - Design Implementation] Potential work for combining the tree details container with the menu #546
• [Tree Details - Design Implementation] Revising Maintenance Flow #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)

• [Tree Details - Design Implementation] Maintenance tags feature #489
• [Tree Details - Design Implementation V3] Implementing the existing sections to independent sections when tabs are clicked #548
• [Tree Details - New Feature] Giving Trees a nickname. #280
• Hide scrollbar on tree slideout #425
• [Tree Details - Design Implementation] Mobile Tree Preview #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

• [Tree Details - Design] Tree Species Pronunciation Tool #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.