I was asked to create a small and likely simple mobile application to display evaluation and its details.
Problem is that the person who created the wireframes was clearly thinking on a website rather than a mobile app. I assume that because of the use of tables (as you can see below). These days mobile apps display such information as lists or cards.
I'm trying to come up with a better solution to display that information. However I'm having trouble figure that out.
First thing is that the screen has two distinct, yet related, set of data. Seems to me that there's an obvious solution here and that would be to use tabbed navigation and display only one set of information at a time.
But I can't figure out a way to turn those tables into lists or cards. And there's really not enough space to display 4 columns like the picture shows.
The only thing I could come up with is to "merge" the third and fourth columns, having the background of each "cell" being the progress bar and placing both the number of correct answers as the percent value as text inside of it.
But it sure still looks messy.
Could anyone help me with some guidelines and/or best practices that would help me figure that out? Or maybe you've seen an app that displays kinda the same information?