Biteable Application Walkthough

Advertisements

Creating Biteable Application

Screen Shot 2017-09-21 at 16.31.12

This is an application that is designed for users of particular dietary needs in their everyday life. This application will have the user know if the food they are looking to eat contains any ingredients they shouldn’t be eating. This application will be handy and convenient for the user when they are shopping. The user would just simply open the application and click the camera icon and then they are able to scan the barcode of the product. This will then say if the product is Vegetarian, Vegan, Contains Nuts, Contains Dairy, Contains Seafood, or even contains Gluten. This will help the user see if they are able to have the product and not have to stress about reading all the fine print of ingredients. This also can be useful for users that need to buy food for other people of these dietary needs and don’t know where to look or what to look for. There will also be an advisory notice while loading the application to explain that some products may contain traces because they are made in a factory that contains the products they are trying to avoid.

 

Screen Shot 2017-09-21 at 16.31.28

Development in my application soon started and errors were turning up everywhere. I started with my homepage, first just creating a simple look while I worked on the functionality of the application. My first step was to get the functionality of the camera working. I started with making a button to click so that the user is able to access a barcode reader. I feel the barcode scanning part of my application is the main part and needs to be functioning for my application to work. Upon tapping the camera button, this will take you to the scanning page of the application. When on this page you are able to scan ant barcode you wish and the application then retrieves that number back to you on the homepage.

 

Screen Shot 2017-09-21 at 16.40.16

I then Created my Database and added in different items of food and drink along with all the data needed for the application. I inputted this data manually by researching what each item meet different dietary requirements by using 1 if it’s true and 0 if it is false. Then for each Item, I had to create my own vectors so that they would look nice within the application. Now when a user scans an Item they will receive an item of the item as well as the data they wanted

Screen Shot 2017-09-21 at 16.32.43

I then had to link the application up with the database so that number you receive after scanning a barcode does something. Now the application looks to see if that number is in the database and feeds it back to the user. I then worked on making the application more applying for the user to look at when they are using it. I started to match the designs on how I originally intended the application to look. I added the darker grey boxes and the images but still had minor errors with how the application was displaying the data.

Screen Shot 2017-09-21 at 16.32.27

Finally, after working everything out I finally came to an application I was happy with. You are greeted by the Biteable homepage with a Camera button to use the scanner. Upon scanning your item you receive back the barcode number, If this is a mistake you can go and rescan or if it’s correct you are able to search for your results. When this button is tapped you can see the vector of the product along with the name and dietary requirements of the product to see if the user is able to eat the scanned item. Overall this was a fantastic project to work on and I am happy with the results.

Screen Shot 2017-09-21 at 16.33.04

Branding Myself!

If you know me in person you know that I’m one for the marble and copper design. Everything I own from my watch, Phone case, Necklaces, Bed Sheets and even my own Laptop are Copper/Rose Gold and Marble. So this has now become me and I thought to take the next step and use it as my own branding.

As it is my last year in University, It is coming to my Graduate Fair and the end of University. I now have to look into possible job opportunities to fall into after I leave. I thought about making Business Cards for the Graduate Fair so that future employers are able to find me and my work online. When it came to designing them I thought to add the copper and marble theme I have adapted over the years to brand myself and stand out from a normal business card.

I was able to a place to make my business cards with a metallic finish for the copper. I feel this makes the cards amazing and I love the design so much more. This is also adding more of my personality into the cards so that people can get an understanding of who I am from the card itself. I then fell for a marketing trick of getting matching items. I thought it would be nice to have some notebooks and notepads out in the graduate fair for people to write what they think of my project and also if they are interested in my work they can write down their contact details for me to message them later on. I then thought this wouldn’t be compleat without a pen to write these details down.

I think I may have went a little overboard with the branding of myself, But at least at the end of the day nobody will forget my name 🙂

LoveLove Films Work Placement

Screen Shot 2017-05-09 at 22.50.08

LAST DAY OF WORK PLACEMENT!

After Last year of making LoveLove Films an Application for their Production Company, I then have just finished a 4-week placement with them. From Researching to BBQs we all had a lot of fun from it. I also created a little Stop Motion for their Social Media to Wish everybody a Happy Easter as you can see below 🙂 I had created a mood board of what I wanted to include, to then design it in Photoshop first and then cut it all out of coloured paper and then shot each photo. Finally placing it all together in PermierPro. I was pleased with my placement and can’t wait to graduate to work full time in the industry.

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