UX: make featured extensions look more special than the all extensions section on catalog page

[ekidneyrh]

Is your enhancement related to a problem? Please describe

It came up in the UX call today that the user could get confused or frustrated seeing a feature in both the 'featured extensions' section and the 'all extensions' section. This could be because both sections look similar.

Describe the solution you'd like

Suggest making the 'featured extensions' look more special and different than the 'all extensions' to help visually seperate them from each other. Maybe bring in use of carousel?

Carousel:

Describe alternatives you've considered

No response

Additional context

No response

[ekidneyrh]

Had a look at this, maybe the way to go could be using the cards like in the learning centre? This gives the user the option to hide them then also.

Diff states for these cards can be defined / documented in the design system. I saw some already created in the penpot file:

WDYT @asamalik?

[asamalik]

That looks nice! But it hasn't removed those duplicate items.

What about this:

(And here I'm learning the tool, so this is a quick draft I made in Inkscape — the colors are horrible on purpose, all I want to communicate is the layout. You can make things way nicer than I can anyway! 😄)

Here I merged both the Featured Extensions and the Available Extensions together to get rid of the duplicities. And then I somehow highlighted the featured ones. That would need to be done in a better way than this of course!

What do you think about this direction?

[asamalik]

I can imagine the "Featured" designator could be many different things, like a badge, or an icon, or even slightly different background and border... anything to make it nice, distinct, and clear that it's featured.

Maybe you can even reuse what you've done, and use the bigger cards in there.

[benoitf]

on my side I like the proposal to display featured first using almost the same layout

[ekidneyrh]

I really like that idea!! I'll mock it up on penpot :p

[ekidneyrh]

something like this?