OUGD505 STUDIO BRIEF TWO - APP DESIGN & FINAL APP MOCK UPS

Starting loading page developments:
I had real difficulty designing the loading page, as I wanted to include the app name and tagline, and the colour for the app as well, however with just minimal information it looked a little plain and simple, like there wasn't much initial impact. This was where the leaf design came in, however initially I didn't want to use the leaf sketches as I thought they would make it look too complicated and possibly feminine, so I started off by just using an basic shape of the leaf rather than including all the detail, as I thought this would indicate nature but still appear bold and dynamic. However it just looked a bit odd with the bold leaf shape, it needed more depth to the page otherwise it was way too simple. The image traced full colour leaf was then applied in different positions at different scales and with different background as well, to see how I could make it work. In the end I changed the background colour to a lower opacity so it was still a colour taken from the leaf but was lighter so that the leaf stood out more, but the background wasn't white as this interfered with the legibility of the app name.

Content screens:

I screenshotted the home page of Instagram to use as a basis for the home page of the app, as I wanted a photograph feed to be the home page, so that you can see what your friends/followers are doing to be sustainable, but also see the latest tips posted as well. This makes for more of a social media home page where you can interact, and also acts as something that you can scroll through when you're bored as well, which I know we all do. The circle and cross in the bottom right corner expands, the same as on the Facebook Messenger app, to options for you to make a post, and search for followers, posts etc. The icons at the bottom of the photograph are save, like, comment and share respectively. The question mark at the top banner is the button to go to the tip of the week page, which shows the featured tip on how to be sustainable. This changes on a weekly basis. The picture on the top banner is your page where you can view your profile and posts, and the four lines is the menu bar.

This is the page where you can input your information, such as if you've recycled some cardboard or plastic tub, how long you've spent in front of a computer, if you've walked to the shops instead of drove, if you've bought anything such as a new knife or dishwasher etc. Also if you've printed anything off at work, how much paper you've used, and what appliances you've used such as dishwasher, washing machine, work machinery. The other button lets you add in any information that doesn't fit under the other categories.

Say you clicked on travel on the previous screen, this would take you to this page, where you can insert your mode of transport, so bicycle motorbike, car etc, and then how far you travelled in it as well. This then adds it to your log.

This is a track your progress screen, which works on a weekly basis, so you can see how many hours you've spent in front of a screen each day, and compare it to last week. It shows the information in a bar chart format which is easy to read and compare data. The arrows either side of the chart allow you to view previous and and future weeks so you can review your progress.

I really struggled with the "me" screen, as I was unsure what sort of information and layout to give it, and with the layout I chose there seemed to be a lot of white space at the bottom. This space was attempted to be filled using the leaf at different opacities, however this just like it's there to fill space, which it is, but I don't want it to look that way.

Final app design:

Loading start up screen.

Home screen.

Menu selected. This shows the different options available in the drop down menu.

Track progress page, once selected in the menu. You click on a heading which takes you to the record.

Selected screen time track record. Shows the latest week's data.

Selected the Add to log page in the menu, which takes you to this screen, where you select an option to add information to.

You selected travel, input the information into the page and press submit to save it.

My profile page, where you can view your posts, posts of others you've saved and tips and tricks you've saved, posts you've shared, and your personal target as well, where you can see how well you're doing so far based on the track my progress information.

Mock ups:
These mock up photographs show how the app looks on an iPhone 6, how the scale works and the sizings of everything. It also shows how it would actually look if it was produced as an app and you could download it on your phone, it gives an idea of what it would actually look like.

Evaluation:
I am really pleased with the design of this app, as it is gender neutral in colour and design, and reflects sustainability in it's colouring as well. It has achieved the simple and minimal style that was being aimed for initially. I feel I have designed it with a easy user experience, so it is simple to navigate around the features. Given more time I would of loved to of done more screens, however in these I feel I have covered the basics, and you get a general idea of what you can do on the app and how it would work. If time allowed I would of liked to of thought about how things changed when you interact with the app, such as moving from screen to screen, and when you touch a button as well, does it change colour? However this is just an indication of what it would look like and how it would work.