-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaivoice.html
571 lines (561 loc) · 32 KB
/
aivoice.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- Primary Meta Tags -->
<title>AI Voice Assistant Case Study</title>
<meta name="title" content="Shardé Heim - AI Voice Assistant Case Study" />
<meta name="description" content="Designing the build experience of a Voice AI assistant" />
<meta name="keywords" content="Portfolio, Design Portfolio, Product Designer, UX Designer, UI Designer, Interface Designer, London Designer, Voice AI, Case Study">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.shardeheim.com/aivoice" />
<meta property="og:title" content="Shardé Heim - AI Voice Assistant Case Study" />
<meta property="og:description" content="Designing the build experience of a Voice AI assistant" />
<meta property="og:image" content="images/metaphoto6.jpg" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://www.shardeheim.com/aivoice" />
<meta property="twitter:title" content="Shardé Heim - AI Voice Assistant Case Study" />
<meta property="twitter:description" content="Designing the build experience of a Voice AI assistant" />
<meta property="twitter:image" content="images/metaphoto6.jpg" />
<!-- Links -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,500i,700,800" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/javascript.js" type="text/javascript" defer></script>
</head>
<body>
<!-- nav one for web -->
<nav>
<div class="fade-in-element">
<div class="topnav">
<div class="topNavLeft">
<div class="navleftwidth1"><a href="/#work">Work</a></div>
<div class="navleftwidth2"><a href="/#experience">Experience</a></div>
</div>
<div class="logo">
<div class="LogoIcons">
<a href="/"><img class="activeLogoIcons" src="images/logo.svg" alt="Logo"/></a>
<a href="/"><img class="hoverLogoIcons" src="images/HLogo2.png" alt="HLogo"/></a>
</div>
</div>
<div class="topNavRight">
<div class="navrightwidth3"><a href="https://www.shardeheim.com/images/sharderesume.pdf" target="_blank">Resumé</a></div>
<div class="navrightwidth4"><a href="about">About</a></div>
</div>
</div>
</div>
</nav>
<!-- nav two for mobile -->
<div class="topMobilelNav" class="fade-in-element">
<nav class="mobile-nav">
<a href="/#work">Work</a>
<a href="/#experience">Experience</a>
<a href="about">About</a>
<a href="https://www.shardeheim.com/images/sharderesume.pdf"
target="_blank" >Resumé</a>
</nav>
<div class="mobileNavbLogo">
<a href="/"><img height="45" src="images/logo.svg" alt="MobileLogo" /></a>
</div>
<button class="hamburger" aria-label="Hamburger Menu">
<div class="bar"></div>
</button>
</div>
<!-- above fold content -->
<div class="caseStudyTopContainer fade-in-element">
<div class="companyInfo">
<h1>Voice AI Assistant</h1>
<img height="40" src="images/CTlogoCasestudy.svg" alt="CTLogoImage">
</div>
<div class="caseStudyDescription">
<p>The process of redesigning the analytics page for a digital AI Voice Assistant</p>
</div>
<div class="rollandtimeleft">
<h3>Roles</h3>
<div class="roleTags">
<div class="ProductDesignTag">
Product Desgin
</div>
<div class="UXTag">
UX Design
</div>
<div class="UITag">
UI Design
</div>
</div>
</div>
<div class="rollandtimeright">
<h3>Time</h3>
<div class="tableDate">
Sep 2022 - Jan 2023
</div>
</div>
</div>
<!-- image swivel -->
<div class="imageSwivel fade-in-element">
<div class="imageSwivelWrapper">
<h1 class="SwivelTopImage">
<img src="images/CaseStudyTopImage.png" height="280" alt="VoiceAiHeaderTop">
</h1>
<h1 class="SwivelDownImage">
<img src="images/CaseStudyBottomImage.png" height="280" alt="VoiceAiHeaderTop">
</h1>
</div>
</div>
<!-- Entire Wrapper-->
<div class="container-wrapper fade-in-element">
<nav class="sidebarNav">
<div class="container">
<div class="sidebar">
<li class="section-1">
<img src="images/book.svg" width="17"height="17" alt="Context"/>
<a href="#section-1">Context</a>
</li>
<li class="section-2">
<img src="images/notification-status.svg" alt="Overview" width="17"height="17"/>
<a href="#section-2">Overview</a>
</li>
<li class="section-3">
<img src="images/people.svg" alt="UserFeedback" width="17" height="17"/>
<a href="#section-3">User Feedback</a>
</li>
<li class="section-4">
<img src="images/flash-circle.svg" alt="DefiningRequiremnts" width="17" height="17"/>
<a href="#section-4">Defining the problem</a>
</li>
<li class="section-5">
<img src="images/layer.svg" alt="Requirements" width="17" height="17"/>
<a href="#section-5" >Requirements</a >
</li>
<li class="section-6">
<img src="images/search-status.svg" alt="Research" width="17" height="17"/>
<a href="#section-6" >Research</a >
</li>
<li class="section-7">
<img src="images/pen-tool.svg" width="17"height="17" alt="Wireframe"/>
<a href="#section-7" >Ideating & wireframes</a>
</li>
<li class="section-8">
<img src="images/glass.svg" alt="testings" width="17"height="17"/>
<a href="#section-8" >First testing round</a>
</li>
<li class="section-9">
<img src="images/figma.svg" alt="Design" width="17" height="17"/>
<a href="#section-9" >High fidelity design</a>
</li>
<li class="section-10">
<img
src="images/glass.svg" alt="testing" width="17" height="17"/>
<a href="#section-10" >Second testing round</a>
</li>
<li class="section-11">
<img src="images/data.svg" alt="Implementation" width="17" height="17"/>
<a href="#section-11">Implementation</a >
</li>
<li class="section-12">
<img src="images/chart-2.svg" alt="Results" width="17" height="17"/>
<a href="#section-12" >Results</a >
</li>
<li class="section-13">
<img src="images/teacher.svg" alt="Learnings" width="17" height="17"/>
<a href="#section-13" >Learnings</a >
</li>
<li class="section-14">
<img src="images/arrow-up.svg" alt="Top" width="17" height="17"/>
<a href="#section-1" >Top</a >
</li>
</div>
</div>
</nav>
<!-- content-->
<section id="section-1" class="sectionImage">
<div class="container-content">
<h4>Context</h4>
<p> In late 2021, Curious Thing went through a substantial product pivot — from an
<a href="https://www.shardeheim.com/airecruitment">AI Recruitment Software product</a> to a mass knowledge discovery and data gathering B2B platform. During early 2022, CT’s voice AI assistant contacted over 150,000 covid-affected businesses in one week to identify where human assistance was needed.
<br><br>
<b> Key roles: </b> Leading product design for the client portal and internal campaign builder, owning the entire design roadmap, contributing to the broader product roadmap, managing junior design team members, and making the final design decisions on branding, style, website etc.
<br>
<br>
<br>
</p>
</div>
</section>
<section id="section-2" class="sectionImage">
<div class="container-content">
<h4>Overview</h4>
<p>
Sitting within the client portal web-app, the analytics page gives customers an in-depth visualisation of the progress of their campaign. The main users of this page were a handful of clients (campaign managers), but predominantly CT’s customer success team.
<br><br>
<b>Project responsibility:</b> I was responsible for the analytics page redesign from its initial conception, design (UX and UI), to overseeing its implementation.
<br><br>
<b>The Team:</b> I worked with a front-end and a back-end engineer to bring this to life, a junior UI designer and the customer success team manager.
</p>
<!-- Image Slider Before and After -->
<div class="sliderWrapper">
<div class="BeforeAndAfterSliderContainer">
<div class="BeforeAndAfterSlider">
<div class="SliderImageOne"><img src="images/SliderImageOne.jpg" height="570px" width="100%" alt="beforeImage"></div>
<div class="SliderImageTwo"><img src="images/SliderImageTwo.jpg" height="570px" width="100%" alt="afterImage"></div>
</div>
<input
type="range"
min="0"
max="100"
value="50"
class="slider"
aria-label="percentage of before photo shown"/>
<div class="slider-line"> </div>
<div class="slider-button" aria-hidden="true">
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
viewBox="0 0 256 256">
<rect
width="256"
height="256"
fill="none"/>
<line
x1="128"
y1="40"
x2="128"
y2="216"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"/>
<line
x1="96"
y1="128"
x2="16"
y2="128"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"/>
<polyline
points="48 160 16 128 48 96"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"/>
<line
x1="160"
y1="128"
x2="240"
y2="128"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"/>
<polyline
points="208 96 240 128 208 160"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"/>
</svg>
</div>
</div>
<div class="ImageSubHeadingNoPaddingTop">
Analytics Page UI - Before and After Redesign
</div>
</div>
</div>
</section>
<section id="section-3" class="sectionImage">
<div class="container-content">
<h4>User feedback</h4>
<p> At the time, we had no internal tooling to indicate client usage within the platform. To work around this, I was conducting weekly interviews and feedback sessions with our external clients and internal customer success team to see and hear first hand how they were using our product.
<br/>
<br/>
<br/>
</p>
<div class="subHeading">
<img src="images/profile-2user.svg" alt="testing" width="17" height="17"/> Takeaways from Client feedback across 4 sessions
</div>
<p>
<span>•</span> Interested in more qualitative data (what people are saying) <br/>
<span>•</span> Unsure how to extract useful data from the analytics page, quite overwhelming <br/>
<span>•</span> Mainly using the overview page for insights, not the analytics page<br/>
<span>•</span> Would often screenshot the analytics page to share progress with their higher-ups
<br/>
<br/>
</p>
<div class="subHeading">
<img src="images/user-octagon.svg" alt="testing" width="17" height="17"/> Takeaways from Customer Success (CS) feedback
</div>
<p>
<span>•</span> CS spending 5+hrs/client/week extracting data from the overview, analytics and results pages, analysing it and presenting it to the clients via powerpoint.<br/>
<span>•</span> Each powerpoint had to be customised to each clients’ definition of success. <br/>
<span>•</span> Current conversation flow was not visible to the client.
</p>
<div class="SmallerSectionImage"><img src="images/UserFeedbackImage.jpg" width="100%" alt="placeholderimage"></div>
<br>
</div>
</section>
<section id="section-4" class="sectionImage">
<div class="container-content">
<h4>Defining the problem</h4>
<p>The feedback was simple: our analytics page was not useful. Our CS team was using bandaids as temporary fixes.
<br/><br/>I needed a clear problem statement to ensure we would tackle the heart of the problem and develop an actual value-adding solution. To get this, I started with a <b>MECE (Mutually Exclusive Collectively Exhaustive) Issue Tree </b> to help me find the most important part of the problem and focus on it.
</p>
<div>
<img src="images/MECE.jpg" width="100%" alt="placeholderimage">
</div>
<div class="SmallerImageSubHeading">
Issue tree for why there has been low adoption of the analytics page
</div>
<br/>
<br/>
<p>Then, I developed a <b>SCQA Problem Statement</b> to share with the team and stakeholders.
</p>
<div>
<img src="images/SCQA.jpg" width="100%" alt="placeholderimage">
</div>
<div class="SmallerImageSubHeading">
Analytics page redesign SCQA Problem Statement
</div>
<br/>
<br/>
<p>I added the problem to our ideas column in the product roadmap for discussion with the CTO, CEO and Head of Solution.
<br>
<br>
</p>
</div>
</section>
<section id="section-5" class="sectionImage">
<div class="container-content">
<h4>Requirements</h4>
<p>How confident was I that this improvement would make enough impact to be worth the effort?
I wanted to gauge engineering effort and gather a few more requirements before the next product meeting.
<br/><br/>
Based on two requirement gather meetings with our CS lead and lead engineer, I created a requirements document outlining the two main streams of improvement:
</p>
<div>
<img src="images/RequirmentsImages.jpg" width="100%" alt="placeholderimage">
</div>
<p>I then used the <b>RICE (Reach, Impact, Confidence, and Effort)</b> scoring model as a cost-benefit analysis to help contextualise whether this particular feature was worth pursuing:
</p>
<div>
<img src="images/RICE.jpg" width="100%" alt="placeholderimage">
</div>
<p>I shared both the requirements doc and RICE estimate with the product stakeholders and it was given the go ahead. This feature was medium urgency, so design would get designs ready for engineering to more accurately estimate effort, which would then be separately staged.
</p>
<br/>
</div>
</section>
<section id="section-6" class="sectionImage">
<div class="container-content">
<h4>Research</h4>
<p>
A Junior UI designer and I started the research process by creating three competitor analysis breakdowns, looking at how they showcased qualitative data, what insights they showed, and looking for visual appeal.
<br><br>
For inspiration, we looked at Cognigy, Voyage AI Studio and Twillio Studio, all players in the Voice AI space.
<br><br>
Researching complex filtering systems gave me an idea how we would could display different success metrics for our clients. Most of them used a system of IF and ELSE statements to create conditions that had to be met to display the data.
<br><br>
What if we could do something along those lines but for the custom success metrics? And not just IF and ELSE statements but also OR and AND, to cover every possible path a customer could go down.
</p>
<div>
<img src="images/Research.jpg" width="100%" alt="placeholderimage">
</div>
<div class="ImageSubHeading">
Cognigy UI, Vonage AI Studio and Twilio Studio UI
</div>
</div>
</section >
<section id="section-7" class="sectionImage">
<div class="container-content">
<h4>Ideating & wireframes </h4>
<p>
Next, I started the process of wire framing what the user journey and rough UI would look like. After multiple white board sessions, I started paper sketching some mockups. Mapping out the user experience outline by hand is always my first step towards anything visual.
<br><br>
The first few versions of the flow diagram conceptualised the conversation flow cascading down instead of side to side — and when a user clicked into each question, it would open up a panel showing further data on the side.
</p>
<div>
<img src="images/WireframeOne.jpg" width="100%" alt="placeholderimage">
</div>
<p>
I originally had the custom success metrics displayed at the top of the analytics page but created by CS within our campaign builder tool (this changed after testing). The creation of custom metrics was a series of powerful, targeted filters that would set up the condition of a metric.
</p>
<div>
<img src="images/WireframeTwo.jpg" width="100%" alt="placeholderimage">
</div>
</div>
</section >
<section id="section-8" class="sectionImage">
<div class="container-content">
<h4>First testing round</h4>
<p>
I conducted testing sessions with each of our customer success team members (3 in total), taking them through the paper prototypes before I started the detailed UI.
<br><br>
Their main feedback was that creation of custom metrics didn’t belong in the campaign builder tool but rather in the actual analytics page. It would be easier for CS to create the metric cards on the analytics page (which they were already on) without having to jump between two separate platforms. This meant we needed a separate view for CS and for clients.
<br>
<br>
</p>
</div>
</section>
<section id="section-9" class="sectionImage">
<div class="container-content">
<h4>High fidelity designs </h4>
<p>
Using our UI Components Library not only meant design could come together quickly, but development as well. I had prepared the first version of our library for the previous <a href="https://www.shardeheim.com/airecruitment"> AI Job Interviewer product</a>, and with the help of my junior, it evolved to what you see below.
</p>
<div>
<img src="images/ComponentLibrary.jpg" width="100%" alt="placeholderimage">
</div>
<p>
Leveraging the UI Components Library allowed the high-fidelity designs to come together quickly. Depending on the size of the design project, I normally bypass low fidelity digital design: I find that using a well functioning components library gets you 90% of the way there and it actually takes longer to simplify the designs.
<br><br>
Building and prototyping in Figma meant better testing and handover with clients and developers. The final result is below.
<div>
<img src="images/HighFidelityDesigns2.jpg" width="100%" alt="placeholderimage">
</div>
<div class="ImageSubHeadingNoPaddingBottom">
Conversation flow final designs
</div>
<video width="100%" autoplay loop muted>
<source src="images/HighFidelityMovie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="ImageSubHeadingNoPaddingBottom">
Custom success metrics configuration designs
</div>
<br>
</p>
</div>
</section>
<section id="section-10" class="sectionImage">
<div class="container-content">
<h4>Second testing round</h4>
<p>
I then conducted a second round of testing with customer success as well as our clients. CS testing revealed the need for more conditions for the custom metrics as well as the ability to export the conversation flow as an image (to replace screenshotting).
<br><br>
Client feedback session were conducted over zoom. I took them through the prototype and they were extremely positive. The only additional feedback was the same as CS: they also wanted the ability to export the conversation flow as a image. Those updates were made.
<br>
<br>
</p>
</div>
</section>
<section id="section-11" class="sectionImage">
<div class="container-content">
<h4>Implementation</h4>
<p>I take pride in my design to developer handover as I once was a front end engineer. I put together a product document for engineering outlining the problem and solution, the business ‘why’, the list of new features, the requirements, metric rules and the before and after UI.
<br><br>
After the first reverse scoping meeting with the CTO and front-end and back-end engineers, the dev estimation for the feature was larger than originally expected, particularly to implement the conversational flow UI.
<br><br>
To deliver immediate value to our clients, the feature was split into two stages, first adding just the custom metrics to the analytics page but keeping the old conversation flow. This would substantially save on CS’s time and deliver immediate value for our clients. Then, conversation flow would be updated in a later round of improvements.
<br><br>
Once the first round of implementation was done, it was my job to undertake UAT testing and give functional and design sign off before the feature was released. During my UAT testing, I put together a sheet with all of my feedback prioritised by low, medium, high and urgent fixes before the feature was to be released.
</p>
<div>
<img src="images/Implimentation.jpg" width="100%" alt="placeholderimage">
</div>
<div class="ImageSubHeading">
UI with the new campaign metrics section but keeping the old conversation flow diagram
</div>
</div>
</section>
<section id="section-12" class="sectionImage">
<div class="container-content">
<h4>Results</h4>
<p>
A week after phase 1 of the feature went live, I conducted a feedback session with our customer success team to monitor how they and the clients were finding it. The feedback was very positive from both sides. CS were still using the powerpoint for the time being but it was now populated with data from the analytics page so it was taking no time at all to put together. Their intention in the future through onboarding was to slowly phase out the powerpoint and instead conduct a live session with clients going over the results within the dashboard.
<br><br>
A follow-up improvement that came out of the session was a list of rules and definitions of what the metics meant, e.g. when we say a customer reached a step, did they finish it, start it, or just finish the previous step? This was to make sure there was no room for confusion.
</p>
<br>
<br>
</div>
</section>
<section id="section-13" class="sectionImage">
<div class="container-content">
<h4>Learnings</h4>
<p>
It is a shame that I never go to see the second half of the feature, the new conversation flow, come into fruition, as I left CT before it was built. Seeing the custom success metrics being utilised by our team was very rewarding. Some of my main learnings from this project are:
<br><br><br>
</p>
<div class="subHeading">
<img src="images/timer.svg" alt="testing" width="17" height="17"/> Spend as much time as you can defining the problem at the start
</div>
<p>
I am very happy with how much time was spent determining the actual problem and what would add the most value for the clients/internal team. This meant we were very confident that the solution we put forward would solve the problem. I would have loved internal tooling and data to help support the findings from the verbal interviews. If I could do it over, I would push even harder to set up internal tooling.
<br><br>
</p>
<div class="subHeading">
<img src="images/glass-1.svg" alt="testing" width="17" height="17"/> Test at every opportunity
</div>
<p>
Something that I am constantly reminded of is the importance of multiple pulse checks with your users at each stage of the design process. Little check ins make sure you don’t waste time on design that will have to be redone later.
<br><br>
</p>
<div class="subHeading">
<img src="images/magicpen.svg" alt="testing" width="17" height="17"/> Value add does’t end at the UI
</div>
<p>
Something I re-learnt during the problem is not to forget about help documents and breakdowns, especially if you are implementing quite a complex and powerful tool. If the entire CS team was to turn over, is there enough documentation for a new team to understand this tool?
</p>
</div>
</section>
</div>
<!-- Next and Prev Wrapper -->
<div class="prevnextwrapper fade-in-element">
<div class="prev">
<a href="sunbrella"><img height="13" src="images/blue-arrow-left.svg" alt="BlueArrowLeftImage"> Sunbrella project</a>
</div>
<div class="next">
<a href="airecruitment">AI Job Interviewer project <img height="13" src="images/blue-arrow.svg" alt="BlueArrowRightImage"></a>
</div>
</div>
<!-- full width photo -->
<div class="fullwidthphoto fade-in-element"><img src="images/postItNotes.jpg" width="100%" alt="placeholderimage"></div>
<!--Footer-->
<footer>
<div class="footerwrapper fade-in-element">
<a href="mailto:%[email protected]">
<h2>Say hi, don't be shy <img height="30" src="images/arrow-right.svg" alt="ArrowRightImage"></h2>
<p>Feel free to reach out for collaborations or just a friendly hello 🚀 <b>Let's chat.</b></p>
</a>
</div>
<div class="socials fade-in-element">
<div class="footerIcons">
<div class="EmailIcons">
<a href="mailto:[email protected]" target="_blank">
<img class="activeEmailImage" src="images/emailicon.svg" alt="EmailIconLight"></a> <a href="mailto:[email protected]" target="_blank">
<img class="hoverEmailImage" src="images/emailicondark.svg" alt="EmailIcondDark"></a>
</div>
<div class="CameraIcons">
<a href="https://www.shardeheimphotography.com/" target="_blank">
<img class="activeCameraImage" src="images/camericon.svg" alt="CameraIconLight"></a> <a href="https://www.shardeheimphotography.com/" target="_blank">
<img class="hoverCameraImage" src="images/camericondark.svg" alt="CameraIconDark"></a>
</div>
<div class="InstagramIcons">
<a href="https://www.instagram.com/shardeheim/" target="_blank">
<img class="activeInstagramImage" src="images/instagramicon.svg" alt="InstagramIconLight"></a> <a href="https://www.instagram.com/shardeheim/" target="_blank">
<img class="hoverInstagramImage" src="images/instagramicondark.svg" alt="InstagramIconDark"></a>
</div>
<div class="LinkedinIcons">
<a href="https://www.linkedin.com/in/shardeheim/" target="_blank">
<img class="activeLinkedinImage" src="images/linkedinicon.svg" alt="LinkedinIconLight"></a> <a href="https://www.linkedin.com/in/shardeheim/" target="_blank">
<img class="hoverLinkedinImage" src="images/linkedinicondark.svg" alt="LinkedinIconDark"></a>
</div>
</div>
</div>
<div class="madeBy">
Designed and built by Shardé Heim © 2023
</div>
</footer>
</body>
</html>