Implement new Design of Tree Menu with Maintenance, Tree History, Photos

[ri0nardo]

Currently Maintenance, Tree History, and Photos have been designed.

[ri0nardo]

• New Tree Menu ready to build
• Images added below for directions on how to build
• Link to Figma. https://www.figma.com/file/5C3v1LUNwMPQy9JOgnKEtr/Water-the-Trees?node-id=1355%3A9085 To find Tree Menu design, go to "Style Guide (Current)" page, then on the bottom left frame.

Notes:

• You can find components within each tree section that are used. If repeated component, find from a tree tab section.

If you have any questions ask Randy.

[ri0nardo]

Currently looking at modifying the size of the Tree Sidebar width or modifying other columns

[ri0nardo]

Sidebar to remain as is

[ri0nardo]

Adding the custom svg icons

[mwpark2014]

Is this design ready for development work? @ri0nardo @zoobot

It might be useful to break down the work into entirely new github issues for the development work. I can work on that once I get confirmation that these designs are ready

[mwpark2014]

The mocks look amazing. The technical work looks quite complicated actually, so there is a need for speccing out the work a bit technically. This work can probably be broken down into multiple projects, that in turn need to be broken down into multiple smaller tasks

[zoobot]

Most of this is a redesign. I am not sure if it's ready? Maybe we should meet about it.

The things that will need minimal refactor and might be low hanging fruit:

• Moving maintenance buttons into the sidebar instead of in a modal.

Logic that doesn't exist yet:

• Needs water, Needs Mulch buttons
• Photo upload

I'd prefer building out new features before diving into an overall reface, since we've been wanting to get that photo upload feature in for a while.

What needs to be shelved for now:

• "Suggest an edit" -- need to wait until all the trees are in the database.

Just in general for this:

The current files are in https://github.com/waterthetrees/wtt_front/tree/main/client/src/pages/Tree

Please familiarize yourself with that part of the code base before beginning work and use that in your spec of what needs to be done. If code lacks clarity and you find it difficult to read, add that to what needs refactor. Otherwise, if the code looks clean and we can get away with just refacing design, that will help keep bugs down.

The data comes from both our database and the vector tiles so when testing, make sure the data loads correctly and anything editted refreshes the tree and the map.

[ri0nardo]

The design is ready. would like a review on the design since I may have forgotten accessibility, labeling, and other minor features that can be added later.

What @zoobot said about image upload needs to be discussed, but also sharing them to be public as well. There is also videos that people may want to upload that I added in the photos section.

There is a tree history section that exist under a user profile that should be moved to the sidebar since it already exist.

[zoobot]

Tree history currently exists on the sidebar in prod. Tree history and user history are different. The user history has many different trees the user has interacted with. The tree history can have many different users who have done maintenance on the same tree.

@ri0nardo Should we review design in this issue or are there other issues with this as well? Thanks!

[ri0nardo]

@zoobot To make it easier, we can use this ticket to review, comment, and make notes on this redesign. To make it easier to build we can break this task down to smaller tickets once its all approved.

This would be a good time to suggest new features, change the redesign, make improvements, etc. I haven't worked on this for months, so its been sitting for quite sometime.

The photos feature will be a big feature I would like to see implemented sooner rather than later. Just because documenting is one of the main aspects of this product. Photos will also slightly change how the planting feature works which is a task @mwpark2014 and I have discussed partially so far.

[mwpark2014]

The photos feature is a potentially big project itself with how we store and deliver images of different sizes for different devices. Also, it's always a risk to allow users to upload their own images and videos. We might want a review process 😬or think through the worst case of how to deal with malicious users

[ri0nardo]

@mwpark2014 I mentioned that we can have a "report" button for unwanted or unrelated content. I believe there was a time where we talked about auditing images, but that would be a job in itself. I think there was a suggestion of having a way to filter out unrelated photos.

The reason we want the photo upload:

1. A feeling of ownership with a tree you care for.
2. A way to "show off" a tree you have been maintaining. Sort of a restoration story.
3. Long term effects of maintaining trees in your community. Demonstrates the effects of planting and caring for trees in 50 years or longer.

Theres more reasons, I just can't think of them all.

[zoobot]

As well as having a report button, this would be a great machine learning project to filter for only tree images and flag things that don't look like trees. I'd be excited to work on that portion of it once the MVP is a go.

This could also be useful later for specific tree recognition.

[mwpark2014]

@ri0nardo I'm working on breaking down your design into smaller tasks for development.

Going to start with a few questions about the menu, then work towards the sidebar component, then planting.

Menu:

1. Now the tree details sidebar opens on the left. Should the menu mimic that and be on the left?
2. Any preference on how the menu appears (I assume the menu appears iff a user clicks on the hamburger menu)? It looks like the current menu just fades in. Should we mimic the tree details component instead, which has a transition animation sliding in from outside to in?
3. I see notification icons on the Map and Activity options. Activity makes sense but what would result in unread notifications for the other options (like map, data, contact, or planting)? Or unread notifications around the user account on the bottom?
4. How should the menu interact with the tree details sidebar component. It looks like they are one and the same component on desktop and two different components on mobile according to your mocks, am I understanding that correctly? Is it possible to have both the menu and tree details sidebar open at the same time?
5. Is there an easy way to get the green svg assets from figma? There might be other svgs that are needed besides the custom icons you already attached above

[ri0nardo]

See my answers below @mwpark2014

Menu:

1. Now the tree details sidebar opens on the left. Should the menu mimic that and be on the left?

   • I will need to see how the sidebar on the left of the screen, but it shouldn't change at all. When you say menu, do you mean dropdown menu?

2. Any preference on how the menu appears (I assume the menu appears iff a user clicks on the hamburger menu)? It looks like the current menu just fades in. Should we mimic the tree details component instead, which has a transition animation sliding in from outside to in?

   • I haven't thought of the action and animation that occurs when it slides in. Would need to test out the speed, and appropriate animation for it. I see it just sliding in normally, nothing complicated. The app is simple, and including anything extra can be seen as a negative.

3. I see notification icons on the Map and Activity options. Activity makes sense but what would result in unread notifications for the other options (like map, data, contact, or planting)? Or unread notifications around the user account on the bottom?

   • I don't exactly see notifications, can you attaching a screenshot? Or are you mentioning the tree history. Alittle confused on this question.

4. How should the menu interact with the tree details sidebar component. It looks like they are one and the same component on desktop and two different components on mobile according to your mocks, am I understanding that correctly? Is it possible to have both the menu and tree details sidebar open at the same time?

   • The menu you mean the navigation sidebar? Just want to clarify what menu since the only existing one on the live site is a dropdown menu.

5. Is there an easy way to get the green svg assets from figma? There might be other svgs that are needed besides the custom icons you already attached above

   • The green svg you mean the tree people with faces?

[mwpark2014]

@ri0nardo

I will need to see how the sidebar on the left of the screen, but it shouldn't change at all. When you say menu, do you mean dropdown menu?

I'm talking about the mocks for

I don't exactly see notifications, can you attaching a screenshot? Or are you mentioning the tree history. Alittle confused on this question.

Dw, I'm the one who's confused. I'm talking about these red dots

The menu you mean the navigation sidebar? Just want to clarify what menu since the only existing one on the live site is a dropdown menu.

I'm referring to the same "menu" as the one in the above screenshot. I think it's what you're referring as the dropdown menu. The question is about the redesigned menu's interaction with the tree details sidebar component (not sure what to call it but hope that's clear)

The green svg you mean the tree people with faces?

Yup! And just in general, since I saw that question pop up in slack earlier for where to find svg assets

Also responding to your figma comment

If we continue with the design since its nearly done (the dev has left the team for unknown reasons)

Oh, this is work that is almost finished? I can't find a corresponding issue or PR. Would you have any relevant links by any chance so we can pick up that work?

[ri0nardo]

@mwpark2014 this conversation should continue on https://github.com/waterthetrees/wtt_front/issues/262

[ri0nardo]

@mwpark2014 see my answers below

I will need to see how the sidebar on the left of the screen, but it shouldn't change at all. When you say menu, do you mean dropdown menu?

I'm talking about the mocks for

• This sidebar intention was to always be on the left side of the screen. Now that the tree sidebar is also on the left, this is a cool opportunity to have an accordion nav bar plus tree sidebar. I haven't thought of it yet, but can be explored if you also like the idea. I've seen side nav bars expand, but not something unrelated to the sidebar.

I don't exactly see notifications, can you attaching a screenshot? Or are you mentioning the tree history. Alittle confused on this question.

Dw, I'm the one who's confused. I'm talking about these red dots

• Ya the red dots are notifications, we currently don't have notifications for any of this. It's more for future use. So it can be ignored unless you want to pursue notifications.

The menu you mean the navigation sidebar? Just want to clarify what menu since the only existing one on the live site is a dropdown menu.

I'm referring to the same "menu" as the one in the above screenshot. I think it's what you're referring as the dropdown menu. The question is about the redesigned menu's interaction with the tree details sidebar component (not sure what to call it but hope that's clear)

• I don't think i designed a mobile version, I know vern just made a mobile version which works well. The interactions will only occur on desktop. Mobile would be a mess, and isn't made for these interactions.

The green svg you mean the tree people with faces?

Yup! And just in general, since I saw that question pop up in slack earlier for where to find svg assets

Also responding to your figma comment

• I have the svg. I thought I uploaded it on Github, but if not I can again.

If we continue with the design since its nearly done (the dev has left the team for unknown reasons)

Oh, this is work that is almost finished? I can't find a corresponding issue or PR. Would you have any relevant links by any chance so we can pick up that work?

• I added the pr on the appropriate ticket.

[ri0nardo]

@mwpark2014 I was thinking about how to make the adoption button more prominent in the sidebar.

One solution I thought of was having a fixed section of the sidebar when you scroll. The section I thought that would be considered is the top titled section with the icons. Even if you scroll the name, actions will always be present. See the screenshot attached below.

Second idea I had was having a nav bar similar to a mobile nav bar with a few actions regarding the tree. Basically the same thing as the first idea moved down the screen.

These are just ideas I am throwing out. At the end we would have to test something, so what we have now could be sufficient.

[mwpark2014]

@ri0nardo I love both ideas. I think the first idea is in other words making the header, including action buttons, sticky, and it would be good improvement in making these buttons more prominent to users. Should be easy to include in this body of work.

Having the mobile nav bar would be slightly more complicated design-wise. Would we want it to persist throughout multiple pages or just when a tree is selected? Every company I've worked for had some sort of redesign that ended up implementing a mobile nav bar so it must be a good design pattern for mobile users lol

Perhaps we would want to incorporate the sticky header (1st idea) for desktop and the mobile nav bar (2nd idea) for mobile?

[ri0nardo]

@mwpark2014 im looking at a link for a sticky header. We could also make it a different color for the background (not green) so its more identifiable as a header. https://www.w3schools.com/howto/howto_js_sticky_header.asp

For mobile, I haven't given that too much thought. Will need to get back to you on that, unless you have other solutions you have thought of.

[ri0nardo]

@mwpark2014 i was looking around websites and came across figma pricing page which has this sticky header on a mobile screen. While its on the top of the screen I see potential of this being on the bottom of the screen with the 2 actions of adopting & favoriting the tree. The other action is to give the tree a nickname which isn't as important to put. I'm thinking it could be radio buttons so its more obvious what is already adopted.

[ri0nardo]

@mwpark2014 since you are looking into the vertical nav menu, I wanted to bring up how the tree details side menu would look next to it. This is how I see the menus next to each other. I like how it looks, but your thoughts or anyone elses thoughts.

[ri0nardo]

Dropping the svg for the maintenance tree

[mwpark2014]

@mwpark2014 since you are looking into the vertical nav menu, I wanted to bring up how the tree details side menu would look next to it. This is how I see the menus next to each other. I like how it looks, but your thoughts or anyone elses thoughts.

Oh oooh! I have to think about it. I like how unified it is but I need to think about if it's too much at once

[ri0nardo]

@zoobot are you going to work on this? Mason and I made an epic breaking down this ticket #433 . This ticket is essentially a duplicate, but I have updated the design to solve a few problems that came up from looking further into the tree detail container

[zoobot]

My plan is to fix the maintenance buttons/history, bug fix for a while, then work on ai tree recognition after I finish building tests for the source stuff I've been working on.