Make it clear that a card is clickable
I am currently working on a Mobile Application, mainly using Material Design, with some client-specific adaptation.
On our project, we display a list of cards, each card having a varying number of items presented with bullet points.
Each card can be touched to open a new page containing more information on what this card represent.
For ease of use, each item has a secondary action (in our case, it's a reservation system) directly displayed in the card.
During User-testing, it came out that half of the users did not understand that the card was clickable to see details.
Their reasoning was that, since there is a button on the card, they didn't understand that the card itself was an interactive element.
Therefore, my question would be: How to make it clear that each card can be interacted with to see the details?
A proposition I got from a colleague is to put an arrow on the card, which honestly I don't think is a good idea, I have never seen anything like that in Material Design.
EDIT#1: In this case, you can see that the rounded button on the left, the secondary action, has three states, and changes color and text based on it.
On the right, there is a date that is not clickable, that has an orange background when it's close to expiration.
Also, since we are in a Mobile Environment (Using IONIC to be specific), we can't rely on Hover effects or cursor.