http://roxboroughdesign.co.uk/usefullindex.html
The Brief Create and produce a design solution that persuades people to consume less, reduce waste and be more efficient with the planet’s resources.
Collaboration & Professional Associations 01 Change Makers Brief
Dustin Roxborough & Santosh Rudra
Contents Research ....................................4 The Problem ....................................5
Cause and Effect .............................6 Making Connections ....................... 7 Food Storage...................................8 Comparative Analysis ..................... 9 SWOT Analysis ..............................12
Concept Development .............. 13 The Concept ..................................14
How It Would Work ........................15 Our Proposal...................................16 The Storyboard ..............................17 Personas and Scenarios ................18
Design Development ................ 20 Branding .........................................21 System Flowchart .......................... 23 Gestures......................................... 24 Wireframes ..................................... 25 User Testing ....................................27 Realising the Concept.....................29 Final Product...................................30 Post-presentation Additions & Improvements...............................41
Evaluation...................................43 Evaluation .......................................44
Future Work ....................................44
Research - The Problem - Cause and Effect - Making Connections - Food Storage - Comparative Analysis - SWOT Analysis
4
The Problem We chose to target food waste that occurs at home, which accounts for almost half of the food thrown away in the UK. We wanted to come up with a design solution to reduce the 7.2 million tonnes of food and drink that is thrown away every year from our homes. Wasting this food costs the average household £480 a year, rising to £680 for a family with children, the equivalent of around £50 a month. There are two main reasons why we throw away good food: we cook or prepare too much or we don’t use it in time, and this is because food is relatively easily available in this country and thus the valuable commodity is taken for granted, also people lack good organisational skills and knowledge of how to properly store their food.
5
Cause and Effect To find the right design solution for the problem we uncovered all possible causes for food waste. This was done by categorizing the processes that led to the root problem and then finding problems within the processes, shown as a Fishbone Diagram.
Materials
Mother Nature Carbon footprint
Water
Over farming
Natural resources Bio-degradeability Packaging
Energy consumption Water Consumption Ageing Process
How to reduce food waste? World Hunger
Air-tight containers
Obesity (greed)
Freezing
Organisation skills Multi-buy offers
Man
Fridge Use by dates
Method
Over-production Manufacturing plants Transport Distribution
Machine
6
Making Connections In our concept generation workshop in order to generate ideas we tried to find the right demographic to target, and the genre and medium to use.
Human Need + Subject: Education, Knowledge Target Audience + Age: 18-24, 25-34 Sex: Male, Female Origin/Race/Nationality: European Ability: Literate Genre + Game Genre: Knowledge Film Genre: Family Medium = Media: Online Device: Smart Phone
We generated ideas for the different combinations we selected and decided to design a smartphone app for young people living on their own for the first time, and also busy families with working parents, the app would help them keep better track of the food they have at home.
7
Food Storage No food lasts forever, however well it is stored. Most pre-packed foods carry either a “use-by” or a “best before” date. “Use-by” dates appear on foods that go off quite quickly. It can be dangerous to eat foods past this date. “Best before” dates are for foods with a longer life. They show how long the food will be at its best quality. Food can look and smell fine even after its use-by date, but that doesn’t mean that it’s safe to eat, as it still could be contaminated. Proper storage of food reduces the risk of food poisoning. Following these tips ensures that food is always safe to eat. Some foods need to be kept in the fridge to help stop bacteria growing. These include foods with a “use-by” date, cooked foods and ready-toeat foods such as desserts and cooked meats.
Food should be properly cooled down before putting it in the fridge because it could raise the temperature in the fridge, which isn’t safe as it can promote bacterial growth. Cleaning the fridge regularly to ensure it remains hygienic and in good working condition is also important because food debris accumulates over time and can increase the risk of cross-contamination.
Here’s how to prevent bacteria from growing: • Keeping the fridge temperature below 5°C, • When preparing food, keep it out of the fridge for the shortest time possible, • Cool down leftovers as quickly as possible (within 90 minutes), store them in the fridge and eat them within two days, • Store eggs in their box in the fridge • Never put open cans in the fridge, as the metal may transfer to the can’s contents – place the contents in a storage container or covered bowl instead
Freezing and defrosting
Re-freezing
It is safe to freeze meat and fish as long as:
Never re-freeze raw meat (including poultry) or fish that has been defrosted. It is possible to re-freeze cooked meat once, as long as it has been cooled before going into the freezer. But if in doubt, don’t re-freeze. Frozen raw foods can be defrosted once and stored in the fridge for up to two days before they need to be cooked or thrown away. To reduce wastage, divide the meal into portions before freezing and then just defrost what you need. Cooked food that has been frozen and removed from the freezer must be reheated and eaten immediately once fully defrosted. When defrosted, food should be reheated only once, because the more times you cool and reheat food, the higher the risk of food poisoning. Bacteria can grow and multiply when food is cooled too slowly, and might survive if food isn’t reheated properly. When reheating food, make sure it is heated until it reaches a temperature of 70°C for two minutes, so that it is steaming hot throughout. Foods stored in the freezer, such as ice cream and frozen desserts, should not be returned to the freezer once they have started to thaw. Only take out of the freezer what you intend to use for that meal.
• It is frozen before the use-by date • Meat and fish are thoroughly defrosted before cooking – lots of liquid will come out as meat thaws, so stand it in a bowl to stop bacteria in the juice spreading to other things • Food is cooked until it’s piping hot all the way through Make sure the meat is properly wrapped in the freezer or it might get freezer burn, which will make it tough and inedible. Date and label meat in the freezer and eat it within 24 hours of defrosting. Don’t keep food in a freezer indefinitely.
8
Comparative Analysis Sainsbury’s App (Free) • • • •
Exclusive bonus points offers and your Nectar balance on the go! Meal plans, recipes and shopping lists to help make feeding your family even easier! Check out the latest deals and offers available instore and online Find your local Sainsbury’s store.
Evaluation — Sainsbury’s attempts to do many useful things with this app whilst not excelling at any of them. The orange colour scheme is understandable but overused, offerring an interface which looks rather ugly. The app is overflowing with information and can be ovewhelming. UI/UX — The app is not very fluid to use, pushing the user through too many steps to complete simple tasks. Some of the many buttons are small and could prove fiddly. We found that some button were also rather inconspicuous.
Nectar App (Free) • • • •
Receive exclusive bonus points offers, only available on the app Shop through the app and collect points with over 300 online retailers. Check your Nectar points balance on the go Handy store locator to find out where to collect and spend points near you
Evaluation — The app basically shows all its affiliations and can be useful in informing the user of offers and locations where nectar points can be spent. This is an app which does less but better. UI/UX — The interface is similar to the Sainsbury’s app but is not as overwhelming when it comes to the amount of information displayed. The colour scheme is more subtle and the layout is altogether more usable.
9
Food in a Flash App (£0.69) • • • • •
•
•
Against the Clock – Choose your time and the app gives you recipe suggestions that can be prepared in that timeframe. Budget ideas – meals that are high in flavour and kind on the wallet. Healthy options – lighter and better for you … when you feel like being good. At the shops – A great offer at the supermarket? Tap in the key ingredient you’d like to use and the app finds recipes containing that ingredient. My larder – kitchen looking bare? Tap in the ingredients you have and the app gives you recipe suggestions to match them. The ingredients you have will be saved to ‘My Larder’, which will be crossreferenced when you create a shopping list so you don’t double up. Take 5 – recipes using only 5 ingredients – Select the type of meal you’d like to make and you are presented with recipes containing only 5 ingredients of less. Recipe Search – Search 1,100+ recipes to find exactly what you’re looking for. You can search by meal type, or filter by particular ingredients. You can save all the recipes you like to your own recipe folder.
Evaluation – Well thought through app that covers many bases when considering its users; recipes for those short on time, on a diet, on a budget and many more options in terms of shops, ingredients, occasions, etc. UI/UX – Despite being big on functionality they have kept the layout and flow simple, it is altogether beautifully designed and one that users would want to use again and again. They have chosen playful colours and the homepage has buttons located on a stopwatch image which suits the general theme well.
10
Larder Kitchen Organiser App The app has four main functions: 1. Scan - Scan barcodes of food items with phone camera to add or remove it from the larder. 2. View - View food in the fridge, freezer, cupboard or spice rack (or view everything.) Foods are colour coded expiring soonest (red), expiring soon (orange), and expiring last (green) and users can search for recipes using a specific food, for inspiration of how to use it up. 3. Recipes - Search for recipes, which are colour coded according to ingredients that are expiring soonest. The recipes also tell the user how many more ingredients they need to buy to make them. They can add any items they need to their shopping list.
Evaluation – Good app with many features that we already want to use with our app, however only a prototype and limited functionality. Items need to be individually scanned and the expiry dates and locations need to be inputted by the user. UI/UX – Good accessibility and screen flow, app has well-sized icons, however ‘item view’ can be hard to read with background image. Colour coding for food could be improved.
4. Shopping - users can add items directly to the shopping list, or they also have the option to add them when they use an item, or when they are viewing ingredients needed for recipes.
11
SWOT Analysis In our comparative analysis research we found the concept app Larder particularly interesting and to see how it could be improved or refined we analysed its Strengths, Weaknesses, Opportunities and Threats.
Internal Origin
External Origin
Helpful
Harmful
Strengths
Weaknesses
Good UI/UX Nicely designed icons Good branding Simple to use Coherent screen flow
Only a prototype Design not very fresh Involves substantial input from user – not very intuitive Limited functionality Name ‘Larder’ outdated
Opportunities
Threats
Could collaborate with supermarkets Could make experience more complete by actually being able to shop and pay with app Could have eco-friendly element
Currently no competitors to this app Recipe and Supermarket apps could include Larder’s functionality to improve their services
12
Concept Development
- The Concept - How It Would Work - Our Proposal - The Storyboard - Personas and Scenarios
13
The Concept Statement of Intent Our service will work to not only help you waste less food, but also help you to build a solid palate of food you like and are more likely to consume. Keywords Consolidate, Organise, Efficient, Economical, Intuitive, Fresh, Suggestive, Rewarding, Reduce, and Environment.
14
How It Would Work From our research and the SWOT analysis of ‘Larder’, we wanted to find an easier way to upload use-by dates of the food we buy on to our smartphone app, so it can keep track of them for us, and inform us when it is necessary to act on it, thereby preventing food wastage. Barcodes To reduce food waste we envisioned a barcode that carries the use-by date with it. A barcode is an optical machine-readable representation of data relating to the object to which it is attached. The first commercial purpose of barcodes was to automate supermarket checkout systems, a task for which they have become almost universal. The traditional 1-D barcode is a sequence of black and white constant-width bars. A single black bar represents a ‘1’ and its absence (or a white bar) represents a ‘0’. The perceived thickness of the bars is due to the ‘sticking’ together of continuous bars. A barcode thus represents a binary string.
Barcodes such as the UPC have become a ubiquitous element of modern civilization, as evidenced by their enthusiastic adoption by stores around the world; almost every item apart from loose fruit and vegetables sold in grocery stores has a UPC barcode on it. Barcodes help track items allowing fast-selling items to be automatically reordered while slow-selling items can be identified, to prevent inventory build-up. The data can also be used to predict seasonal fluctuations and the effects of merchandising changes. Items can be re-priced on the shelf to reflect both sale prices and price increases. Large supermarket chains such as Sainsbury’s and Tesco as well as other retail stores issue loyalty cards that also use bar codes to uniquely identify consumers, allowing for customized marketing and greater understanding of individual consumer shopping patterns. At the point of sale, shoppers collect points, which get them product discounts and other marketing offers through their account details provided at registration.
15
Our Proposal Looking at the manufacturing process of foods that have expiry dates, they are generally produced in batches, all with the same use-by. Thus we propose that each batch would have a barcode that stores all the usual product data as well as the use-by date. When a loyalty card such as Nectar or Tesco Clubcard is scanned this additional information would be recorded and passed on to the app.
+
REWARD CARDS
+
= 16
1. When using your loyalty card
at checkout, the food items are uploaded to your loyalty card account, which is linked to the app updating it automatically.
2. All the perishable goods you
have purchased are displayed in the Inventory of the app, which will always be running in the background.
3. The app will notify you when an item is close to expiration and should be consumed.
17
Personas & Scenarios Gloria is nineteen years old. She recently started University at the University of East Anglia in Norwich. She has never lived on her own before, but she wants to make the most of her time at University. She decided that even with her busy schedule she wants to lead a healthy lifestyle, stocking up on good nutritious food and has even joined the gym near the train station. Being a student on a limited budget she keeps an eye out for deals when she goes food shopping, she found that multi-buy offers make the cost of each meal much more manageable Scenario On her way back from her workout in the evening she stops by at Sainsbury’s to buy some food. The items left over in store only have a short shelf life but she purchases the multi-buy offer anyway as she needs food for the night and for tomorrow. At the checkout Gloria scans her items and pays for them using her Android smartphone with NFC technology, which has Barclays contactless payment as well as the downloaded ‘usefull’ App. The app is linked to her Nectar card and the points she earned are added on, the use by dates of the perishable items are also automatically added. When she gets home the app suggests based on the dates that she freezes the chicken and consumes the fish that night and maybe saves the beef mince for tomorrow.
Gloria Winters
18
Arthur Higgins is a thirty-nine year old professional photographer living in Stoke-on-Trent with his wife Maggie who is forty-two and teaches music. They have two boys Bruce (8) and Junior (7), both study in the same school. Arthur and Maggie usually go shopping on a Friday night after work, as they both have busy schedules during the week and prefer to relax and socialise during the weekend. Maggie hates wasting food and tries to impart her values and the importance of not wasting food to her children. As a family they are always trying to save money for a deposit on a bigger house and their yearly holidays. They lead an active and healthy lifestyle, and keep themselves involved in outdoor activities as well as trying to eat a lot of fruit and vegetables daily. Scenario Maggie decided to invite some friends over for an impromptu dinner party, she hadn’t decided what to cook though, so she opened up the app to check what she had at home, as well as ideas on recipes. The app notified her that the lamb chops she bought are nearing their expiry date and she could prepare the lamb chops with onion and rosemary. As she wouldn’t have time to pick up the onions she needed for the dish she asked Arthur if he couldn’t pick some up for her. So Arthur goes to the local Tesco and picks up a bag of onions, a bottle of wine and a cheesecake, he pays for them using his chip and pin debit card, and scans his clubcard linked to his app on his iPhone (no NFC). As they have joint loyalty cards and a linked app for their household, the items he bought, the use by dates and points get updated on Maggie’s app too.
The Higgins Family
19
Design Development
- Branding - System Flowchart - Gestures - Wireframes - User Testing - Realising the Concept - Final Product - Post-presentation Additions & Improvements
20
Branding When working on on our brand, we had a lot of difficulty finding the perfect logo for the app. We decided on the name ‘usefull’ relatively early on. The name stems from the term ‘use by’, which of course is found on packaging. The name also implies that the app is useful with its mission being; to help you “use things fully”. We looked at many different symbols for the face of our product. The first suggestion, which led to the name, was the yellow and white combination, which was meant to be like the label found on loaves of bread. We ran with this concept for a while but ultimately chose to move on to something else. From there on we looked at incorporating food imagery as well as barcodes, linking back to the ‘barcode revolution’ which would make the app seamless to use. However, none of these really stood out. Symbols like the barcode were overused and not indicative enough of what the app actually does.
Our next idea incorporated the tradition of laying ones cutlery side by side in the centre of the plate when finished with a meal. We came to the conclusion that this logo was too busy and so would not be visually distinguishable when looked at from a distance.
21
We chose to stay with the cutlery concept, deciding to incorporate it into the actual word ‘usefull’. The knife and fork are shown as an extension of the two ‘l’s. This worked very nicely with our chosen font; ‘AvantGardeDemi’. We really like the combination of green and light grey. It promotes an image which is fresh and confident.
22
System Flowchart Designing the architecture of the app proved challenging as there was so much we wanted to include in order to make this app as productive as possible. We began with the necessary sign in screen. This screen however would rarely be seen, as the default settings of the app would be to have it running in the background at all times. With this in mind, the first screen you would see when you go into the app would be either the ‘inventory’ or ‘planner’ screen, depending on which you use the most (when you turn your device on) or were viewing last (when you go in and out of the application). ‘Inventory’ offers a list of all your food items arranged in categories e.g. dairy, vegetable, meat etc. ‘Planner’ offers a seven day view allowing you to plan meals and see what is expiring on each day. These views would be alternated between through links in the header bar of the app.
In both screens items would be tappable, taking you to the ‘item view’ where you can view nutritional values and access recipes for that specific item. Here you can also delete or add the product to shopping lists. The ‘add product’ function would allow the user to scan items separately. This would prove useful if shops do not support NFC or any of your reward cards. Alternatively, if the item does not have one of our proposed, updated barcodes the information can be input manually. The secondary functions (light blue) would be accessible in the footer bar of the interface.
System Flowchart Sign in
Inventory
Planner
Item view
Add product
Scan
Shopping list
Current shopping list
Saved shopping list
Recipe of the day
Search
Recipes
Users
Add new
My recipes
Search
Notifications
Settings
Reward card(s)
Digital wallet
Manual Entry
Deleted
My shops
Waste Calculator
Freeze
Restore
Mixing bowl
Recipe view
Add to shopping list
Delete
Nutrition
23
Gestures With the iPhone, Apple began a new era for touchscreen devices, they introduced two new event concepts: touches and gestures. Touches are important for keeping track of how many fingers are on the screen, where they are, and what they’re doing. Gestures are important for determining what the user is actually doing when they are interacting with the device at a higher level: pinching, rotating, swiping, double tapping, and so on. Gestures could be seen as the keyboard shortcut for touchscreens, they simplify or shorten steps to completing a particular task, and have revolutionized the way we interact with our devices. While touch events are available on most platforms (the touch event model originally established on iOS has been standardized in the W3C Touch Events specification and is supported by iOS, Android, and BlackBerry), native gesture events are not available everywhere, and the gesture event API in iOS is limited in the sorts of gestures it supports.
We studied gestures on various platforms, and given the large number of features on our app we thought it would be useful to incorporate gestures on the main page, to keep it running smoothly for the user (later it was decided to be used on both the inventory and planner views). The two things that we found from our research on people’s relationship with food and food buying habits was that once they had consumed an item they would either buy it again or not. So once food has been eaten or thrown away the user can simply swipe the item to the left which would add it to the ‘current’ shopping list to buy it again or swipe it to the right which would delete it.
24
Wireframes Whilst designing the interface we had to consider that this is an app that would be used on a daily basis. To avoid the user discarding it at some point it would have to be seamless and not exerting. Buttons would have to be clearly laid out and common tasks should have as few steps as possible. This led to us deciding to include gestures. Sliding an object from your ‘inventory’ or ‘planner’ list to the right deletes it, sliding to the left adds it to your current shopping list. Items can be undeleted in the ‘deleted’ screen by sliding the object to the left and pressing the subsequent ‘restore’ button. The shopping list posed a dilemma; what if you want to add more than just food items i.e. household cleaning products. We decided that the user would be able to add these products by scanning their barcodes or searching for them.
25
e)
Logo
Logo
About
Using the App
About
Using the App
Download the App
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Download the App
Logo
About
Using the App
Download the App
Using the App Using the App
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
Logo
Logo
About
Using the App
About
Using the App
Download the App
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum
Download the App
Logo
About
Using the App
Download the App
Download the App Download the App Scan to download
Scan to download
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum
The main purpose of the website is promotional. We wanted to exhibit the main features of the app in the Aboutfurther Using the App Download the as App to how to use homepage, with explanations, Logo the app, available in ‘using the app’ with video demonstrations. The final page shows the different platforms the app is available on as well as a QR code, allowing visitors to download the app by scanning it.
p Scan to download
26
User Testing To refine our design and the interactivity of the app we carried out user testing by making paper prototypes based on our lo-fi design and asked two groups of volunteers to test out our app, we took the first group through the app and gave the second group no instructions, letting them figure things out for themselves. We wrote down all the comments that were made during testing, and also areas that we felt could be improved based purely on user interaction of the test subjects.
27
User-Testing Feedback Positive
Critical
- Intuitive
- Some of the buttons are too small
- Clear screen flow and layout
- The top and bottom navigational
- Distinctive icon design - Well thought through features and options that cover a range of scenarios - Good use of gestures in the inventory and planner
bars need more distinction from the main scrollable body of the app - The difference between the planner and inventory is not completely clear with everyone. - Interactive elements such as some of the buttons aren’t always clear, such as clickable food items - The recipe view is cluttered and needs further consideration
28
Realising the Concept To build our app we employed common design programs from the Adobe suite, such as Illustrator and Photoshop, to produce menus, buttons etc. When it came to actually producing a working prototype we used a website called Proto.io. The site allows you make hi-fidelity working prototypes with linked buttons and gestures that can be experienced properly on devices such as tablets and smartphones by downloading the sites app to the desired device. This tool proved invaluable; allowing us to build, test and improve efficiently. To build our website we used Dreamweaver as well as the above mentioned Adobe programs.
29
Final Product We wanted the interface to be clear and fresh looking. Something you would not mind using everyday. This meant not using overly saturated or dark colours. We took inspiration from the Windows Phone OS as we felt that the default iOS style, while functional, had become stale.
30
Sign in and Notifications When you first download and open the app you will be greeted with the ‘Sign in’ screen. If you do not yet have a usefull account, you can tap ‘sign up’, which will take you through the registration process. When items are close to expiration the app will inform you via notifications. You can choose to dismiss the alert or tap ‘View details’ to go into the app.
31
Inventory, Planner & Item View The ‘Inventory’ of the app has all the food you have at home listed according to food categories. Items close to their use by date have colour-coded icons, red represents food expiring today and amber signifies tomorrow. In the ‘Planner’ you can organise when and what you want to eat, it is arranged day-by-day, allowing you to see what is expiring on each day. If you select an item in the ‘Inventory’ or ‘Planner’ you get more information about it such as nutritional facts and recipes. Here you can also add the item to your current shopping list once it has been consumed to buy it again, or delete it. Holding down on the shopping list button you can choose to add to one of your saved shopping lists. Deleting an item or adding to your current shopping list can be done directly in the inventory or planner simply by using gestures. Swiping an item to the left adds it to your current shopping list, swiping to the right deletes it.
32
Shopping List, Add (barcode scanner) and Deleted In the ‘Shopping List’ screen you can store all your lists, these can include products other than food i.e. household cleaning goods, cosmetics etc. The current list is where you will find items which have been swiped to the the left from the ‘Inventory’ or ‘Planner’. If you have bought something at a store which does not support your loyalty/reward card or NFC contactless payment, you can scan the product in separately using the app. Alternatively, if the item does not carry one of the new updated barcodes, information can be input manually. Anything that you have deleted from the ‘Inventory’ or ‘Planner’ can be un-deleted in the ‘Deleted’ section of the app. Swipe the product to the left and tap the subsequent ‘restore’ button.
33
Recipes Another important feature of the app is the ‘Recipes’ section. Features like ‘Recipe of the Day’ encourage you to try new things. You can also search through the recipe database for more ideas. In ‘My Recipes’ you will find all your saved recipes, whether they be from the app’s database or treasured family secrets.
34
Planned Meals Meals can be planned and display in the ‘Planner’ view. When in the ‘Recipe’ view you can check the ingredients and add the ones you don’t have to your shopping list. Below the list of ingredients you will find the cooking instructions. Here you can also access the Nutritional value of the meal.
35
Mixing Bowl The ‘Mixing Bowl’ function allows you to select multiple items from your ‘Inventory’ and suggests what you can cook with these selected ingredients.
36
Settings In ‘Settings’ you can access user accounts, notification settings, store reward/loyalty cards, digital wallet for NFC contactless payment and keep track of your shopping. The ‘Waste Calculator’ shows you graphically what you’re wasting, how much it is costing you and offers tips on how you can waste less in future.
37
The Website The website continues with the theme of the app. We wanted it to exude freshness and display enough information without overwhelming prospective users. We also included a ‘contact us’ button, present on each page, should users run into any difficulties with the app.
38
Using the App
39
Download
40
Post-presentation Additions & Improvements Freeze Button Although we designed this function a long time ago we only got round to building it after the final presentation. The freeze button, when activated, will update the product’s use by date depending on how long the process of freezing will extend the life span of that certain item of food. During our research we found that the expiration dates of certain products could be pushed back considerably through freezing. Therefore, we could not afford to leave this feature out.
Add Button (barcode scanner) It was made apparrent to us that the original ‘add’ button, which consisted of a barcode, was a remnant of one of our previous logo concepts. It was also not clear enough as to its function; to scan and add products separately to the inventory when a shop does not support your loyalty card scheme or NFC payment. The plus sign, which we originally used to show the button in our lofi wireframes, made more sense. We decided to keep a bit of the barcode concept in the background of the button to help it stand appart from the grey of the header bar.
41
Removing Planned Meals The ways in which you can remove a planned meal are the same as removing a separate item. Deleting the planned meal will remove it from the planner view, as well as removing the ingredients linked to that particular recipe from your inventory. However, we realised there was a problem. What if you have changed your mind and want to remove a planned meal without the ingredients being deleted as well? We came up with a solution. If you tap delete whilst in the recipe view or swipe a planned meal off the screen whilst in planner view, a notificaion will pop up asking you to confirm whether the meal has been cooked or if you simply want to delete it.
42
Evaluation
- Conclusion - Taking it Further
43
Conclusion As indicated at the start of this document, food waste is a serious problem, in fact almost half of the worlds food is wasted. Our intention was to combat this by producing an app which would keep track of all your food items; notifying you, if necessary, of a product nearing its expiration date. To avoid the user having to input information manually and quickly growing tired with the app we came up with a solution: a barcode revolution or evolution so to speak. Rather than just carrying information on what that product is, our proposed barcode would also carry the items batch number and subsequently its use-by date. All this information would then be uploaded to the app at checkout, through the use of reward/loyalty cards, registered to the usefull account.
We were able to incorporate all the functionality that we wanted in our app; including features such as the mixing bowl which helps make use of food items that the user might need recipe ideas for and the waste calculator that provides statistical data and gives the user an incentive to waste less food.
We tried to incorporate as much functionality as possible so the user would not have to constantly switch applications to add items to shopping lists or check for recipes. We investigated how other similar apps work and the functionality they incorporate. With this knowledge we were able to develop some thing that went further. User testing was particularly informative as it raised issues that we had not yet thought of, as well as informing us of different ways that we could structure the app. It helped us better resolve the ‘Inventory’ and ‘Planner’ view. The ‘Inventory’ is now clearer, categorised into food groups and the ‘Planner’ is designed to serve the purpose of keeping the user aware of their food expiry dates and to plan their meals accordingly.
We are extremely pleased with the final design outcome and despite the initial difficulties we faced with branding and the appropriate colour palette, it came together nicely in the end. We strongly believe that we have produced an app which would be of great use to consumers, especially during these financially stressful times. Technology has come so far and it should be taken advantage of and built upon. Busy lives and faster living are becoming the norm in these modern times. Our app takes care of a simple thing, food, so you have more time for the important things in life.
Building and testing the app on proto.io on the iPhone made us realise that although the icons and buttons appeared satisfactory on Illustrator they needed minor improvements to enhance the user experience. We made some necessary changes to the recipe view that significantly improved the page’s layout.
Taking it Further If we were to develop this project further in order to make it a viable contender to other productivity apps, we would concentrate on a few key areas: •
• •
We would put more thought into how push notifications would appear for different users and how information would be displayed in vari ous mobile platforms’ notification centres. We would consider storage options, use-by dates and reheating of cooked meals; and how it could be implemented in the app. We would improve the UI & UX of the app where needed.
44