[Design Thread - User Profile] Enhance User Profile (Mobile/Desktop) Public Viewing Profile & User modifying Profile

[ri0nardo]

To have two designs for profiles per use of platform.
One for desktop
One for mobile

• Design for public profile viewing
• Design for user editing / viewing public profile
  • To be similar, but the user will have more commands and actions to edit / modify content within their profile.
• See YouTube channels as an example of how long a channel has been there.
• Have the ability to search for users from a search engine as well?
• See link for table and grid https://mui.com/x/react-data-grid/

Enhancements

• Prioritize user info from name to email
• Name
• User Name?
• Email (If user wants it public)
• Social Medias
• Phone Number (If user wants it public)
• Show adopted trees, for personal view have the maintenance feature available to edit each tree.
• A Title you given yourself
• Tree Care
• Engineer
• Flower Expert
• Add a bio
• Show it have a character limit?
• Show it be unlimited text?
• Add message/email button or call it contact info
• Message
• Contact Info
• Cover Photo for Profile
• The Hero Image
• Add data on how many trees planted, photos taken, and followers
• Add location
• Can be the specific location
• Can be a general area (ex: San Francisco Bay Area)
• Can be disabled for privacy reasons
• Tree Table Enhancement (Build off the existing table)
• Design the user table
• Design viewer tree table
• Future Design to add to the Trees
  • List if the tree is part of an organization
  • List multiple owners if has more than 1
  • Original date planted
  • Awards
  • Past names
• Invite friend through email / text (See issue [Static Pages - Design Implementation] Invite a friend from user profile #215 ) (NEEDS ENGINEER TO BUILD OUT)
• Design Graphic for Invite Friend
• Design Weather Section Right Column (See issue Implement Location based weather #321 ) (NEEDS ENGINEER TO BUILD OUT)
• To have 4 scenarios
  • Sunny
  • Cloudy
  • Rainy
  • Night
• Report Bug (FUTURE PLANS / COMING SOON) (See Issue [Static Pages - Documentation] Support Section - FAQ section #304 )
• Design a lady bug to add to report bug
• Redirect users to report bug page
• Have upcoming events / calendar events show up on the right column (FUTURE PLANS / COMING SOON) (See Issue [New Feature Thread] Events to be listed, calendar to be implemented later? #272 )
• Be color coded per event type
• Add badges (FUTURE PLANS / COMING SOON) [User Profile - Design Implementation] Add Accomplishment Badges #287
• Add a follow/add friend button (FUTURE PLANS / COMING SOON)
• Show any organizations they are part of (FUTURE PLANS / COMING SOON) wtt_front [Design Thread- Community Page] Have Events / organizations / groups / teams / City Government Tree Info #267
• https://docs.github.com/en/organizations/collaborating-with-groups-in-organizations/customizing-your-organizations-profile
• Have default images for users to pick from (Design generic profile icons) (FUTURE PLAN)
• https://support.mightycause.com/hc/en-us/articles/360031005092-How-to-Make-Your-Giving-Event-Profile-Awesome
• Add how long the user has been a member (FUTURE PLANS / COMING SOON)
• Do we just add the year?
• The specific date?
• Months?
• Have this disabled for people who want it private?
• Add interest (FUTURE PLAN)
• Interest can be a category related to trees or unrelated
• Can be a person who is an arborist
• Can say interest is music
• Cooking
• Dogs
• Photos Taken (FUTURE PLAN)
• Can create folders of types
• Favorites

Add Sections or tabs in profile

• Trees adopted
• Comments / Reviews (FUTURE PLANS / COMING SOON)
• Photos Taken (FUTURE PLANS / COMING SOON)
• Followers (FUTURE PLANS / COMING SOON)
• Badges owned (FUTURE PLANS / COMING SOON) [User Profile - Design Implementation] Add Accomplishment Badges #287
• Checked in locations (FUTURE PLANS / COMING SOON)
• Organizations associated with (FUTURE PLANS / COMING SOON) [Design Thread- Community Page] Have Events / organizations / groups / teams / City Government Tree Info #267

[saimaheshtaduri]

I can contribute. Assign me @ri0nardo

[ri0nardo]

@saimaheshtaduri hi will you be able to work on this issue?

[ri0nardo]

@jazhen @zoobot Started the redesign for the user profile. I am following the theme that was developed from the about us & contact us redesign.

Sort of alot going on that is new, but new fun things have been implemented.

• Wanted your thoughts on the data where the cover photo is.
• The weather report on the top right.
• Having a public profile where people can come view what you did & a personal profile view where you can edit info.
• I reorganized the table for trees. I wanted to limit the specificity of each category and bunch them.
• Lastly, what do you think of the lady bug for reporting a bug? Thought it was a more appropriate bug people can feel comfortable with rather than a cockroach or other insects.

Attaching the Figma link https://www.figma.com/file/5C3v1LUNwMPQy9JOgnKEtr/Water-the-Trees?node-id=994%3A2416

le View](https://user-images.githubusercontent.com/98299952/196354061-711b6784-f319-4ed9-b840-ff19e82ee5c3.jpg)

[ri0nardo]

Note from 10/19/2022 meeting:

• Jason comments how does the table adapt to mobile?
• Jason comments how does the tree info bar come into play when a user wants to view details regarding their tree? Either goes to the map or the side bar comes out where the right column is. If sidebar appears, needs a button to go to map where the tree is.
• Additional comment is how to edit tree information on the table if needed. Can be from the sidebar when appears. Would rather have the sidebar be where the edit info is than a modal popping up forcing the user to finish that task.
• Would like the sidebar for the tree info to slide in very elegantly, and be noticeable but not obnoxious or an eye sore. Needs research on best timing methods.

[ri0nardo]

Will proceed with a personal view of the profile. Public view of a profile will come later on once other things get implemented to have that option. The right column is not going to be implemented soon since the software isn't built out yet or hasn't even started.
Will need to clean up the tree table to proceed and be built.

[zoobot]

@ri0nardo I think these sidebar things are all somewhat easy to do. We could maybe have them as separate widgets/issues as quick tasks for newcomers to do first.

Report a bug can be a form that connects to our git issues via api or to start with either sends an email to us. MVP of sending an email is simple and good first issue Widget.

Plant with friends is feasible just to open an email or share on social. Good first issues Widget for newcomers.

Perform maintenance on trees in my backyard could potentially just go to the map and use geolocation to go the user's location. the code for geolocation already works and we are using it for planting trees so would be simple to tie into that.

The only one that might take more work is weather but that is a good first issue for backend/fullstack engineers. They could potentially link into the weather api which is a pretty simple api to work with.

[zoobot]

So your design's not blocked, maybe the sidebar widgets could have placeholder tree images?

[ri0nardo]

@zoobot the column with weather etc would bring up the tree info sidebar. If the user wanted to do maintenance from their profile they could bring up all the info there. So no need for a placeholder tree image. It was a good suggestion by jason.

[ri0nardo]

@zoobot would potentially look like the image below.

[zoobot]

Good idea Jason! Looks great

[ri0nardo]

Mobile view.

[ri0nardo]

[ri0nardo]

Finished the design for the new user profile. The figma file is under the "Desktop (Current)" page at the very bottom. The right most column cards do not need to be implemented immediately. If you want to also do the side cards please do (I can make it a separate ticket to break the task up). The core work is the center column with the tree table.

[zoobot]

@Domingo-creator Are you still working on implementing the new user design?

[ri0nardo]

I am reconsidering the design for the user profile. I am looking at a previous design from someone else that was working on this project and found a solution that may work better than what I currently designed for the user profile.

This list all the trees and you would click the tree to see the tree history rather than using a table. I do like this idea and want to take this further with the design I did have in place. The table does work on desktop, but for mobile it not ideal.

@zoobot what do you think of this previous design? I would have to revise and iterate on it to fit what I designed, but I do like this idea.

[ri0nardo]

will update with mobile being a focus (not an after thought)
will have 3 main sections

• trees
• achievements
• organizations
  will be a tab sections with trees being the default.
  will reuse the redesign profile section and use a previous design from someone else for the sections.
  will add separate sections below the tabs, for other things related to a user profile.

Will make an epic for this. this is more of a thread that is getting way too long.

[ri0nardo]

currently liking this redesign that is mobile first. Its tab based where the default is trees. For the future we will have badges and organization list if needed (teams may not be that great of a use in this case).
I want to change the user tags, currently its

• Name
• User type
• Location

I want to change it to

• Name
• Member since
• N/A
  The last one I don't really know what is really important.

Rather than listing the tree history with a table and checkbox, we can just create a list / box component of what maintenance was performed. Similar to what the tree history is. I don't want to have the color anymore, Ill want it to be more generic to begin with.

I am adding a previous idea of bringing up the tree information side menu when you select a tree. I like the idea of being rerouted to the trees information menu to perform maintenance on the tree.

Will need to add the tree section. either you get rerouted to the tree information menu or we create a new menu.