Prototype Design: Lo-fi Prototype

With my requirements in front of me I started to draw out my initial design using a pen and paper. I've used this method before when creating wire frames for websites and find it useful as its so basic and gets your head around what needs to go where. This lo-fi prototype was a good starting point as I started to set out the navigation elements and designed the 'home' page and 'food diary' page.

Click to Enlarge

Navigation

This was my initial navigation design which involved 3 elements so that its simple and easy to get around and find the information that you want. The colour scheme right now isn't set however a shade of green will be used as the main colour.

Click to Enlarge

Home
This is the 'home' page which has a number of features on it such as current balance on the system, which is used to order and purchase food. This was an aspect taken from the interviews as people were keen to be able to order and have credits (money) on the system. There's an order history area where you can look at what you've ordered in the past weeks/months. What I've also got on here is a chart indicating the users daily intake of food so far. This overview is great on the homepage as the user is immediately aware of what they've eaten and how many calories etc they have for the rest of the day. From here they can then go to the Food Diary page to get a more detailed break down. I have used a pie chart as I was aware that from the interviews and app research people engage better with diagrams and colour as opposed to a list of information.

Click to Enlarge

Food Diary

Here is the 'food diary' page which is where the user can find all the information about their intake so far and here they can also log food intake, add exercise that they have done and see a more detailed breakdown of nutrients that they have eaten. I have tried to make this data as text 'unheavy' as possible and use more diagrams like I noted above, this will engage the users more and allow them to take more from the system. Also I have integrated the 'Goals' system bottom right which allows users to add their own goals for healthy eating. This was a big aspect from the research therefore it was clear that it should be included. This also goes for the 'Needs' section bottom left which actually allows users to set their own personal needs as most students don't want to have a strict diet so there's a chance here for the user to cheat on their diet as it were. This section was also inspired by the initial research.