How might we create a product category "landing" page?

Bixal / med-supply-cat

Concept for a medical supply catalog. A Rapid Response Team project: https://github.com/Bixal/rapid-response-team/wiki.

https://bixal.github.io/med-supply-cat/

Other

2 stars 2 forks source link

How might we create a product category "landing" page? #14

Closed bnaolu closed 3 years ago

bnaolu commented 3 years ago

When transitioning between selecting the category and the product detail/description pages, how might the product category landing page look like?

bnaolu commented 3 years ago

@pglevy @kbchumley

Here are a few options for the product category list. Don't mind the messy code right now. Would love to hear your thoughts and opinions:

Option 1 - follows the "collection" component

Going along with the "add to list" concept, not sure how I feel about the buttons here; possible to swap this out with something else.

Option 2 - follows the "card" component

I added an "add" icon on the bottom right of the cards instead of the button, which is pretty bulky and doesn't look right with the tags on this page.

Option 3 - follows the "list" component

Nothing too crazy here; just a list view of the products without any distractions. Could possibly add margin spacing and other elements later.

pglevy commented 3 years ago

Hey Brianna, Thanks for exploring these options! I think options 1 and 2 are promising. Leaning toward the collection component, but the combination of the font weight, tags, and primary button make it feel a bit too busy and heavy. On the cards, the add button a bit subtle as just an icon. And the list-only approach of option 3 doesn't seem very scannable.

I did a fork of your collection pen and start playing with some styling and added the media thumbnails. See what you think of some of those tweaks and we can sync up on it later.

bnaolu commented 3 years ago

Collection Option 1 -

Added additional meta-data
Fixed up some of the spacing issues with the product name
Used the link instead of button for "add to list" feature; shifted more right-aligned

Collection Option 2 -

Added additional meta-data
Fixed up some of the spacing issues with the product name
Kept the button but shifted more right-aligned

Card Option 3 -

Made things a bit cleaner
Added images to the cards

pglevy commented 3 years ago

These look great. I think option 2 is a good balance of text, image, and CTA. I'll work on a layout based on that one.