Requirement of UI design for the landing page of the chrome extension for EduAid

[prarabdhshukla]

We require a UI design (designed in Figma or other popular UI designing tool) for the landing page of the Chrome Extension of the EduAid project. A brief specification of the requirement is provided below:

Header:

Logo: Display the AOSSIE Logo.
Tool Name: Display the name of the tool: EduAid.

Main Section:

Title: "Welcome to EduAid: Your AI Quiz Generator"
i-button(on hover): A tool that can auto-generate short quizzes on the basis of the content provided..
Start Button: A prominent button to start using the tool.

We welcome all suggestions for the UI design. You may discuss any queries with us via email or in our Discord Channel.

[CyraxSector]

I think I'll be able to work on this. Could you please assign me to the task? Thanks in advance!

[roy-ketan]

Hi @CyraxSector , you are working on this issue , right?

[CyraxSector]

Hi @roy-ketan yes I'm working on this.

[prarabdhshukla]

Hi @CyraxSector , I have assigned this issue to you.

[CyraxSector]

@prarabdhshukla Hi Prabudh, the design is ready. Could you please create a branch for this task or should I email the design?

[prarabdhshukla]

If possible, it would be much more comfortable to post the design on the discord channel itself so that we may also get suggestions from other people interested in the project.
Thanks

[CyraxSector]

@prarabdhshukla Please review!

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fw6HOakM7mXKeuiQHE6XzjT%2FChrome-Extension-Template-(Community)%3Ftype%3Ddesign%26node-id%3D107%253A768%26mode%3Ddesign%26t%3Dr5ivRJZo4biNQ0y7-1" allowfullscreen></iframe>

https://www.figma.com/file/w6HOakM7mXKeuiQHE6XzjT/Chrome-Extension-Template-(Community)?type=design&node-id=107%3A768&mode=design&t=r5ivRJZo4biNQ0y7-1

[Smita-Maurya]

Hello @prarabdhshukla , I request you to please assign this is to me and allow me to work on this issue.

[Imamul5641]

I have made a figma design for edu-aid. I would love to hear from you regarding any modification in the figma design

https://www.figma.com/file/0f3sfICgbMUKX3hoTjRP1t/Untitled?type=design&node-id=0%3A1&mode=design&t=5BpStkWlAPEa8gqh-1

[Roaster05]

Enhanced UI for EduAid's Chrome Extension

Here's a screenshot of the Figma file for reference:

Overview

The enhanced UI for EduAid's Chrome extension introduces several improvements to the user interface, aiming to enhance user experience and functionality.

Wireframe Details

In the Figma file provided, there are five wireframes outlined, each serving a specific purpose within the extension:

Wireframe 1: Default Popup

This wireframe serves as the default popup of the extension. Users are prompted to enter the number of questions of each type through input boxes. Input methods include typing directly into the input box or uploading a local desktop file, supporting various formats.

Wireframe 2: Loading Screen

Wireframe 2 functions as a loading screen displayed within the default popup while the backend generates questions based on the provided input text. An RGB dots animation, similar to the provided gif, indicates ongoing processing.

Wireframe 3: Quiz Metadata Display

Once the questions are generated, Wireframe 3 displays associated metadata within the popup. Users are provided options to Save (to local browser storage), Download (as a PDF file to local desktop storage), or View (in a visualized format as depicted in Wireframe 5).

Wireframe 4: My Work

This wireframe showcases previously generated quizzes along with their metadata. Users can access these quizzes through a button, leading to Wireframe 5 for visualization, located in the side panel.

Wireframe 5: SidePanel Display of Quiz

Introduced as a new section, Wireframe 5 offers a spacious and orientation-friendly visualization of quizzes. Users can choose options or input answers within provided fields, enhancing interaction and usability.

Click here to access the Figma file

Reviewers

@prarabdhshukla
@MiHarsh

[keshav-nischal]

https://www.figma.com/file/wId0ss4WP6BrIwMizNzsw4/edu-aid?type=design&node-id=2-287&mode=design&t=mblz1iLbpkgj13ym-0

Please check this design too.

[Anshukumar8529]

Enhanced UI for EduAid's Chrome Extension
1.Prioritize content over tags
2.Provide a consistent search preview
3.Balance feature updates with change management
4.Offer customization options
5.Accessibility
6.Monitor user feedback and iterate
7.Train users
8.Gradual implementation
9.Encourage users to keep their browser extension up to date

[Roaster05]

Please check this design too.

https://www.figma.com/file/BjeMyAF32z8GxYZ8CnlY9D/EduApp?type=design&node-id=0%3A1&mode=design&t=ilMwPxzjzO1QfwS2-1

Hey @Damian-crypto you can check my comment where I have displayed my figma for the UI/UX design but it is quite evident that you have almost cloned my UI design and did some changes in the color schema ( the SVG's which you have used are also similar ), and for that you should have referred it because after all we all are working towards being a part of this project and this would be unfair for me till the time any of us is selected for the project ( i don't have any issues if someone copies if of implements it after someone is selected for the summer but for now I would request you to either reference it or try to build something novel) Thanks..