search

AOSSIE-Org / EduAid

A tool that can auto-generate short quizzes on the basis of the content provided.
7 stars 26 forks source link

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

Open prarabdhshukla opened 1 year ago

prarabdhshukla commented 1 year ago

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 commented 1 year ago

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

roy-ketan commented 1 year ago

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

CyraxSector commented 1 year ago

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

prarabdhshukla commented 1 year ago

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

CyraxSector commented 1 year ago

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

prarabdhshukla commented 1 year ago

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 commented 1 year ago

@prarabdhshukla Please review!

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

Smita-Maurya commented 10 months ago

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

Imamul5641 commented 6 months ago

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 commented 6 months ago

Enhanced UI for EduAid's Chrome Extension

Here's a screenshot of the Figma file for reference: Screenshot from 2024-03-18 13-05-46

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 commented 6 months ago

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 commented 5 months ago

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

Damian-crypto commented 5 months ago

Please check this design too.

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

Roaster05 commented 5 months ago

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..