This is a design concept I came up with for a baseball game that offered live scoring. The player picks the events based on what is happening in a live game.
After analyzing the the constraints and the requirements I came up with the layout below and explained the reasons for the changes I made. I did not get involved in designing the game mechanics. My goal was to come up with a layout solution for mobile screens and do the visual design that reflected baseball without being overly cliché.
The first two things I noticed on the initial layout were the size of the countdown clock and the size and position of the event drop-down menus. The client’s main priority was to fit everything on a page and prevent scrolling. The layout was initially designed for mobile landscape screens but the game sections needed to be bigger and more prominent so I re-designed the layout for mobile portrait screens.
The player chooses an inning to either display the event scores from past innings or to select the events for current and future innings. If the inning the player picks ended the inning number is grayed out, only the results are displayed but if the inning isn’t played yet the players is directed to the event selection page.
I separated the event selection section and give its own page. When the clock is counting down it is important the drop-down menus should be big enough for imprecise finger taps. The event sections on the initial layout were big enough for viewing the scores but too small for making selections in a limited time. I also put only 2 events side by side so that there was enough room to display event scores. On the second screen all the player gets is a big countdown clock, 6 drop-downs and a submit button.
The results screen: