Visually distinguish cards in a list

Question

I made an LMS webapp which, in the main page, shows a list of courses. The page looks like this:

The goal of the app, from a graphical interface standpoint, is to keep an elegant material design look.

However, while I personally don't dislike the minimalistic look of the page above, I would like something that differentiates the courses visually to the user.

For example, Google Classroom solves this issue by giving custom illustrations & graphics to each course, which end up looking pretty different from one another.

I would like to add an element that visually distinguishes one course from another in an immediate way, thus reducing the cognitive load of the user having to look for the course they want to access. The important thing is that it must not "break" the design of the application, so to speak, so it has to fit in well with the rest of the interface, which is pretty minimalistic.

Currently, it's possible to bookmark courses in my application, which makes them appear at the top of the page.

One way I've thought is to show a bookmark on the card of the bookmarked courses, each of a different color. The color is always the same for a course (for example, it could be generated from the course name).

This is what my experiment looks like:

Could this be a good way of achieving my goal? Is there anything better to try?

Answer 1

It's important to understand the role of a framework like Google's Material: The goal is to get the designer off the ground as quickly as possible without them having to spend time on basic things like buttons and icon sets.

There is a point where every design system has to stop and let the designer take over.

This is where you are right now - the design system has reached its limit and you need to step in to fill the gaps.

You mentioned "Cognitive Load" but your proposed solution is likely to increase cognitive load as the user tries to understand the significance of the colour. Try to imagine that you've been presented with this page for the first time. You can see these little splashes of colour that obviously break from the basic colour pallet of the page but there's no key to tell you what they mean. What do you understand from those colours at that point?

If you have to explain to your users what the colours mean, then your attempt to make their journey easier has failed.

A better solution may be to colour code the courses by subject OR by level depending on the needs of your particular users. This colour coding will be much easier for users to learn and utilise in their search for any specific card.

However, you should never rely on colour alone to impart any kind of information - colourblind users, users with low vision, users working with low-light screens, or users working under unusual lighting conditions may not be able to distinguish between certain shades.

Having worked with LMSs before, I would suggest you find some icons and colours to represent the different core subjects ('coding', 'mathematics', 'Data Science', etc.) AND find some visual system for indicating the course level. You might also want to consider indicating the completion status of each course too ('unstarted, 'in progress', 'completed', etc.).

Between each of these facets of information, your users will be able to find what they are looking for much more easily.

As for style; be sensitive to the aesthetics of your design system but don't let it stop you from making life easier for your users. Material works well with illustrations, iconography, and photography. Just try not to make the page look too busy!