-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1246 lines (1206 loc) · 63.9 KB
/
index.html
File metadata and controls
1246 lines (1206 loc) · 63.9 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>
<title>Mak Mendelson - Portfolio</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="color-scheme" content="light only" />
<meta name="description" content="Portfolio of Design & UI/UX work" />
<meta property="og:site_name" content="Mak Mendelson - Portfolio" />
<meta property="og:title" content="Mak Mendelson - Portfolio" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Portfolio of Design & UI/UX work" />
<link href="https://fonts.googleapis.com/css2?display=swap&family=Quattrocento+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Serif:ital,wght@0,200;1,200&family=Afacad:ital,wght@0,500;1,500" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="assets/images/favicon.png" />
<link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png" />
<link rel="stylesheet" href="assets/main.css" />
<noscript>
<link rel="stylesheet" href="assets/noscript.css" />
</noscript>
<script src="https://kit.fontawesome.com/1669c8de1f.js" crossorigin="anonymous"></script>
<!-- qweoqwupeoiqwuewqe -->
<style>
html {
scrollbar-color: #5091cc #18354f;
scrollbar-width: thin;
}
#gallery-modal {
background: rgba(0, 0, 0, 0.9);
}
[id^="gallery"] {
background: rgba(0, 0, 0, 0.1);
padding: 2rem 0.5rem;
border-top: 2px solid rgba(0, 0, 0, 0.3);
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}
#container04 {
position: fixed !important;
z-index: 101;
top: 0;
left: 0;
border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}
.hideme {
visibility: hidden;
height: 0;
}
.casestudy-component {
position: relative;
}
.casestudy-btn {
position: absolute;
top: 6px;
right: 12px;
border-radius: 3px;
color: #EEEEEE;
background-color: rgba(0, 0, 0, 0);
border: none;
/* padding: 0.2rem 1rem; */
padding: 0.65rem 1rem;
z-index: 100;
transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, content 0.25 ease;
}
.casestudy-btn::before {
font-family: "Font Awesome 6 Sharp";
font-style: normal;
font-weight: 900;
font-size: 1.5rem;
/* content: "\f078"; */
/* content: "\f0d7"; */
content: "\f103";
}
.casestudy-btn:hover {
border-color: #EEEEEE !important;
background-color: #EEEEEE !important;
color: rgb(48, 65, 142) !important;
cursor: pointer;
}
.casestudy {
max-height: 3.75rem;
overflow-x: hidden;
overflow-y: hidden;
scrollbar-color: #5091cc #18354f;
scrollbar-width: thin;
font-family: 'Roboto Serif', serif;
color: rgba(255, 255, 255, 0.933);
text-align: start;
padding: 1rem 2rem;
line-height: 1.6rem;
margin-bottom: 2rem !important;
}
.casestudy.expanded {
max-height: calc(100vh - 24rem);
max-height: 75vh;
overflow-y: scroll;
}
.casestudy.expanded+.casestudy-btn::before {
content: "\f102";
}
.casestudy ul {
padding-left: 1.3rem;
}
.casestudy li {
list-style-type: circle;
list-style-position: outside;
padding-left: 0.4rem;
}
.project-header {
font-size: 1.3rem !important;
}
hr {
border-top: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
margin: 1em 0;
padding: 0;
}
h1 {
font-size: 1.5rem;
color: rgba(255, 246, 196, 0.941);
font-family: 'Quattrocento Sans', sans-serif;
letter-spacing: 0.025rem;
font-variant: small-caps;
}
h2 {
font-size: 1.3rem;
color: rgba(255, 246, 196, 0.941);
font-family: 'Quattrocento Sans', sans-serif;
letter-spacing: 0.025rem;
font-variant: small-caps;
}
h3 {
font-size: 1.1rem;
color: rgba(255, 246, 196, 0.941);
font-family: 'Quattrocento Sans', sans-serif;
letter-spacing: 0.025rem;
font-variant: small-caps;
}
p,
ul {
margin-bottom: 0.3rem;
}
section h1 {
margin-bottom: 0.6rem;
font-weight: 600;
display: inline-block;
}
section h1+p {
display: inline-block;
font-size: 1.2rem;
}
section h2 {
margin-bottom: 0.6rem;
font-weight: 600;
}
section h3 {
margin-top: 0.5rem;
margin-bottom: 0.3rem;
}
@media only screen and (max-width: 768px) {
#buttons02 {
justify-content: center;
}
}
</style><!-- mnbnbxmbzxmncbzxc -->
</head>
<body class="is-loading">
<div id="wrapper">
<div id="main">
<div class="inner">
<div id="container04" class="container columns full screen">
<div class="wrapper">
<div class="inner" data-reorder="1,0" data-reorder-breakpoint="medium">
<div>
<h2 id="text04">Mak Mendelson</h2>
<p id="text03"><span class="p">UI / UX / Front-end / Graphic & Product Designer<br />Software Developer</span></p>
<ul id="buttons02" class="buttons">
<li>
<a href="#webapps" class="button n02" role="button">Web Apps</a>
</li>
<li>
<a href="#design" class="button n01" role="button">Design</a>
</li>
<li>
<a href="#gamesart" class="button n03" role="button">Games & Art</a>
</li>
</ul>
</div>
<div>
<ul id="buttons01" class="buttons">
<li>
<a rel="noopener" href="https://drive.google.com/file/d/1wZQAO3XUN4q9V0kFnipTeMztxDdeASVE/view?usp=sharing/" target="_blank" class="button n01" role="button"><svg aria-labelledby="buttons01-icon-1-title">
<title id="buttons01-icon-1-title">CV</title>
<use xlink:href="assets/icons.svg#cv"></use>
</svg><span class="label">CV / Resume</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="container07" data-scroll-id="webapps" data-scroll-behavior="default" data-scroll-offset="-6" data-scroll-speed="3" data-scroll-invisible="1" class="container default full">
<div class="wrapper">
<div class="inner">
</div>
</div>
</div>
<div id="container03" class="container default full">
<div class="wrapper">
<div class="inner">
<h2 id="text14">Web Applications</h2>
<div class="hideme">
<p id="text11">COR & PM Portals</p>
<div id="gallery02" class="gallery">
<div class="inner">
<ul>
<li>
<a href="assets/images/gallery02/7d1fa70f_original.jpg" class="thumbnail n01"><span class="frame"><img src="assets/images/gallery02/7d1fa70f.jpg" alt="Create New" data-caption="Create New" /></span></a>
<div class="caption">
<p>Create New</p>
</div>
</li>
<li>
<a href="assets/images/gallery02/453499c8_original.jpg" class="thumbnail n02"><span class="frame"><img src="assets/images/gallery02/453499c8.jpg" alt="Edit" data-caption="Edit" /></span></a>
<div class="caption">
<p>Edit</p>
</div>
</li>
<li>
<a href="assets/images/gallery02/3fee5a92_original.jpg" class="thumbnail n03"><span class="frame"><img src="assets/images/gallery02/3fee5a92.jpg" alt="View Contract Details 1" data-caption="View Contract Details 1" /></span></a>
<div class="caption">
<p>View Contract Details 1</p>
</div>
</li>
<li>
<a href="assets/images/gallery02/dfb2d995_original.jpg" class="thumbnail n04"><span class="frame"><img src="assets/images/gallery02/dfb2d995.jpg" alt="View Contract Details 2" data-caption="View Contract Details 2" /></span></a>
<div class="caption">
<p>View Contract Details 2</p>
</div>
</li>
<li>
<a href="assets/images/gallery02/50ddc6ea_original.jpg" class="thumbnail n05"><span class="frame"><img src="assets/images/gallery02/50ddc6ea.jpg" alt="Invitee Search" data-caption="Invitee Search" /></span></a>
<div class="caption">
<p>Invitee Search</p>
</div>
</li>
</ul>
</div>
</div>
<p class="project-header" id="text01">Applicant Dashboard</p>
<div id="gallery05" class="gallery">
<div class="inner">
<ul>
<li>
<a href="assets/images/gallery05/b81fa610_original.jpg" class="thumbnail n01"><span class="frame"><img src="assets/images/gallery05/b81fa610.jpg" alt="GOA Home / Dashboard" data-caption="GOA Home / Dashboard" /></span></a>
<div class="caption">
<p>GOA Home / Dashboard</p>
</div>
</li>
<li>
<a href="assets/images/gallery05/e6cc51b9_original.jpg" class="thumbnail n02"><span class="frame"><img src="assets/images/gallery05/e6cc51b9.jpg" alt="Case Search Context Menu" data-caption="Case Search Context Menu" /></span></a>
<div class="caption">
<p>Case Search Context Menu</p>
</div>
</li>
<li>
<a href="assets/images/gallery05/4ffc7e65_original.jpg" class="thumbnail n03"><span class="frame"><img src="assets/images/gallery05/4ffc7e65.jpg" alt="Case View" data-caption="Case View" /></span></a>
<div class="caption">
<p>Case View</p>
</div>
</li>
<li>
<a href="assets/images/gallery05/478ada13_original.jpg" class="thumbnail n04"><span class="frame"><img src="assets/images/gallery05/478ada13.jpg" alt="Documents View" data-caption="Documents View" /></span></a>
<div class="caption">
<p>Documents View</p>
</div>
</li>
<li>
<a href="assets/images/gallery05/a7676b84_original.jpg" class="thumbnail n05"><span class="frame"><img src="assets/images/gallery05/a7676b84.jpg" alt="Adjudicator&#39;s Workbook" data-caption="Adjudicator&#39;s Workbook" /></span></a>
<div class="caption">
<p>Adjudicator's Workbook</p>
</div>
</li>
<li>
<a href="assets/images/gallery05/737e957f_original.jpg" class="thumbnail n06"><span class="frame"><img src="assets/images/gallery05/737e957f.jpg" alt="TSA Pre - PreCheck" data-caption="TSA Pre - PreCheck" /></span></a>
<div class="caption">
<p>TSA Pre - PreCheck</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="project-container">
<p class="project-header" id="text18"><em>The Verified</em> Web App Mock-Up</p>
<div id="gallery04" class="gallery">
<div class="inner">
<ul>
<li>
<a href="assets/images/gallery04/fca6a894_original.png" class="thumbnail n01"><span class="frame deferred"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCA4NTUgNTcwIiB3aWR0aD0iODU1IiBoZWlnaHQ9IjU3MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI%2BPHJlY3QgZmlsbD0idHJhbnNwYXJlbnQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4%3D" data-src="assets/images/gallery04/fca6a894.png" alt="Login Screen" data-caption="Login Screen" /></span></a>
<div class="caption">
<p>Login Screen</p>
</div>
</li>
<li>
<a href="assets/images/gallery04/fa33e09c_original.png" class="thumbnail n02"><span class="frame deferred"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCA4NTUgNTcwIiB3aWR0aD0iODU1IiBoZWlnaHQ9IjU3MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI%2BPHJlY3QgZmlsbD0idHJhbnNwYXJlbnQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4%3D" data-src="assets/images/gallery04/fa33e09c.png" alt="Products / Tiers" data-caption="Products / Tiers" /></span></a>
<div class="caption">
<p>Products / Tiers</p>
</div>
</li>
<li>
<a href="assets/images/gallery04/52171949_original.png" class="thumbnail n03"><span class="frame"><img src="assets/images/gallery04/52171949.png" alt="Running Data Checks" data-caption="Running Data Checks" /></span></a>
<div class="caption">
<p>Running Data Checks</p>
</div>
</li>
<li>
<a href="assets/images/gallery04/5d632258_original.png" class="thumbnail n04"><span class="frame deferred"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCA4NTUgNTcwIiB3aWR0aD0iODU1IiBoZWlnaHQ9IjU3MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI%2BPHJlY3QgZmlsbD0idHJhbnNwYXJlbnQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4%3D" data-src="assets/images/gallery04/5d632258.png" alt="Account &amp; Credential Details" data-caption="Account &amp; Credential Details" /></span></a>
<div class="caption">
<p>Account & Credential Details</p>
</div>
</li>
<li>
<a href="assets/images/gallery04/a0d12ebc_original.png" class="thumbnail n05"><span class="frame"><img src="assets/images/gallery04/a0d12ebc.png" alt="Hotel Employee Credentials" data-caption="Hotel Employee Credentials" /></span></a>
<div class="caption">
<p>Hotel Employee Credentials</p>
</div>
</li>
<li>
<a href="assets/images/gallery04/f6bd599e_original.png" class="thumbnail n06"><span class="frame"><img src="assets/images/gallery04/f6bd599e.png" alt="Member Hotels" data-caption="Member Hotels" /></span></a>
<div class="caption">
<p>Member Hotels</p>
</div>
</li>
<li>
<a href="assets/images/gallery04/29b33c1f_original.png" class="thumbnail n07"><span class="frame"><img src="assets/images/gallery04/29b33c1f.png" alt="Hotel Service Vendors" data-caption="Hotel Service Vendors" /></span></a>
<div class="caption">
<p>Hotel Service Vendors</p>
</div>
</li>
</ul>
</div>
</div>
<div class="casestudy-component">
<div id="gallery04-CaseStudy" class="casestudy">
<section>
<h1>Project Overview</h1>
<p> — <strong><em>The Verified</em></strong></p>
<p><strong>Product:</strong> Credential Verification Platform</p>
<p><strong>Example Client:</strong> American Hotel & Lodging Association (AHLA)</p>
<p><strong>Platform:</strong> Web application</p>
<p><strong>Goal:</strong></p>
<div>
<div>Design a scalable credential verification platform with:</div>
<ul>
<li>Tiered employee vetting packages (Bronze → Platinum)</li>
<li>A customizable management dashboard for clients like the AHLA to view verified personnel</li>
<li>Trust Badges that signify successful credential validation</li>
</ul>
</div>
</section>
<hr />
<section>
<h2>The Problem</h2>
<p>Organizations across industries — including hospitality, healthcare, and logistics — need a flexible way to verify and manage employee trustworthiness.</p>
<p>Without an aggregating platform, verifying sensitive attributes like criminal background, financial history, or protected data access is inconsistent and often manual. The AHLA, for example, required a way to validate credentials across both internal hotel staff and third-party service vendors.</p>
</section>
<hr />
<section>
<h2>Objectives</h2>
<ul>
<li>Design a core platform (<em>The Verified</em>) that supports white-labeled deployment for multiple client organizations</li>
<li>Allow organizations to:
<ul>
<li>Select and purchase tiered credentialing packages</li>
<li>Manage employees and vendor contacts</li>
<li>Issue <strong>Trust Badges</strong> upon verification completion</li>
</ul>
</li>
<li>Provide a dashboard to sort, view, and export verified personnel data</li>
</ul>
</section>
<hr />
<section>
<h2>My Role</h2>
<p><strong>UX/UI Designer</strong></p>
<ul>
<li>Defined cross-client architecture and user flows</li>
<li>Created reusable components and visual language for badge-based trust indicators</li>
<li>Designed dashboard interfaces for personnel and vendor management</li>
<li>Helped shape positioning of <em>The Verified</em> as a modular platform serving various industries</li>
</ul>
</section>
<hr />
<section>
<h2>Design Process</h2>
<h3>Research & Discovery</h3>
<ul>
<li>Conducted stakeholder interviews to define credentialing standards by tier</li>
<li>Validated the need for scalable deployment and customizable UI for different client types</li>
<li>Studied existing trust badge systems for visual clarity and end-user comprehension</li>
</ul>
<h3>UX Design</h3>
<ul>
<li>Mapped flows for account registration, subscription, and credential review</li>
<li>Developed role-based access (admins vs. viewers) for internal org hierarchies</li>
<li>Streamlined verification status tracking and badge generation</li>
</ul>
<h3>UI Design</h3>
<ul>
<li>Created a tiered badge system (Bronze, Silver, Gold, Platinum) to indicate verification depth</li>
<li>Incorporated LinkedIn badge generation and support contact touchpoints</li>
<li>Designed visually balanced layouts for subscription selection, credential breakdowns, and dashboard reports</li>
<li>Prioritized responsive, accessible design</li>
</ul>
</section>
<hr />
<section>
<h2>Key Screens</h2>
<h3>1. Login & Registration</h3>
<p>Clean, branded login experience adaptable for different organizations</p>
<h3>2. Product Tier Selection</h3>
<p>Breakdown of verification tiers:</p>
<ul>
<li>Coverage areas</li>
<li>Lookback periods</li>
<li>Monthly pricing</li>
</ul>
<p>Allows clients to choose the right level of depth for each employee type</p>
<h3>3. Credential Activation</h3>
<ul>
<li>Confirmation screen after subscription</li>
<li>Status message ("Running Data Checks...")</li>
<li>Summary of included verifications</li>
</ul>
<h3>4. Credential Viewer</h3>
<ul>
<li>Tabbed layout for personal, financial, and behavioral categories</li>
<li>Option to flag discrepancies or generate <strong>Trust Badges</strong> for verified profiles</li>
</ul>
<h3>5. Admin Dashboards</h3>
<p><strong>AHLA Example:</strong></p>
<ul>
<li>View employees and vendors</li>
<li>Badge visibility by level</li>
<li>Contact info, department, verification status</li>
<li>Exportable reports</li>
</ul>
<p>Sidebar navigation and badge key for easy orientation</p>
</section>
<hr />
<section>
<h2>Projected Outcomes</h2>
<ul>
<li>Deliver a flexible, modular platform (<em>The Verified</em>) usable across industries</li>
<li>Enable clients like AHLA to efficiently manage trust within complex ecosystems</li>
<li>Issue <strong>Trust Badges</strong> that serve as public-facing proof of employee vetting</li>
<li>Support expansion to vendors and contractors with no loss of consistency</li>
<li>Lay groundwork for white-labeled versions tailored to additional clients</li>
</ul>
</section>
<hr />
<section>
<h2>What's next?</h2>
<ul>
<li>Add mobile dashboard support for managers in the field</li>
<li>Support batch imports for large organizations</li>
<li>Expand Trust Badge integrations (e.g., Slack, email signatures)</li>
<li>Introduce API support for syncing with HR systems and third-party verification providers</li>
</ul>
</section>
</div>
<button class="casestudy-btn" title="Open/Close Toggle"></button>
</div>
</div>
<div class="project-container">
<p class="project-header" id="text09">Applicant Dashboard - Form Wizard</p>
<div id="gallery09" class="gallery">
<div class="inner">
<ul>
<li>
<a href="assets/images/gallery09/ec7c79aa_original.jpg" class="thumbnail n01"><span class="frame"><img src="assets/images/gallery09/ec7c79aa.jpg" alt="Token Login" data-caption="Token Login" /></span></a>
<div class="caption">
<p>Token Login</p>
</div>
</li>
<li>
<a href="assets/images/gallery09/f782d60d_original.jpg" class="thumbnail n02"><span class="frame"><img src="assets/images/gallery09/f782d60d.jpg" alt="Demographic Information" data-caption="Demographic Information" /></span></a>
<div class="caption">
<p>Demographic Information</p>
</div>
</li>
<li>
<a href="assets/images/gallery09/29d32265_original.jpg" class="thumbnail n03"><span class="frame"><img src="assets/images/gallery09/29d32265.jpg" alt="Questionnaire" data-caption="Questionnaire" /></span></a>
<div class="caption">
<p>Questionnaire</p>
</div>
</li>
<li>
<a href="assets/images/gallery09/5d417adb_original.jpg" class="thumbnail n04"><span class="frame"><img src="assets/images/gallery09/5d417adb.jpg" alt="Document Downloads" data-caption="Document Downloads" /></span></a>
<div class="caption">
<p>Document Downloads</p>
</div>
</li>
<li>
<a href="assets/images/gallery09/15f204bd_original.jpg" class="thumbnail n05"><span class="frame"><img src="assets/images/gallery09/15f204bd.jpg" alt="Document Uploads" data-caption="Document Uploads" /></span></a>
<div class="caption">
<p>Document Uploads</p>
</div>
</li>
<li>
<a href="assets/images/gallery09/26966b3e_original.jpg" class="thumbnail n06"><span class="frame"><img src="assets/images/gallery09/26966b3e.jpg" alt="Summary" data-caption="Summary" /></span></a>
<div class="caption">
<p>Summary</p>
</div>
</li>
<li>
<a href="assets/images/gallery09/ef6b607f_original.jpg" class="thumbnail n07"><span class="frame"><img src="assets/images/gallery09/ef6b607f.jpg" alt="Completion Page" data-caption="Completion Page" /></span></a>
<div class="caption">
<p>Completion Page</p>
</div>
</li>
<li>
<a href="assets/images/gallery09/ed9ae183_original.jpg" class="thumbnail n08"><span class="frame"><img src="assets/images/gallery09/ed9ae183.jpg" alt="DHS Dashboard" data-caption="DHS Dashboard" /></span></a>
<div class="caption">
<p>DHS Dashboard</p>
</div>
</li>
<li>
<a href="assets/images/gallery09/7643e3bb_original.jpg" class="thumbnail n09"><span class="frame"><img src="assets/images/gallery09/7643e3bb.jpg" alt="DHS - PDF" data-caption="DHS - PDF" /></span></a>
<div class="caption">
<p>DHS - PDF</p>
</div>
</li>
<li>
<a href="assets/images/gallery09/f5829621_original.jpg" class="thumbnail n10"><span class="frame"><img src="assets/images/gallery09/f5829621.jpg" alt="DHS - Sign PDF" data-caption="DHS - Sign PDF" /></span></a>
<div class="caption">
<p>DHS - Sign PDF</p>
</div>
</li>
<li>
<a href="assets/images/gallery09/8dc39cb2_original.jpg" class="thumbnail n11"><span class="frame"><img src="assets/images/gallery09/8dc39cb2.jpg" alt="DHS - Form View" data-caption="DHS - Form View" /></span></a>
<div class="caption">
<p>DHS - Form View</p>
</div>
</li>
<li>
<a href="assets/images/gallery09/3852c12b_original.jpg" class="thumbnail n12"><span class="frame"><img src="assets/images/gallery09/3852c12b.jpg" alt="Manual Identity Document Authentication Tool" data-caption="Manual Identity Document Authentication Tool" /></span></a>
<div class="caption">
<p>Manual Identity Document Authentication Tool</p>
</div>
</li>
</ul>
</div>
</div>
<div class="casestudy-component">
<div id="gallery09-CaseStudy" class="casestudy">
<section>
<h1>Project Overview</h1>
<p> — <strong><em>Applicant Onboarding Platform</em></strong></p>
<p>This project involved the design and development of an <strong>Applicant Onboarding web application</strong> for the purposes of streamlining personnel onboarding workflows across various security-sensitive environments. The platform was designed with <strong>scalability, security, and accessibility</strong> in mind, and has been deployed in both prototype and production stages for early adopters including <strong>TelosID (Telos Corporation)</strong> and the <strong>Department of Homeland Security (DHS)</strong>.</p>
<h3><strong>Goals</strong></h3>
<div>
<div>The primary objective was to create a unified onboarding experience capable of supporting:</div>
<ul>
<li>New hire processing</li>
<li>Collateral and SCI case onboarding</li>
<li>Outgoing Visit Requests</li>
<li>Security prescreens</li>
<li>TSA PreCheck workflows</li>
</ul>
</div>
<div>
<div>Key performance metrics:</div>
<ul>
<li>68% reduction in Days to Bill</li>
<li>13× faster Pre-Screen processing than industry average</li>
<li>Automated Outgoing Visit Request workflow</li>
<li>80% error rate reduction in submitted materials</li>
</ul>
</div>
</section>
<hr />
<section>
<h2>Clients & Use Cases</h2>
<p>While the first deployments were for <strong>TelosID (TSA PreCheck)</strong> and <strong>DHS internal processing</strong>, the system was architected to support a variety of clients with customizable branding and workflow configurations.</p>
<p>Each client instance could support unique workflows, compliance needs, and documentation requirements while benefiting from the platform’s shared core architecture.</p>
</section>
<hr />
<section>
<h2>Research & Discovery</h2>
<p>The project began with a deep dive into existing federal onboarding workflows, with a focus on pain points experienced by:</p>
<ul>
<li>Applicants (e.g. redundant inputs, inaccessible forms, manual uploads)</li>
<li>Adjudicators (e.g. slow turnaround, mismatched information, error-prone data)</li>
<li>System integrators (e.g. compliance complexity, browser compatibility, legacy systems)</li>
</ul>
</section>
<hr />
<section>
<h2>My Role</h2>
<p>As a <strong>Product Designer</strong> on this project, I:</p>
<ul>
<li>Created wireframes and information architecture for the applicant journey</li>
<li>Designed high-fidelity mockups prioritizing desktop layouts</li>
<li>Built a functional prototype to demonstrate user flows and task completion for stakeholders and developers</li>
<li>Worked closely with software engineers to implement components via HTML, CSS, and JavaScript</li>
<li>Maintained design vision ownership through hands-on contributions to the final front-end</li>
<li>Participated in iterative design reviews, usability testing, and accessibility audits</li>
</ul>
</section>
<hr />
<section>
<h2>UX Design</h2>
<ul>
<li>Developed a step-by-step guided flow with persistent progress tracking</li>
<li>Prioritized form clarity and input validation, minimizing the risk of user errors</li>
<li>Streamlined complex legal and identity verification steps into digestible, sequential tasks</li>
<li>Advocated for early and consistent accessibility testing, aligned with Section 508</li>
</ul>
</section>
<hr />
<section>
<h2>UI Design</h2>
<ul>
<li>Delivered clean, accessible UI components that met Section 508, WCAG, and W3C standards</li>
<li>Designed a modular interface, enabling easy rebranding for different clients</li>
<li>Used color, typography, and whitespace to create a calm, focused experience for users dealing with high-stakes forms</li>
<li>Created consistent visual states (e.g. editing, completed, error) for checklist-style task flows</li>
<li>Integrated icons and feedback states to aid non-native English speakers and users with assistive devices</li>
</ul>
</section>
<hr />
<section>
<h2>Key Features</h2>
<h3>Guided Applicant Flow</h3>
<p>Applicants are led through a structured onboarding process:</p>
<ul>
<li>Fill in Personal Information</li>
<li>Complete a Legal Questionnaire</li>
<li>Download Required Forms</li>
<li>Upload Completed & Supporting Documents</li>
<li>Review & Submit</li>
</ul>
<p>A persistent progress tracker ensures clarity and confidence.</p>
<h3>Secure Digital Signatures</h3>
<p>An integrated in-browser signing of required documents (e.g., OF306, NDAs), with tools for drawing or typing signatures and saving securely.</p>
<h3>Document Verification</h3>
<p>The adjudicator dashboard includes OCR-assisted ID verification, cross-referencing submitted documents with application and database records to flag mismatches.</p>
<h3>Document Management</h3>
<p>Applicants can:</p>
<ul>
<li>Download customized form packets</li>
<li>Upload signed forms and identity documents</li>
<li>View completed forms prior to submission</li>
</ul>
</section>
<hr />
<section>
<h2>Accessibility</h2>
<p>The system complies fully with Section 508, which is a superset of WCAG and W3C accessibility standards. Accessibility features include:</p>
<ul>
<li>Full keyboard navigation</li>
<li>Screen reader-friendly layouts and labels</li>
<li>Color contrast and legibility support</li>
<li>ARIA roles and error handling for assistive tech users</li>
</ul>
</section>
<hr />
<section>
<h2>Outcomes</h2>
<ul>
<li>68% improvement in processing time from application to billing</li>
<li>Automated workflows significantly reduce staffing burden</li>
<li>Enhanced document accuracy with integrated OCR and validation</li>
<li>Universal usability through full accessibility compliance</li>
<li>Scalable across agencies with configurable front-end branding and workflows</li>
</ul>
</section>
</div>
<button class="casestudy-btn" title="Open/Close Toggle"></button>
</div>
</div>
<div class="project-container">
<p class="project-header" id="text10">Bureau of Educational and Cultural Affairs: <br>Knowledge Management Tool</p>
<div id="gallery01" class="gallery">
<div class="inner">
<ul>
<li>
<a href="assets/images/gallery01/65e11b4f_original.jpg" class="thumbnail n01"><span class="frame"><img src="assets/images/gallery01/65e11b4f.jpg" alt="Access Notice and Consent" data-caption="Access Notice and Consent" /></span></a>
<div class="caption">
<p>Access Notice and Consent</p>
</div>
</li>
<li>
<a href="assets/images/gallery01/3f4c9ab1_original.jpg" class="thumbnail n02"><span class="frame"><img src="assets/images/gallery01/3f4c9ab1.jpg" alt="Participant Search" data-caption="Participant Search" /></span></a>
<div class="caption">
<p>Participant Search</p>
</div>
</li>
<li>
<a href="assets/images/gallery01/ba295cd4_original.jpg" class="thumbnail n03"><span class="frame"><img src="assets/images/gallery01/ba295cd4.jpg" alt="Participant Search - Expanded" data-caption="Participant Search - Expanded" /></span></a>
<div class="caption">
<p>Participant Search - Expanded</p>
</div>
</li>
<li>
<a href="assets/images/gallery01/e072824e_original.jpg" class="thumbnail n04"><span class="frame"><img src="assets/images/gallery01/e072824e.jpg" alt="Funding Item" data-caption="Funding Item" /></span></a>
<div class="caption">
<p>Funding Item</p>
</div>
</li>
<li>
<a href="assets/images/gallery01/3dc7e14c_original.jpg" class="thumbnail n05"><span class="frame"><img src="assets/images/gallery01/3dc7e14c.jpg" alt="Funding Item - Edit Modal" data-caption="Funding Item - Edit Modal" /></span></a>
<div class="caption">
<p>Funding Item - Edit Modal</p>
</div>
</li>
<li>
<a href="assets/images/gallery01/aa2e3481_original.jpg" class="thumbnail n06"><span class="frame"><img src="assets/images/gallery01/aa2e3481.jpg" alt="Travel Overview" data-caption="Travel Overview" /></span></a>
<div class="caption">
<p>Travel Overview</p>
</div>
</li>
<li>
<a href="assets/images/gallery01/7306d991_original.jpg" class="thumbnail n07"><span class="frame"><img src="assets/images/gallery01/7306d991.jpg" alt="Travel Stop Details" data-caption="Travel Stop Details" /></span></a>
<div class="caption">
<p>Travel Stop Details</p>
</div>
</li>
<li>
<a href="assets/images/gallery01/a4c76a64_original.jpg" class="thumbnail n08"><span class="frame"><img src="assets/images/gallery01/a4c76a64.jpg" alt="Add Location Modal" data-caption="Add Location Modal" /></span></a>
<div class="caption">
<p>Add Location Modal</p>
</div>
</li>
<li>
<a href="assets/images/gallery01/0fa860b2_original.jpg" class="thumbnail n09"><span class="frame"><img src="assets/images/gallery01/0fa860b2.jpg" alt="Travel Groups Modal" data-caption="Travel Groups Modal" /></span></a>
<div class="caption">
<p>Travel Groups Modal</p>
</div>
</li>
</ul>
</div>
</div>
<div class="casestudy-component">
<div id="gallery01-CaseStudy" class="casestudy">
<section>
<h1>Project Overview</h1>
<p> — <strong><em>Knowledge Management Tool (KMT)</em></strong></p>
<p>This project focused on the design of a <strong>Knowledge Management Tool</strong> for the <strong>Bureau of Educational and Cultural Affairs (ECA)</strong>, a division of the U.S. Department of State. The system was intended to provide streamlined access to program data, documentation, and participant tracking across a range of international cultural exchange initiatives.</p>
<p>IDEO was initially contracted to provide a design vision, producing a style guide and sample UI screens. The remainder of the design and implementation work was carried out by our team at <strong>Buchanan & Edwards</strong>, who took over to build the complete interface and workflows.</p>
</section>
<hr />
<section>
<h2>Clients & Use Cases</h2>
<p>The KMT platform was built to serve multiple ECA offices and administrators with varying permission levels. Core use cases included:</p>
<ul>
<li>Tracking participants across programs, sub-programs, and travel periods</li>
<li>Managing funding sources, grants, and expenditures</li>
<li>Creating and assigning participant groups to travel stops</li>
<li>Recording and accessing program impact data over time</li>
</ul>
</section>
<hr />
<section>
<h2>Research & Discovery</h2>
<p>While the initial visual style and a handful of interaction patterns were provided by IDEO, our team conducted ongoing research into ECA’s evolving requirements, including:</p>
<ul>
<li>Reviewing grant reporting and participant management workflows</li>
<li>Working with stakeholders to refine data visibility and permission requirements</li>
<li>Assessing technical limitations and integration needs for legacy systems</li>
</ul>
</section>
<hr />
<section>
<h2>My Role</h2>
<p>As the <strong>Interface Designer</strong> on this project, I was responsible for:</p>
<ul>
<li>Translating IDEO’s style guide into fully realized UI components and layouts</li>
<li>Designing and iterating on high-fidelity mockups across all major workflows</li>
<li>Collaborating with business analysts and developers to support shifting requirements</li>
<li>Ensuring design consistency and usability across screens not covered by the original design vision</li>
<li>Providing HTML, CSS, and front-end implementation support where needed</li>
</ul>
</section>
<hr />
<section>
<h2>UX Design</h2>
<ul>
<li>Developed clear, step-driven flows for complex user actions like travel planning and funding allocation</li>
<li>Structured UI layouts to prioritize discoverability and reduce training burden for State Department staff</li>
<li>Worked to balance IDEO’s high-level design vision with practical usability across evolving feature sets</li>
<li>Proposed reusable interaction patterns to maintain coherence and reduce developer overhead</li>
</ul>
</section>
<hr />
<section>
<h2>UI Design</h2>
<ul>
<li>Extended the provided visual style into a scalable design system</li>
<li>Maintained adherence to accessibility best practices throughout the interface</li>
<li>Designed tabular layouts for high-density participant and funding data</li>
<li>Integrated visual cues and icons to improve user orientation and feedback</li>
<li>Provided responsive layouts for consistent experience across screen sizes</li>
</ul>
</section>
<hr />
<section>
<h2>Key Features</h2>
<h3>Participant Tracking</h3>
<p>A centralized dashboard allowed administrators to view, filter, and export participant data, organized by fiscal year, program, and project.</p>
<h3>Group Assignment & Travel Planning</h3>
<p>Users could create participant groups and assign them to travel stops, with a clear overview of arrivals, departures, and group compositions.</p>
<h3>Funding Management</h3>
<p>Administrators could allocate funds from various grant sources, with tracking for direct and in-kind contributions and unassigned balances.</p>
<h3>Location & Travel Stop Management</h3>
<p>A guided form allowed entry of location metadata and mapping coordinates for each travel stop destination.</p>
<h3>Consent & Policy Acknowledgement</h3>
<p>The application began with a formal system use notice to ensure compliance with federal access policies and security expectations.</p>
</section>
<hr />
<section>
<h2>Accessibility</h2>
<p>The platform was designed to align with <strong>WCAG standards</strong> (<strong>Section 508</strong> did not yet include WCAG at the time of this project). Accessibility considerations included:</p>
<ul>
<li>Keyboard navigation and form control labeling</li>
<li>Color contrast ratios for legibility</li>
<li>ARIA support for complex data tables</li>
<li>Minimal use of hidden or dynamic content without clear user feedback</li>
</ul>
</section>
<hr />
<section>
<h2>Outcomes</h2>
<ul>
<li>Created a complete and extensible UI system from IDEO’s partial vision</li>
<li>Delivered high-fidelity screens and prototypes aligned with stakeholder needs</li>
<li>Improved workflow clarity for travel planning, funding, and participant reporting</li>
<li>Collaborated across disciplines to adapt to evolving federal requirements</li>
<li><em>Note: The project was ultimately discontinued due to shifting client priorities; however, the design system and workflows were completed and positioned for future reuse.</em></li>
</ul>
</section>
</div>
<button class="casestudy-btn" title="Open/Close Toggle"></button>
</div>
</div>
</div>
</div>
</div>
<div id="container10" data-scroll-id="design" data-scroll-behavior="default" data-scroll-offset="-6" data-scroll-speed="3" data-scroll-invisible="1" class="container default full">
<div class="wrapper">
<div class="inner">
</div>
</div>
</div>
<div id="container02" class="container default full">
<div class="wrapper">
<div class="inner">
<h2 id="text21">Design</h2>
<p class="project-header" id="text12">Graphics & Advertisements</p>
<div id="gallery07" class="gallery">
<div class="inner">
<ul>
<li>
<a href="assets/images/gallery07/84707373_original.png" class="thumbnail n01"><span class="frame deferred"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCA0NDAgNTcwIiB3aWR0aD0iNDQwIiBoZWlnaHQ9IjU3MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI%2BPHJlY3QgZmlsbD0idHJhbnNwYXJlbnQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4%3D" data-src="assets/images/gallery07/84707373.png" alt="Invitation Flyer created using Adobe Illustrator, featuring a coffee cup and saucer" data-caption="Invitation Flyer" /></span></a>
<div class="caption">
<p>Invitation Flyer</p>
</div>
</li>
<li>
<a href="assets/images/gallery07/007ff5b1_original.jpg" class="thumbnail n02"><span class="frame"><img src="assets/images/gallery07/007ff5b1.jpg" alt="Coffee Cup & Saucer
made in Adobe Illustrator" data-caption="Invitation Detail -
Coffee Cup &amp; Saucer" /></span></a>
<div class="caption">
<p>Invitation Detail -
Coffee Cup & Saucer</p>
</div>
</li>
<li>
<a href="assets/images/gallery07/61b4a6bf_original.jpg" class="thumbnail n03"><span class="frame"><img src="assets/images/gallery07/61b4a6bf.jpg" alt="Printable Job Posting card for distribution on campuses.
Made in Adobe Illustrator" data-caption="Job Posting - For Print" /></span></a>
<div class="caption">
<p>Job Posting - For Print</p>
</div>
</li>
<li>
<a href="assets/images/gallery07/f421d036_original.jpg" class="thumbnail n04"><span class="frame"><img src="assets/images/gallery07/f421d036.jpg" alt="TheAssociated Centennial Magazine Ad made in Adobe Illustrator, featuring iconic buildings from the Baltimore Inner Harbor" data-caption="TheAssociated Centennial Magazine Ad" /></span></a>
<div class="caption">
<p>TheAssociated Centennial Magazine Ad</p>
</div>
</li>
<li>
<a href="assets/images/gallery07/bef9d3cb_original.jpg" class="thumbnail n05"><span class="frame"><img src="assets/images/gallery07/bef9d3cb.jpg" alt="Convention Floor Banner Advertisement" data-caption="Convention Floor Banner Advertisement" /></span></a>
<div class="caption">
<p>Convention Floor Banner Advertisement</p>
</div>
</li>
<li>
<a href="assets/images/gallery07/c8859fd0_original.jpg" class="thumbnail n06"><span class="frame"><img src="assets/images/gallery07/c8859fd0.jpg" alt="Convention Floor Banner Advertisement - Printed" data-caption="Convention Floor Banner Advertisement - Printed" /></span></a>
<div class="caption">
<p>Convention Floor Banner Advertisement - Printed</p>
</div>
</li>
<li>
<a href="assets/images/gallery07/566b32a8_original.png" class="thumbnail n07"><span class="frame deferred"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxMDEzIDU3MCIgd2lkdGg9IjEwMTMiIGhlaWdodD0iNTcwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cmVjdCBmaWxsPSJ0cmFuc3BhcmVudCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg%3D%3D" data-src="assets/images/gallery07/566b32a8.png" alt="Big Red Button graphic made in Adobe Illustrator" data-caption="Big Red Button graphic" /></span></a>
<div class="caption">
<p>Big Red Button graphic</p>
</div>
</li>
<li>
<a href="assets/images/gallery07/2dffb6ac_original.jpg" class="thumbnail n08"><span class="frame"><img src="assets/images/gallery07/2dffb6ac.jpg" alt="Full Page Magazine Ad featuring detailed Service Offerings, awards, and a QR Code leading to a Gartner article recognizing the Company and Service" data-caption="Full Page Magazine Ad" /></span></a>
<div class="caption">
<p>Full Page Magazine Ad</p>
</div>
</li>
</ul>
</div>
</div>
<p class="project-header" id="text13">Data Visualization & Workflows</p>
<div id="gallery08" class="gallery">
<div class="inner">
<ul>
<li>
<a href="assets/images/gallery08/e48029e6_original.jpg" class="thumbnail n01"><span class="frame"><img src="assets/images/gallery08/e48029e6.jpg" alt="Fortune 500 Client Case Study Data Graphic" data-caption="Fortune 500 Client Case Study Data Graphic" /></span></a>
<div class="caption">
<p>Fortune 500 Client Case Study Data Graphic</p>
</div>
</li>
<li>
<a href="assets/images/gallery08/17f0bd53_original.jpg" class="thumbnail n02"><span class="frame deferred"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCA4ODEgNTcwIiB3aWR0aD0iODgxIiBoZWlnaHQ9IjU3MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI%2BPHJlY3QgZmlsbD0iI2RjZGVlMyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg%3D%3D" data-src="assets/images/gallery08/17f0bd53.jpg" alt="Comprehensive Workflow - Risk Management" data-caption="Comprehensive Workflow - Risk Management" /></span></a>
<div class="caption">
<p>Comprehensive Workflow - Risk Management</p>
</div>
</li>
<li>
<a href="assets/images/gallery08/205ff50f_original.jpg" class="thumbnail n03"><span class="frame"><img src="assets/images/gallery08/205ff50f.jpg" alt="Benefits of Product - Champion Slide" data-caption="Benefits of Product - Champion Slide" /></span></a>
<div class="caption">
<p>Benefits of Product - Champion Slide</p>
</div>
</li>
<li>
<a href="assets/images/gallery08/ba63ff64_original.jpg" class="thumbnail n04"><span class="frame"><img src="assets/images/gallery08/ba63ff64.jpg" alt="Upgrade Process Workflow" data-caption="Upgrade Process Workflow" /></span></a>
<div class="caption">
<p>Upgrade Process Workflow</p>
</div>
</li>
<li>
<a href="assets/images/gallery08/9adcd970_original.jpg" class="thumbnail n05"><span class="frame"><img src="assets/images/gallery08/9adcd970.jpg" alt="Third-party Application Integration Graphic" data-caption="Third-party Application Integration Graphic" /></span></a>
<div class="caption">
<p>Third-party Application Integration Graphic</p>
</div>
</li>
</ul>
</div>
</div>
<p class="project-header" id="text16">Branding & Logo work</p>
<div id="gallery12" class="gallery">
<div class="inner">
<ul>
<li>
<a href="assets/images/gallery12/c04cc74f_original.png" class="thumbnail n01"><span class="frame deferred"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxOTAwIDU3MCIgd2lkdGg9IjE5MDAiIGhlaWdodD0iNTcwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cmVjdCBmaWxsPSJ0cmFuc3BhcmVudCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg%3D%3D" data-src="assets/images/gallery12/c04cc74f.png" alt="Variant for Company&#39;s 15th anniversary" data-caption="Variant for Company&#39;s 15th anniversary" /></span></a>
<div class="caption">
<p>Variant for Company's 15th anniversary</p>
</div>