[User Profile - Design Implementation] Desktop User Profile

[ri0nardo]

Summary:

Revamping the user profile for more customization for the user to feel as if the profile reflects their personality. This starts with a profile picture and cover photo. We want to have stats to reflect their contributions to the environment and community. We also want to list the trees they have liked / adopted to have an easy location to find the selected trees. We want the mobile and desktop to be responsive to one another so much of the design will go back and forth as we progress.

Issues:

C

Get Started:

Get started with our onboarding, https://github.com/waterthetrees/waterthetrees/wiki/Onboarding and read through the epic for relevant details of this ticket. #433

Current Solutions:

Many of the solutions have been iterated on, but nothing is set and stone as of now.

1. Add profile and cover photos
2. Have a personal bio
3. List Personal contributions to the environment
4. Have a filter system to find trees
5. Have 2 sections (adopt / liked)
6. List the tree information, but not the maintenance performed

Resources:

• Epic discussion [Epic - User Profile] User Profile Redesign / Additions #635
• Design Figma: https://www.figma.com/file/5C3v1LUNwMPQy9JOgnKEtr/Water-the-Trees?node-id=1355%3A9085

What's Out:

https://waterthetrees.com/userprofile

Current Desktop Design:

[ri0nardo]

[ri0nardo]

[ri0nardo]

@zoobot

• i redesigned the user profile once again where I use the tree taxonomy column design to list the trees the user adopted / liked.
• Added the tree dormancy tags (not sure if that is helpful, but my thought was that if they liked a tree and forgot what the tree name, but remembered its dormancy then they could narrow the search with the tag).
• I also added a filter / search system as people may have a bunch of trees they may have liked and could narrow their search with a few filters. (I see this as a later implementation, but something to consider)
• The design uses same design as the mobile with the tab system (not sure if its clear on desktop, but on mobile it makes sense) [User Profile - Design Implementation] Mobile User Profile #639
• added the weather and other notable features on the side as secondary items.

Do you want to see anything else. Im sort at a road block as I am just designing to what I think would be necessary.

• Some future plans would be adding an organization section, photos the user taken (like facebook?)

[zoobot]

@ri0nardo Looks good, We don't have the same type of data per "actual tree" that we do on tree lists in the taxonomy page. I haven't seen a ton of dormancy info. This kind of thing is why it's important to make a taxonomy table in the db to check against.

V1
column design - columns should be the User's maintenance actions for specific trees on specific dates --> visit-date, adopted, liked, watered, mulched, weeded, pruned, staked, braced
filter / search system - filter by adopted, liked, planted - search for tree's common name, scientific, adopted, watered, etc
mobile view
organization
link to tree
edit email/name/organization

v2
weather <-- Someone started building this already and has an open PR but it needs a bit of help.
photos

Adding this here as @njason has some feature requests that may be on your design. waterthetrees/wtt_server#145
One thing he wants but not sure if it's in this is to link to the map when clicking the tree. Is that right arrow a link to the map location of that tree?

[zoobot]

On 2nd thought, It looks like what you are building/wanting here is a "My trees" section rather than a User's maintenance history. Can we have both somehow?

[ri0nardo]

On 2nd thought, It looks like what you are building/wanting here is a "My trees" section rather than a User's maintenance history. Can we have both somehow?

• ya the section is a "mytrees" section with two sections currently:

1. adopted
2. liked

In the future there would be a 3rd section
3. achievements / badges

• Since its related to the user profile.

My thought is that the user would selected the tree they are interested in maintaining and it would pull up the tree info on the left side since that's where it currently appears. They then would be able to perform maintenance or see the tree history (maintenance history). For mobile the tree info would slide in and the user would be able to close it and go back to their profile.

• This was the idea jason originally had for the user profile. I was trying to make it work with a new design.