-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1118 lines (1005 loc) · 61 KB
/
index.html
File metadata and controls
1118 lines (1005 loc) · 61 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
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
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Christopher Turney's Portfolio</title>
<meta name="description" content="A site that summarizes my work, skills, and experience.">
<meta name="author" content="Christopher Turney">
<meta property="og:description" content="A site that summarizes my work, skills, and experience.">
<meta property="og:title" content="Christopher Turney's Portfolio">
<meta property="og:site_name" content="Christopher Turney">
<meta property="og:url" content="http://www.christopherturney.com">
<meta property="og:type" content="website">
<meta property="og:image" content="http://www.christopherturney.com/img/me.png">
<link rel="shortcut icon" type="image/x-icon" href="img/C.png" />
<!-- Bootstrap Core CSS -->
<!-- <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Modernizr -->
<script src="js/modernizr.js"></script>
<!-- Timeline CSS -->
<link href="css/timeline.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/freelancer.css" rel="stylesheet">
<link href="css/freelancer2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- -->
<!-- start Heap -->
<script type="text/javascript">
window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=t.forceSSL||"https:"===document.location.protocol,a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=(r?"https:":"http:")+"//cdn.heapanalytics.com/js/heap-"+e+".js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","removeEventProperty","setEventProperties","track","unsetEventProperty"],c=0;c<p.length;c++)heap[p[c]]=o(p[c])};
heap.load("1569747897");
</script>
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">Chris Turney</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="page-scroll" >
<a href="#portfolio" >Portfolio</a>
</li>
<li class="page-scroll">
<a href="#skills">Skills</a>
</li>
<li class="page-scroll">
<a href="#timeline">Timeline</a>
</li>
<li class="page-scroll">
<a href="#about">About</a>
</li>
<li class="page-scroll">
<a href="#footer">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class = "img-responsive chris-head-circle">
<img class="img-responsive chris-head" src="img/christopha246revwhiteimage.png" alt="">
</div>
<div class="intro-text">
<span class="name">Christopher Turney</span>
<hr class="star-light">
<h3 class="summary "><span class= white-text-hover >Technology enthusiast with experience bringing software projects live inside complex enterprise environments.</span><br /> <br />
<span class = white-text-hover >Seeking the opportunity to work with a team to design and build SaaS products.</span>
</h3>
<h3 class = "summary hidden"><span class= white-text-hover>I design and build products that make enterprises and users work better together.</span>
<br />
<br />
<span class= white-text-hover>I love working in fast-paced development environments tackling complex, technical challenges head-on.</span>
</div>
</div>
</div>
</div>
</header>
<!-- Portfolio Grid Section -->
<section id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Portfolio</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-sm-4 portfolio-item ">
<a href="#portfolioModal5-wfm" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
<p>Workforce Management Product Development</p>
</div>
</div>
<img src="img/portfolio/wfm.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item ">
<a href="#portfolioModal4-gamification" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
<p>Gamification in the Enterprise</p>
</div>
</div>
<img src="img/portfolio/game.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item hidden">
<a href="#portfolioModal_Enhatch" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/enhatch.png" class="img-responsive" alt="Enhatch">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal_Travelr" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/travelr.png" class="img-responsive" alt="Travelr">
</a>
</div>
<div class="col-sm-4 portfolio-item hidden">
<a href="#portfolioModal_ervo" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img class="img-responsive img-centered " src = "img/portfolio/ervo.png" alt = "ervo">
</a>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section class="skills" id="skills">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Skills</h2>
<hr class="star-light star-third">
</div>
</div>
<div class="row text-center ">
<div class="col-lg-4 col-lg-offset-0 col-xs-10 col-xs-offset-1 white-text-hover-light skill-tile-first">
<h4>Full-lifecycle software development experience</h4>
<p>Custom Development & SaaS/On-Premise Integrations</p>
</div>
<div class="col-lg-4 col-lg-offset-0 col-xs-10 col-xs-offset-1 white-text-hover-light skill-tile">
<h4>Excellent communication skills in customer-facing roles</h4>
<p>Translate technical concepts to non-technical audiences </p>
</div>
<div class="col-lg-4 col-lg-offset-0 col-xs-10 col-xs-offset-1 white-text-hover-light skill-tile">
<h4>Analytical and data-driven</h4>
<p>Comfortable with super complex data sets, SQL expert</p>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-lg-block"></div>
<div class="col-lg-4 col-lg-offset-0 col-xs-10 col-xs-offset-1 white-text-hover-light skill-tile">
<h4>Strong working knowledge of HTML, CSS, & JavaScript</h4>
<p>Can turn wireframes into working prototypes, & grasp existing code</p>
</div>
<div class="col-lg-4 col-lg-offset-0 col-xs-10 col-xs-offset-1 white-text-hover-light skill-tile">
<h4>Organized and detail-oriented</h4>
<p>Strong project management skills and experience presenting to leadership</p>
</div>
<div class="col-lg-4 col-lg-offset-0 col-xs-10 col-xs-offset-1 white-text-hover-light skill-tile">
<h4>Willingness to turn chaos into order</h4>
<p>Not afraid to take action when there is a need for structure and direction</p>
</div>
</div>
</div>
</section>
<!-- Timeline -->
<section id = "timeline" >
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Career Timeline</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<section id="cd-timeline">
<div class="chris-container">
<div class="cd-timeline-block">
<div class="cd-timeline-img">
<img src="img/timeline/deloitte.png" alt="Deloitte">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content" id = Deloitte>
<h3>Deloitte</h3>
<p>Learned the ropes in a fast-paced software development environment. Member of a 50+ person team. Responsible for requirements gathering, writing design specs, making wireframes, data modeling, and roll-out planning. Worked in the trenches with dev team triaging issues and assigning work. Facilitated user testing and training sessions.</p>
<!-- <a href="#0" class="cd-read-more">Read more</a> -->
<span class="cd-date">2008 - 2011</span>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img">
<img src="img/timeline/umt.png" alt="UMT">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content" id = UMT>
<h3>UMT Consulting</h3>
<p>Worked with leadership inside Fortune 500 clients to execute strategic vision. Became subject matter expert in Project Portfolio Management (PPM), leading large-scale software projects to facilate project management, strategic planning, and resource management inside divisions.</p>
<!-- <a href="#0" class="cd-read-more">Read more</a> -->
<span class="cd-date">2011 - 2015</span>
</div> <!-- cd-timeline-content -->
</div>
<div class="cd-timeline-block" >
<div class="cd-timeline-img">
<img src="img/timeline/EY.png" alt="EY">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content" id = EY>
<h3>EY</h3>
<p>Gained experience in project leadership and account management. Acted as point person on client engagements. Wrote RFP proposals for enterprise clients.</p>
<!-- <a href="#0" class="cd-read-more">Read more</a> -->
<span class="cd-date">Nov 2015 - May 2016</span>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class=" cd-timeline-block">
<div class="cd-timeline-img">
<img src="img/timeline/SI.png" alt="SI">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content" ID = SI>
<h3>Startup Institute</h3>
<p>Reaffirming knowledge of product design, working with startups, and getting acquainted with startup culture. Doubling-down on my desire to transition to Product Management.</p>
<!-- <a href="#0" class="cd-read-more">Read more</a> -->
<span class="cd-date">Jun 2016 - Present</span>
</div> <!-- cd-timeline-content -->
</div>
<!-- </div> -->
</div>
</section>
</div>
</section>
<!-- Projects Grid Section -->
<section id="projects" class = "hidden">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Case Studies</h2>
<hr class="star-primary">
</div>
</div>
<!-- <div class = "row">
<div class="col-lg-12 text-center">
<h3>Under Construction</h3>
</div>
</div> -->
<div class="row ">
<div class="col-sm-4 portfolio-item hidden">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/cabin.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item hidden">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/cake.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item hidden">
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/circus.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 col-sm-offset-2 portfolio-item ">
<a href="#portfolioModal4-gamification" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
<p>Gamification in the Enterprise</p>
</div>
</div>
<img src="img/portfolio/game.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item ">
<a href="#portfolioModal5-wfm" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
<p>Workforce Management Product Development</p>
</div>
</div>
<img src="img/portfolio/wfm.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item hidden">
<a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/submarine.png" class="img-responsive" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About</h2>
<hr class="star-light">
</div>
</div>
<div class="row text-center ">
<div class="col-lg-2 col-lg-offset-1 col-xs-10 col-xs-offset-1 white-text-hover skill-tile-first">
<a href="#portfolioModal_arsenal" class="arsenal-link white-text-hover" data-toggle="modal">
<h4>Soccer<br />Fan</h4>
<p>The spikes are hung up, now I just watch every Saturday morning… and Sundays</p>
</a>
</div>
<div class="col-lg-2 col-lg-offset-0 col-xs-10 col-xs-offset-1 white-text-hover skill-tile">
<h4>OK<br />Golfer</h4>
<p>Still trying to match my low score from when I was 17</p>
</div>
<div class="col-lg-2 col-lg-offset-0 col-xs-10 col-xs-offset-1 white-text-hover skill-tile">
<h4>Beginner Tailor</h4>
<p>Learning how to sew, one destroyed blazer at a time</p>
</div>
<div class="col-lg-2 col-lg-offset-0 col-xs-10 col-xs-offset-1 white-text-hover skill-tile">
<h4>Occasional Artist</h4>
<p>My favorite medium is paper and pencil, ask me about my work</p>
</div>
<div class="col-lg-2 col-lg-offset-0 col-xs-10 col-xs-offset-1 white-text-hover skill-tile">
<h4>Tinkerer & Builder</h4>
<p>Just waiting for the day when I can have a garage of my own to build cool stuff</p>
</div>
</div>
</div>
</section>
<!-- Old Skills Section -->
<!-- <section class="skills hidden" id="skills">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Skills</h2>
<hr class="star-third star-light">
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<h3>Under Construction</h3>
</div>
</div>
<div class="row hidden">
<div class="col-lg-6 text-center ">
<div id="pieChart" class="chart align-center"></div>
</div>
<div class="col-lg-6 text-center skill-description">
<h3 id = "skill-title">Hover over chart to see more...</h3>
<p id = "skill-description"></p>
</div>
</div>
</div>
</section>
-->
<!-- Footer -->
<footer id = "footer" class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-3">
<h3>Location</h3>
<p>New York, NY</p>
</div>
<div class="footer-col col-md-3">
<h3>Email</h3>
<p>christopher.p.turney@gmail.com</p>
</div>
<div class="footer-col col-md-3">
<h3>Resume</h3>
<p><a href="/files/Christopher Turney_resume.pdf">Download</a></p>
</div>
<div class="footer-col col-md-3">
<h3>Social</h3>
<ul class="list-inline">
<!-- <li>
<a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>
</li> -->
<!-- <li>
<a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-google-plus"></i></a>
</li> -->
<li>
<a href="http://www.twitter.com/christurney" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>
</li>
<li>
<a href="http://www.linkedin.com/in/christurney" class="btn-social btn-outline"><i class="fa fa-fw fa-linkedin"></i></a>
</li>
<!-- <li>
<a href="" class="btn-social btn-outline"><i class="fa fa-fw fa-dribbble"></i></a>
</li> -->
</ul>
</div>
<!-- <div class="footer-col col-md-4">
<h3>About Freelancer</h3>
<p>Freelance is a free to use, open source Bootstrap theme created by <a href="http://startbootstrap.com">Start Bootstrap</a>.</p>
</div> -->
</div>
</div>
<div style = "margin:0; line-height:2px; padding:0;"><a style = "margin:0;font-size: 1px;color:rgba(0,0,0,0);" href = "http://www.hayleyteaches.com">www.hayleyteaches.com</a></div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © Christopher Turney 2016
</div>
</div>
</div>
</div>
</footer>
<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
<div class="scroll-top page-scroll hidden-sm hidden-xs hidden-lg hidden-md">
<a class="btn btn-primary" href="#page-top">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<!-- ///////////////////////////////// Modals ///////////////////////////////// -->
<!-- Portfolio Modals -->
<div class="portfolio-modal modal fade" id="portfolioModal_Enhatch" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Data Importer for Enhatch Control</h2>
<hr class="star-primary">
<img src="img/portfolio/enhatch.png" class="img-responsive img-centered" alt="">
<h3>Background</h3>
<p>Enhatch, a company with a leading mobile enterprise sales platform, has an Inventory Management product called <em>Control</em>. After acquiring new users, the Enhatch team assists users in migrating inventory data from their existing systems into <em>Control</em>. This required effort from the customer success team and there wasn't a current method of allowing Enhatch customers to upload their own data.</p>
<h3>Project</h3>
<p>My team was tasked with designing and developing a data import module for <em>Control</em> that would allow customers to follow an easy workflow to upload, map, and validate the inventory data.</p>
<h3>Approach</h3>
<p>To start, we learned about the users. The first thing we discovered was that it takes customers a while to collect their current data. Also, the product should be easy enough for an average-proficiency computer user to navigate.</p>
<h3>Design</h3>
<p>After understanding our customers, the two most important tenants of the design were to make it clear to the users where they were in the workflow and to provide reminders and helpful hints along the way, helping to keep customers engaged.</p>
<p>We started with designing wireframes, testing out the best way to show users how to navigate.</p>
<p>Multiple files containing each object (Contacts, Products, Inventory) needed to be imported. Each object needed to be uploaded, mapped to Control fields, and validated for errors before being saved. The initial design kept these steps consistent for each object.</p>
<div class="row">
<h3>Low-Fidelity Wireframes</h3>
<div class = "col-md-6 col-xs-12 twohundred">
<img class = "img-responsive img-centered enhatch" src = "img/modals/EnhatchWireframes.jpeg">
</div>
<div class = "col-md-6 col-xs-12 twohundred">
<img class = "img-responsive img-centered enhatch" src = "img/modals/EnhatchWireframes2.jpeg">
</div>
<div class = "col-md-6 col-xs-12 twohundred">
<img class = "img-responsive img-centered enhatch" src = "img/modals/EnhatchWireframes3.jpeg">
</div>
<div class = "col-md-6 col-xs-12 twohundred">
<img class = "img-responsive img-centered enhatch" src = "img/modals/EnhatchWireframes4.jpeg">
</div>
</div>
<h3>Development</h3>
<p>Still in process. Stay posted...</p>
<br /><br /><br /><br /><br />
<ul class="list-inline item-details">
<li>Client:
<strong><a href="http://www.enhatch.com">Enhatch</a>
</strong>
</li>
<li>Date:
<strong>July 2016</a>
</strong>
</li>
<li>Service:
<strong>Product Design & Development
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal_Travelr" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Product Design for Social Travel Platform</h2>
<hr class="star-primary">
<h4>A platform for individuals to build elegant itineraries and share with the community.</h4>
<div class="row">
<div class = "col-md-8 col-md-offset-2 col-xs-12">
<img src="img/portfolio/travelr.png" class="img-responsive img-centered" alt="">
</div>
</div>
<h3>Product Vision</h3>
<p>How do you typically plan a trip? Navigate to multiple blogs and travel websites to get ideas? Search kayak to get the best flights? Look on Google Maps to see how far you'll need to drive to each stop?</p>
<p>This is all too common. Even if you are asking your friends and family for recommendations, they may give you great advice, but you'll still have to do all the detailed planning.
<p><em>Travelr</em> is a product that will allow you to easily build an itinerary and share it with friends or members of the community. You will be able to see trips posted by members of the community, modify your version of their trip, and browse entire trips that align with your tastes.</p>
<h3>User Research</h3>
<p>We've all heard the famous Steve Blank quote that "no product survives first contact with customer", so the first step is to go out and test the hypothesis that this type of product would be desirable.</p>
<h3>MVP Design</h3>
<p>The next step after the initial hypothesis are validated through customer interviews is to build an MVP and get it in front of users. The initial features will include the ability to add a trip and view trips posted by members of the community.</p>
<br />
<div class="row">
<h4>High-Fidelity Wireframes</h4>
<h5>Landing Page</h5>
<img src="img/modals/LandingPage.jpeg" class="img-responsive img-centered" alt="">
<h5>View Itinerary</h5>
<img src="img/modals/TravelrViewTrip.png" class="img-responsive img-centered" alt="">
</div>
<h3>MVP Feedback</h3>
<p>Still under development. Stay tuned...</p>
<br /><br><br>
<ul class="list-inline item-details">
<li>Client:
<strong> </a>
</strong>
</li>
<li>Date:
<strong>July 2016</a>
</strong>
</li>
<li>Service:
<strong>Web Design</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal_ervo" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Product Design for Enterprise Resource Management Platform</h2>
<hr class="star-primary">
<img class="img-responsive img-centered " src = "img/portfolio/ervo.png">
<p>Interactive prototype of a Resource Management application.</p>
<img src="img/modals/ervo.png" class="img-responsive img-centered" alt="">
<ul class="list-inline item-details">
<li>Client:
<strong>Personal Project</a>
</strong>
</li>
<li>Date:
<strong>February 2016</a>
</strong>
</li>
<li>Service:
<strong>Web Design</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Arsenal Modal -->
<div class="portfolio-modal modal fade" id="portfolioModal_arsenal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row r">
<div class="col-lg-6 col-lg-offset-3 ">
<div class="modal-body">
<img class="img-responsive img-centered " src = "img/arsenal.jpg">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Project Modals -->
<!-- <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/cabin.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong><a href="http://startbootstrap.com">Start Bootstrap</a>
</strong>
</li>
<li>Date:
<strong><a href="http://startbootstrap.com">April 2014</a>
</strong>
</li>
<li>Service:
<strong><a href="http://startbootstrap.com">Web Development</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/cake.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong><a href="http://startbootstrap.com">Start Bootstrap</a>
</strong>
</li>
<li>Date:
<strong><a href="http://startbootstrap.com">April 2014</a>
</strong>
</li>
<li>Service:
<strong><a href="http://startbootstrap.com">Web Development</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/circus.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong><a href="http://startbootstrap.com">Start Bootstrap</a>
</strong>
</li>
<li>Date:
<strong><a href="http://startbootstrap.com">April 2014</a>
</strong>
</li>
<li>Service:
<strong><a href="http://startbootstrap.com">Web Development</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div> -->
<div class="portfolio-modal modal fade" id="portfolioModal4-gamification" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Gamification in the Enterprise</h2>
<hr class="star-primary">
<!-- <img src="img/portfolio/game.png" class=" img-responsive img-centered" alt=""> -->
<h3>Background</h3>
<p>My client (an IT division of a Fortune 500 company) struggled with getting valuable information out of their Project Portfolio Management (PPM) software. <em>(PPM = think of a project management tool you've used, then scale it to a portfolio of 300+ active projects in a 2000-person division).</em> The purpose of the software is to answer key questions for department leadership. Specifically, it was designed to answer where the company was investing in projects, how projects were progressing, and how to prioritize new projects. </p>
<h3>Complication</h3>
<p>These key questions can't be answered if the underlying data is bad, and the 200+ Project Managers in the division were the ones relied upon to keep this data up to date and accurate. <em>(Imagine trying to understand your burn rate, if your financials haven't been updated in two months?)</em> How do we encourage/insist/mandate our users to do this?</p>
<h3>Action</h3>
<p>There are many techniques to encourage action, including the carrot and stick techniques that are all too common. It was the emerging trend of "gamification", and its application in non-traditional game situations, that caught my attention. I decided to pilot something in my free time. </p>
<h3>MVP</h3>
<p>First, I logged down all the "rules" for the game (everything that Project Managers were supposed to do). Then, I researched how well these rules were being followed by writing SQL queries to pull the results of testing each of these "rules" for every project in our system. </p>
<p></p>
<p>For my MVP, I loaded these results into excel and created a basic UI to plug into a webpage, so that users wouldn't even know that an Excel file was under the hood. I had to manually re-run the SQL queries and upload the Excel file each day, but it was fine for the first month.</p>
<!-- Images -->
<div class="row">
<h3>MVP Process</h3>
<div class = "col-md-6 col-xs-12 twohundred">
<img class = "img-responsive mvp" src = "img/modals/GamificationMVP1.png">
<h4>Research</h4>
<p>Determine Which Tests Could Be Run by Querying DB</p>
</div>
<div class = "col-md-6 col-xs-12 twohundred">
<img class = "img-responsive mvp" src = "img/modals/GamificationMVP2.png">
<h4>Define</h4>
<p>Specify Exact Details of Each Test (Users Should Know All Rules)</p>
</div>
<div class = "col-md-6 col-xs-12 twohundred">
<img class = "img-responsive mvp" src = "img/modals/GamificationMVP3.png ">
<h4>Design MVP in Excel</h4>
<p>Embed DB Queries in Excel & Filter Based on User ID</p>
</div>
<div class = "col-md-6 col-xs-12 twohundred">
<img class = "img-responsive mvp" src = "img/modals/GamificationMVP4.png">
<h4>Final MVP</h4>
<p>Embed Excel in Existing Page (Users Don’t Know it’s Excel)</p>
</div>
</div>
<h3>Initial Feedback</h3>
<p>Users liked the "game" concept and the initial feedback was that users wanted to see how they stacked up against their peers. This led to the creation of a "Leaderboard" MVP, also designed and implemented in the same fashion. </p>
<h3>Outcomes</h3>
<p>The result was a resounding success! After one month, a simple statistic of "# of users providing status updates each week" improved 50%. </p>
<p></p>
<p>Our client liked the idea, and approved us to move forward and have our Dev team build out real-time web-based reports to replace my daily manual Excel updates. 3 months later, over 50 Project Managers had 100% scores, while at the beginning, 0 did. </p>
<p></p>
<p>In game design, it is vital to keep players challenged, but also give them continuous achievement. To keep players (users) in this area of “flow”, the game must keep getting harder. Each month, new rules were researched and added, to keep players interested in the game. </p>
<br /> <br /> <br />
<ul class="list-inline item-details">
<li>Client:
<strong>n/a</a>
</strong>
</li>
<li>Date:
<strong>2014</a>
</strong>
</li>
<li>Service:
<strong>Consulting</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal5-wfm" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Workforce Management</h2>
<hr class="star-primary">
<h3>Background</h3>
<p>With a workforce of over 3,000 resources (employees) and 500 active projects, my client's IT division could not keep track and prioritize all of these assignments with old-fashioned manual methods. Over-allocations, mix-ups, and downtime between projects caused many headaches. Projects were delayed waiting for a critical resource, other individuals sat idle waiting for their next assignment, and leadership could not predict what type of skills were required for their 6-12 month recruiting horizon.</p>
<p></p>
<p>My team's assignment to revamp resource management practices and replace a home grown tool with a solution that tightly integrates with their enterprise project management and HR systems. </p>
<h3>Design Approach</h3>
<br />
<p><span class = design-step>Discovery and User Persona Definition. </span>Conduct an initial review of the current state and identify the distinct user groups and define their needs.</p>
<div class="row">
<div class = "col-md-4 col-xs-12 twohundred">
<img class = "img-responsive user-persona-images center-block" src = "img/wfm/businessman.png">
<h4>Resource Manager</h4>
<p>See which projects my resources are allocated to and make sure their task assignment forecast and actuals are aligned with their allocations.</p>
</div>
<div class = "col-md-4 col-xs-12 twohundred">
<img class = "img-responsive user-persona-images center-block" src = "img/wfm/manager.png">
<h4>Staffing Team</h4>
<p>View new Resource Requests, find the best-fit resources with required availability, and fulfil those requests quickly.</p>
</div>
<div class = "col-md-4 col-xs-12 twohundred">
<img class = "img-responsive user-persona-images center-block" src = "img/wfm/writer.png">
<h4>Project Managers</h4>
<p>Simple way to see who is allocated to my project and submit accurate requests for new Resources effectively.</p>
</div>
</div>
<br />
<p><span class = design-step>User Interviews. </span>Conduct Interviews with users. Ask questions spanning all stages of the Resource Management process. Dig into problem areas, bottlenecks, and labor-intensive processes. Use this to envision new potential features.</p>
<br />
<p><span class = design-step>Envisioning and Design. </span>Iterative review sessions with our client to share our thoughts, hear feedback, and whiteboard and sketch our approach.</p>
<br />
<p><span class = design-step>User Journey & Future-State Workflow. </span>Map the user journey & translate this journey into its embodiment in technology.</p>
<div class="row">
<div class = "col-md-12 col-xs-12 twohundred">
<img class = "img-responsive center-block" src = "img/wfm/flow-diagram.png">
</div>
</div>
<br />
<p><span class = design-step>Wireframes and Navigation. </span>Build wireframes detailing how users will interact with forms and data. Navigation diagrams were used in design review sessions to allow project team members to better understand navigation, ask questions, and suggest improvements.</p>
<div class="row">
<div class = "col-md-6 col-xs-12 twohundred">
<img class = "img-responsive center-block" src = "img/wfm/wireframe1.png">