First, what was I solving?
How to view a large amount of data related to a specific game while making it readable, easy to understand and relevant every step of the game.
What did I do?
I was responsible for the whole UX and UI of this project. It was a quick challenge project done after hours in 2 weeks.
So here’s the idea
Thinking of the game as a recording, link the data to it so the user can rewind, play and fast forward the data for unprecedented control. The statistics would then change in time with the video as it plays.
Putting ideas to paper
Firstly I set to work conceptualizing. With the help of good old pen and paper I played with several concepts of how to display all the information on screen.
Eventually I decided for a tiled interface that can be built by the users to analyse the data most relevant to them.
From the initial concept I them moved on to low fidelity wireframing digitally. This was the time to refine ideas I had sketched out on paper, and see which could work better.
From the more accurate layout I realised I needed more flexibility, so each card can have a wide or narrow width, among other adjustments and affordances.
High Fidelity Mockup
Once the concepts were matured, it came the time to worry about the details and visual design.
The dashboard makes its funtionality visible, but not distracting, allowing the stats to take center stage.
The player interface on the bottom has been styled like music players as an affordance so the interaction can be intuitive.
Tiles can be dragged and dropped to build the right dashboard for the user’s needs.
Titles can be clicked on at any point to change the tile’s configuration, eliminating the need for an edit button.