-
Notifications
You must be signed in to change notification settings - Fork 5
/
case_study.html
422 lines (389 loc) · 25.7 KB
/
case_study.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-M95696KYZS"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-M95696KYZS');
</script>
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital@0;1&family=Rubik:wght@400;900&display=swap" rel="stylesheet">
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(80088262, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true,
ecommerce:"dataLayer"
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/80088262" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<link rel="stylesheet" href="css/reboot.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/theme-white.css">
<title>Olia Nayda UX / Product Designer - olianayda.com 2019</title>
<meta name="description" content="Olia Nayda UX and Product Designer. UX consultant and clean UI lover.">
<meta name="keywords" content="Olia Nayda, Olga Nayda, Designer, UX Designer,
UX Consultant, Product Designer, UI Designer,
Оля Найда, Ольга Найда, UX Дизайнер, Дизайнер продукта
management, BDD, JTBD, Research, Figma, Sketch, Zeplin">
<meta property="og:site_name" content="olianayda.com">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="olianayda.com">
<meta property="og:title" content="Olia Nayda UX and Product Designer. UX consultant and clean UI lover — olianayda.com 2020.">
<meta property="og:description" content="Olia Nayda's case sudy as the leader of product designer who deeply committed at user and business goals successful achieving. I'm using Design Thinking, Sprints, Job To Be Done and coffee to make your product better. Familiar with Figma, Adobé Product Suit, Sketch and Waste free">
<meta property="og:image" content="img/eyepic.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:type" content="">
<meta property="fb:app_id" content="">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<div class="container">
<div class="top">
<div class="js-svg" data-svg="#left-eye"></div>
<a href="https://olianayda.com/index.html" class="link link__back js-blink">
<span class="js-svg" data-svg="#arrow"></span>
On Olia Nayda homepage
</a>
<a href="files/Olga_Naida_CV_curriculum_vitae.pdf" class="link link__cv" title="curriculum_vitae.pdf" target="_blank">CV</a>
<a href="case_study.html" class="link link__case js-blink">Case study</a>
<a href="#" class="btn" id="to-contacts">Contact me</a>
</div>
<div class="mobile-eyes">
<div class="js-svg" data-svg="#left-eye"></div>
<div class="js-svg" data-svg="#right-eye"></div>
</div>
<div class="text">
<h1>Case Study</h1>
<p class="small"><em>"Utty me" is my side project to illustrate my work and technics at companies I work. I have no rights to show real processes
and products because of NDA. I work on it with my colleague Marie. We work together to test methodologies, to have criticism opinion and learn
to collaborate productively.</em></p>
</div>
<section class="section">
<div class="case-nav" id="story">
<a href="#story" class="active">1 story</a>
<a href="#problem">2 problem</a>
<a href="#users">3 users</a>
<a href="#users">4 roles</a>
<a href="#constrains">5 constrains</a>
<a href="#process">6 process</a>
<a href="#outcomes">7 outcomes</a>
</div>
<h2>1/7 Story. Shortly</h2>
<div class="section-block">
<section>
<p>I heard a lot of unsatisfied reviews about nail masters or about difficulty to find a good master nearby. That was a reason for me to check some
hypothesis.</p>
<p>Before to start interviews with potential users I found some quantitive data about business potential of this idea and who for this
product should be.</p>
</section>
<aside>
<div class="js-svg" data-svg="#right-eye"></div>
</aside>
</div>
<div class="section-block">
<section>
<div class="img">
<img src="img/case-1_7-1.jpg" alt="Nail industry growth dynamic in Russia 2012-2017 / Data form marke ting.rbc.ru">
<small>Nail industry growth dynamic in Russia 2012-2017 /<br>Data form marke ting.rbc.ru</small>
</div>
</section>
<aside>
<div class="img">
<img src="img/case-1_7-2.jpg" alt="Dynamics of the Russian market of additional services, 2012-2017, million rubles, % / Data form marketing.rbc.ru">
<small>Dynamics of the Russian market of additional services, 2012-2017, million rubles, % / Data form marketing.rbc.ru</small>
</div>
</aside>
</div>
<section>
<p>The areas of market growth were found and good business potential were defined. We’re noticed the biggest growth at self employeed beauty masters
market and used it as main confirmation to start research and build our idea.</p>
</section>
</section>
<section class="section">
<div class="case-nav" id="problem">
<a href="#story">1 story</a>
<a href="#problem" class="active">2 problem</a>
<a href="#users">3 users</a>
<a href="#users">4 roles</a>
<a href="#constrains">5 constrains</a>
<a href="#process">6 process</a>
<a href="#outcomes">7 outcomes</a>
</div>
<h2>2/7 Reserch. Problem definition</h2>
<div class="section-block">
<section>
<p>To be more productive in work, we’re defined our roles in the team and types of work we do in practice, but all the product growth and methodology
decisions — we made together</p>
<p>Let’s have some talk <br>
We're started from unstructured interviews to understand who do manicure. What do they think about nail masters and what positive or negative
experience they had? Which problems do this people have about manicure and daily problems they have which correlates with manicure. What background
they have before go to nail master and after.</p>
<p>Later relying on interviews we defined problems and went to semistructured interviews to check out hypothesis.</p>
</section>
<aside>
<div class="img">
<img src="img/case-2_7-4.jpg" alt="Feature evaluation template">
<small>Feature evaluation template</small>
</div>
</aside>
</div>
<section>
<div class="img img__triptych">
<img src="img/case-2_7-1.jpg" alt="Interview notes 1">
<img src="img/case-2_7-2.jpg" alt="Interview notes 2">
<img src="img/case-2_7-3.jpg" alt="Interview notes 3">
<small>Interview notes</small>
</div>
<p>During ethnographic research we’re considered most common user goals and problems. Made a hierarchi. Defined product development goals, made a
roadmap page.</p>
<div class="img">
<img src="img/case-2_7-5.jpg" alt="RoadMap at Notion.so">
<small>RoadMap at Notion.so</small>
</div>
</section>
</section>
<section class="section">
<div class="case-nav" id="users">
<a href="#story">1 story</a>
<a href="#problem">2 problem</a>
<a href="#users" class="active">3 users</a>
<a href="#users" class="active">4 roles</a>
<a href="#constrains">5 constrains</a>
<a href="#process">6 process</a>
<a href="#outcomes">7 outcomes</a>
</div>
<h2>3-4/7 User portraits, stories and roles</h2>
<div class="section-block">
<section>
<p>As a result of interviews was hypothesis confirmations, data for portraits and user stories.</p>
<div class="img img__diptych img__80p">
<img src="img/case-3_7-1.jpg" alt="User portrait and storyboard examples 1">
<img src="img/case-3_7-2.jpg" alt="User portrait and storyboard examples 2">
<small>User portrait and storyboard examples</small>
</div>
</section>
<aside>
<div class="img">
<img src="img/case-3_7-3.jpg" alt="Me analyzing user pains and goals">
<small>Me analyzing user pains and goals</small>
</div>
</aside>
</div>
<section>
<p>We’ve divided app by two because as result were two main roles: nail master and client. Here goes to two different client apps. It makes further user
experience cleaner.</p>
<p>As a relational data for portraits and user stories were sum of real people behaviour and ethnographic research data</p>
<p>It’s important to always remember about context. That’s why we made detailed user stories and contextual scenarios</p>
</section>
</section>
<section class="section">
<div class="case-nav" id="constrains">
<a href="#story">1 story</a>
<a href="#problem">2 problem</a>
<a href="#users">3 users</a>
<a href="#users">4 roles</a>
<a href="#constrains" class="active">5 constrains</a>
<a href="#process">6 process</a>
<a href="#outcomes">7 outcomes</a>
</div>
<div class="section-block">
<section>
<h2>5/7 What we got. Scope and constrains</h2>
<p>As a result of interviews was hypothesis confirmations, portraits and user stories. After user stories, goals and portrait analysis. We decided to make
a focus at mobile version. From year to year percent of mobile users increases. It takes a lot of resources to create native mobile app for Android and
extremely a lot for iOS. One of decisions to save money before we get invested is to create browser-type app for MVP and user tests.</p>
<p>We had some time limits because wanted to show app at startup accelerator conference. Also we had budget limits and all our decisions were focused to
save time and money (as it always being)</p>
</section>
<aside>
<div class="js-svg" data-svg="#left-eye"></div>
</aside>
</div>
<section>
<div class="img img__diptych img__80p">
<img src="img/case-5_7-1.jpg" alt="Screens relations 1">
<img src="img/case-5_7-2.jpg" alt="Screens relations 2">
<small>Screens relations</small>
</div>
</section>
</section>
<section class="section">
<div class="case-nav" id="process">
<a href="#story">1 story</a>
<a href="#problem">2 problem</a>
<a href="#users">3 users</a>
<a href="#users">4 roles</a>
<a href="#constrains">5 constrains</a>
<a href="#process" class="active">6 process</a>
<a href="#outcomes">7 outcomes</a>
</div>
<h2>6/7 Process</h2>
<div class="section-block">
<section>
<p>Process has started from low fidelity prototypes scenarious and discussion with team.</p>
<div class="img">
<img src="img/case-6_7-1.jpg" alt="Fisrt steps in prototype creation">
<small>Fisrt steps in prototype creation</small>
</div>
</section>
<aside>
<div class="img">
<img src="img/case-6_7-2.jpg" alt="Low fidelity mockups (later we’re decided to change welcome screen)">
<small>Low fidelity mockups (later we’re decided to change welcome screen)</small>
</div>
</aside>
</div>
<section>
<p>Low fidelity mockups in note book transforms into paper smartphone and goes to first users. If rely to NNgroup research to find most common mistakes at
populistic digital product is enough 5-8 users be involved.</p>
<div class="img-group">
<div class="img img__gif">
<img src="img/case-6_7-3.gif" alt="Paper mockups process">
<small>Paper mockups process</small>
</div>
<div class="img img__gif">
<img src="img/case-6_7-4.gif" alt="Wizard from OZ mockup testing">
<small>Wizard from OZ mockup testing</small>
</div>
</div>
<p>While first testing of 2-3 persons we found logical mistakes, fixed them tested again and moved to next step: create more detailed mockups. We used figma
and InVision apps for that.</p>
<div class="img img__gif">
<img src="img/case-6_7-5.gif" alt="InVision test">
<small>InVision test</small>
</div>
<div class="img img__gif">
<img src="img/case-6_7-6.gif" alt="InVision test">
<small>InVision test</small>
</div>
<p>Next step is detailed User Interface design. To make a strong decision without divination we relied to user personas. All data about music they like,
movies they prefer and apps they love to use was helpful. Based on that we created mood-board and continued to work with UI/graphic design team</p>
<div class="img">
<img src="img/case-6_7-7.jpg" alt="Screenshot of Mood-board at Notion.co and style check at right side of the picture">
<small>Screenshot of Mood-board at Notion.co and style check at right side of the picture</small>
</div>
</section>
</section>
<section class="section">
<div class="case-nav" id="outcomes">
<a href="#story">1 story</a>
<a href="#problem">2 problem</a>
<a href="#users">3 users</a>
<a href="#users">4 roles</a>
<a href="#constrains">5 constrains</a>
<a href="#process">6 process</a>
<a href="#outcomes" class="active">7 outcomes</a>
</div>
<h2>7/7 Outcomes</h2>
<section>
<p>As result we’ve got prototype with scenarios, basic product growth plan and basement for further development. In half of projects I was involved were
based on huge UI kit made by popular studious but in this case we’re try to make our own and it still in progress and it’s excited process</p>
</section>
</section>
<br>
<br>
<br>
<div class="footer section-block">
<section>
<h2>Contact me</h2>
<p class="contacts">
Email: <a href="mailto:[email protected]" target="_blank">[email protected]</a> <br>
WhatsApp: <a href="https://wa.me/79002326658" target="_blank">+7 900 232-66-58</a> <br>
<a href="https://t.me/olianayda" target="_blank">Telegram</a>, <a href="skype:olianayda" rel="nofollow noopener noreferrer" target="_blank">Skype</a>: @olianayda
<span class="js-svg" data-svg="#contacts-arr"></span>
</p>
<h2 class="mobile-eye">
Socials: <br>@olianayda
<span class="js-svg" data-svg="#right-eye"></span>
</h2>
<p class="links">
<a href="https://www.linkedin.com/in/olianayda/" target="_blank">Linked In</a>
<a href="https://www.facebook.com/nyannayda" target="_blank">Facebook</a>
<a href="https://www.instagram.com/olianayda/" target="_blank">Instagram</a>
<a href="https://medium.com/@olianayda" target="_blank">Medium</a>
<a href="https://unsplash.com/@olianayda" target="_blank">Unsplash</a>
<a href="https://www.behance.net/olianayda" target="_blank">Behance</a>
</p>
</section>
<aside>
<div class="js-svg" data-svg="#right-eye"></div>
</aside>
</div>
</div>
<div class="hidden">
<svg id="arrow" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path d="M17.4376 8.10938H3.72435L11.9322 0.984375C12.0634 0.869531 11.9837 0.65625 11.8103 0.65625H9.73607C9.64466 0.65625 9.55794 0.689062 9.48997 0.747656L0.632941 8.43281C0.551821 8.50313 0.486763 8.59006 0.442175 8.68772C0.397588 8.78537 0.374512 8.89147 0.374512 8.99883C0.374512 9.10618 0.397588 9.21228 0.442175 9.30994C0.486763 9.4076 0.551821 9.49453 0.632941 9.56484L9.54153 17.2969C9.57669 17.3273 9.61888 17.3438 9.66341 17.3438H11.8079C11.9814 17.3438 12.0611 17.1281 11.9298 17.0156L3.72435 9.89062H17.4376C17.5408 9.89062 17.6251 9.80625 17.6251 9.70312V8.29688C17.6251 8.19375 17.5408 8.10938 17.4376 8.10938Z" fill="var(--text-color)"/>
</svg>
<svg id="contacts-arr" width="97" height="76" viewBox="0 0 97 76" fill="none">
<path d="M0.979998 38.354L38.5 0.833996L38.5 21.336L96.522 21.336L96.522 55.372L38.5 55.372L38.5 75.874L0.979998 38.354ZM6.742 38.354L34.48 66.092L34.48 51.352L92.502 51.352L92.502 25.356L34.48 25.356L34.48 10.616L6.742 38.354Z" fill="var(--text-color)"/>
</svg>
<svg id="left-eye" class="eye" width="313" height="143" viewBox="0 0 313 143" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.4258 134.881C46.0234 124.726 19.3525 108.572 4.39538 96.47L17.6046 80.1447C30.6089 90.6667 54.9493 105.516 84.7063 114.842C114.417 124.154 148.746 127.726 182.345 116.86C219.384 104.882 247.267 100.843 267.358 100.897C277.402 100.924 285.64 101.974 292.166 103.653C298.486 105.279 303.93 107.682 307.695 110.96L293.906 126.799C293.583 126.518 291.649 125.204 286.934 123.991C282.425 122.831 275.972 121.92 267.302 121.897C249.963 121.85 224.323 125.356 188.807 136.841C149.853 149.439 110.875 145.051 78.4258 134.881Z" fill="var(--eye-shadow-color)"/>
<path class="eye-eyelid" d="M176 119.473C109.6 135.073 43.6667 97.64 19 76.9733C19 70.4733 23.4 54.8733 41 44.4733C63 31.4733 122.5 13.9733 176 24.9733C218.8 33.7733 241.833 66.9733 248 82.4733L293.5 106.473C284.167 102.473 262 94.2733 248 93.4733C230.5 92.4733 259 99.9733 176 119.473Z" fill="#FFEDDC" stroke="black" stroke-width="8"/>
<g class="eye-closed">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.43 76.83C19.38 75.93 19.04 68.74 19 67.84C68.71 65.49 189.28 73.35 255.88 83.38C255.79 83.98 255.35 86.94 254.54 92.28C130.44 80.44 52.06 75.28 19.43 76.83Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M191.13 80.73L182.71 75.33L203.21 43.33L211.63 48.73L191.13 80.73Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M123.71 75.33L113.71 75.33L113.71 37.33L123.71 37.33L123.71 75.33Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M163.34 79.05L153.71 76.33L164.71 37.33L174.34 40.05L163.34 79.05Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M88.09 70.83L78.21 72.42L71.71 31.92L81.59 30.33L88.09 70.83Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M54.71 68.33L45.71 72.7L28.71 37.7L37.71 33.33L54.71 68.33Z" fill="black"/>
</g>
<g class="eye-opened">
<path fill-rule="evenodd" clip-rule="evenodd" d="M208.71 -2.30287L188.21 29.6971L179.79 24.3029L200.29 -7.69714L208.71 -2.30287Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M119 -16V22H109V-16H119Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M166.312 -15.6427L155.312 23.3573L145.688 20.6427L156.688 -18.3573L166.312 -15.6427Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M74.9368 -10.7924L81.4368 29.7076L71.5632 31.2923L65.0632 -9.2077L74.9368 -10.7924Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.4975 4.31549L48.4975 39.3155L39.5024 43.6845L22.5024 8.68453L31.4975 4.31549Z" fill="black"/>
<g class="eye-ball" data-eye="left">
<g class="eye-pupil">
<path d="M175.5 78.9142C175.5 90.5121 165.426 99.9142 153 99.9142C140.573 99.9142 130.5 90.5121 130.5 78.9142C130.5 67.3162 140.573 57.9142 153 57.9142C165.426 57.9142 175.5 67.3162 175.5 78.9142Z" fill="#27AE60"/>
<path d="M160.5 77.9142C160.5 81.7801 157.142 84.9142 153 84.9142C148.857 84.9142 145.5 81.7801 145.5 77.9142C145.5 74.0482 148.857 70.9142 153 70.9142C157.142 70.9142 160.5 74.0482 160.5 77.9142Z" fill="#070707"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M184.096 84.3277C183.833 89.639 181.899 94.9757 177.276 98.1762C171.428 102.225 163.23 105.298 154.449 105.049C145.53 104.797 136.202 101.112 128.45 91.9754C122.057 84.4407 120.102 75.1602 123.995 66.9168C127.825 58.8085 136.778 52.8408 149.777 50.4533C164.443 47.7595 175.264 57.3299 180.404 67.8143C182.998 73.1067 184.361 78.9805 184.096 84.3277ZM173.22 71.3356C168.985 62.695 161.056 56.5154 151.222 58.3216C139.721 60.4341 133.575 65.3664 131.229 70.3331C128.947 75.1647 129.743 81.1342 134.55 86.7995C140.797 94.1629 147.97 96.8627 154.675 97.0525C161.519 97.2462 168.071 94.8192 172.723 91.5987C174.6 90.2992 175.916 87.7609 176.106 83.9316C176.294 80.1381 175.314 75.6057 173.22 71.3356Z" fill="black"/>
</g>
</g>
</g>
</svg>
<svg id="right-eye" class="eye" width="400" height="212" viewBox="0 0 400 212" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M81.3141 141.932L57.7093 137.846L61.2907 117.154L89.7011 122.071L91.679 123.511C104.594 132.911 125.726 147.128 146.934 159.092C157.541 165.076 167.995 170.399 177.342 174.269C186.917 178.234 194.436 180.292 199.456 180.51C215.451 181.205 239.476 178.275 263.937 173.68C288.237 169.116 312.002 163.098 327.18 158.039L333.82 177.961C317.498 183.402 292.763 189.634 267.813 194.32C243.024 198.975 217.049 202.295 198.544 201.49C189.764 201.108 179.488 197.887 169.308 193.671C158.901 189.362 147.643 183.603 136.616 177.383C115.618 165.537 94.838 151.663 81.3141 141.932Z" fill="var(--eye-shadow-color)"/>
<path class="eye-eyelid" d="M91.5 127.5L64 115L83 102.5C82.1667 94.3333 103.5 75 195.5 63C287.5 51 326.833 122.667 335 160C322.167 165.833 284.8 178 238 180C191.2 182 120.833 145.833 91.5 127.5Z" fill="#FFEDDC" stroke="black" stroke-width="8"/>
<g class="eye-closed">
<path fill-rule="evenodd" clip-rule="evenodd" d="M69.46 117.83C69.41 116.93 69.07 109.74 69.03 108.84C94.05 107.66 146.58 109.93 199.47 117.12C225.94 120.72 252.61 125.57 276.05 131.86C299.39 138.13 319.92 145.94 333.82 155.64C333.3 156.38 329.18 162.29 328.67 163.02C316.07 154.23 296.76 146.74 273.72 140.55C250.77 134.39 224.5 129.61 198.26 126.04C145.74 118.9 93.77 116.68 69.46 117.83Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M174.72 116.33L164.74 117.01L161.24 65.51L171.22 64.83L174.72 116.33Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M206.24 121.83L196.24 121.83L196.24 72.83L206.24 72.83L206.24 121.83Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M233.98 125.63L224.24 123.33L234.74 78.83L244.48 81.13L233.98 125.63Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M257.6 131.83L249.24 126.33L275.24 86.83L283.6 92.33L257.6 131.83Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M284.06 143.15L277.24 135.83L306.24 108.83L313.06 116.15L284.06 143.15Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M135.99 113.33L126.74 117.15L111.24 79.65L120.49 75.83L135.99 113.33Z" fill="black"/>
</g>
<g class="eye-opened">
<path fill-rule="evenodd" clip-rule="evenodd" d="M173.488 14.661L176.988 66.161L167.012 66.839L163.512 15.339L173.488 14.661Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M209 13V62H199V13H209Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M249.366 19.6482L238.866 64.1482L229.134 61.8518L239.634 17.3518L249.366 19.6482Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M292.676 33.7491L266.676 73.2491L258.324 67.7509L284.324 28.2509L292.676 33.7491Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M325.407 64.1595L296.407 91.1595L289.593 83.8405L318.593 56.8405L325.407 64.1595Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M123.121 35.0901L138.621 72.5901L129.379 76.41L113.879 38.9099L123.121 35.0901Z" fill="black"/>
<g class="eye-ball" data-eye="right">
<g class="eye-pupil">
<path d="M245 119C245 136.673 230.673 151 213 151C195.327 151 181 136.673 181 119C181 101.327 195.327 87 213 87C230.673 87 245 101.327 245 119Z" fill="#27AE60"/>
<path d="M219 116C219 119.866 215.866 123 212 123C208.134 123 205 119.866 205 116C205 112.134 208.134 109 212 109C215.866 109 219 112.134 219 116Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M211.25 88H211.462C224.908 88 234.341 97.5778 239.098 107.963C241.504 113.215 242.857 118.926 242.989 124.259C243.12 129.534 242.057 134.818 239.193 138.851C234.326 145.706 225.447 146.518 218.146 145.772C210.534 144.995 202.77 142.365 197.906 140.186L197.7 140.093L197.505 139.978C193.992 137.9 189.028 133.996 185.29 128.829C181.543 123.651 178.713 116.73 180.597 108.992C182.488 101.223 188.445 96.1925 194.341 93.0974C200.273 89.984 206.771 88.4773 211.039 88.0225L211.25 88ZM211.672 96.0011C208.193 96.3998 202.831 97.6761 198.06 100.181C193.154 102.756 189.49 106.282 188.37 110.884C187.242 115.516 188.804 120.039 191.771 124.139C194.678 128.157 198.632 131.313 201.388 132.979C205.737 134.903 212.538 137.158 218.959 137.814C225.796 138.512 230.51 137.262 232.67 134.22C234.199 132.068 235.097 128.692 234.992 124.457C234.888 120.28 233.811 115.63 231.825 111.295C227.829 102.572 220.715 96.0999 211.672 96.0011Z" fill="black"/>
</g>
</g>
</g>
</svg>
</div>
<script src="js/main.js"></script>
</body>
</html>