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

Refine Voice Chats #121

New Issue
Open
opened 2026-04-02 19:01:19 +00:00 by hodlbod · 13 comments
hodlbod commented 2026-04-02 19:01:19 +00:00
Owner
Copy Link
Copy Source

Take a look at the current voice calls interface and refine it. Some things to focus on:

  • The buttons are sort of ugly and have sort of ambiguous state. Text would help.
  • The voice widget persists across pages, but only some of them
  • It should be possible to select input/output from the widget
  • A room with a lot of participants will have a very tall list item, consider using ProfileCircles
  • The chat interface should probably be redesigned to accommodate video, show member lists, and show chat messages in a more ephemeral format.
Take a look at the current voice calls interface and refine it. Some things to focus on: - The buttons are sort of ugly and have sort of ambiguous state. Text would help. - The voice widget persists across pages, but only some of them - It should be possible to select input/output from the widget - A room with a lot of participants will have a very tall list item, consider using ProfileCircles - The chat interface should probably be redesigned to accommodate video, show member lists, and show chat messages in a more ephemeral format.
hodlbod added this to the Current milestone 2026-04-02 19:01:19 +00:00
hodlbod added the design label 2026-04-02 19:01:19 +00:00
hodlbod added this to the Voice and Video project 2026-04-02 19:01:19 +00:00
hodlbod changed title from Design Voice Chats to Voice Chats 2026-04-02 19:25:16 +00:00
hodlbod changed title from Voice Chats to Refine Voice Chats 2026-04-02 19:25:20 +00:00
mplorentz commented 2026-04-02 19:42:54 +00:00
Collaborator
Copy Link
Copy Source

the buttons are way too small on mobile also imo

the buttons are way too small on mobile also imo
sakshamjain commented 2026-04-02 20:51:14 +00:00
Collaborator
Copy Link
Copy Source

Hi @hodlbod, I have checked the voice rooms and voice chats interface in both desktop and mobile (native) viewports. I would love to work on this issue and will soon share an iteration on the design. You can assign this issue to me!

Thanks

Hi @hodlbod, I have checked the voice rooms and voice chats interface in both desktop and mobile (native) viewports. I would love to work on this issue and will soon share an iteration on the design. You can assign this issue to me! Thanks
sakshamjain was assigned by hodlbod 2026-04-02 21:05:55 +00:00
hodlbod commented 2026-04-02 21:06:06 +00:00
Author
Owner
Copy Link
Copy Source

Great! Have at it, looking forward to what you come up with.

Great! Have at it, looking forward to what you come up with.
❤️ 1
sakshamjain commented 2026-04-08 20:18:56 +00:00
Collaborator
Copy Link
Copy Source

Text would help.

Quick question, when you mentioned “Text would help”, are you thinking of persistent labels, hover tooltips, or clearer state text (e.g., muted/connecting)?

I’m leaning toward keeping the UI clean with renewed iconography + hover state (tooltips desktop) and renewed iconography (mobile)

Since this is a usability-focused effort, I can explore more approaches and validate which improves clarity the most, rather than assuming one approach. Just wanted to check if you had a specific direction in mind before I test.

> Text would help. Quick question, when you mentioned “Text would help”, are you thinking of persistent labels, hover tooltips, or clearer state text (e.g., muted/connecting)? I’m leaning toward keeping the UI clean with renewed iconography + hover state (tooltips desktop) and renewed iconography (mobile) Since this is a usability-focused effort, I can explore more approaches and validate which improves clarity the most, rather than assuming one approach. Just wanted to check if you had a specific direction in mind before I test.
hodlbod commented 2026-04-09 19:46:32 +00:00
Author
Owner
Copy Link
Copy Source

Quick question, when you mentioned “Text would help”, are you thinking of persistent labels, hover tooltips, or clearer state text (e.g., muted/connecting)?

I'm thinking of a persistent label describing the action, something that works on mobile at any rate, since icons are notoriously ambiguous. Feel free to play with it though because space is certainly at a premium.

> Quick question, when you mentioned “Text would help”, are you thinking of persistent labels, hover tooltips, or clearer state text (e.g., muted/connecting)? I'm thinking of a persistent label describing the action, something that works on mobile at any rate, since icons are notoriously ambiguous. Feel free to play with it though because space is certainly at a premium.
👍 1
sakshamjain commented 2026-04-12 16:37:42 +00:00
Collaborator
Copy Link
Copy Source

Hi @hodlbod @mplorentz ,

I’ve explored multiple iterations for the voice chat experience, combining insights from competitive benchmarking and usability testing.

Please check the attached video (PS: player controls may briefly overlap hover labels).

This iteration focuses on:

  • Clear actions via persistent/hover labels (reducing icon ambiguity)
  • Improved controls with better iconography and clearer states (mute, connecting, etc.)
  • Input/output selection directly within the widget
  • Participant visibility with speaking indicators
  • Scalability considerations for large rooms (member list exploration completed, will be shared based on feedback)
  • Video-ready layout and mobile responsiveness (included in Figma)

This is still an iteration, and based on your feedback, I’ll refine it further into a dev-ready version with proper handoff.

Figma Link: https://www.figma.com/design/GkkFIIOBqEquBpqPMnRFB7/Flotilla-Design---Saksham-Jain?node-id=0-1&t=7krZQI6tal4MeSEs-1

Prototype Link: https://www.figma.com/proto/GkkFIIOBqEquBpqPMnRFB7/Flotilla-Design---Saksham-Jain?page-id=0%3A1&node-id=90-661&viewport=935%2C-633%2C0.19&t=9cPLCf48DYJmfRez-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=90%3A661

Would love to get your thoughts before I proceed to final refinements. This design has ample room and modular design to include any essential features that we can validate through usability testing.

Hi @hodlbod @mplorentz , I’ve explored multiple iterations for the voice chat experience, combining insights from competitive benchmarking and usability testing. Please check the attached video (PS: player controls may briefly overlap hover labels). This iteration focuses on: - Clear actions via persistent/hover labels (reducing icon ambiguity) - Improved controls with better iconography and clearer states (mute, connecting, etc.) - Input/output selection directly within the widget - Participant visibility with speaking indicators - Scalability considerations for large rooms (member list exploration completed, will be shared based on feedback) - Video-ready layout and mobile responsiveness (included in Figma) This is still an iteration, and based on your feedback, I’ll refine it further into a dev-ready version with proper handoff. Figma Link: https://www.figma.com/design/GkkFIIOBqEquBpqPMnRFB7/Flotilla-Design---Saksham-Jain?node-id=0-1&t=7krZQI6tal4MeSEs-1 Prototype Link: https://www.figma.com/proto/GkkFIIOBqEquBpqPMnRFB7/Flotilla-Design---Saksham-Jain?page-id=0%3A1&node-id=90-661&viewport=935%2C-633%2C0.19&t=9cPLCf48DYJmfRez-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=90%3A661 Would love to get your thoughts before I proceed to final refinements. This design has ample room and modular design to include any essential features that we can validate through usability testing. <video src="attachments/b702fcf3-083c-483b-be46-5b6435383af5" title="Recording 2026-04-12 220536.mp4" controls></video>
Recording 2026-04-12 220536.mp4
7.7 MiB
hodlbod commented 2026-04-13 20:35:13 +00:00
Author
Owner
Copy Link
Copy Source

This is looking good. A couple things:

  • The popup menu for input/output selection should have the inputs vertically aligned instead of horizontally. It might make sense to include a header and maybe a description just to make it feel more substantial. I like the current modal, although it probably does make sense to move this inline.
  • I'd be interested to see what this looks like on mobile, since the sidebar layout probably won't really work.
  • Related, attached is a quick wireframe I did that puts the chat stuff in an invisible layer on top of video. I feel like this would work well because it would de-emphasize the chat medium as secondary/supplementary to the call itself. Would you be willing to do a mockup to see what that idea might look like in different modes?
This is looking good. A couple things: - The popup menu for input/output selection should have the inputs vertically aligned instead of horizontally. It might make sense to include a header and maybe a description just to make it feel more substantial. I like the current modal, although it probably does make sense to move this inline. - I'd be interested to see what this looks like on mobile, since the sidebar layout probably won't really work. - Related, attached is a quick wireframe I did that puts the chat stuff in an invisible layer on top of video. I feel like this would work well because it would de-emphasize the chat medium as secondary/supplementary to the call itself. Would you be willing to do a mockup to see what that idea might look like in different modes?
Screenshot 2026-04-13 at 1.33.39 PM.png
194 KiB
Screenshot 2026-04-13 at 1.33.39 PM.png
sakshamjain commented 2026-04-14 15:56:40 +00:00
Collaborator
Copy Link
Copy Source

Thanks for the input @hodlbod

  1. Yes, I have already designed 3-4 versions of that. I have attached them for your review. The one you mentioned was my first iteration.
    image.png

  2. I already have some designs for the mobile version. I will share them soon.

chat stuff in an invisible layer on top of video

  1. Can you define this invisible layer on top of the video? Is it some sort of layer blur or background blur? I believe we will need to provide a suitable background for the chat interface to ensure contrast accessibility. I have a design in mind based on your wireframe, and I'm happy to work on it after your feedback.
Thanks for the input @hodlbod 1. Yes, I have already designed 3-4 versions of that. I have attached them for your review. The one you mentioned was my first iteration. ![image.png](/attachments/e32e6981-0086-4f16-9e48-b1259d21a60f) 2. I already have some designs for the mobile version. I will share them soon. > chat stuff in an invisible layer on top of video 3. Can you define this invisible layer on top of the video? Is it some sort of layer blur or background blur? I believe we will need to provide a suitable background for the chat interface to ensure contrast accessibility. I have a design in mind based on your wireframe, and I'm happy to work on it after your feedback.
image.png
172 KiB
hodlbod commented 2026-04-14 19:13:51 +00:00
Author
Owner
Copy Link
Copy Source

Great, I think option number 3 (with the drop downs) looks best/most familiar.

Can you define this invisible layer on top of the video? Is it some sort of layer blur or background blur? I believe we will need to provide a suitable background for the chat interface to ensure contrast accessibility. I have a design in mind based on your wireframe, and I'm happy to work on it after your feedback.

What I'm thinking of here is Intercom's borderless messenger. Contrast is handled by having the chat bubbles contained, and the point is to reveal as much of the backdrop as possible, so no blur effect is necessary. I think it's a bad pattern on websites, which is why they shut it down, but it seems like it could work well with a video chat.

Great, I think option number 3 (with the drop downs) looks best/most familiar. > Can you define this invisible layer on top of the video? Is it some sort of layer blur or background blur? I believe we will need to provide a suitable background for the chat interface to ensure contrast accessibility. I have a design in mind based on your wireframe, and I'm happy to work on it after your feedback. What I'm thinking of here is Intercom's [borderless messenger](https://www.intercom.com/changes/en/2462-we-ve-released-our-new-borderless-messenger-design-to-all-customers). Contrast is handled by having the chat bubbles contained, and the point is to reveal as much of the backdrop as possible, so no blur effect is necessary. I think it's a bad pattern on websites, which is why they shut it down, but it seems like it could work well with a video chat.
sakshamjain commented 2026-04-17 20:46:30 +00:00
Collaborator
Copy Link
Copy Source

Hi @hodlbod ,

I have worked on an iteration for the mobile flow for voice/video rooms. Do let me know your review.

There is a lot of experimentation we can do in terms of providing the ability to slide some sections, like the bottom dock,m etc.

I also explored the direction of your wireframe. I created two iterations.

  1. I tried to reimagine your approach, which led me to the following screen

image.png

  1. An exact replica of your wireframe, but its structure was not consistent with our existing design, and had some usability flaws. Do let me know if you would like to see it. I will refine and polish it further to match the vision.
Hi @hodlbod , I have worked on an iteration for the mobile flow for voice/video rooms. Do let me know your review. <video src="attachments/700849ca-0eae-4fcb-afdf-1edb2bdd4625" title="Screen Recording 2026-04-18 021439.mp4" controls></video> There is a lot of experimentation we can do in terms of providing the ability to slide some sections, like the bottom dock,m etc. I also explored the direction of your wireframe. I created two iterations. 1. I tried to reimagine your approach, which led me to the following screen ![image.png](/attachments/33f5ccf6-8920-4160-957a-dce62376242e) 2. An exact replica of your wireframe, but its structure was not consistent with our existing design, and had some usability flaws. Do let me know if you would like to see it. I will refine and polish it further to match the vision.
Screen Recording 2026-04-18 021439.mp4
3.6 MiB
image.png
1.4 MiB
hodlbod commented 2026-04-17 21:49:34 +00:00
Author
Owner
Copy Link
Copy Source

The mobile view looks good, for the desktop view I would leave the top bar at the top and break out each message into a bubble (like you see on the DM chat pages)

The mobile view looks good, for the desktop view I would leave the top bar at the top and break out each message into a bubble (like you see on the DM chat pages)
👍 1
sakshamjain commented 2026-04-18 08:05:26 +00:00
Collaborator
Copy Link
Copy Source

break out each message into a bubble

image.png

Like this?

While designing this, I had the thought that we could provide the flexibility for users to structure the video screen however they want. For example:

  • Users can have a completely collapsed video state (Chat focused). It is a good use case when the user is not interested in the videos aspect.
  • Users can have a mixed-use view where video and chat can be used simultaneously and seamlessly. It is a good use case in walkthroughs or community discussions, along with an ongoing stream.
  • Users can have a completely expanded video state (Video focused) where they can chat in the box or even minimise it. It is a good use case for community meetings.

All of this can be achieved by a simple chat minimise/maximise button.

> break out each message into a bubble ![image.png](/attachments/bf0bc088-38f7-406d-904e-20d817efe90d) Like this? While designing this, I had the thought that we could provide the flexibility for users to structure the video screen however they want. For example: - Users can have a completely collapsed video state (Chat focused). It is a good use case when the user is not interested in the videos aspect. - Users can have a mixed-use view where video and chat can be used simultaneously and seamlessly. It is a good use case in walkthroughs or community discussions, along with an ongoing stream. - Users can have a completely expanded video state (Video focused) where they can chat in the box or even minimise it. It is a good use case for community meetings. All of this can be achieved by a simple chat minimise/maximise button.
image.png
1.4 MiB
hodlbod commented 2026-04-20 16:21:37 +00:00
Author
Owner
Copy Link
Copy Source

Here's more what I'm imagining:

Screenshot 2026-04-20 at 9.20.17 AM.png

This gets out of the way of the video as much as possible while still showing chat. But otherwise I think we're on the same page.

Here's more what I'm imagining: ![Screenshot 2026-04-20 at 9.20.17 AM.png](/attachments/90dd270c-0ae3-4dde-83ba-20cf6fa068ff) This gets out of the way of the video as much as possible while still showing chat. But otherwise I think we're on the same page.
Screenshot 2026-04-20 at 9.20.17 AM.png
553 KiB
sakshamjain was unassigned by hodlbod 2026-05-06 16:35:33 +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 design
Milestone
No items
No Milestone Current
Projects
Clear projects
No project Voice and Video
Assignees
Clear assignees
hodlbod (hodlbod) mplorentz (Matt Lorentz) sakshamjain (Saksham Jain) sondreb triesap userAdityaa (Aditya Chaudhary)
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: coracle/flotilla#121
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?