Overview:

Problem Statement

The current user/org profile consists of a basic infocard and an activity section that displays all the user posts. Since we plan to add many features to the profile (e.g. thanks section, liked posts, etc.), we need to navigate away from the original layout to allow for more space for the various features.

Feature Summary

The profile redesign will add three main reusable components that will make the process of adding more features to the profile much easier. These components will be used for both user profiles and organization profiles which currently look the same but will have different features added to both in the future.

1. Cards - Compact cards with 2 tabs and a "See all" option that will take the user to a different screen with all the posts. This is only for the mobile view

   • Future features that will use this card layout include showing organizations the user is a member of, etc. The future "Create a Draft" feature will introduce a new tab in the "Requests" and "Offers" cards for a total of 3 tabs
   • The card will show a maximum of 3 posts and the user can click on the see all button to see more posts

2. Menu tabs - for the different sections that will contain the cards (in mobile) or contain the "Posts" page (in desktop)

   • Future features that will use the menu tabs include the "Giving Thanks" feature, "Badges", etc.

3. Page showing all posts - In the mobile view, this is the page navigated to when the user clicks "See all" on a card. In the desktop view, this is the default view shown when a menu tab is clicked on

An additional nice-to-have feature would be to redesign the info card to contain more useful information such as a profile description and location.

Mobile View

• Viewing our own profile
  • 2 Menu Tabs: request and offers
  • Cards: Requests and Offers
    • 1 card in each tab: requests (in requests tab) and offers (in offers tab)
    • tabs within cards: active and inactive
    • see all: takes user to new page with all request or offer posts
• Viewing other user's profile
  • 1 menu tab: posts
  • cards: posts
    • tabs within cards: requests and offers
    • see all: takes user to new page with all request/offer posts

Desktop View

• Viewing our own profile

  • 2 menu tabs: requests and offers
  • section (looks like mobile see all page)
    • tabs: active and inactive

  Viewing other user's profile

• 1 menu tab: posts

• section

  • tabs: requests and offers

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMD1XLiU6VkwU8fN1UQ1yPu%2FProfile-View-individual%3Fnode-id%3D9%253A20

Value

This layout redesign will reduce the amount of time it takes for developers/designers to add new features to the user profile because they can build on top of the reusable components which have a standardized design.

This layout redesign will reduce the amount of time the user takes to find their activity through the separation and organization of different activity types. The value will continue to increase as we add more features in the future to the user profile with this layout.

End Goal