[Design] Community relay indicators

[setch-l]

Problem: We need a way to indicate that a note is in a particular relay community vs just in the global network.

Product Brief: https://www.notion.so/nossocial/Indicating-relays-communities-on-a-note-08afc3e6ba90466aa86f9c5e72ad98bd

Acceptance Criteria

• Create workflows and wireframes that achieve the following outcomes:
• Users browsing their feed know if a note belongs to a specific relay / community
• Users can easily navigate to the relay / community via the note in question.

States to account for

• A note that belongs to a specific relay / community
• A note that is in the public feed
• The workflow for being on a note and navigating to a relay / community

Deliverables:

• [x] - Competitor research
• [x] - Workflows
• [x] - Product Review
• [x] - Prototype
• [ ] - Final Designs

[Chardot]

For the competitor analysis, I looked into 8 social and community-oriented apps:

1. Slack
2. Reddit
3. MeWe
4. BBS
5. Facebook
6. Warpcast
7. Internations
8. 9Gag

Each app has a different way to indicate what community a post has been sent to. The indicators are highlighted in green:

I then compiled all types of indicators into 4 UI patterns:

I decided that Internations' approach is the best because it displays a community bubble, which is super versatile in terms of aesthetic treatment, making it stand out from the content of the note, and also because the bubble is a block element, which is not surrounded by any other element, and this makes it easier to work with without mess with the layout of the note card.

With this in mind, I created 5 user flows:

1. Seeing notes that belong to a specific community.
2. Posting a note to a specific relay
3. Opening the community info card
4. Searching for new communities to join
5. Adding a community from the shortcuts row

I also created a clickable prototype for this last user flow, so you can experiment with adding a community shortcut to the top row, which repurposes the former Stories launcher.