For our platform we would love to have a good way to visualize a knockout system. So you can easily follow that from quarter final X the winner goes to semi final Y.
A simple diagram like below does wonders to understand a schedule like this.
The problem is; lack of space on mobile.
What are some good user interfaces with similar graph-like structures that work good on mobile?
I think the most suitable way is to fit each of the columns you present in a screen, scrollable if necessary, and a button to navigate to the next/previous screen:
Round of 16
---
20 June - Place
Team A
Team B
20 June - Place
Team A
Team B
20 June - Place
Team A
Team B
20 June - Place
Team A
Team B
..Scrollable..
Quarter Finals >
.
Quarter Finals
---
20 June - Place
Team A
Team B
20 June - Place
Team A
Team B
20 June - Place
Team A
Team B
20 June - Place
Team A
Team B
< Round of 16 | Semi Finals >
.
Semi Finals
---
20 June - Place
Team A
Team B
20 June - Place
Team A
Team B
< Quarter Finals | Final >
.
Final
---
20 June - Place
Team A
Team B
< Semi Finals
