Frontend - Redesigning Programs page

[YohanAvishke]

I would like to suggest to redesign the tabular navigation bar thats present in the main programs page.

Why?

1. It’s complex and hard to use.
2. Have a bad UI feel due to the large number of tabs and long title names that they are represented through.
3. Easy to contain bugs (eg: Duplicating programs in multiple tabs)

Suggestion

There are currently 4 main tabs

1. Ongoing
2. Programs I mentor
3. Programs I get mentored
4. Completed

We can remove the 2nd and 3rd tab. And add all the programs of 2nd and 3rd tab under the 1st tab.
Then implement a badge system.

1. 
2. 
   reference

Badge will be show in the program card and will display if you are a mentor/mentee.
With this implementation another required feature will be a filtering system in the ongoing programs tab to filter out,

1. Ongoing Programs
2. Programs I mentor
3. Programs I get mentored
   Reason to keep the 1st and 4th tab instead of implementing another badge for completed programs is because these two types of programs have a significance difference and so UI should implement the difference on the first glance.

WDYT and questions or suggestions?

cc: @EngTeam , @akshika47

[Gravewalker]

I agree and having those badges in the program list would be a nice touch, I’ll try to sketch a design out including the badges for the landing page.

[Gravewalker]

I redesigned the page using Sketch, check it out!

Screen Recording 2021-04-03 at 21.43.46.mov (video)

[Gravewalker]