Snooker Scores App - Colour Based Layout Tweaks and Scamps

Layout Tweaks

Having looked upon the layout again today, I noticed that the different shades of green in the middle section looked like a football pitch because of how they were split up. I wanted to change this to try and avoid cross-sport references that could potentially cause confusion for the user.

I tried tackling this by making the rows thinner in the hope that the colour variation would look less grid-like when the shapes within it them were less square and more rectangular. I then tried removing the colour variation from the rows, instead adding a small border around each to separate the individual results. I found that combining the two was by far the best result as shown below.

 

 

This made the whitespace around the edge a lot more prominent, something which didn't look right. The muted colours and an obviously more grid-like look make the app look a bit like a betting slip, which is an appropriate connotation given the audience for the app. 

By putting 'favourite boxes' around the edge this was no longer an issue, as well as allowing the user an easy way to set notifications on for their favourite players.

The favourite boxes are in the 20% green to make the screen look more visually balanced, and the star that's within each box turns from white to 100% green when selected as the change in colour needed to be quite extreme to be noticeable at such a small size. The black stroke around the star helps this further by separating it from the the 20% green around it.

Scamps

After becoming happy with this setup, I drew up some scamps that reflect the navigation map to give me an indication of how each screen would differ to suit its content.

The main things were:

• I should put the WSA logo in a consistent place in the top left corner.
• On the results page the user will be able to navigate from round to round by swiping left and right, a function that will be made clear by arrows either side of the text displaying which round is currently being viewed.
• The icons representing the 'Players', 'Live Scores', and 'Results' screens should be a person playing snooker, a clock, and a tournament bracket respectively, with the active one being a darker colour than the other two.
• The screen that shows detailed stats and an individual players results should have to arrows that when pressed, go back to the previous screen, or allow the user to change the game for which the stats are being displayed or the player who's results are being shown.
• The 'Players' screen will need columns of varying widths to display important information such as their name and world ranking.