[Feature]: Improve UI/UX of Profile Page (/myesp/profile)

[Ankita-Gupta2004]

Problem Statement

The current profile page UI feels outdated and lacks modern design and usability. The form layout is very basic, with minimal spacing and poor visual hierarchy, making it harder for users to interact comfortably.

I'm always frustrated when forms are not well-structured, as it affects readability and overall user experience. In this case, the profile page does not provide clear grouping of fields, and the design feels cluttered and old.

Proposed Solution

I would like to redesign the profile page UI to improve usability and visual appeal.

Proposed improvements include:

• Grouping related fields into sections (e.g., Personal Information, Contact Details)
• Improving spacing, alignment, and layout
• Enhancing input fields and button styling
• Introducing a card-based or container-based design
• Improving overall visual hierarchy and readability
• Ensuring the design is clean and responsive

These changes will make the form more user-friendly and visually modern.

Alternatives Considered

An alternative approach could be to make only minor CSS adjustments like spacing and alignment fixes. However, a more structured redesign would provide a better long-term improvement in user experience.

Additional Context

This issue is observed on the profile page at /myesp/profile.

The current UI appears very basic and lacks modern design patterns. Improving this page would significantly enhance the overall user experience since it is an important user-facing form.

I would like to work on this issue as part of my GSoC 2026 preparation.

[Ankita-Gupta2004]

Hi, I would like to work on this issue. Could you please assign it to me?

[github-actions]

👋 Thanks for opening your first issue here! We appreciate you taking the time to report this.

What happens next:

• A maintainer will review your issue and may ask follow-up questions
• Please check the existing issues to see if this has been reported before
• For setup help, see our documentation

We're a volunteer-run project, so responses may take some time. Thank you for your patience! 🙏

[github-actions]

👋 Hi @Ankita-Gupta2004! It looks like you'd like to work on this issue. To get assigned, please comment /assign and I'll handle the rest.

📖 Getting Started · Contribution Rules · Code of Conduct

[Ankita-Gupta2004]

/assign

[github-actions]

✅ @Ankita-Gupta2004 has been assigned to this issue. You have 1/5 issue(s) assigned.

📖 Getting Started · Contribution Rules · Code of Conduct

[Ankita-Gupta2004]

@willgearty
Hi
I’ve been assigned this issue and have set up the project locally. I’d like to confirm if I can start working on improving the UI/UX of the profile page, or if there are any specific guidelines or design preferences I should follow.

Looking forward to your guidance. Thanks!

[willgearty]

We may want to wait until after we upgrade bootstrap for this. But if you have a vision that doesn't require bootstrap >2, then go for it. Be aware that we'll almost certainly have lots of feedback for whatever you do.

[Ankita-Gupta2004]

We may want to wait until after we upgrade bootstrap for this. But if you have a vision that doesn't require bootstrap >2, then go for it. Be aware that we'll almost certainly have lots of feedback for whatever you do.

Thanks for the clarification! That makes sense.

I’ll focus on making small, incremental UI/UX improvements to the profile page while keeping the existing Bootstrap structure intact. I’ll avoid major redesign changes and aim for better spacing, alignment, and overall usability.

Looking forward to your feedback on the changes!