Nested Cards on mobile

Question

I've come across many good nested/hierarchical data on mobile, problem is they often only include one line of information.

I'm looking to include more information than just a card title, so I'm really struggling to visualize a decent design.

Well, first of all, this is the design on desktop:

Now, on mobile, I know I can't expect the user to have the same experience as on desktop, but I'd like to atleast guarantee the user will be able to see 3 levels down without having so scroll horizontally (there are no level limits)

Worth noticing that I'm not looking for a sliding panel or a modal that show the inner tasks, it is important for the user to see the whole tree. I'm also avoiding using connecting lines to display the hierarchy because those are a pain to animate

This is more or less what I came up with on mobile, this is 320px large : I think it looks shit, I tried to cram up all the info in the card but it got too crammed.

Any ideas on how to display the first table on mobile?

Answer 1

I suggest you take a look at colouring your text and just aligning everything correctly in your cell. When you want something to stand out, make it 'pure' black and maybe even bold. Make the rest of the text a little more 'greyish' so your eye isn't directly focussed on the less important part. Use a other colors (green, red, blue, etc.) as labels for something like ongoing, on hold or completed. I've put an example below of the way I would do it.

(to be clear, I used the same measurements/scales as you)

Good luck!