Final Designs

Here is my final design, to start with I have my main page where I have the Biteable logo set onto an opaque background of food shopping with buttons leading you to the scanner or search bar. I then have the scanning page that opens up your camera and finds the barcode. If no camera or want to search you have the 3rd page where you can search names of products or type in the barcode number. Then you’ll be lead to the 4th page where you can see if any dietary restrictions are included in the product you are wanting to eat. You can change the restrictions via the 5th page by ticking the information you want to see and un-tick the information you don’t want to see.mockupbiteable

Making final adjustments to my application I had asked a few peers in my class to see what improvements I could make for my application. I started by asking what logo was the best to use for my application. We were stuck between two designs but finally set on the logo above as the bold letters stand out more and the white space makes the words legible. The logo stands strong and bold for the user to see when using the application.

It was than seen that I have not created my app icon yet and I needed to created one. At first I thought just to add the logo on a rounded square but then I thought the B from my logos that I didn’t like too much as it didn’t say the application name in it I thought would be perfect for a app icon as it isn’t too busy and is a nice clean icon for my app icon.

The next thing that was raised was the fact I haven’t created a warning massage for the users to see when using the application just to clarify that I am not liable for any problems with the allergy information as some manufactures use equipment and make food that are restricted in the user’s diet. My application will be being as factual as I can create it however it is more of a public advisory and users should be cautious using the application.

For all my allergy information for my application, I have been referencing this web page: https://www.food.gov.uk/science/allergy-intolerance/label#toc-2

Technical Wireframes

For my project I have been looking into making my own databases and how it would be used to store and be easily accessible for the user to receive this data.

Here is a diagram of how my application is technically going to work. At the top you have the user, the user then uses an iPhone to then access the software which will be my application. The software will then refer back to a database that will then send information back though the software giving the user and output of a form which displays the information the user is in need off.

As my application isn’t just designs and I need to get it working technically as well as making it look good I took my designs into xcode to get a step up on what I need to think about when it come to making my application. I started by placing a mock up design in the first page and seeing how far I can create the application and see what I need to do some future research on. When creating my application, I came to find out a few errors very quickly. I started by making a search bar which I easily placed on the page but was unable to make the search feature to work and the same issue came when creating my barcode scanner. However, this is not really of an issue as now I know what I need to look into more and know what I need to learn technically to more on further in this project. I can now learn why what I have don’t didn’t work and what I need to do to make a smoothly working application.

I will use the help of the internet to help me with any coding errors that may occur and maybe make my application better and function better. I will be looking out for Open Source Code when it comes to looking at gathering products in a database. However, all images and designs used will be produced by myself.

Who could buy this application?

 

This application is aimed to be used when shopping in supermarkets. I then feel that a strong companies to buy this application would be the supermarkets themselves. Such companies as Tesco, Asda, Sainsburys and so on. These companies would find the app useful to help their customers know what they are able to buy from there store but also be able to advertise there products though the application to the user themselves. An example of this would be the user looking at some ice cream and then below would be an offer to get 50p off at Tesco. This would incorrage the user to buy the item at that store compaired to asda and other stores.

Logo design

Looking into creating my logo for the application I started to think what other logos have been made and what will make mine stand out and look good while on the app. I then looked at barcode scanner logos as I wanted to add the idea of a barcode into my logo. I also then looked into shopping logos, food logos and many more. The outcome of looking at these logos where to design some using barcodes, shopping trolley, magnifying Glass and also a bite out of the word. I started of with the bites out of the word Biteable but it didn’t look too nice. I then had a shopping trolley with the word biteable inside and tried making it interesting by adding barcodes and magnifying glass. I played around with this idea a bit and changed it up to see what improvements I can make and what looks better then before.

screen-shot-2016-12-02-at-17-16-56

I then choose what logos I liked the most and asked my peers to choose as well. The most common two were the B with bites taken out and the barcode with the name inside. I then thought how to make both of them better as I didn’t like the B as it didn’t say the name of the application. I then added the name and a barcode inside to make it more relatable to the application but when I asked my peers to say witch was the best they still said the original idea. I do like this logo but I think it can’t be the main logo but maybe more for the apps icon. Next was the barcode with the name inside. I didn’t like the how much white was on show I then thought to change it to have lower cade letters or filling in more of the white space with more lines. However, I feel this makes the logo illegible as the barcode mixes in with the text. Overall I like the lower text logo myself but I feel maybe the white space adds more strength to the logo in the end.

screen-shot-2016-12-02-at-18-34-02

Working in Process

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.

New Gantt Chart

 

This Gantt chart is to help me stay on track and and have too much or too little work to do at one time. I will look at the normal things from coding to database work and also testing my project to always find improvements for my application. After Christmas I will start on placing my code together. As you can see the coding and designing of my app dose not stop until the end of the project. This is because no matter how good I feel my application is there are always improvement so I will be forever adding need code and also redesigning my work to make it the application look its best. I feel this process never ends until it has to be handed in and even then it needs improvements.

My MoSCow

Prioritisation Analysis

When it comes to my application I needed to do an prioritization analysis based on my app. Below I have looked though the many ideas which I Must include, should include, could include and also won’t include. This is to help me when designing what I must have thought about in my work to what I must not have included. Then I can move onto what it should have to make the app stand out and be interesting to then finally think about what it could have to test myself a little in what I can do for my project. Following is my MoSCoW process…

 

Must (mandatory for the project to be successful)

  • Ability to scan barcodes using camera.
  • The ability to store a database on food items
  • Display a warning disclaimer
  • The ability to find databased products though barcode scanner
  • Display databased content on an iPhone
  • Display dietary information about the scanned product
  • Visually Appling

 

Should (desirable for the project to be successful)

  • Keep users interest
  • Informative for the user
  • Display correct Dietary requirements to the user
  • Include information about products
  • Stand out and be interesting
  • Appel to more than one person

 

Could (optional for the project to be successful)

  • The ability for users to add useful information
  • Include useful functions
  • Include more pages in application
  • Include more tools
  • Be able to access database without 3G
  • Update itself over time
  • Store previously scanned items
  • Alternative searching method
  • Add more dietary needs
  • Have related products to search
  • Have features to help navigate for the visually impaired

 

Won’t (categorically defined as being outside of the project’s scope)

  • Enable users to send information outside of the app.
  • Be 100% correct
  • Be able to suggest things to scan
  • Have every item in the supermarkets stored
  • Have items that are not food

 

Personas

Target Audience

The intended users for my application would be people or family/friends of people who have certain dietary needs they need to accommodate for in their meals, snacks and drinks. This age group would be roughly around 12-65 year olds. I will be testing my application out to this age group with these dietary needs or knows somebody that has these needs.

Here I have created some persons that would use my application for their own use and would find the application useful

Mock ups

When it came to designing how I want my application I thought about the research of the other applications I had looked at and I thought about why them applications have failed and don’t work and what I can do to make it better! So I knew I wanted it to look nice and simple to use so that the user is able to easily navigate through the application with no instructions in how to no matter of the age of the user or how technical advanced they are. I also wanted to make my application look visually appealing for better user experience. I knew my app needed a homepage that linked you to a scanner that then displayed text if the food was safe for the user to consume. I then thought about how the user would use the application so in image no.2 I draw out a user picking up a packet of crisps and then scanning it in the store to see if they are able to eat it or not. I then was made aware I need a disclaimer on my app saying that the information that is produced may not be 100% correct. I then made a more detailed sketch and also a colorful version to show how I want the application to look however I don’t think I will keep to this colour scheme. I then thought It was time to take my designs into Photoshop to make them look better and give a real look into how I want the application to look like in the end.