-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
993 lines (950 loc) · 68.6 KB
/
index.html
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
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lillian Liu</title>
<link href='//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/foundation.min.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link href='//fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='//rawgit.com/daneden/animate.css/master/animate.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/small.css" />
</head>
<body>
<div id="topbar">
<span id="name">
<a id="frame-home" class="link">LILLIAN LIU</a>
</span>
<span id="topnav">
<a id="frame-about" class="link">ABOUT</a>
·
<a id="frame-work" class="link">SELECTED WORKS</a>
·
<a id="tumblr-sklog" class="link" href="http://lillinoodles.tumblr.com/" target="_blank">SKETCH LOG</a>
·
<a id="frame-resume" class="link">RESUME</a>
</span>
</div>
<div id="main-container">
<div id="frame-home" class="frame" shunt-frame>
<div class="frame-content padded">
<h1>Design and Illustration</h1>
<p>
I aim to incite emotional responses through my work.
Emotional connection is human and universal.
</p>
<p>
Take a look at <a id="my-work" class="in-text link">my work</a>, read
about <a id="my-journey-in-design" class="in-text link">my journey in design</a>, or
catch me on
<a href="https://twitter.com/lillinoodles" target="_blank" class="in-text link"><i class="fa fa-twitter"></i></a>
/
<a href="https://www.linkedin.com/in/lillian-liu-6b386467" target="_blank" class="in-text link"><i class="fa fa-linkedin"></i></a>
/
<a href="https://dribbble.com/lillianliu" target="_blank" class="in-text link"><i class="fa fa-dribbble"></i></a>
/
<a href="https://instagram.com/lillinoodles/" target="_blank" class="in-text link"><i class="fa fa-instagram"></i></a>.
<br/>
Want to get in touch? <a class="in-text link" href="mailto:lilliu@ucdavis.edu">Shoot me a <i class="fa fa-envelope"></i></a>!
</p>
<div id="values">
<div id="storytelling" class="value">
<img src="assets/img/values/storytelling.png"/>
<h5>Storytelling</h5>
<p>
I value taking insights from stories and presenting them in new light. By creating narratives, I can use visual imagery that people will connect to and relate with on a deeper level.
</p>
</div>
<div id="empathy" class="value">
<img src="assets/img/values/empathy.png"/>
<h5>Empathy</h5>
<p>
Empathy is key in understanding how to design for others, especially with the expansive mix of different cultures, people, and environments that we must consider. It helps us appreicate and respect differences.
</p>
</div>
<div id="connection" class="value">
<img src="assets/img/values/bridge.png"/>
<h5>Connection</h5>
<p>
I appreciate the past. I strongly believe in embracing the lessons that we learn into bridging the past and the future — bringing the things that really <i>work</i> into innovating for decisions ahead.
</p>
</div>
<div id="team-building" class="value">
<img src="assets/img/values/team.png"/>
<h5>Team Building</h5>
<p>
Most importantly, good relationships are what ties it all together! It's not only about the quality of work, but also about the quality of kinship.
</p>
</div>
</div>
</div>
</div>
<div id="frame-resume" class="frame" style="background-color: #D1D1D1;" shunt-frame>
<iframe style="height: 100%; width: 100%;" src="http://docs.google.com/gview?url=http://lillianliu.space/img/LillianL-resume.pdf&embedded=true" frameborder="0"></iframe>
</div>
<div id="frame-about" class="frame" shunt-frame>
<div id="about-photo"></div>
<div class="frame-content padded centered about-main">
<h2>Hello, My name is Lillian.</h2>
<p>
I’m a multidisciplinary designer specializing in
visual / interaction design and illustration. Born
in Taiwan and raised in the midwest, I’ve spent the last
few years of my life as a Design and Communications
student at the University of California, Davis.
</p>
<h4>See my journey in design by year below!</h4>
</div>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
<div id="frame-about-page-1" class="frame" shunt-frame>
<div class="frame-content padded v-centered about-content">
<h1 class="year">
<img class="year" src="assets/img/about/davis.png" />
2016
</h1>
<h2>The final year of university.</h2>
<ul>
<li>I sold my soul to <a class="in-text link" target="_blank" href="https://facebook.com/pixelofdavis">PIXEL, Graphic Design Club</a>.</li>
</ul>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="left" class="hint glyph left clickable"><i class="fa fa-2x fa-angle-left"></i></span>
<span id="right" class="hint glyph right clickable"><i class="fa fa-2x fa-angle-right"></i></span>
</div>
<div id="frame-about-page-2" class="frame" shunt-frame>
<div class="frame-content padded v-centered about-content">
<h1 class="year">
<img class="year" src="assets/img/about/plane.png" />
2015
</h1>
<h2>I lived out of a suitcase for six months.</h2>
<ul>
<li>Completed an internship <a class="in-text link" target="_blank" href="https://www.viget.com/articles/5-things-i-learned-from-the-viget-design-team">with Viget</a> in Boulder, Colorado for 3 months where I climbed mountains literally and figuratively.</li>
<li><a class="in-text link" target="_blank" href="https://www.youtube.com/watch?v=SFB1_OIjpow">Studied abroad and worked in London for 3 months.</a></li>
<li>Attended the <a class="in-text link" target="_blank" href="http://www.whatdesigncando.com/">What Design Can Do</a> Conference in Amsterdam.</li>
</ul>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="left" class="hint glyph left clickable"><i class="fa fa-2x fa-angle-left"></i></span>
<span id="right" class="hint glyph right clickable"><i class="fa fa-2x fa-angle-right"></i></span>
</div>
<div id="frame-about-page-3" class="frame" shunt-frame>
<div class="frame-content padded v-centered about-content">
<h1 class="year">
<img class="year" src="assets/img/about/job.png" />
2014
</h1>
<h2>My first design job.</h2>
<ul>
<li>Started working at <a class="in-text link" target="_blank" href="https://creativemedia.ucdavis.edu/">Creative Media</a> with a wonderful team / beautiful friends while working a second job doing textbook layout.</li>
<li>Began the <a class="in-text link" target="_blank" href="https://medium.com/@lillianliu/my-reflection-on-a-year-of-extroversion-intro-b2d68dad26ae#.mndbbo1gm">"year of extroversion"</a></li>
</ul>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="left" class="hint glyph left clickable"><i class="fa fa-2x fa-angle-left"></i></span>
<span id="right" class="hint clickable glyph right"><i class="fa fa-2x fa-angle-right"></i></span>
</div>
<div id="frame-about-page-4" class="frame" shunt-frame>
<div class="frame-content padded v-centered about-content">
<h1 class="year">
<img class="year" src="assets/img/about/davis.png" />
2012
</h1>
<h2>First year of university. Confused and lost.</h2>
<ul>
<li>"So, what exactly is this Adobe Illustrator thing again?"</li>
</ul>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="left" class="hint glyph left clickable"><i class="fa fa-2x fa-angle-left"></i></span>
<span id="right" class="hint glyph right clickable"><i class="fa fa-2x fa-angle-right"></i></span>
</div>
<div id="frame-about-page-5" class="frame" shunt-frame>
<div class="frame-content padded v-centered about-content">
<h1 class="year">
<img class="year" src="assets/img/about/mountains.png" />
2011
</h1>
<h2>Trained atop a mountain with a skilled master.</h2>
<ul>
<li>I drove up a mountain and painted with five year olds and a somewhat grungy petting zoo every Sunday to hone my skills.</li>
</ul>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="left" class="hint glyph left clickable"><i class="fa fa-2x fa-angle-left"></i></span>
<span id="right" class="hint glyph right clickable"><i class="fa fa-2x fa-angle-right"></i></span>
</div>
<div id="frame-about-page-6" class="frame" shunt-frame>
<div class="frame-content padded v-centered about-content">
<h1 class="year">
<img class="year" src="assets/img/about/draw.png" />
2005
</h1>
<h2>My first "real" design project at age 10.</h2>
<ul>
<li>I attempted drawing a fountain for a water conservation contest (California was already strugglin') and on my fifth try, I broke down crying to my mother in utter frustration.</li>
</ul>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="left" class="hint glyph left clickable"><i class="fa fa-2x fa-angle-left"></i></span>
<span id="right" class="hint glyph right clickable"><i class="fa fa-2x fa-angle-right"></i></span>
</div>
<div id="frame-work" class="frame" shunt-frame>
<div class="frame-content">
<div id="showcase">
<div id="link-frame-work-paparazzi-page-1" class="item clickable">
<img src="assets/img/work/paparazzi/thumb.png"/>
<h2>Paparazzi</h2>
<span>Mobile Web App</span><br/>
<span>Visual Design</span>
</div>
<div id="link-frame-work-aimhigh-page-1" class="item clickable">
<img src="assets/img/work/aimhigh/thumb.jpg"/>
<h2>AimHigh</h2>
<span>Web App</span><br/>
<span>Research · Needfinding · Prototyping · Visual Design</span>
</div>
<div id="link-frame-work-expand-page-1" class="item clickable">
<img src="assets/img/work/expand/thumb.png"/>
<h2>Expand</h2>
<span>Illustration</span><br/>
<span>Exhibition</span>
</div>
<div id="link-frame-work-echo-page-1" class="item clickable">
<img src="assets/img/work/echo/thumb.png"/>
<h2>ECHO</h2>
<span>Mobile App</span><br/>
<span>Prototyping</span>
</div>
<div id="link-frame-work-portraits-page-1" class="item clickable">
<img src="assets/img/work/portraits/thumb.png"/>
<h2>Portrait Project</h2>
<span>Illustration</span><br/>
<span>Digital</span>
</div>
<div id="link-frame-work-vitacore-page-1" class="item clickable">
<img src="assets/img/work/vitacore/thumb.png"/>
<h2>Vitacore</h2>
<span>Packaging</span><br/>
<span>Research · Prototyping</span>
</div>
</div>
</div>
</div>
<div id="frame-work-paparazzi-page-1" class="frame work-page-1" shunt-frame>
<div class="frame-content padded">
<h1>Paparazzi</h1>
<br/>
<h3>Where Fame is Your Downfall</h3>
</div>
<span id="left" class="hint glyph left clickable"><i class="fa fa-2x fa-angle-left"></i></span>
<span id="right" class="hint glyph right clickable"><i class="fa fa-2x fa-angle-right"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
<div id="frame-work-paparazzi-page-2" class="frame" shunt-frame>
<div class="frame-content padded">
<div class="row expanded">
<div class="column small-12 medium-6">
<blockquote>
Paparazzi is a mobile web app that facilitates the game Assassins, a game commonly played in large college organizations.
</blockquote>
</div>
<div class="column small-12 medium-6">
<p>
Similar to Assassins, each player is assigned a target. However, the randomization of targets is taken care of by the app and the organizer is allowed to participate without the stress or burden of administration. The violent connotation of the name Assassins is also replaced by the modern and more friendly direction of paparazzi, who kill by shooting targets with camera phones.
</p>
<p>
I led the visual design for this project, but I worked with a fantastic team for UX design, development, and business strategy - Thank you Haley Dobart, Lizzy Perold, Athif Wulandana, Ian Pierson, and Connor Lay! The live version can be played <a href="https://playpaparazzi.com/" target="_blank" class="in-text link">here</a>.
</p>
</div>
</div>
<div class="row expanded">
<img style="max-width: 100%; display: block; margin: auto;" src="assets/img/work/paparazzi/icons.png"/>
</div>
<div class="row expanded">
<div class="column small-12 medium-4">
<img style="width: 100%; height: auto;" src="assets/img/work/paparazzi/RDJ.png"/>
</div>
<div class="column small-12 medium-4">
<img style="width: 100%; height: auto;" src="assets/img/work/paparazzi/beyonce.png"/>
</div>
<div class="column small-12 medium-4">
<img style="width: 100%; height: auto;" src="assets/img/work/paparazzi/monroe.png"/>
</div>
</div>
<div class="row expanded">
<img style="max-width: 100%; display: block; margin: auto;" src="assets/img/work/paparazzi/medals.png"/>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
</div>
<div id="frame-work-paparazzi-page-3" class="frame" shunt-frame>
<div class="frame-content padded">
<div class="row expanded">
<h1>Style Development</h1>
<h5>The style guide</h5>
<p>
I attempted different styles, with the final direction inspired by 50s magazine covers characteristically styled with black-and-white photos against bright primary colors and bold lines. We eventually decided to go with a color scheme that was more muted, bringing out the bold color in the illustrative icons.
</p>
</div>
<div class="row expanded">
<div class="column small-12 medium-4">
<h5 style="display: inline;">An Earlier Rendition</h5>
<img class="lookiehere" style="height: auto; max-width: 100%;" src="assets/img/work/paparazzi/oldStyle.png"/>
</div>
<div class="column small-12 medium-8">
<h5 style="display: inline;">The Final</h5>
<img class="lookiehere" style="height: auto; max-width: 100%;" src="assets/img/work/paparazzi/finalStyle.png"/>
</div>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
</div>
<div id="frame-work-paparazzi-page-4" class="frame" shunt-frame>
<div class="frame-content padded">
<div class="row expanded small-up-1 medium-up-2 large-up-4">
<h1>Selected Screens</h1>
<div class="column">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/paparazzi/creategamecloseup.png"/>
<h5>Create game</h5>
<p>
When creating the game, the administrator sets the time frame that the game will last and also specifies safe zones which can later be seen by all players. The times set by the creator will also determine the count down timer that appears next in the invite friends page.
</p>
</div>
<div class="column">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/paparazzi/invitefriends.png"/>
<h5>Invite friends</h5>
<p>
Before other players accept the administrator’s invite through email and connect their Facebook accounts (and their Facebook photos), the invited players will have placeholder portraits of celebrities. The administrator can force start the game at any time.
</p>
</div>
<div class="column">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/paparazzi/playertab.png"/>
<h5>In-game Mode Player Tab</h5>
<p>
During In-game mode there is the player tab, which allows players to view their current target as well as upload a photo when he or she commits a capture. After the photo is uploaded, the player is given a new target until all players are captured and there is a remaining winner. </p>
</p>
</div>
<div class="column">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/paparazzi/scandaltab.png"/>
<h5>In-game Mode Scandal Tab</h5>
<p>
The photos of the captured ‘celebrities’ then appear on a Scandals newsfeed with randomized scandals made up by the awesome creators (us). The newest scandals are tagged with red markers.
</p>
</div>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
</div>
<div id="frame-work-paparazzi-page-5" class="frame" shunt-frame>
<div class="frame-content padded">
<h1>Thank You to the Paparazzi Crew!</h1>
<div class="row expanded small-up-1 medium-up-3">
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/paparazzi/ian_paparazzithankyou.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/paparazzi/Athif_paparazzithankyou.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/paparazzi/Becky_paparazzithankyou.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/paparazzi/Libby_paparazzithankyou.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/paparazzi/jeremy_paparazzithankyou.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/paparazzi/Conner_paparazzithankyou.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/paparazzi/Haley_paparazzithankyou.jpg"/>
</div>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
</div>
</div>
<div id="frame-work-aimhigh-page-1" class="frame work-page-1" shunt-frame>
<div class="frame-content padded">
<h1>AimHigh</h1>
<br/>
<h3>Don't Be Afraid to Set Your Goals High</h3>
</div>
<span id="left" class="hint glyph left clickable"><i class="fa fa-2x fa-angle-left"></i></span>
<span id="right" class="hint glyph right clickable"><i class="fa fa-2x fa-angle-right"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
<div id="frame-work-aimhigh-page-2" class="frame" shunt-frame>
<div class="frame-content padded">
<div class="row expanded">
<div class="column small-12 medium-4">
<blockquote>
AimHigh is a tool that will help students identify and keep track of their academic and personal goals.
</blockquote>
<p>
It records progress though a one simple repetitive action that only requires one submission at the end of the day. Eventually, it will show progress as time elapses throughout a quarter. The goals are separated into two categories, academic and personal.
</p>
<p>
All goals are achievable and there is no goal that is too high to reach. The first step is to set them.
</p>
</div>
<div class="column small-12 medium-8">
<iframe style="width: 100%; height: 400;" src="https://www.youtube.com/embed/O2uJPqJVnvg?rel=0&showinfo=0" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
</div>
<div id="frame-work-aimhigh-page-3" class="frame" shunt-frame>
<div class="frame-content padded">
<div class="row expanded">
<h1>Style Development</h1>
<img class="lookiehere" style="max-width: 100%; display: block; margin: auto;" src="assets/img/work/aimhigh/styleguide.jpg"/>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
</div>
<div id="frame-work-aimhigh-page-4" class="frame" style="background-color: #C6E5E8;" shunt-frame>
<div class="frame-content padded">
<div class="row expanded">
<div class="column small-6">
<img class="lookiehere" style="padding: 10px; height: auto; width: 100%;" src="assets/img/work/aimhigh/background.jpg"/>
<img class="lookiehere" style="padding: 10px; height: auto; width: 100%;" src="assets/img/work/aimhigh/summary.png"/>
</div>
<div class="column small-6">
<img class="lookiehere" style="padding: 10px; height: auto; width: 100%;" src="assets/img/work/aimhigh/stats.png"/>
<img class="lookiehere" style="padding: 10px; height: auto; width: 100%;" src="assets/img/work/aimhigh/hello.png"/>
<img class="lookiehere" style="padding: 10px; height: auto; width: 100%;" src="assets/img/work/aimhigh/setGoal.png"/>
</div>
</div>
<div class="row expanded">
<div class="column small-12 medium-6">
<p style="color: #3E4E97;">
The story behind AimHigh is a personal one. At the beginning of every academic year, I've holed myself up in a coffee shop to try and visualize what an ideal year would look like. What were my priorities going to be? What did I want to accomplish? The idea was to pinpoint in writing exactly what I wanted as thoroughly as possible. The annual Evernote document covered anything from time management, to health, to friendships and relationships.
</p>
</div>
<div class="column small-12 medium-6">
<blockquote style="color: #3E4E97;">
While I did understand my goals, they were largely based on feelings and were not quantifiable.
</blockquote>
<p style="color: #3E4E97;">
I've been my own test subject for three years and It's helped me grow. I set out to make this an easier process not only for myself, but also as a way to share it with others.
</p>
</div>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
</div>
<div id="frame-work-aimhigh-page-5" class="frame" shunt-frame>
<div class="frame-content padded">
<h1>The Process</h1>
<div class="row expanded">
<div class="column small-12 medium-6">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/aimhigh/research.jpg"/>
</div>
<div class="column small-12 medium-6">
<h5>Research</h5>
<p>
Since it takes 40 days to make or break a habit, Jerry Steinfield says that the secret to productivity is something called the chain calendar. if you place a red x on a calendar for every day that you complete your goals, seeing that x chain will persuade us not to break it. Seeing consistency will motivate us to keep going. Data visualization helps pull together a vast amount of information and simplify it to tell a story. I started looking into existing trackers such as FitBit, Reporter, and AprilZero to try and understand human motivation.
</p>
</div>
</div>
<div class="row expanded">
<div class="column small-12 medium-6">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/aimhigh/needfinding.jpg"/>
</div>
<div class="column small-12 medium-6">
<h5>Needfinding</h5>
<p>
I enlisted the help of a friend to use Reporter to see if there was anything glaringly missing. The first step was the observe and set the stage. I asked him to narrate outloud what he was doing. After a while, I prompted him to try and make a report.
</p>
<span>Some findings:</span>
<ul>
<li>Needed a bigger call to action on the home screen for reporting</li>
<li>Needed an explanation for asleep and awake toggle</li>
<li>Needed a way to account for subjective preference and record it for future use</li>
</ul>
</div>
</div>
<div class="row expanded">
<div class="column small-12 medium-6">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/aimhigh/persona.jpg"/>
</div>
<div class="column small-12 medium-6">
<h5>Personas</h5>
<p>
The targeted users are undergraduate students. They have many different interests, but are generally connected by location and school affiliation.
</p>
</div>
</div>
<div class="row expanded">
<div class="column small-12 medium-6">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/aimhigh/visual.jpg"/>
</div>
<div class="column small-12 medium-6">
<h5>Visual Development</h5>
<p>
AimHigh went through a few different visual styles through the prototypes. However, the general aim of it being approachable and friendly stayed the same. I brainstomed for words that invoked the images of altitude (e.g. climbing, clouds, space, sky, flying) and began moodboarding. I really wanted to focus on desirability, making the tool colorful and fun and to use.
</p>
</div>
</div>
<div class="row expanded">
<div class="column small-12 medium-6">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/aimhigh/prototype.jpg"/>
</div>
<div class="column small-12 medium-6">
<h5>Audience Testing </h5>
<span>Some quotes that directed changes in prototypes:</span>
<ul>
<li>"What if I don’t want to count in days?"</li>
<li>"I could see this being very useful for a very particular kind of personality"</li>
<li>"I can see myself getting discouraged very quickly"</li>
<li>"What if I want to return to the home screen while I’m editing a goal?"</li>
</ul>
</div>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
</div>
<div id="frame-work-aimhigh-page-6" class="frame" style="background: black url('assets/img/work/aimhigh/finalbg.png') no-repeat center fixed; background-size: cover;" shunt-frame>
<div class="frame-content padded">
<h1 style="color: #3E4E97;">Final Thoughts</h1>
<p style="color: #3E4E97; font-size: 1.2em; width: 50%">
I'm trying to help people realize what they're capable of. There are so many times during our undergraduate years where students want to give up because the stress overwhelming. Eventually, it just takes good organization. While the endurance of the user is the limitation factor, AimHigh is not meant to drag users down, but to encourage.
</p>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
</div>
</div>
<div id="frame-work-expand-page-1" class="frame work-page-1" shunt-frame>
<div class="frame-content padded">
<h1>Expand</h1>
<br/>
<h3>De Young Museum Student Showcase Postcard</h3>
</div>
<span id="left" class="hint glyph left clickable"><i class="fa fa-2x fa-angle-left"></i></span>
<span id="right" class="hint glyph right clickable"><i class="fa fa-2x fa-angle-right"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
<div id="frame-work-expand-page-2" class="frame" shunt-frame>
<div class="frame-content padded">
<div class="row expanded">
<div class="column small-12 medium-7">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/expand/expand.jpg"/>
</div>
<div class="column small-12 medium-5">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/expand/expand-2.jpg"/>
</div>
</div>
<div class="row expanded">
<div class="column small-12 medium-7">
<p>
The Bay Bridge began construction in 1933 and was opened in 1936. I wanted to commemorate a bit of San Francisco history by creating something that focused on the old bridge, with the characteristic fog rolling in from the bay. This was a project that is a main inspiration behind my personal philosophy of “bridging” past and future. It’s important to commemorate and value the the past, but also to bring the lessons learned from the past into the future.
</p>
</div>
<div class="column small-12 medium-5">
<p>
This postcard was chosen for the 18th annual De Young Student Showcase which is a three day event featuring visual art, film, museum talks, music, and performance art by college and university level students.
</p>
<p>
The theme was ‘Expand’, which was inspired by the De Young Museum's permanent collection as well three special exhibitions at the time. I was particularly drawn to The Bay Bridge: A Work in Progress, 1933–1936, which was on exhibition in parallel to the opening of the new Bay Bridge.
</p>
</div>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
</div>
<div id="frame-work-expand-page-3" class="frame" style="background: black url('assets/img/work/expand/expand.jpg') no-repeat center fixed; background-size: cover;" shunt-frame>
<div class="frame-content padded">
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
<div id="frame-work-expand-page-4" class="frame" style="background: black url('assets/img/work/expand/expand-2.jpg') no-repeat center fixed; background-size: cover;" shunt-frame>
<div class="frame-content padded">
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
</div>
<div id="frame-work-echo-page-1" class="frame work-page-1" shunt-frame>
<div class="frame-content padded">
<h1>ECHO</h1>
<br/>
<h3>Giving Quiet Students a Voice</h3>
</div>
<span id="left" class="hint glyph left clickable"><i class="fa fa-2x fa-angle-left"></i></span>
<span id="right" class="hint glyph right clickable"><i class="fa fa-2x fa-angle-right"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
<div id="frame-work-echo-page-2" class="frame" shunt-frame>
<div class="frame-content padded">
<div class="row expanded">
<div class="column small-12 medium-4">
<blockquote>
ECHO is a student to teacher messaging service, created at Startup Weekend EDU London.
</blockquote>
<p>
This app is meant to facilitate instructor to student communication, with special focus on addressing a serious problem in our educational system today. Social anxiety affects how a good number of students take in information and focus on course content, beginning from primary level classrooms and stretching all the way into higher level lecture rooms.
</p>
<p>
Instructors can intermittently begin "Echos" to gauge understanding, while students can give anonymous feedback and vote on the questions of their peers.
</p>
</div>
<div class="column small-12 medium-8">
<iframe style="width: 100%; height: 400;" src="https://www.youtube.com/embed/9d7lL2VtW_A?rel=0&showinfo=0" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
</div>
<div id="frame-work-echo-page-3" class="frame" shunt-frame>
<div class="frame-content padded">
<h1>Startup Weekend</h1>
<div class="row expanded">
<h5>Many bottles of Vitamin Water later (hooray for sponsors), we were able to figure out a flow:</h5>
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/echo/3things.png"/>
</div>
<br/>
<div class="row expanded">
<div class="column small-12 medium-6">
<p>
The need for such an app was justified by the excitement (especially during the pitch session) from the many educators who attended Startup Weekend, who talked about the problems behind social anxiety in their classrooms.
</p>
</div>
<div class="column small-12 medium-6">
<p>
Especially with two university educators on the team, we decided to target users at the uni level, but also keep functionality in the app accessible and usable for all by paying extra attention to language.
</p>
</div>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
</div>
<div id="frame-work-echo-page-4" class="frame" shunt-frame>
<div class="frame-content padded">
<div class="row expanded small-up-1 medium-up-2 large-up-4">
<h1>Selected Screens</h1>
<div class="column">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/echo/questions.png"/>
<h5>User generated questions with live feedback</h5>
<p>
Using a code that specific to every echo, students submit questions throughout the lecture or course until the instructor decides to start an echo. This is an anonymous process without pressure from an instructor or a peer group.
</p>
</div>
<div class="column">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/echo/voting.png"/>
<h5>An anonymous voting system</h5>
<p>
While students can continue submitting questions during an echo, they are also prompted to vote on their peers’ questions. This helps instructors pinpoint pain points or misunderstandings from students during a lecture so that they may direct or re-direct accordingly. The voting bar remains green while voting is active and becomes red when it is finished.
</p>
</div>
<div class="column">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/echo/results.png"/>
<h5>Re-accessbility of results</h5>
<p>
While results are immediately available, they can accessed by anyone again online. Every echo is assigned a unique pin with no account creation necessary.
</p>
</div>
<div class="column">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/echo/timer.png"/>
<h5>A warning timer</h5>
<p>
When an instructor ends an echo, it begins a timer that students see. It warns that the echo is will be finished and that they should finish up any last minute voting.
</p>
</div>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
</div>
<div id="frame-work-echo-page-5" class="frame" shunt-frame>
<div class="frame-content padded">
<div class="row expanded">
<div class="column small-12 medium-6">
<h1>Final Thoughts</h1>
<p>
ECHO couldn’t have been possible without this talented group of educators, entrepreneurs, developers, designers, and business strategists: Gaurav Malik, Jasmin Sparling, Barbara Sparling, David Thompsett, and Ashley Chinyangarara
</p>
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/echo/group.png"/>
</div>
<div class="column small-12 medium-6">
<h5>Interact with the final interactive prototype!</h5>
<iframe style="width: 100%;" id="echo" src="https://marvelapp.com/536j27g?emb=1" width="300" height="749" allowtransparency="true" frameborder="0"></iframe>
</div>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
</div>
</div>
<div id="frame-work-portraits-page-1" class="frame work-page-1" shunt-frame>
<div class="frame-content padded">
<h1>Portrait Project</h1>
<br/>
<h3>Gifts for Friends and Co-workers</h3>
</div>
<span id="left" class="hint glyph left clickable"><i class="fa fa-2x fa-angle-left"></i></span>
<span id="right" class="hint glyph right clickable"><i class="fa fa-2x fa-angle-right"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
<div id="frame-work-portraits-page-2" class="frame" shunt-frame>
<div class="frame-content padded">
<h1>The Chestnuts</h1>
<div class="row expanded small-up-2 medium-up-4">
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/chestnuts/annie.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/chestnuts/bobby.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/chestnuts/erik.png"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/chestnuts/Gracie.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/chestnuts/janice.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/chestnuts/Lillian.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/chestnuts/Lucian.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/chestnuts/ryan.png"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/chestnuts/sandra.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/chestnuts/sarah.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/chestnuts/zack.jpg"/>
</div>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
</div>
<div id="frame-work-portraits-page-3" class="frame" shunt-frame>
<div class="frame-content" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: url('assets/img/work/portraits/tree.png') no-repeat center fixed; background-size: cover; -webkit-filter: contrast(150%) grayscale(50%) blur(2px);">
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
<div id="frame-work-portraits-page-4" class="frame" shunt-frame>
<div class="frame-content padded">
<h1>Creative Media</h1>
<div class="row expanded small-up-2 medium-up-4">
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/cm/cm_alex.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/cm/cm-anastasia.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/cm/cm-arthur.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/cm/cm-charlie.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/cm/cm-cyrus.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/cm/cm_jackie.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/cm/cm-jessica.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/cm/cm-josh.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/cm/cm-lillian.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/cm/cm-madeleine.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/cm/cm-marissa.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/cm/cm-nathalie.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/cm/cm-nima.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/cm/cm-rory.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/cm/cm-sophie.jpg"/>
</div>
<div class="column">
<img class="lookiehere" style="padding: 1em; height: auto; width: 100%;" src="assets/img/work/portraits/cm/cm-will.jpg"/>
</div>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
</div>
<div id="frame-work-portraits-page-5" class="frame" shunt-frame>
<div class="frame-content" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: url('assets/img/work/portraits/slack.png') no-repeat center fixed; background-size: cover; -webkit-filter: contrast(150%) grayscale(50%) blur(3px);">
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
</div>
<div id="frame-work-vitacore-page-1" class="frame work-page-1" shunt-frame>
<div class="frame-content padded">
<h1>Vitacore</h1>
<br/>
<h3>An Apple a Day Keeps the Doctor Away</h3>
</div>
<span id="left" class="hint glyph left clickable"><i class="fa fa-2x fa-angle-left"></i></span>
<span id="right" class="hint glyph right clickable"><i class="fa fa-2x fa-angle-right"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
<div id="frame-work-vitacore-page-2" class="frame" shunt-frame>
<div class="frame-content padded">
<div class="row expanded">
<div class="column small-12 medium-6">
<blockquote>
Vitacore is a vitamin supplement designed around the old Welsh saying, “An apple a day keeps the doctor away’
</blockquote>
</div>
<div class="column small-12 medium-6">
<p>
An apple’s core vitamins are Vitamins A, B, C, E, and K. VitaCore not only provides nutrition for growing children, but also offers an engaging experience aimed towards developing better mental wellbeing.
</p>
<p>
The final design comes in six parts – the core and each of the five slices. The slices each hold one of the vitamins A, B, C, E, or K. By separating each slice into pieces holding only one of the five core vitamins, the act of taking vitamins can become a customizable experience.
</p>
</div>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
</div>
<div id="frame-work-vitacore-page-3" class="frame" style="background-color: white;" shunt-frame>
<div class="frame-content padded">
<h1 style="color: black;">Graphic Standard</h1>
<div class="row expanded" style="text-align: center;">
<img class="lookiehere" style="margin: 0.5em; height: auto; max-width: 100%;" src="assets/img/work/vitacore/logo.jpg"/>
</div>
<div class="row expanded" style="text-align: center;">
<img style="margin: 0.5em; height: auto; max-width: 100%;" src="assets/img/work/vitacore/logodonot.png"/>
</div>
<div class="row expanded" style="text-align: center;">
<img style="margin: 0.5em; height: auto; max-width: 100%;" src="assets/img/work/vitacore/logospec.png"/>
</div>
<div class="row expanded" style="text-align: center;">
<img style="margin: 0.5em; height: auto; max-width: 100%;" src="assets/img/work/vitacore/colors.png"/>
</div>
<div class="row expanded" style="text-align: center;">
<img class="lookiehere" style="margin: 0.5em; height: auto; max-width: 100%;" src="assets/img/work/vitacore/business.png"/>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
</div>
<div id="frame-work-vitacore-page-4" class="frame" shunt-frame>
<div class="frame-content padded">
<h1>Core Knowledge: A Card Game</h1>
<div class="row expanded">
<img class="lookiehere" style="margin: 0.5em; height: auto; width: 100%;" src="assets/img/work/vitacore/vitacore-4.jpg"/>
</div>
<div class="row expanded">
<div class="column small-12 medium-4">
<img class="lookiehere" style="margin: 0.5em; height: auto; width: 100%;" src="assets/img/work/vitacore/coreknowledge-1.jpg"/>
</div>
<div class="column small-12 medium-8">
<blockquote>
Core Knowledge is a memory game in which two players can take turns trying to find matching pairs of facts about the health benefits of apples.
</blockquote>
<p>
Beyond being a collectable toy, Core Knowledge is educational. Gameplay will help children remember to take their vitamins. After reading the instructions on the back of the first card, this two player game “Core Knowledge” creates interaction between people, whether that is between the guardian and the child, or between kids amongst themselves. This mental association builds up over time so that children can continue to learn about the health benefits of vitamins as well as develop healthier habits.
</p>
<p>
Constant reminders pop up elsewhere on the packaging as well, such as within the flap of each vitamin slice.
</p>
</div>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
<span id="down" class="hint glyph down clickable"><i class="fa fa-2x fa-angle-down"></i></span>
</div>
</div>
<div id="frame-work-vitacore-page-5" class="frame" shunt-frame>
<div class="frame-content padded">
<h1>The Process</h1>
<div class="row expanded">
<div class="column small-12 medium-6">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/vitacore/vitacore-main.jpg"/>
</div>
<div class="column small-12 medium-6">
<h5>Research</h5>
<p>
From the beginning I started researching existing brands such as Emergen-C and and Airborne, which focused their graphics around the fruit flavor of the supplement, or introduced a new fun character to appeal to children. However, I wanted VitaCore to be appealing to both children and to the adults buying them. In this case, the packaging had to be fun and playful, but still retain a sense of quality and authenticity.
</p>
<p>
Through motivational reminders and behavior changing games, children will have more incentive to take their vitamins and also be more aware of the health benefits behind their actions. Hands on experience and interaction can encourage learning.
</p>
</div>
</div>
<div class="row expanded">
<div class="column small-12 medium-6">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/vitacore/productSketch.jpg"/>
</div>
<div class="column small-12 medium-6">
<h5>Biomimicry Studies</h5>
<p>
I looked into biomimicry studies of the apple, as a fruit. Oftentimes, nature provides us the inspiration we need to create effective products and even more effective packaging. The apple itself has three layers — the endocarp, the mesocarp, and the outer epicarp. This ensures the protection of the seeds inside.
</p>
</div>
</div>
<div class="row expanded">
<div class="column small-12 medium-6">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/vitacore/mockups.jpg"/>
</div>
<div class="column small-12 medium-6">
<h5>Sketching & Brainstorming </h5>
<p>
During Phase 1, I focused on a few key words and ideas: Learning, Health, Lifestyle, Mental Health, Physical Health, Prevention.
</p>
<p>
During phase 2, I Expanded on the key words which led to the idea of centering the packaging around the saying, “An apple a day keeps the doctor away.’ An apple’s five key vitamins are Vitamins A, B,C,E, and K. The combination of these five provide highly beneficial health perks, all of which would help a growing child. Not only is the apple is known to improve neurological health, but apple imagery is also culturally associated with teachers and academia, especially in early schooling.
</p>
</div>
</div>
<div class="row expanded">
<div class="column small-12 medium-6">
<img class="lookiehere" style="height: auto; width: 100%;" src="assets/img/work/vitacore/biomimicry.jpg"/>
</div>
<div class="column small-12 medium-6">
<h5>Mockups & Prototypes </h5>
<p>
I created a rough mockup of an apple slice with bristol board and tape. Through this iteration, and iterations after, I found out that the geometric shape that I had been pursuing in one of my sketches was ideal for the form. Instead of rounded cuteness, the sharp angular features retained the sophistication that was needed but still exposed a slight playful nature in the color and overall building-block-like shape. I also tested a few other materials including fiber board and corrugated cardboard. The cardboard was not ideal for the formal structure, but did make an appearance as an accent in the final label.
</p>
</div>
</div>
<span id="up" class="hint glyph up clickable"><i class="fa fa-2x fa-angle-up"></i></span>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/foundation.min.js"></script>
<script src="//rawgit.com/KelvinLu/lookiehere.js/master/lookiehere.js"></script>
<script src="//rawgit.com/KelvinLu/shuntdiv.js/master/shuntdiv.js"></script>
<script src="js/main.js"></script>
</body>
</html>