UI & UX Makeover for the App

[Ronnieraj37]

Description

The current UI & UX of the application needs a complete overhaul. There are multiple contributors creating PRs with different design suggestions, leading to inconsistencies in the flow and overall user experience. To ensure a unified and seamless experience, we need a well-structured approach to redesigning the app's interface.

Why This Issue Exists

• Multiple UI-related PRs lack cohesion and consistency.
• The app's user experience needs significant improvement for better usability.
• A well-defined design system should be established before making changes.

Contribution Guidelines

• This issue is part of GSoC (Google Summer of Code).
• If you are interested in contributing, please create a well-thought-out design on Figma before submitting any code changes.
• Share your Figma designs in the comments for review before proceeding with implementation.
• Do not create PRs directly for UI changes without an approved design.

Next Steps

1. Research best practices for UI/UX and analyze competitor apps.
2. Create wireframes and design mockups in Figma.
3. Share the Figma designs in this issue for community feedback.
4. Once approved, proceed with front-end implementation.

If you're passionate about design and user experience, we would love your input! 🎨🚀

[Ashutosh-KARNX7]

hy @Ronnieraj37 i think i can pull this job off as i have expertise in frontend design which follows same theme and design langauge while keeping in mind for the user experience but wanted to add something is that i am not that good with figma but would code it out and would make sure to have your approval for this
if u could allow i can collabrate with someone as this issue needs collaberation
if yes ,please assign this to me
your truly
KARN

some similaar pr i did
AOSSIE-Org/DebateAI#39

[ParagGhatage]

@Ronnieraj37 ,
I can collaborate with @Ashutosh-KARNX7 on this issue.

[Ronnieraj37]

I'm really sorry @Ashutosh-KARNX7 but I cannot assign you the issue or anyone else until i see the complete design wireframe. I want this UI & UX part of front end to complete once and for all.

[Ashutosh-KARNX7]

@Ronnieraj37 hy I have actually https://debate-ai-prototype.vercel.app/ build this thing for debate ai
I am pretty sure I can build the frontend of this
So if I can show you some prototype in the discord channel for the frontend would you allow me I am pretty sure I can pull this job with ease

[PranshuLakhotia]

@Ronnieraj37 created demo wireframes and design mockups in Canva. Please have a look and suggest modifications.
Collaborated and brainstormed with @ishaanxgupta.

[ishaanxgupta]

Hi @Ronnieraj37,
Collaborated with @PranshuLakhotia and did this UI part.
Awaiting your review on the designs

Sign-in page:-

Login-in page

error 404 page:-

profile page which will have 2 button for analysis and viewing:-

after clicking on open button:-
https://github.com/user-attachments/assets/2ae053c4-efb1-4841-89d5-8f292b103978

We have tried to show all the components that we have made, components can be put in other pages as well as we recieve suggestions.
Going with dark and light modes

[Ashutosh-KARNX7]

Hi @Ronnieraj37,
Collaborated with @PranshuLakhotia and did this UI part.
Awaiting your review on the designs

Sign-in page:-

Login-in page

error 404 page:-

profile page which will have 2 button for analysis and viewing:-

after clicking on open button:-
https://github.com/user-attachments/assets/2ae053c4-efb1-4841-89d5-8f292b103978

We have tried to show all the components that we have made, components can be put in other pages as well as we recieve suggestions.
Going with dark and light modes

Hy @ishaanxgupta @PranshuLakhotia guyz I can help you out to build some section in the ui part as this issue js a big one needs collaboration up for a helping hand?

[Ronnieraj37]

Hey everyone, just a quick reminder—I’ve already mentioned that I’m looking for a wireframe on Figma. Please avoid attaching individual component images and requesting assignment. This issue will also be part of GSoC, so it will remain open for a few more weeks to gather more input before we finalize the best design. Thanks for your cooperation! 😊

[ishaanxgupta]

Hey everyone, just a quick reminder—I’ve already mentioned that I’m looking for a wireframe on Figma. Please avoid attaching individual component images and requesting assignment. This issue will also be part of GSoC, so it will remain open for a few more weeks to gather more input before we finalize the best design. Thanks for your cooperation! 😊

Yes i understood, Just wanted to bring to your notice that we wanted to have your idea on this UI, we can share the canva link also, if it is fine. We were looking for suggestions on this UI and the theme and if we can proceed to build more pages on canva.
Just wanted to confirm if we are heading in right direction

[anisharma07]

Hi @Ronnieraj37 I have created figma design of few pages for the project. I would love to contribute to the frontend design and code process .. I am exploring the code of agora recently.... let me have a feedback for the design and what improvement and pages need to be built, so that I can proceed further with the design and we can start with the frontend process,

Link:
https://www.figma.com/design/GVvJgyXWkjcEKl7k7FteNa/Untitled?node-id=0-1&t=6e0mwhIr5mQf9iQI-1

[ananyapandey9895]

Hi @Ronnieraj37 , I really love the UI UI However, I felt there were some areas for improvement, especially in the colour theme and a few other aspects. So, I made some updates. Please check it out and let me know if you and @anisharma07 like the changes

Here is the link-https://www.figma.com/design/f3MoRmsfnFTo5sBL1cVPdP/Alien-Company-Concept-Landing-Page-(Community)?node-id=0-1&p=f&t=1B1eRJYCxItnU2aG-0