I started making my designs on Photoshop to see what I can do to make my sketch’s look good and look like an application I would like to download. I started with my Biteable logo which is the Name Biteable inside of a barcode. I then used a dark grey background and 4 boxes However, I was playing around with the corner settings of the boxes and made them look a bit less boring by smoothing off 2 opposite corners. I then made the boxes blue and pink as I just liked these colours but I knew that the colours would be changed in the end. I then when onto the scanner page. I thought all I need is a basic camera to detect the barcodes for the user. I then placed a yellow box around the barcode to show the app detecting the barcode. Lastly we have a search page for users that can’t see a barcode or the scanner isn’t working or they don’t have a useable camera to scan items. I then made a nice looking search page for the user to write in the items.
Now I have my 3 basic pages I looked back onto the Logo and didn’t like the white background I then tried making the barcode white but it didn’t match what a barcode looks like, I then tried no background and its hard to see the black barcode on the dark grey background. I then made it a light grey but I didn’t like the colour. Then I thought placing an opaque photo of a shopping trolley in the background that relates more the the application and the black logo is more visible.
I then started working on the page of the application you will see after you have scanned the barcode or searched for. I want the page to show a massive tick or cross to say if it is safe or not and then below list all the ingredients of the the product scanned. I then went back to improve some of my designs on the first page. The pages I have are the camera and search pages so I don’t need more than 2 buttons so I scrapped the 4 buttons and kept only 2 and added in simple icon relating to the pages. I also updated the camera page as it looked too alike the apple camera.
I then just stared to see what can I make better, something I think I will keep doing throughout the project. I then started working on the outcome page and thought I can’t just have a Tick or a Cross as what if it is vegetarian but not dairy free? So I thought to add both a tick and a cross and in Green and Red to stand out on the page. It then came to me the fact the user isn’t able to choose from anywhere what dietary restrictions they have to then display on this page. I though by default I can have it display all restrictions but add a button in the top right corner to change the options. Here a 5th page was made to then tick what restrictions the user may have. After this I went back to the first page and knew the pink and blue didn’t work and I thought to change it to the green and red I used on the 4th page so they match and also give the application a bit more colour.