coracle/flotilla
1
6
Fork 24
Code Issues 42 Pull Requests 2 Actions Packages Projects 5 Releases Wiki Activity

Add profile page #165

New Issue
Open
opened 2026-04-07 17:13:49 +00:00 by sarthak_788 · 17 comments
sarthak_788 commented 2026-04-07 17:13:49 +00:00
Copy Link
Copy Source

While exploring the app, I noticed that the user profile preview modal shows almost the same information as the search result cards.
Because of this, the interaction feels a bit redundant — tapping on a user doesn’t really reveal anything new or more detailed.
From a UX perspective, this breaks the usual expectation where a card gives a quick summary and the modal expands on it with deeper information and useful actions.

A few things I observed:
– Both the search card and modal display very similar content (bio, metadata, layout)
– There isn’t a clear distinction between what’s meant to be a summary (card) and what’s meant to be a detailed view (modal)
– The modal doesn’t add much extra depth or meaningful actions beyond what’s already visible

This can make browsing less efficient, since users don’t gain much value from opening profile previews.

Screenshot 2026-04-07 at 10.40.20 PM.pngScreenshot 2026-04-07 at 10.40.47 PM.png

Suggestion:
It might help to create a clearer separation between summary and detailed views:
– Keep search cards concise and easy to scan
– Use the modal to show richer information and more meaningful actions (e.g., follow, message, view full profile)

I’d be happy to explore a design direction for this.

While exploring the app, I noticed that the user profile preview modal shows almost the same information as the search result cards. Because of this, the interaction feels a bit redundant — tapping on a user doesn’t really reveal anything new or more detailed. From a UX perspective, this breaks the usual expectation where a card gives a quick summary and the modal expands on it with deeper information and useful actions. **A few things I observed:** – Both the search card and modal display very similar content (bio, metadata, layout) – There isn’t a clear distinction between what’s meant to be a summary (card) and what’s meant to be a detailed view (modal) – The modal doesn’t add much extra depth or meaningful actions beyond what’s already visible This can make browsing less efficient, since users don’t gain much value from opening profile previews. <img width="1470" alt="Screenshot 2026-04-07 at 10.40.20 PM.png" src="attachments/d6df333b-dcc3-453f-b4a2-808b29feb46e"><img width="1468" alt="Screenshot 2026-04-07 at 10.40.47 PM.png" src="attachments/f022e2bd-736a-4cd8-b520-4731faf7b7b6"> **Suggestion:** It might help to create a clearer separation between summary and detailed views: – Keep search cards concise and easy to scan – Use the modal to show richer information and more meaningful actions (e.g., follow, message, view full profile) I’d be happy to explore a design direction for this.
Screenshot 2026-04-07 at 10.40.20 PM.png
464 KiB
Screenshot 2026-04-07 at 10.40.47 PM.png
475 KiB
hodlbod commented 2026-04-07 17:32:38 +00:00
Owner
Copy Link
Copy Source

The profile dialog is just a stub for now, the plan has always add a profile detail page. Let me hijack this issue to that end — feel free to work on it. A few action items:

  • Create a profile detail page which displays everything on the summary, as well as recent microblogging notes and a list of space the person is a member of
  • Keep the current profile modal and use it in places where users might want a quick view of profile info
  • Replace "open in coracle" with a detail link. Anywhere else we open profiles in coracle redirect to the profile page.
  • Remove the message CTA and replace it with a "View Full Profile" button.
The profile dialog is just a stub for now, the plan has always add a profile detail page. Let me hijack this issue to that end — feel free to work on it. A few action items: - Create a profile detail page which displays everything on the summary, as well as recent microblogging notes and a list of space the person is a member of - Keep the current profile modal and use it in places where users might want a quick view of profile info - Replace "open in coracle" with a detail link. Anywhere else we open profiles in coracle redirect to the profile page. - Remove the message CTA and replace it with a "View Full Profile" button.
hodlbod added the design label 2026-04-07 17:33:03 +00:00
hodlbod added this to the Current milestone 2026-04-07 17:33:05 +00:00
sarthak_788 was assigned by hodlbod 2026-04-07 17:33:12 +00:00
sarthak_788 commented 2026-04-07 17:36:07 +00:00
Author
Copy Link
Copy Source

Got it, that makes sense — thanks for the clarification.
I’ll explore a design direction for a full profile page, while keeping the modal as a lightweight preview, and share an iteration soon.

Got it, that makes sense — thanks for the clarification. I’ll explore a design direction for a full profile page, while keeping the modal as a lightweight preview, and share an iteration soon.
hodlbod changed title from Redundant user information between search cards and profile preview modal to Add profile page 2026-04-07 17:39:20 +00:00
sarthak_788 commented 2026-04-08 19:02:23 +00:00
Author
Copy Link
Copy Source

Hi @hodlbod!
I worked on adding a dedicated profile detail page and reducing redundancy between search results and the profile preview modal in Flotilla.

Context:
The current experience shows similar information across search cards and the preview modal, without a clear progression to a more detailed user view.

Approach:
– Introduced a structured flow: search → preview → full profile
– Kept the modal lightweight for quick access
– Designed a profile detail page to provide deeper user context

Key Improvements:
– Reduced duplication between search cards and the modal
– Added a dedicated profile page with tabs for activity (microblogging notes) and spaces
– Improved information hierarchy and overall navigation

Figma (Design):
https://www.figma.com/design/k1d1xqUPBtAE9wlxdd7aj6/Flotilla--Add-profile?node-id=0-1&t=HRqmQuVpMPpXQnrO-1
Prototype:
https://www.figma.com/proto/k1d1xqUPBtAE9wlxdd7aj6/Flotilla--Add-profile?node-id=1-2119&t=HRqmQuVpMPpXQnrO-0&scaling=min-zoom&content-scaling=fixed&page-id=1%3A546

Would love your feedback — happy to iterate further!

Hi @hodlbod! I worked on adding a dedicated profile detail page and reducing redundancy between search results and the profile preview modal in Flotilla. Context: The current experience shows similar information across search cards and the preview modal, without a clear progression to a more detailed user view. Approach: – Introduced a structured flow: search → preview → full profile – Kept the modal lightweight for quick access – Designed a profile detail page to provide deeper user context Key Improvements: – Reduced duplication between search cards and the modal – Added a dedicated profile page with tabs for activity (microblogging notes) and spaces – Improved information hierarchy and overall navigation Figma (Design): https://www.figma.com/design/k1d1xqUPBtAE9wlxdd7aj6/Flotilla--Add-profile?node-id=0-1&t=HRqmQuVpMPpXQnrO-1 Prototype: https://www.figma.com/proto/k1d1xqUPBtAE9wlxdd7aj6/Flotilla--Add-profile?node-id=1-2119&t=HRqmQuVpMPpXQnrO-0&scaling=min-zoom&content-scaling=fixed&page-id=1%3A546 Would love your feedback — happy to iterate further!
sarthak_788 commented 2026-04-08 19:10:30 +00:00
Author
Copy Link
Copy Source

Also, I had a quick clarification regarding “recent microblogging notes” — what kind of output are you expecting here (e.g., a feed of kind 1 notes or a more condensed view)?
I’ll incorporate this into the profile page and share an updated iteration once I have clarity.

Also, I had a quick clarification regarding “recent microblogging notes” — what kind of output are you expecting here (e.g., a feed of kind 1 notes or a more condensed view)? I’ll incorporate this into the profile page and share an updated iteration once I have clarity.
hodlbod commented 2026-04-09 19:44:50 +00:00
Owner
Copy Link
Copy Source

Thanks! I like the idea of the horizontal layout for the profile page. A couple things:

  • You can remove the "open in coracle" button. Now that we have a profile page it's not really necessary.
  • Please mock up a mobile view with the tabs below the main user bio stuff
  • Add any pinned notes to the about tab
  • Add NIP 05, website, and zap address
  • Add copy npub and scan npub QR flow
  • Microblogging notes would be an infinite-scroll feed of kind 1s, yes

See the current profile page in Coracle for reference.

Thanks! I like the idea of the horizontal layout for the profile page. A couple things: - You can remove the "open in coracle" button. Now that we have a profile page it's not really necessary. - Please mock up a mobile view with the tabs below the main user bio stuff - Add any pinned notes to the about tab - Add NIP 05, website, and zap address - Add copy npub and scan npub QR flow - Microblogging notes would be an infinite-scroll feed of kind 1s, yes See the current profile page in Coracle for reference.
Screenshot 2026-04-09 at 12.43.16 PM.png
180 KiB
Screenshot 2026-04-09 at 12.43.16 PM.png
sarthak_788 commented 2026-04-10 20:46:42 +00:00
Author
Copy Link
Copy Source

Hi @hodlbod !

Thanks for the feedback — I’ve updated the design based on your suggestions and refined the overall flow.

Implemented all updates including mobile layout with tabs below the bio, pinned notes in About, profile metadata (NIP-05, zap, website), npub copy + QR flow, and an infinite-scroll activity feed. Also improved the search → preview → full profile hierarchy to reduce redundancy and make the progression clearer.

Figma (Design)

Desktop Prototype

Mobile Prototype

Would love your feedback — happy to iterate further if needed!

Hi @hodlbod ! Thanks for the feedback — I’ve updated the design based on your suggestions and refined the overall flow. Implemented all updates including mobile layout with tabs below the bio, pinned notes in About, profile metadata (NIP-05, zap, website), npub copy + QR flow, and an infinite-scroll activity feed. Also improved the search → preview → full profile hierarchy to reduce redundancy and make the progression clearer. [Figma (Design) ](https://www.figma.com/design/k1d1xqUPBtAE9wlxdd7aj6/Flotilla--Add-profile?node-id=0-1&p=f&t=5nFvoaTIG0rCkl1d-0) [Desktop Prototype](https://www.figma.com/proto/k1d1xqUPBtAE9wlxdd7aj6/Flotilla--Add-profile?node-id=20-5270&t=5nFvoaTIG0rCkl1d-0&scaling=scale-down&content-scaling=fixed&page-id=1%3A546) [Mobile Prototype](https://www.figma.com/proto/k1d1xqUPBtAE9wlxdd7aj6/Flotilla--Add-profile?node-id=20-7550&p=f&t=5nFvoaTIG0rCkl1d-0&scaling=scale-down&content-scaling=fixed&page-id=20%3A7549) Would love your feedback — happy to iterate further if needed!
sarthak_788 commented 2026-04-10 20:57:54 +00:00
Author
Copy Link
Copy Source

Also had a quick idea — what do you think about adding a lightweight “trust context” (like mutuals or shared spaces) to help users better evaluate profiles?

For example, something like:
“Active in 2 shared spaces”

Would this be useful, or out of scope for now?

Also had a quick idea — what do you think about adding a lightweight “trust context” (like mutuals or shared spaces) to help users better evaluate profiles? For example, something like: “Active in 2 shared spaces” Would this be useful, or out of scope for now?
hodlbod commented 2026-04-10 21:24:29 +00:00
Owner
Copy Link
Copy Source

a lightweight “trust context” (like mutuals or shared spaces) to help users better evaluate profiles?

Yes, absolutely. Context based on shared spaces and web of trust (people you follow who follow this person) would be great. Also show the wot indicator somewhere too (the little colored circle)

> a lightweight “trust context” (like mutuals or shared spaces) to help users better evaluate profiles? Yes, absolutely. Context based on shared spaces and web of trust (people you follow who follow this person) would be great. Also show the wot indicator somewhere too (the little colored circle)
sarthak_788 commented 2026-04-10 21:32:30 +00:00
Author
Copy Link
Copy Source

Got it, I’ll focus on shared spaces and include a subtle WoT signal indicator as well. Will share an iteration soon.

Also, would appreciate your feedback on the previous iteration whenever you get a chance.

Got it, I’ll focus on shared spaces and include a subtle WoT signal indicator as well. Will share an iteration soon. Also, would appreciate your feedback on the previous iteration whenever you get a chance.
hodlbod commented 2026-04-10 21:48:19 +00:00
Owner
Copy Link
Copy Source

It looks good!

It looks good!
hodlbod commented 2026-04-16 23:07:27 +00:00
Owner
Copy Link
Copy Source

@sarthak_788 are you still working on this or should I allow someone else to pick it up?

@sarthak_788 are you still working on this or should I allow someone else to pick it up?
sarthak_788 commented 2026-04-17 15:42:52 +00:00
Author
Copy Link
Copy Source

I’m currently working on it and will share the next iteration soon. Please keep it assigned to me.

I’m currently working on it and will share the next iteration soon. Please keep it assigned to me.
👍 1
sarthak_788 commented 2026-04-20 19:49:07 +00:00
Author
Copy Link
Copy Source

Hi @hodlbod ! I’ve updated the designs with the trust context additions as well — including shared spaces signals and a subtle WoT indicator across desktop + mobile.

The latest changes have been added to the same Figma links above. Please let me know if any further changes or additions would be helpful!
Screenshot 2026-04-21 at 1.11.49 AM.png

Screenshot 2026-04-21 at 1.13.30 AM.png
Hi @hodlbod ! I’ve updated the designs with the trust context additions as well — including shared spaces signals and a subtle WoT indicator across desktop + mobile. The latest changes have been added to the same Figma links above. Please let me know if any further changes or additions would be helpful! <img width="415" alt="Screenshot 2026-04-21 at 1.11.49 AM.png" src="attachments/158a1a00-fe1f-4b41-953f-dca39a0a87c4"> <img width="1122" alt="Screenshot 2026-04-21 at 1.13.30 AM.png" src="attachments/11f1d9b5-12c6-45da-91d5-3602ffb9e68d">
Screenshot 2026-04-21 at 1.11.49 AM.png
397 KiB
Screenshot 2026-04-21 at 1.13.30 AM.png
614 KiB
hodlbod commented 2026-04-21 17:16:18 +00:00
Owner
Copy Link
Copy Source

A few things:

  • npub should be right below the name rather than the nip05 domain. In fact, I think we should probably not show the nip05 at all.
  • The wot indicator should remain the same circle that we currently have, no change needed there.
  • Lightning address also need not be surfaced, maybe we could add person zapping in the future, but I'm not sure it needs to be surfaced so prominently.
  • The pinned message should be styled in a more standard way (no white border/gray background)
  • Member since can be another badge, but also I think we should probably just remove it because that data is kind of hard to get on nostr without a provider.
A few things: - npub should be right below the name rather than the nip05 domain. In fact, I think we should probably not show the nip05 at all. - The wot indicator should remain the same circle that we currently have, no change needed there. - Lightning address also need not be surfaced, maybe we could add person zapping in the future, but I'm not sure it needs to be surfaced so prominently. - The pinned message should be styled in a more standard way (no white border/gray background) - Member since can be another badge, but also I think we should probably just remove it because that data is kind of hard to get on nostr without a provider.
sarthak_788 commented 2026-04-22 07:33:40 +00:00
Author
Copy Link
Copy Source

I’ve made another round of refinements based on your feedback — moved npub below the name, removed extra surfaced metadata, kept the WoT indicator consistent with the current style, refined the overall hierarchy/context signals, and updated the pinned note styling to feel more native across both desktop + mobile views.

image.png

image.png

I’ve made another round of refinements based on your feedback — moved npub below the name, removed extra surfaced metadata, kept the WoT indicator consistent with the current style, refined the overall hierarchy/context signals, and updated the pinned note styling to feel more native across both desktop + mobile views. ![image.png](/attachments/75681bd6-2a9c-4451-b0a4-eb93e8484e14) ![image.png](/attachments/5a4bc782-8248-43a3-b3a4-b5ac0995b140)
image.png
563 KiB
image.png
368 KiB
hodlbod commented 2026-04-22 16:22:32 +00:00
Owner
Copy Link
Copy Source

Much better, thanks. We can leave off the shadows (to fit the current design), but this is good enough to move to dev.

Much better, thanks. We can leave off the shadows (to fit the current design), but this is good enough to move to dev.
hodlbod added dev and removed design labels 2026-04-22 16:22:37 +00:00
sarthak_788 commented 2026-04-22 20:15:59 +00:00
Author
Copy Link
Copy Source

Thanks! I’ll remove the shadows for consistency and clean up the files for handoff. Glad the direction works.

Thanks! I’ll remove the shadows for consistency and clean up the files for handoff. Glad the direction works.
sarthak_788 was unassigned by hodlbod 2026-04-28 21:12:38 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
design
For issues related to design work. Development should be done in another issue and refer back to this one.
 dev
Issues related to development work
 easy
Issues that can be executed on by new contributors
 idea
For issues that aren't yet actionable
 priority
For issues related to high priority features and bugs
 usability
Issues that have to be validated with real live human beings.
No Label dev
Milestone
No items
No Milestone Current
Projects
Clear projects
No project
Assignees
Clear assignees
hodlbod (hodlbod) mplorentz (Matt Lorentz) sakshamjain (Saksham Jain) sondreb triesap userAdityaa (Aditya Chaudhary)
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: coracle/flotilla#165
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?