[Epic - User Profile] User Profile Redesign / Additions

[ri0nardo]

Quick summary:

Redesigning the user profile to be responsive to mobile. The goal is to state the trees as the default and then add achievements, organizations and any other tab sections that are prominent enough to have its own section.

Issues:

Currently the user profile
2. the icons aren't clear as to what they are for users.
3. the tree table only works well in a desktop setting.
4. the default information present (names) are not impacting the user profile enough (while its only a private account).
5. You cannot have a profile image.

Example of current state of the User Profile:

Design of completion of first milestone of the User profile:

UX Flow:

Get Started:

Resources:

• Design git issue with discussion [Design Thread - User Profile] Enhance User Profile (Mobile/Desktop) Public Viewing Profile & User modifying Profile #300
• Design Figma: https://www.figma.com/file/5C3v1LUNwMPQy9JOgnKEtr/Water-the-Trees?node-id=1355%3A9085
• Settings Page Ticket [Static Pages - Design Implementation] Settings Section (Mobile/Desktop) #279

What's out:

• The menu redesign ([Epic - Tree Details Redesign] Tree Details Container Redesign / Additions Project #433) is not part of this project.
• The new photos component (the photo gallery and uploaded photos) ([Epic - Photos] Tree photos project #482)

Bugs

• [ ]

Milestone 0 - Designing

• [User Profile - Design Implementation] Mobile User Profile #639
• [User Profile - Design Implementation] Desktop User Profile #640

Milestone 1 - Wave 1

• [User Profile - Implementation] Build New Profile Cover Photo #786
• [User Profile - Implementation] Build out Tree's Maintenance Section #787
• [User Profile - Implementation] Build New Tab Section for Liked / Adopted Trees #788
• [User Profile - Design Implementation] Add Accomplishment Badges #287
• [User Profile - Design Implementation] Design for when user has no trees on account #737
• [User Profile - Design Implementation] Search Filter #785
• [User Profile - Implementation] When Selecting a Tree, the sidebar appears with the tree details #789
• [User Profile - Implementation] Ability for User to Upload / change Profile Picture #641
• [User Profile - Implementation] Ability for User to Upload Cover Photos #643
• [User Profile - Design Implementation] Profile Picture Uploader #774
• [User Profile - Design Implementation] Cover Photo Uploader #775
• [User Profile - Design] Mobile Filter Search #790

Milestone 2 - Wave 2

• [User Profile - Design] Description UI
• [User Profile - Implementation] Right Column Desktop Invite Friends
• [User Profile - Implementation] Right Column Desktop Report Bug
• [User Profile - Implementation] Right Column Desktop Upcoming Events
• [User Profile - Implementation] Upload Tree pictures as a thread on profile #642
• [User Profile - Weather Implementation] Design Weather Cards #383
• [User Profile - Implementation] User Settings

Milestone ???? - List

• [User Profile - Implementation]

[zoobot]

We need:

1. location to store hero image per user
2. location to store image of user if it isn't pulled from gmail
3. about field for user in database - https://github.com/waterthetrees/wtt_db/blob/main/tables/public.users.sql
4. Count of adopted and liked - from the front end history data

[ri0nardo]

@drumwolf @arc6789 the epic has been updated. The only ticket that has not been worked on is the U.I for the user summary section. I am pretty sure its going to be a modal, but need to explore other options. Let me know what needs more details.