Helpmate-AI icon indicating copy to clipboard operation
Helpmate-AI copied to clipboard
Published 3 months ago • verified publisher icon codeaashu

UI/UX Enhancement for Helpmate AI

Open codeaashu opened this issue 1 year ago • 6 comments

Feature Request: UI/UX Improvements

Summary

Redesign and enhance the user interface to make Helpmate AI more visually appealing, user-friendly, and responsive across different devices. This includes adjustments to layout, colors, typography, and overall design to improve user experience and engagement.

Proposed Changes

  1. Dark Mode: Implement a sleek dark theme with smooth transitions.
  2. Layout Optimization: Reorganize the components to create a more intuitive layout.
  3. Button Styling: Update button styles, including the newly added "Copy" and "Share" buttons, for better visibility and consistency.
  4. Typography: Use more readable and aesthetically pleasing fonts.
  5. Responsive Design: Ensure the UI looks good on both desktop and mobile devices.

Additional Context

A refreshed UI will help make Helpmate AI more engaging and easier to use, increasing user satisfaction and retention. Consider using design libraries or frameworks if helpful, and gather user feedback to guide improvements.

codeaashu avatar Oct 28 '24 02:10 codeaashu

hello @codeaashu i would like to work on this changes !

Tanmay-Chandgude avatar Oct 28 '24 06:10 Tanmay-Chandgude

Hello @codeaashu . I would love to work on this issue. The changes I will do includes.:

  • Dark Theme: A dark theme with a subtle gradient is a great choice for a modern AI chatbot. It creates a clean, focused visual that is easier on the eyes, especially during nighttime use.
  • Header: A prominent "Helpmate AI" heading.
  • Clear CTA: Make the "Generate Answer" button the clear call to action. Use a contrasting color (teal or cyan) and a slightly rounded shape.
  • Readable Fonts: clean, sans-serif font like Open Sans, Roboto, or Montserrat.
  • Mobile-First Approach: Design for mobile screens first and then adapt the layout for larger screens.
  • Well defined Footer and smooth transitions in the site.

Smitkhobragade avatar Oct 28 '24 07:10 Smitkhobragade

hello @codeaashu i would like to work on this issue can you pls assign to me

Ritesh7m avatar Oct 02 '25 19:10 Ritesh7m

@Ritesh7m let's start working on this issue! Also you can check out our other project : https://github.com/codeaashu/DevDisplay https://github.com/codeaashu/antriview

codeaashu avatar Oct 02 '25 19:10 codeaashu

Hello @codeaashu,

I have shared a screenshot of my updates. Could you please review it and let me know if everything looks fine? I have raised the pull request.

Dark Mode: Dark mode screenshot Light Mode: Light mode screenshot Mobile View:

Mobile view 1 Mobile view 2

Ritesh7m avatar Oct 02 '25 20:10 Ritesh7m

Hi @codeaashu, please review the changes and merge them when possible. Let me know if there’s anything else that needs to be added.

Ritesh7m avatar Oct 06 '25 16:10 Ritesh7m