1. Not enough difference

The course cards were looking too similar as all the Manipal Universities have similar logo.

2. Abbreviations over full form

The students recognised the courses better with the abbreviations (but full course names were used for these cards).

3. Usability

Only the ‘Know More’ link was clickable but the students were clicking on the entire card (as one would expect a card to behave); and

4. Missing details

Important details like fees, work experience were not shown in the card

‍

Next step: re-ordering and re-arranging

‍

Adding a new tab called ‘All Courses’. Why?

• A generic tab (like ‘All Courses’) helps Online Manipal showcase the courses it wants to highlight without getting into the constraints of categories like new launches and popular courses.

• It also helps showcase diversity in offerings.

At this point all the courses were of Manipal University Jaipur and the most popular course MBA was not visible on page load.

Now we can see courses from other universities and MBA is also visible on page load

‍

Next step: making the cards look visually distinct

1. Colour Code

Colour coding the cards (based on universities) for visual differentiation

2. Abbreviations

Using abbreviations instead of the full course names, as they were better recognised.

3. Name instead of logo

Using university names instead of the logos

4. Showing the right details

Highlighting ‘Fee’ instead of ‘hrs/week’ as fees are more crucial while choosing a course

Now we can clearly see the difference between the two MBA’s offered (university & price)

‍

Next step: features to make the cards look even more distinct and enhance the overall usability and aesthetics.

1. Adding images

Using an image with a persona makes it easier for students to understand who the course is for and makes the card look more appealing.

2. Tags

Additional tags to give more insights about the courses like "New Launch" and  "Work Ex.".

3. Hover and link

Making the entire card clickable and adding a hover animation to denote the same.

Every feature contributes to making the cards more and more unique and helps a student visiting the website choose a course more easily.

‍

Next step: fixing the overall layout and hierarchy

1. Fixing the design for the tabs

Removing unnecessary highlights (the gradient background) on the tabs so the focus remains on the course cards.

2. Making it compact

The cards were made more compact in order to fit more cards and showcase more courses.

3. Alignment

Overall alignment of the section fixed (tabs and the edge of the first and last card in a row).