Screen - creating a style

To start designing my app pages, I began focusing on the profile page as it has a mix of text and images/icons. Once I have successfully established a running theme I can apply to the rest of the app screens and adjust as needed.

The first section of the page contains information about the user, as it is a profile. The second section shows the user which party they side with (as determined by their quiz results.) There are buttons underneath the user's party where the user can change their party and also view the party's profile. In these experiments I created 2 versions of the screen, but liked different sections from both, so combined them together to get my final layout for the page.

The last section is a list of the users interests - also determined by the quiz. These issues are ordered in priority of the user - which can be adjusted in settings. This section contains a scroll bar where the user can scroll down - this scroll bar may be eliminated and just have the section as one that can be scrolled down without the bar.

The first section of the page is the part i had the most trouble with designing. The overall page looked good but this section seemed like it didn't fit with the rest of the design. I left a placement box for the icon that would eventually be placed there, and had to adjust and put in different features until I found a style that fit more with the rest of the page.

Eventually I decided that having the location would be the only information that the user would need - a name/age etc. would not be needed. The location can be changed - using either a pop up, or in the settings page, which will then reflect the constituency the user resides in. I could also include the constituency map or the constituency will be generated by putting in a postcode - this will make it more accurate.

In these developments I have kept the same layout but experimented with the structure. The open structure of the first design makes the text clear and easier to read, but adding the boxes to break up the page and look effective alongside the bold text.

Adjusting the design (below), I have tried to replicate this look by colouring the buttons underneath the party, which breaks up the white space but also keeps it open. Experimenting with the line breaks made me sure that the open structure needed to stay as the screen still felt crowded. 

Using this structure and design I can create a more standardised design template for all screens of my app and create consistent designs across all pages. My next step is to create the icons for the app pages and continue on the design.