Design the Showcase UI

[phil-ociraptor]

Objective

In this task, we will design what the Project showcase/tracker will look like.

Owner and Collaborators

This is a task primarily for @Hi-Van, although we will want direct input from @OmarMoghazy @omri08. Van, please coordinate w/ @pandevim if you need some support on design (i.e. low bandwidth this week).

Data team, please chime in with what is possible. @esu2020 @pandevim @justonsky (For example, if any of the designs are asking for data that is simply non-existent, i.e. photos or fields that don't exist/hard to find).

Details

In my mind, the UI will look a lot like:

• https://www.indiehackers.com/products
• https://nomadlist.com/
• https://marketingexamples.com/

Notice how there are cards, with some information on each (and maybe more on hover?) - as well as filters and search. We can start off by ignoring filters and search for now.

But another UI that could work is a row based UI. Kind of like:

• https://remoteok.io/ And other job boards
• https://www.producthunt.com/

Deliverable

Please have a mockup (can be a rough, low fidelity mockup, done in Basalmiq - or something beautiful and ready for the UI dev team to pick up immediately). But the following must be defined:

• Layout. A layout MUST be provided for both mobile and desktop. Please provide a mockup on mobile (resolutions) and desktop (1680 by 1050). Will this be card based? Will this be row based? What does a card/row look like?
• Color Palette - please identify the colors that will be used. So far, we have been using: (slate #212121, turquoise #4dd0e1, light grey #adadad)
• Fonts - we will use Monaco unless otherwise stated, so be clear on the font
• Fields - product an initial list of fields required by the UI. Part of this task is to think like a product manager. Should we optimize for teams looking for collaborators? Should we optimize for potential employers? These two audiences will want slightly different fields. We don't have to nail this down, but we need to think about it such that there are fewer surprises down the road (sometimes, the inclusion of a single field can break lots of things).

[pandevim]

Hi Design Team! @Hi-Van @pandevim @OmarMoghazy @omri08 Lets discuss this over discord: https://discord.gg/ytR2abx

[Hi-Van]

A first iteration of the mobile design

[Hi-Van]

A design iteration of the desktop view

[pandevim]

One more thing we may want to include in the project showcase page is a fill yourself up section. Consider a case where any person or team don't find their project in there. Two options which I can thing of right now:

1. Make that section a Form so that the person can update team details at that same moment, later those changes can be reviewed an update.
2. Make that section a Email or Github Issue template so that we can address their problem directly.