Implement category selection for the landing page

[237Leopoldine]

Proposed design for category selection:

Explore the landing page design more here on Figma.

[237Leopoldine]

@tuxology could I pls be assigned this project?

also @srish @NdibeRaymond I would pls like to get some other categories the team would prefer be used to filter through projects

[srish]

Thanks for filing this! We already have a design ready for this on Figma. Feel free to submit a PR.

[aqsaaqeel]

Can I be assigned to implement the category feature @srish

[237Leopoldine]

Proposed design for category selection:

Explore the landing page design more here on Figma.

The designs look really better I’ll go through it on Figma today

[Michelle-okechi]

@srish @tuxology
This is the design I came up with. I added the category feature to the landing page. Here Users can Select projects based on their preferred category.

[237Leopoldine]

After keenly looking at the proposed design, it does solve the project category selection for the most part.

@srish, @tuxology this is something I noticed the Zubhub platform has adopted rounded edges for the elements within its interfaces.

Of course this is understandable as the human brain is conditioned to process sharp objects as potentially harmful and dangerous and we have the natural behavior to lean towards objects with curved contours compared to sharper objects.

however...

Rounded elements may not work all the time!

Maintaining a constant radius when resizing a rounded box, may make the design look uneven, which is the case here

Also, a squared box doesn't really fit the aesthetic of the platform for reasons explained above.

So this is my design suggestion.

[237Leopoldine]

@srish @tuxology Pls let me know what you think of my suggestions. or is the any thing in the design that you would prefer I change

https://www.figma.com/file/uktT6xDPm9zo3bEHR6HYxT/Leopoldine-ZubHub-Design?type=design&node-id=0%3A1&mode=design&t=ikdLvb1aoGxMqGpM-1

[DonPresh]

@237Leopoldine I think I prefer the first iteration you posted. Considering first, the target audience can help inform our design decisions. The target audience for this app from the playful interface, the use of badges and even the images, are probably high school, middle school students. The button (category) can easily tell them that when an action is performed, there will be some screen changes.

The text works too but I think the buttons communicate your intentions easier and faster. Also maintains the playful persona the website has.

What you can do is change the colors of the other buttons from black #00000 to maybe grey #545454 #787878 #C4C4C4.

My thoughts.

[Marhiposa]

@237Leopoldine I think I prefer the first iteration you posted. Considering first, the target audience can help inform our design decisions. The target audience for this app from the playful interface, the use of badges and even the images, are probably high school, middle school students. The button (category) can easily tell them that when an action is performed, there will be some screen changes.

The text works too but I think the buttons communicate your intentions easier and faster. Also maintains the playful persona the website has.

What you can do is change the colors of the other buttons from black #00000 to maybe grey #545454 #787878 #C4C4C4.

My thoughts.

I actually agree with @DonPresh the button option communicate better

[237Leopoldine]

@237Leopoldine I think I prefer the first iteration you posted. Considering first, the target audience can help inform our design decisions. The target audience for this app from the playful interface, the use of badges and even the images, are probably high school, middle school students. The button (category) can easily tell them that when an action is performed, there will be some screen changes.

The text works too but I think the buttons communicate your intentions easier and faster. Also maintains the playful persona the website has.

What you can do is change the colors of the other buttons from black #00000 to maybe grey #545454 #787878 #C4C4C4.

My thoughts.

Thank you for the feedback @DonPresh @Marhiposa

[237Leopoldine]

@237Leopoldine I think I prefer the first iteration you posted. Considering first, the target audience can help inform our design decisions. The target audience for this app from the playful interface, the use of badges and even the images, are probably high school, middle school students. The button (category) can easily tell them that when an action is performed, there will be some screen changes.

The text works too but I think the buttons communicate your intentions easier and faster. Also maintains the playful persona the website has.

What you can do is change the colors of the other buttons from black #00000 to maybe grey #545454 #787878 #C4C4C4.

My thoughts.

Thank you for the feedback @DonPresh @Marhiposa

[Fidausym]

Hello @srish @tuxology . This is my proposed solution for this issue. I await your feedback. thank you.

1. Project Overview;

2. User persona

3. Ideation: By using the Crazy eight technique to brainstorm my design, My main goal was to create a design that solves the user problem i had identified during my Usability testing of the Zubhuh site. The result i had gotten from my resarch convinced me to add a carousel feature which would have a category option above the “features project”. The placement of the carousel was to act as a pointer/guider which would help users flow through the contents on the site easily ,which would also help boost discoverability and good user experience within the product.

4. Digital wireframe: My goal for the homepage and Creator page was to add a simple carousel that shows the available categories in Zubhub, which would make it easy to navigate and find contents on the page. The choice of placement is to increase discoverability which would increase the usability of the product

5. Mockups: Before, without carousel, Its difficult and annoying scrolling through a bunch of projects to find your desired one. Here, findability/discoverability is limited. User would spend unnecessary time combing through content on this page Before, without carousel.

After, with carousel. Users get to explore different categories of projects which would make their search easier. They also get to know the number of projects each category has which increases the usefulness of the feature and the product .The category could also have subsect like Trending, New etc

This is the link to the figma file; https://www.figma.com/file/fGeQvC1nh0DeQ1EEh3Gwfg/Zubhub-project-1?type=design&node-id=2%3A36&mode=design&t=nUVZzF9372bS4HFH-1

[yokwejuste]

@srish is this ready to be implemented ?

if yes what is the choice?

[yokwejuste]

Thanks for filing this! We already have a design ready for this on Figma. Feel free to submit a PR.

Thanks @srish, working on this now

[aqsaaqeel]

I have implemented the category filter feature in #902 . While working on this using this figma design I had some concerns:

• There are multiple designs for landing pages and dashboards with different styles of category filters.

1. On this landing page 👇,

• The theme is a lot different than the current design.
• The categories have a featured tag, whereas, in our current design, the featured list of projects is a separate component in itself.
• Currently, we are not showing any other projects except Featured Projects on the landing page.
  • Is the category filter only supposed to filter projects in Featured projects?
  • Or should the category tags lead the user to the login form?
  • Or clicking on a category tag shows any 2-3 public projects from that category with the login button?

2. This 👇 one has a similar theme to our current landing page, but

• The background is lighter.
• Similar concerns to the 3rd point in 1 about what to filter.
• The categories here are in limited numbers and thus are in a straight line. But, what happens when the number of categories exceeds the number of categories shown here?

My suggestions

• We go with the landing page design of the 2nd one ✌️
• The category filter design must be adopted from the 1st one ☝️
• We must have a category tag for Featured Projects too and it should be the default. This ensures that the user sees Featured Projects first and then they can filter other categories.
• We also have a tag/button to clear the category filter.

Note; Since the category filter was a part of the projects page, I have implemented it in #902 too. However the design and the flow were a concern, so I raised a draft PR so that I could get advice from mentors as well as designers.

cc: @srish @tuxology @237Leopoldine @DonPresh @Michelle-okechi @Marhiposa @Fidausym

Sorry if I missed any designers!

[benndip]

Hello @tuxology @srish please I just opened a PR here #910 to close this issue. The PR has descriptions on the tasks done to accomplish it.