Enhance UI/UX of extension pop-up [Open to mockups for ideation]

[jatinkrmalik]

Description

Currently, it's a very basic experience made by a backend engineer (@jatinkrmalik). It will be interesting to see some of the mockups in how we can make the user experience of using the extension a lot better.

Ideally we would want people to just use the shortcut but for people who are more visual and want to use the mouse it would be great if we can improve the user experience for them.

Share your mockups below. 👇

[onlybond]

here you go attaching the figma link too for the icons

the main changes i did was adding the shortcuts directly after the image as they are one of the USP. also made 2 versions of the settings , do lemme know which one to go with.

added the settings on top so there is easy access

https://www.figma.com/design/pcb5xA6poBFKLxmplUq8iq/llmfeeder?node-id=51-465&t=moSmqF1sg52n42M6-1

llmfeeder.-.demo.-.Figma.2025-06-09.17-16-33.online-video-cutter.com.mp4

[jatinkrmalik]

Thank you for posting the mockup @onlybond! 🤝

I took a look and here are my observations:

1. I feel adding the keyboard shortcuts panel above is not too helpful as we already surface the keyboard shortcut hint in the big blue button - "Convert & Copy".
2. I liked v2 setting panel better as it follows a consistent selection process.
3. I think we should merge the footer into a single line -> "Made with ❤️ by our contributors" as I am no longer the sole contributor to this project.
4. nit: Content scope panel should IMO take full width of the container like rest of the elements.
5. nit: There are a lot of typos, I assume that's because of some image to text AI tooling.

---

That was my 2 cents. Curious to hear what @Mr-Sunglasses and @ShreyaPrasad1209 thinks about this mockup?

[onlybond]

1. alright i will just move the keyboard shortcuts back into the settings. actually the main reason i added them at the top was to bring the user to take notice what they can do with the extension directly , its like a manual always on top. there are two ways we can go ahead after this , i make them go back to settings or just remove the shorcut text from the button. lemme know which one will be more better.
2. the typos are my own , i did type the description lol. and yea its just the figma mockup. well as per the design i tried changing it in the code itself. here is the result

Problem i faced

i couldn't figure out how to add images

what i learnt

the images folder was not in the build , i also changed the build file to include assets folder. this screenshots are from before that .

[progress]

I have only completed the styling part , left with the logic , i am getting error specifically error loading settings
might have messed up with the ids. will look into that.

[huzfm]

I have rasied a PR for this #46

[jatinkrmalik]

@huzfm Sorry but this is a major change. Expectation is to review the mocks first before jumping into the coding aspect. I am going to decline your PR.

[huzfm]

@jatinkrmalik how else can I contribute

[jatinkrmalik]

@huzfm Share mocks here ⤴

[ShreyaPrasad1209]

Thank you for posting the mockup @onlybond! 🤝

I took a look and here are my observations:

1. I feel adding the keyboard shortcuts panel above is not too helpful as we already surface the keyboard shortcut hint in the big blue button - "Convert & Copy".
2. I liked v2 setting panel better as it follows a consistent selection process.
3. I think we should merge the footer into a single line -> "Made with ❤️ by our contributors" as I am no longer the sole contributor to this project.
4. nit: Content scope panel should IMO take full width of the container like rest of the elements.
5. nit: There are a lot of typos, I assume that's because of some image to text AI tooling.

That was my 2 cents. Curious to hear what @Mr-Sunglasses and @ShreyaPrasad1209 thinks about this mockup?

Yes I agree with @jatinkrmalik 👍🏻 My two cents:

1. The visuals in the content scope section could be enhanced to more clearly indicate the amount of content that would be copied with each selection. This would help set better expectations for the user.

2. Regarding the preview, currently, it's rendered in markdown format, which may not be very intuitive for end users. Since users are likely copying the entire web page content, the preview might become too lengthy to scroll through comfortably within a browser extension. A more practical approach could be to assume users will paste it into a Markdown editor for review, where they can view the full content in context.

Let me know what do you all think?

[onlybond]

Thank you for posting the mockup @onlybond! 🤝
I took a look and here are my observations:

1. I feel adding the keyboard shortcuts panel above is not too helpful as we already surface the keyboard shortcut hint in the big blue button - "Convert & Copy".
2. I liked v2 setting panel better as it follows a consistent selection process.
3. I think we should merge the footer into a single line -> "Made with ❤️ by our contributors" as I am no longer the sole contributor to this project.
4. nit: Content scope panel should IMO take full width of the container like rest of the elements.
5. nit: There are a lot of typos, I assume that's because of some image to text AI tooling.

That was my 2 cents. Curious to hear what @Mr-Sunglasses and @ShreyaPrasad1209 thinks about this mockup?

Yes I agree with @jatinkrmalik 👍🏻 My two cents:

1. The visuals in the content scope section could be enhanced to more clearly indicate the amount of content that would be copied with each selection. This would help set better expectations for the user.
2. Regarding the preview, currently, it's rendered in markdown format, which may not be very intuitive for end users. Since users are likely copying the entire web page content, the preview might become too lengthy to scroll through comfortably within a browser extension. A more practical approach could be to assume users will paste it into a Markdown editor for review, where they can view the full content in context.

Let me know what do you all think?

lemme make the changes and come back with a better and polished mockup.