@duffy I would like to contribute on this for my outreachy application

I'd like to work on this too @riecatnor as you said it could be multiple people :)

Hi @riecatnor, would love to contribute to this task as well. Really interested to work in UX area for my Outreachy application.

Hi @toju6542 @camiarias @sabahat all of you are welcome to create a design for this. Be aware there are multiple people working here and we will choose one design to implement, though your contribution will count towards your Outreachy application whether chosen or not :)

Hi @riecatnor Here is the wireframe I made for the fedora Explore badges page redesign
https://www.figma.com/file/TrmNnYsWnHQHZdyGqqrrPi/Explore-Page?node-id=0%3A1

Hi @toju6542 ! Thank you so much for your contribution.

I like how clean and minimalistic your design is. It's very nicely structured and elements are arranged very thoughtfully.

Let's also consider the issue at hand:

Explore -> Badges

1. The main use case for this page and problem mentioned in the usability report is: people come there to see all badges, but it takes them a while to find the actual link here
   https://docs.google.com/document/d/1FfMB5tOA2I4pCyHrjiYE15G5CNHrPADhaQt4YaKX3-M/edit?pli=1#bookmark=id.121g22nn3wmo. Even people, who work with badges regularly, can have trouble finding this link. I'm not 100% sure what's the point of showing some random badges, rather than clearly lead the user to see all badges right away.
   I do like how in your design you separated badges into categories, and they are accessible from this first page.

2. My other concern is the search button, and that is applicable to all 4 pages - there are 2 search buttons in the mockup, really close to one another, what's the difference between those? Are those searches different for every page (explore badges, explore tags, explore people and reports)? Are they the same? What happens when one clicks search?

3. it's nice how there is a list of separate badges on the left, with descriptions and all. Here I would consider adding info on how to get said badge, but this is a more general suggestion, not necessarily concerning your design.

4. What is the blue rectangle in the lower right corner?

5. Search keywords: if we consider search for this particular section, it might make sense to add suggestions or example searches, so people are less confused (as mentioned in the report).

Explore -> People

Great job, @toju6542!
Here again my question is more general, rather than considering your design - what is the use case for showing 5 random people, who don't even have avatars more often than not.

The design you presented is very nice and clean. What do the yellow dots stand for?

Explore -> Tags

This page presents tags beautifully, @toju6542, it's clear what kind of tags there are and what people might expect to see and search for.
One thing I'd consider here is presenting most popular tags, as opposed to recently searched tags.

The lower part is great, one question here: what would the icons be? A random badge for the tag presented? That would be nice ;)

Reports

You handled this one beautifully, @toju6542. Maybe in the lower part with example reports you could mockup more exact examples, like there are on the page right now (eg top earners for the second day of October, etc).

Other than that it solves the issue presented in the usability report.

To sum up my previous comments:
I am a bit unclear about the general purpose of the Explore page, which made it harder to review the UI. For example, as a designer, I most often use it to visit the badge index, and often have trouble finding it.
I would be interested to know, what other people come to the page for.
So in the future in addition to looking at the problems with the existing UI, it would make a lot of sense to address the issue more generally and formulate the purpose of the Explore page as a whole.

One feature that has been regularly mentioned by Fedora contributors: it would be nice to know which badges one could get and for doing what exactly, so people could work towards getting more badges knowingly. That could be a useful section to put here.

Thank you for this in-depth feedback @mleonova I will do well to effect the changes in my next submission.

@toju6542 of course! Let me know if you have any questions.

Hi @mleonova This is my new submission on this issue https://www.figma.com/file/TrmNnYsWnHQHZdyGqqrrPi/Explore-Page?node-id=0%3A1

This is the report on my redesign
https://docs.google.com/document/d/15Vs4mLRo4UWGAbcjXI9jwBIU5Z7sT-cxPyL1EzE3XX0/edit?usp=sharing

Hi @riecatnor awaiting feedback please

This is my new submission on this issue https://www.figma.com/file/TrmNnYsWnHQHZdyGqqrrPi/Explore-Page?node-id=0%3A1

This is the report on my redesign
https://docs.google.com/document/d/15Vs4mLRo4UWGAbcjXI9jwBIU5Z7sT-cxPyL1EzE3XX0/edit?usp=sharing

@toju6542 - I think I will defer to @mleonova to provide feedback because she has a lot of knowledge in this area of expertise. Your improvements look great tho! Make sure to record these contributions in your application :) Thanks!

Thanks @riecatnor please can I be assigned to this project, it seems I’m the only one who worked on it. Thanks

Hello, @toju6542 , thank you so much for the recent changes. This is a great improvement on the previous mockups. Well done!

Badges
I love how you located the All Badges link in the top area of the mockup. However it still took me a while to find it. I think that's because it's located in between 2 major sections. Would you consider moving it to the left part of the screen, because it's the path the eye follows naturally? (reading left to right)

Search
It's probably okay, if search results appear as an overlay. I would like you to consider 2 things:
- it's good practice to show the search term after the user pressed search, so they can correct it without going back
- what happens if there are a lot of search results? Maybe it would make sense to have a grid view for badges as opposed to the list view? Here we must consider, why users are searching for particular badges.
- is it the same search for all 4 pages? How will that look?

People
I absolutely love the grid view here! You might want to consider it for the badges page as well.

Tags
Perfect.

Reports
Here you've incorporated almost everything I mentioned, perhaps you could give more examples in the explanation.
I now wonder what would the input fields for year/month/day be like?

Hi @mleonova Thanks for the feedback, this is my new submission
https://www.figma.com/file/TrmNnYsWnHQHZdyGqqrrPi/Explore-Page?node-id=0%3A1

My report https://docs.google.com/document/d/15Vs4mLRo4UWGAbcjXI9jwBIU5Z7sT-cxPyL1EzE3XX0/edit?usp=sharing

Hello @toju6542 !
Thank you so much for the changes you made, great work!

One thing I'd like you to consider now is more visual: what's the most important thing on the page once you look at it in the browser?
How will it be presented once it's live? There might be a little too much white space. All that seems to me is valuable space that could be used. What do you think?

Hi @mleonova please check this new design I did, I hope it would fix the issue of too much white space.
https://www.figma.com/file/TrmNnYsWnHQHZdyGqqrrPi/Explore-Page?node-id=252%3A2

Hi @toju6542 ! Yes, that is much better, thank you!

Thank you @mleonova I appreciate your feedback, I have learnt a lot working on this issue.

The usability report was insightful and the discussion in this thread as been very interesting. However, I too would like to bestow my 2 cents on how we can overcome the issues mentioned in the report whilst maintaining Fedora’s design guidelines.

I would like to share my thoughts and approach.

Jacob's law of UX

Jacob’s Law states that Users spend most of their time on other websites. This means that users prefer your application to work the same way as all the other websites they already know. So, it is essential to provide a native and familiar experience to the users.

Primary Navigation

While I really cherish the ’box’ design, but I think presenting the user with 4 choices straightaway on the first screen increases the cognitive load. From the perspective of a user, as the number of choices rises, the reaction time increases. So, this could be an additional factor for confusion among the users.

IMO tackling these issues would help in re-designing the website to make it more useful and “intuitive” to the users.

I provided an umbrella type menu, so when the user navigates through the “explore” section, they’ll see the 4 options there, instead of everything on one screen :

1) Explore Badges

I shifter the search bar to the top and made it bigger. Area below search bar displays random badges. The title “random badges” removed, since it is already intuitive for the user. Explanation: most websites, generally shopping websites, display random options until searched for anything specific. Jacob’s law is applicable here.

Provided the option for “see all badges” in a way intuitive to the user.

Provided necessary details below the badges so that new people might start to get familiar with it.

Provided the feature for “Search suggestion” to guide the user.
.
.

2) Explore tags

Problem – “They weren’t sure how to search for tags but also Match all tags. Participants weren't sure whether to check the box or not and how it affects the search.”

Solution – Removed the checkbox. Instead, divided the screen into 2 parts. One where it “matches all tags” and another it “matches any tags”. The user can “see more” of whichever they prefer. Hence, reduced one decision for the user to make.

3) Explore people

Simply followed the re-design method same as the previous two tabs.

The reports pages has not been re-designed yet, still working on it. Also, I have provided low-fi wireframes for now, still working on the hi-fi wireframes. Should I follow the new color-palette for this one?

@duffy @riecatnor I'd love your feedback on this one. Thanks

Tried something for this issue :))

Here's the link: https://www.figma.com/file/zYuMrH4fknkvfEVkEunCjY/Explore?node-id=0%3A1

I've kept it consistent with my design for #698 and #700 and tried to not stray too far from the original design

To resolve the issues I took the following steps:
1. I've added a button to view all badges
2. For the confusion with what has to be searched, I've added a description in all the search bars.
3. I've added/updated descriptions in some places where the wording was causing confusion (for example in reports and the match all option)
4. Search results appear in a consistent fashion
5. Got rid of the outdated reports, instead added details on how to generate them and provided a simplified search functionality

Looking forward to getting feedback! :D

I had reviewed my approach with @t0xic0der some days back and got some great feedback and insights which pushed me to go forward.
I’d like to share my progress and a little bit of what we discussed here.

1) The search bar position, why left inclined when there’s space empty on the right?
Reason : Followed Jacob’s law as mentioned in https://pagure.io/design/issue/699#comment-727837 . And the search bar is most commonly left inclined(eg. Google's search page), so it becomes intuitive to the user.

In the existing design, the main search bar is placed on the extreme right, and is really small (not very noticeable) and other four too seemed a bit randomly spaced (the bar on the right and button on the left side beneath it.

2) Reduced the margin for droplets to better utilize the screen real estate.

3) Some pages are monolithic in design. And someone who has a high internet speed won't quite notice the page switch when they click on the links. I hope I made progress to tackle this in my 2nd draft, but I’d really love your opinions and ideas on this one. @riecatnor @duffy

Here’s a prototype for the interface: https://www.figma.com/proto/fJAUNEtPzMBhx9J8vL7GOH/export-page?node-id=14%3A344&scaling=min-zoom&page-id=0%3A1

Figma: https://www.figma.com/file/fJAUNEtPzMBhx9J8vL7GOH/export-page?node-id=0%3A1

I also a different idea to tackle the issue of "the check box" of the tagged page. I decided use classic filter technique, very much common in shopping websites. But I would love your advise on whether this design is practical and convenient to code.

Below are the high-fi wireframed versions of a few screens:

(added the reports page)

I would love some feedback before I can move forward with this. Thanks