App - design development 2

In further developments I continued onwards with the grey colour scheme, implementing it within the quiz screen to experiment using a standard screen. I had been struggling with the grey scheme through initial designs as well as development so decided to go down a different route. Looking again at my research, I really liked the colour scheme from the driving app I looked at, which uses a grey-blue instead of just shades of grey. This made the app look far less boring and the slight use of colour does not hint to any other colours meaning no confusion for users. Within these experiments I also decided to use a different typeface as Source Sans began to look odd within the screen. The icons in place in the below experiments are only temporary and will be edited later.

The colour scheme for the quiz has been turned from grey to a dark blue-grey which makes the app appear less boring. I have also changed the typeface from Source Sans to Montserrat as I felt this suited the app more and looked cleaner overall. In these designs I also included the pop up box that would appear when the user taps on a word within the question. For this action, the word would be highlighted, and then a pop up box appear giving the definition, as well as CTA buttons. These buttons would either take you back to the quiz, or allow you to add the word to the glossary. This button has a checkbox included which shows you when you have added the word to the glossary.

The above screens are the results screen experiments, featuring a muted version of each political colour taken from research. I had to mute these colours due to the brightness of each. As each colour was used for individual party branding, they were not made to work together in a colour palette, so I have had to adjust accordingly so that they will not be too bright or clash. In this section I have also adjusted the buttons too, before they had a white fill with a dropped opacity, however I found that using the colour of the screen as the fill colour and dropping the opacity of each button worked better as it seemed more harmonious. I extended the length of the buttons too as when I sent the screen to my phone the buttons seemed far too short. When I looked at these screens on my phone I felt the full colour screen was too overpowering, especially the yellow screen as it was very hard to make out the white text that was placed on top. Therefore I decided to revert to the idea I had created in my sketches, having a colour gradient section at the top of the screen, and keep the grey blue colour scheme running through the app to create consistency. This makes the colour less intrusive but still an obvious design feature.