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?