UX/UI redesign for QUIZ PAGE

[stacykutyepov]

The idea is to redesign the page with quizzes.

I'd like this app to have more features for learning different languages and frameworks.

Let's create QUIZ PAGE where users can: Decide what language/framework to learn;

1. read about the specific topic
2. take a quiz on the specific topic
3. take a quiz on a mix of topics
4. see the progress of the topics he/she already read
5. add to bookmarks questions he/she wants to come back later

[Anti20-creator]

I think this kind of circle selector could be user friendly and it would be really easy to use for the page viewers. And we could add also some short description connecting to the selected topic.

I don't know if you want to expand the topics later, because this circle design is limited to 10 maybe. So regarding to your list 1, 2 and 3 could be done by that.

4. We could add an overall progress, which could be read when the user hasn't selected a topic. And after he clicks on a label, then he/she could se his/her progress on the selected one. (I am thinking on a progress bar with some animation.)

[stacykutyepov]

Wow! This one looks very nice! I think, I'd like to expand topics in the future, so it's better to make it in a different way. We can use this topics selector for something else! I think the website that has a similar idea is SoloLearn. So it's nice to have a look at what they have there and make it more user friendly. (I am thinking on a progress bar with some animation.) - Great Idea.

[Anti20-creator]

Yeah, then it isn't the best idea to use that here. I found another one, which looks quite good in my opinion.

Not the exact way that I coild imagine it, but this one was maybe the closest that I could find. We could maybe replace the circle image with a full width landscape image on the top, and replace the social icons with other Material UI Icons according to question number, subcategories in topic or any other informations which could be helpful to display. If you like this more then tomorrow I could draw it with the changes that I mention. (First I want to find out which design way could fit more the project and what is in your head about it.)

[stacykutyepov]

Sure! Looking forward to seeing the design:)

Best regards, Stacy

On Apr 12, 2021, at 3:29 PM, Anti20-creator @.***> wrote:



Yeah, then it isn't the best idea to use that here. I found another one, which looks quite good in my opinion.

[CSS-profile-card-Byurhan]https://user-images.githubusercontent.com/61777466/114448407-d04c5400-9bd3-11eb-9c6f-b25122662115.jpg

Not the exact way that I coild imagine it, but this one was maybe the closest that I could find. We could maybe replace the circle image with a full width landscape image on the top, and replace the social icons with other Material UI Icons according to question number, subcategories in topic or any other informations which could be helpful to display. If you like this more then tomorrow I could draw it with the changes that I mention. (First I want to find out which design way could fit more the project and what is in your head about it.)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/Inter-Camp/InterCamp/issues/57#issuecomment-818075083, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AO4UYMO7Q53NAWEC76SIFVTTINCYXANCNFSM42TUDREA.

[Anti20-creator]

That's what was in my mind according to the design:

I made 3 slightly different cards. Only the progress indicator makes difference between them. (Couldn't remove the original cards in the background, sorry for that. :D)

[stacykutyepov]

I like the 4th one & the first one. They're the same, right?

[stacykutyepov]

Would you like to provide a design of how it might look like on a mobile device as well? So It'd be easier to style it

[Anti20-creator]

Yes, there is no difference between them.

[Anti20-creator]

Would you like to provide a design of how it might look like on a mobile device as well? So It'd be easier to style it

Sure, I will attach them soon.

[Anti20-creator]

I attach a GIF about the design in action and the two screens.

I don't know which colors want you to use active on the page as main color, so I just use colors like the logo contains. But the focus is on the layout. If you like these, then I could start implementing them.

[stacykutyepov]

Cards look great! Thank you!