-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy paththesis.html
More file actions
381 lines (239 loc) · 16.8 KB
/
thesis.html
File metadata and controls
381 lines (239 loc) · 16.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
</title>
<link rel="icon"
type="image/png"
href="images/icon.png">
<link href="http://cdn.rawgit.com/noelboss/featherlight/1.3.4/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<link href="http://cdn.rawgit.com/noelboss/featherlight/1.3.4/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://use.typekit.net/cpx7tuy.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body>
<header>
<a href="index.html"><img src="images/logo.png"></a>
<nav>
<a href="index.html#hello">Hello</a>
<a href="index.html#worknav">My Work</a>
<a href="about.html">About Me</a>
<a href="index.html#contact">Contact</a>
</nav>
</header>
<section class="project-hero hero-8">
<section class="container tint-shelflife">
<section class="row">
<div class="grid-6">
<img src="images/sl-headerlogo.png">
<P style="text-align: left">Shelf Life is an app and physical product that work together to keep track of the food items in your kitchen.</P>
</div><div class="grid-6">
<img src="images/sl-mockup.png" id="fix">
</div>
</section>
</section>
</section>
<section class="case-study">
<section class="row">
<!--
<div class="grid-12">
Summer 2015 | Skills Utilized: Research, Prototyping, Wireframing
</div>
-->
<section class="row">
<section class="work-row">
<div class="grid-8 vert-top">
<h1>How might technology be utilized to encourage consumers to waste less food in their households? </h1>
<p>
This is the question that began my senior thesis. It led to a year long journey into understanding consumer habits, rapid prototyping and iteration, experimenting, many sleepless nights, debugging, sketching, and animating in preparation for my senior show. Shelf Life is the product that came out of this process. A mix of my passions for design, development, and physical computing, it was my capstone project for my degree in Interactive Multimedia.
</p>
</div><!-------
---><div class="grid-4 info vert-top" style="vertical-align: top;">
<h2>Time Frame</h2>
Fall 2015 - Spring 2016
<h2>Skills Utilized</h2>
User Research<br /> Secondary Research <br /> Affinity Mapping <br /> Rapid Prototyping<br/> User Testing <br /> Wireframing <br /> User Interface Design <br /> Motion Graphics <br /> Programming in Arduino and Javascript
</div> </section></section>
</section></section>
<hr />
<section class="highlight grey">
<h2>Consumers have a hard time keeping track of the food in their kitchens. </h2>
<p>This was one of my key findings and one of the many reasons I found explaining how food in the home went to waste. Either food items were forgotten about or expiration deadlines slipped by before ingredients could be used. </p>
<p>Existing apps and technology had a shared flaw that led to decreased usage and lack of accuracy: manual entry. Users would have to manually type in the names of food products they had purchased, and remember to remove them when they were finished. I found that this extra effort was not worthwhile for most users and the applications would quickly be abandoned.
I focused on alleviating this manual burden and thought about how quickly a cashier scans groceries in a supermarket. </p>
<center> <img src="images/hand-02.png" width="70%"></center>
<h3> What if devices that could scan our food just like in the supermarket existed in the home, in convenient places so that products could be scanned in and out of our kitchen “stocks” without any additional effort? </h3> <h3> This is the concept behind Shelf Life.</h3>
</section>
<section class="highlight blue">
<p> <img src="images/sl-headerlogo.png" width="100%"></p>
<p> An app and physical product that work together seamlessly to keep track of the food in your kitchen.
</p>
</section>
<section class="case-study">
<section class="row smol">
<center>
<div class="grid-6">
<img src="images/sl-graphic-09.png">
<p> Little devices called “Shelfies” scan your food as you put away and take things out of your kitchen storage</p>
</div><div class="grid-6">
<img src="images/sl-graphic-10.png">
<p> Stick Shelfies in your cabinets, shelves, and fridge and let them do their magic as food items pass by.</p>
</div>
</center>
</section>
</section>
<section class="highlight grey" width="80%">
<section class="case-study">
<section class="row">
<div class="grid-6">
<h3>Keep Inventory</h3>
<P> With Shelf Life, you will always know what you've got in your kitchen. The item list is updated in real time, and shares information such as expiration date and how long you've got to use the item. </P>
</div><div class="grid-6">
<video autoplay loop poster="images/additemstill.jpg" class="video" width="100%">
<source src="images/additem1.mp4" type="video/mp4">
<source src="images/additem.webm" type="video/webm">
</video>
</div>
</section>
<section class="row">
<div class="grid-6">
<video autoplay loop poster="images/recipestill.jpg" class="video" width="100%">
<source src="images/genrecipe.mp4" type="video/mp4">
<source src="images/genrecipe.webm" type="video/webm">
</video>
</div><div class="grid-6">
<h3>Generate Recipes</h3>
<P> Select different ingredients from your item list to generate recipes, and find a use for leftovers or food about to go bad. Shelf Life will let you know what else you'll need. </P>
</div>
</section>
<section class="row">
<div class="grid-4"><h3>Filter</h3>
<P> Filter to find the exact items you need quickly. </P>
</div><div class="grid-8">
<img src="images/sl-filter-01.png">
</div>
</section>
<p style="text-align: center">Check out the full interaction video on <a href="https://vimeo.com/166644045">Vimeo</a></p>
</section>
</section>
<section class="case-study">
<section class="row">
<div class="grid-6">
<video autoplay loop muted controls poster="images/recipestill.jpg" class="video" width="100%" >
<source src="images/prototypevideo.mp4" type="video/mp4">
<source src="images/genrecipe.webm" type="video/webm">
</video>
</div><div class="grid-6">
<h2 style="margin: 0px;"> The Functional Prototype</h2>
<p> Shelf Life is possible by the use of RFID tags on food items. During my early research I became really interested in the tags. There are many who believe RFID will replace barcodes in the future, and although there have been many explorations as to how this will change the shopping experience, Shelf Life explores how RFID tagged products can continue to be useful after they leave the store. </p> <p> As part of my thesis exhibit I built a functional prototype of how Shelf Life would work, built with Arduino, Firebase DB, Javascript, and HTML/CSS</p>
</div>
</section>
<h2 style="margin: 0px;"> Wireframes and Other Materials</h2>
<section class="row gallery" data-featherlight-gallery
data-featherlight-filter="a">
<div class="grid-3">
<a href="images/5.png"><img src="images/5.png" width="100%"></a>
</div><!---
---><div class="grid-3">
<a href="images/6.png"><img src="images/6.png" width="100%"></a>
</div><!---
---><div class="grid-3">
<a href="images/7.png"><img src="images/7.png" width="100%"></a>
</div><!---
---><div class="grid-3">
<a href="images/1.png"><img src="images/1.png" width="100%"></a>
</div><!---
---><div class="grid-3">
<a href="images/2.png"><img src="images/2.png" width="100%"></a>
</div><!---
---><div class="grid-3">
<a href="images/3.png"><img src="images/3.png" width="100%"></a>
</div><!---
---><div class="grid-3">
<a href="images/4.png"><img src="images/4.png" width="100%"></a>
</div><!---
---><div class="grid-3">
<a href="images/8-02.png"><img src="images/8-02.png" width="100%"></a>
</div>
</section>
<h1 class="dropdown" id="researchbtn">Research Phase</h1>
<section id="research">
<section class="row">
<div class="grid-7 vert-top">
<h1>The Target Audience</h1>
<p>
The first step of the process was to figure out a target audience for my solution. Food waste in America happens at a variety of levels, spanning farming, post-harvest, packing, processing, transporation and distribution, retail, food service, and households. I decided to develop a solution aimed at consumers and their households. This was the group I would be able to reach most easily, and as food ultimately ends up on the plates of consumers, sparking change here has the potential for impact continuing up the "food chain" as a result.
</p>
</div><div class="grid-5 vert-top right">
<a href="#" data-featherlight="images/foodsupplychain.jpg"> <img src="images/foodsupplychain.jpg" width="100%"></a><br /><br /><i><a href="https://medium.com/homeland-security/americas-fragile-food-supply-chain-part-iii-ccc3427e9c16#.g9wgaxo8t">Source</a></i>
</div><!-------
---></section>
<section class="row">
<!-------
---><div class="grid-6">
<a href="#" data-featherlight="images/motivations.png"> <img src="images/motivations.png" width="100%"></a><br /><br /><i><a href="http://www.plosone.org/article/fetchObject.action?uri=info:doi/10.1371/journal.pone.0127881&representation=PDF">Source</a></i>
</div><div class="grid-6">
<h1>Secondary Research</h1>
<p>
According to <a href="http://www.amazon.com/American-Wasteland-America-Throws-Nearly/dp/0738215287">American Wasteland by Jonathan Bloom</a>, consumers end up wasting an average of 25% of the food they buy. And According to <a href="http://www.plosone.org/article/fetchObject.action?uri=info:doi/10.1371/journal.pone.0127881&representation=PDF">Wasted Food: U.S. Consumers' Reported Awareness, Attitudes, and Behaviors</a>, a report published by Johns Hopkins in spring of 2015, consumers self-report a relatively high awareness of and interest in preventing food waste, but their behaviors don't align with what they say. American consumers typically over report awareness and understanding of how to reduce food waste and under report their own waste. In terms of motivation to reduce food waste, saving money was at the top of the list, while environmental concerns ranked the lowest. From this research I learned that <em>the solution would have to focus on cost saving factors rather than environmental motivation or "guilt" factors, and that the solution should encourage education on how to reduce without being overimposing.</em>
</p>
</div></section>
<section class="row">
<!-------
---><div class="grid-6 vert-top">
<h1>Primary Research</h1>
<p>
Next I went out and talked to some consumers. The interviewees were split into four groups: cost conscious families, environmentally conscious families, individuals in shared living situations, and households without kids. Talking to consumers confirmed some of the secondary research related to financials: saving money is a huge priority and was always valued over environmental consciousness. For example, multiple participants said they would often buy portions sizes that ended up being too big to finish because it ostensibly provided more value. Another commonly reported reason for wasting food was because it was forgotten about and spoiled before it could be used. Households with families and shared living spaces were especially prone to this issue because of their busy lifestyles.
</p>
</div><div class="grid-6 vert-top right">
<a href="#" data-featherlight="images/food.jpg"> <img src="images/food.jpg" width="100%"></a><br /><br />
</div></section>
<section class="row">
<!-------
---><div class="grid-6">
<a href="#" data-featherlight="images/insights2.jpg"> <img src="images/insights2.jpg" width="100%"></a><br /><br /><i>Affinity Mapping</i>
</div><!---
---><div class="grid-6">
<h1>Insights </h1>
<p> After talking to a number of different families and homeowners, I went back through my research notes and organized by observations, pain points, inferences, and opportunities. Then I mapped these notes by affinity, along the way uncovering several underlying themes and insights that were common amongst those interviewed. <em>Even the most environmetally conscious people waste, and people rarely feel personal responsibility or guilt for wasted or spoiled food, it just happens. Nearly ever participant admitted they had trouble keeping track of what food they have and when to use it by. Technology was not a first choice because often it was obtrusive and tedious to upkeep. And most participants were only partially knowledgeable on steps they could take to prevent food waste.</em>
</p>
</div></section>
</section>
<hr/>
<section class="row bottom-nav">
<div class="grid-6">
<a href="ashoka.html"> < Involvement As a Service </a>
</div><!--
--><div class="grid-6 right">
<a href="index.html"> Back Home > </a>
</div>
</section>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdn.rawgit.com/noelboss/featherlight/1.3.4/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/featherlight.gallery.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
$('a.gallery').featherlightGallery({
previousIcon: '◀',
nextIcon: '▶'
});
});
var active = false;;
$('#researchbtn').click(function() {
$(this).toggleClass('dropdown');
$(this).toggleClass('dropdownActive');
$("#research").slideToggle('slow');
});
$('#top').on('click', function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
</script>
</body>
</html>