Issue #018: Design Basic UI/UX for Friend Management

[trsctr]

Branch: feature/018-design-friend-management-ui

Description: Design the user interface and user experience for essential features related to friend management, private messaging, and challenge functionalities. This includes designing how users will interact with friends, accept challenges, send and receive messages, and view notifications.

Tasks:

• [x] Design Friend Management UI

  • Description: Create the interface for managing friends, including adding friends, accepting friend requests, and viewing online statuses.
  • Details to Include:
  • Friend List: Display a list of friends with their online/offline status.
  • Add/Remove Friends: Buttons or actions for adding and removing friends.
  • Accept/Decline Friend Requests: Options to accept or decline friend requests.
  • Online Status: Show online/offline status next to each friend's name.

• [ ] Design Challenge UI (optional)

  • Description: Create the interface for sending challenges and responding to them.
  • Details to Include:
  • Send Challenge: UI for sending a challenge to a friend.
  • Respond to Challenge: Options for accepting or declining a challenge.
  • Challenge Notifications: Visual notifications for new challenges.

• [ ] Design Private Messaging UI (optional)

  • Description: Design a simple interface for sending, receiving, and replying to private messages, including message notifications.
  • Details to Include:
  • Message Inbox: Layout for viewing received messages.
  • Send/Reply to Messages: Forms for composing, sending, and replying to messages.
  • Message Notifications: Visual notifications for new messages.

• [x] Create Basic Wireframes and Mockups

  • Description: Develop wireframes and mockups for the features above. Gather feedback and make necessary adjustments.
  • Details to Include:
  • Wireframes: Basic sketches of the UI layout.
  • Mockups: Visual designs for the UI components.
  • Feedback: Collect feedback from stakeholders and iterate on designs.

• [ ] Document Basic Design Decisions

  • Description: Document the design choices, user flows, and UI components for friend management, private messaging, and challenges.
  • Details to Include:
  • Design Choices: Summary of design decisions.
  • User Flows: Basic diagrams of user interactions.
  • UI Components: Descriptions of UI elements and their behavior.

Key Considerations:

• Simplicity: Focus on essential features for a functional user experience.
• Functionality: Ensure that friend management, messaging, and challenge features are represented.
• Online Status: Clearly display online/offline status for friends.
• Message and Challenge Notifications: Provide clear notifications for new messages and challenges.
• Consistency: Maintain a consistent and simple design throughout.
• Feedback: Gather initial feedback and adjust designs as necessary.

Definition of Done:

• [x] Basic UI/UX Designs for friend management, private messaging(optional), and challenges(optional) are completed.
• [x] Wireframes and Mockups are created and reviewed.
• [ ] Design Documentation for basic features is completed.

[trsctr]

messaging and challenging are part of live chat module, which might be skipped after all, so those are optional

[Nicktvdd]

Design documentation? Can i leave that out? xD I think we can best finetune design etc at the end when we have all the functionalities.

[trsctr]

Design documentation? Can i leave that out? xD I think we can best finetune design etc at the end when we have all the functionalities.

Yeah just get the functionality laid down atm