-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathinstyle.html
More file actions
479 lines (429 loc) · 28.1 KB
/
instyle.html
File metadata and controls
479 lines (429 loc) · 28.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-site-verification" content="j5ZmpRp6-ZeLuTr-M8DbzuULJBChS9HBV_7bDVQt9u4" />
<title>Instyle Case Study</title>
<link rel="icon" type="image/x-icon" href="./res/icons/Favicon.png" />
<link rel="stylesheet" href="./style/style.css">
<!-- Scripting -->
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://kit.fontawesome.com/df18b2a205.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
<script src="https://unpkg.com/lenis@1.0.45/dist/lenis.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const lenis = new Lenis({
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
direction: 'vertical',
gestureDirection: 'vertical',
smooth: true,
mouseMultiplier: 1,
smoothTouch: false,
touchMultiplier: 2,
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
});
</script>
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div
class="hero-red-bg mx-0 mt-0 md:mx-[15px] md:mt-6 mb-12 pt-6 px-6 md:px-12 pb-6 relative overflow-hidden rounded-none md:rounded-[20px]">
<img src="./res/images/hero_pattern.png"
class="absolute inset-0 w-full h-full object-cover opacity-50 mix-blend-overlay pointer-events-none z-0"
alt="Pattern" />
<nav class="relative z-50 flex flex-wrap items-center justify-between mb-0 glass-nav py-4 md:py-5 w-full">
<!-- Desktop Nav -->
<div class="hidden md:flex items-center space-x-8 pl-4">
<a href="index.html"
class="text-white text-xs md:text-sm font-bold tracking-widest uppercase transition-colors group">
<div class="relative h-[16px] overflow-hidden">
<span
class="block transition-transform duration-300 group-hover:-translate-y-full">Work</span>
<span
class="block absolute top-0 left-0 translate-y-full transition-transform duration-300 group-hover:translate-y-0">Work</span>
</div>
</a>
<a href="about.html"
class="text-white text-xs md:text-sm font-bold tracking-widest uppercase transition-colors group">
<div class="relative h-[16px] overflow-hidden">
<span
class="block transition-transform duration-300 group-hover:-translate-y-full">About</span>
<span
class="block absolute top-0 left-0 translate-y-full transition-transform duration-300 group-hover:translate-y-0">About</span>
</div>
</a>
<a href="products.html"
class="text-white text-xs md:text-sm font-bold tracking-widest uppercase transition-colors group">
<div class="relative h-[16px] overflow-hidden">
<span
class="block transition-transform duration-300 group-hover:-translate-y-full">Product</span>
<span
class="block absolute top-0 left-0 translate-y-full transition-transform duration-300 group-hover:translate-y-0">Product</span>
</div>
</a>
</div>
<!-- Desktop Logo (Centered) -->
<div class="hidden md:flex absolute left-1/2 transform -translate-x-1/2">
<a href="index.html">
<img src="./res/icons/logo.svg" alt="Logo"
class="h-8 w-auto brightness-0 invert opacity-90 hover:opacity-100 transition-opacity" />
</a>
</div>
<!-- Mobile Header -->
<div class="md:hidden flex items-center justify-between w-full px-4">
<a href="index.html" class="flex items-center">
<img src="./res/icons/logo.svg" alt="Logo"
class="h-6 w-auto brightness-0 invert opacity-90 hover:opacity-100 transition-opacity" />
</a>
<button class="outline-none mobile-menu-button text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
viewBox="0 0 24 24" stroke="currentColor">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<!-- Desktop Social Icons -->
<div class="hidden md:flex items-center space-x-6 md:pr-4 text-white">
<a href="https://www.behance.net/uxrishu" target="_blank" class="transition-colors"><i
class="fa-brands fa-behance text-xl"></i></a>
<a href="https://www.linkedin.com/in/uxrishu/" target="_blank" class=" transition-colors"><i
class="fa-brands fa-linkedin-in text-xl"></i></a>
<a href="https://github.com/uxrishu" target="_blank" class="transition-colors"><i
class="fa-brands fa-github text-xl"></i></a>
</div>
<!-- Mobile Menu Dropdown -->
<div class="mobile-menu hidden w-full md:hidden mt-1 border-t border-white/20">
<div class="flex flex-col items-start pt-6 pb-2 pl-4 space-y-3">
<a href="index.html" class="text-white text-sm font-bold tracking-widest uppercase">Work</a>
<a href="about.html" class="text-white text-sm font-bold tracking-widest uppercase">About</a>
<a href="products.html"
class="text-white text-sm font-bold tracking-widest uppercase">Product</a>
<div class="flex items-center space-x-6 pt-2 text-white pl-1">
<a href="https://www.behance.net/uxrishu" target="_blank"><i
class="fa-brands fa-behance text-xl"></i></a>
<a href="https://www.linkedin.com/in/uxrishu/" target="_blank"><i
class="fa-brands fa-linkedin-in text-xl"></i></a>
<a href="https://github.com/uxrishu" target="_blank"><i
class="fa-brands fa-github text-xl"></i></a>
</div>
</div>
</div>
</nav>
</div>
<section class="wrapper body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-10">
<h2 class="caption mb-1 opacity-40">UX design | 2021</h2>
<h1 class="big-title mb-4">Instyle App</h1>
<p class="lg:w-2/4 mx-auto subtitle">A UX Design Project that focuses on people’s needs who are
tired of sitting and waiting at the salons for their turn. | Scheduling App.
</p>
</div>
<img class="w-full mx-auto mt-12 mb-4" src="./res/casestudies/instyle/coverimg.svg"
alt="Instyle Case Study image">
<div class="mt-4 lg:mb-10 sm:mb-2 flex flex-wrap justify-between lg:px-8 sm:px-4 py-6">
<div class="xl:w-1/2 lg:w-1/2 md:w-full">
<h2 class="title mb-2 yellow">Overview</h2>
<p class="leading-relaxed subtitle mb-4">This case study aims to understand the people’s needs
and frustration when they went to the Salon for grooming. In India, people often like to go
to Salons on the weekend, where they see many people sitting and waiting for their turn.
</p>
</div>
<div class="xl:w-1/2 lg:w-1/2 md:w-full">
<h2 class="title yellow invisible">Overview</h2>
<p class="leading-relaxed subtitle mb-4 leading-relaxed">
This process is very time taken and overwhelming for some people. It’s a detailed
run-through of how I provided the relevant solutions to the people to save their time and
only spend as much time as needed.
</p>
</div>
</div>
<div
class="mt-4 lg:mb-10 sm:mb-2 flex flex-wrap justify-between lg:px-8 sm:px-4 lg:lg:py-6 sm:py-0 sm:py-0">
<div class="xl:w-1/2 lg:w-1/2 md:w-full">
<h2 class="title mb-2 yellow">My Role</h2>
<p class="leading-relaxed subtitle mb-4 leading-relaxed">
<b>Role: </b>UX Researcher & UX Designer<br>
<b>Responsibility: </b>Conducting Surveys, Primary Research, Digital Wireframe, and Final
Prototype.<br>
<b>Timeline: </b>November 2021 — February 2022
</p>
</div>
<div class="xl:w-1/2 lg:w-1/2 md:w-full">
<h2 class="title mb-2 yellow">Problem Statement</h2>
<p class="leading-relaxed subtitle mb-4">A Scheduling app wants to help people to save their
time by booking appointments in a nearby Salon from Home. As a Sole UX Designer, my goal is
to empathize with people and understand their needs, behavior, and frustration of people to
build a seamless happy user experience.
</p>
</div>
</div>
<div class="mt-4 lg:mb-10 sm:mb-2 flex flex-wrap justify-between lg:px-8 sm:px-4 lg:py-6 sm:py-0">
<div class="xl:w-1/2 lg:w-1/2 md:w-full">
<h2 class="title mb-2 yellow">Conducting The Research</h2>
<p class="leading-relaxed subtitle mb-4 leading-relaxed">
I planned to survey to help to identify
what people face in the Salons. <br><br>
<b>Why Survey?</b><br>Surveys give us the power to ask any questions (related to the study)
without taking more time from the people. Surveys can be a quick, easy, and inexpensive way
to obtain the data questions you ask.
</p>
</div>
<div class="xl:w-1/2 lg:w-1/2 md:w-full ">
<h2 class="title mb-2 yellow">Goal of the Survey</h2>
<p class="leading-relaxed subtitle mb-4">
The goal of the Survey is to find out how many people are facing this problem in the Salon
or Barber Shop, and To identify what other issues people might have face and Do they
actually need
the solutions to this problem?
</p>
</div>
</div>
<img class="lg:w-1/2 sm:w-full mx-auto mt-12 mb-4" src="./res/casestudies/instyle/surveyresult.png"
alt="Instyle Case Study image">
<div class="mt-4 lg:mb-10 sm:mb-2 flex flex-wrap justify-between lg:px-8 sm:px-4 lg:py-6 sm:py-0">
<div class="xl:w-1/2 lg:w-1/2 md:w-full ">
<h2 class="title mb-2 yellow">Understanding the Problem Statement</h2>
<p class="leading-relaxed subtitle mb-4">To understand the problem statement more clearly, I
framed 5Ws — Who, What, Where, When, Why. <br>
<b> Who is experiencing the problem?</b><br>Knowing users and their backgrounds is key to
creating
successful solutions for them.<br><br>
<b>What are the pain points that need to be solved?</b><br> Determine a user’s pain points
early allow
me to ensure and clarify the context of the pain points.<br><br>
<b>Where do we need to focus the most?</b><br>Focusing on providing valuable features for
the user
that helps to solve this problem.<br>
</p>
</div>
<div class="xl:w-1/2 lg:w-1/2 md:w-full lg:px-8 sm:px-0 lg:py-6 sm:py-0">
<h2 class="title mb-2 yellow invisible"></h2>
<p class="leading-relaxed subtitle mb-4"><b>When does the problem occur?</b><br>Knowing when the
problem occurs can help to better empathize
with users.<br><br>
<b>Why is the problem important to solve?</b><br>According to the data, Most of the people
spend their time waiting
and sitting meaningless. An App that helps you to book and schedule an appointment will not
only saves time for users but providing users to choose desired time to book.
</p>
</div>
</div>
<img class="lg:w-3/4 md:w-3/4 mx-auto sm:w-1/2 mb-2 lg:px-8 sm:px-4 lg:py-6 sm:py-0"
src="./res/casestudies/instyle/persona.png" alt="Instyle Case Study image">
<div
class="md:m-4 lg:m-4 sm:m-0 lg:mb-10 sm:mb-2 flex flex-wrap justify-between lg:px-8 sm:px-4 lg:py-6 sm:py-0">
<div class="xl:w-1/2 lg:w-1/2 md:w-full ">
<h2 class="title mb-2 yellow">Understanding the Users</h2>
<p class="leading-relaxed subtitle mb-4">After receiving insights from the survey, I created
personas so I could understand more potential needs, frustration, and goals of people to
help decide on the functional requirements for Instyle app.
</p>
</div>
<div class="xl:w-1/2 lg:w-1/2 md:w-full">
<h2 class="title mb-2 yellow">Pain Points and Features to Solve Pain</h2>
<p class="leading-relaxed subtitle mb-4">
I found three major pain points of the user from the persona I created and To resolve user
pain points here are the three main features that’ll help users to cut out pain points.<br>
<ul class="list-disc">
<b>Pain Points</b>
<li><b>Time:</b> People don’t know about the opening and closing times of the Salon.
</li>
<li><b>Location:</b> People who move into a new city don’t know about the Shop Location.
</li>
<li><b>Waiting:</b> The User doesn’t want to wait for 30–40 minutes in the salon.</li>
</ul>
<br>
<ul class="list-disc">
<b>Features & Functionalities</b>
<li><b>Time:</b> Providing the feature of opening and closing time of every shop.</li>
<li><b>Location:</b> People can read about the specific landmarks near the Salon.</li>
<li><b>Waiting:</b> Advance Booking that’ll help users to book appointments before.</li>
</ul>
</p>
</div>
</div>
<img class="w-full mx-auto mt-12 mb-4" src="./res/casestudies/instyle/ideationwallpaper.png"
alt="Instyle Case Study image">
<div class="flex xl:w-full lg:w-full md:w-full sm:w-full flex-wrap lg:px-8 sm:px-4 lg:py-6 sm:py-0">
<div class="lg:w-1/2 md:w-1/2 sm:w-full">
<h2 class="title mb-2 yellow">Ideation</h2>
<p class="leading-relaxed subtitle mb-4">
In this ideation phase, I focused on preparing Information Architecture to help users
understand where they are in the product and where they can get relevant information
about a
task. <br><br>
<b>Why Information Architecture is important?</b><br>Because it provides a high-level
view of a product and organizes the overall structure of the app which helps users to
quickly and easily identify how to book appointment.
</p>
</div>
<img class="p-4 md:w-1/2 sm:w-1/2 mb-2" src="./res/casestudies/instyle/ideation.png"
alt="Instyle Case Study image">
</div>
<img class="w-full mx-auto mt-12 mb-4" src="./res/casestudies/instyle/wireframes.png"
alt="Instyle Case Study image">
<h1 class="title w-full mx-auto text-center justify-center lg:mt-16 md:mt-10 sm:mt-4 mb-2">High Fidelity
Mockups</h1>
<img class="w-3/4 mx-auto mt-12 mb-4" src="./res/casestudies/instyle/solvedui1.svg"
alt="Instyle Case Study image">
<div class="mt-4 lg:mb-10 sm:mb-2 flex flex-wrap justify-between lg:px-8 sm:px-4 lg:py-6 sm:py-0">
<div class="xl:w-1/2 lg:w-1/2 md:w-full p-4">
<h2 class="title mb-2 yellow">Home & Salon Screens</h2>
<p class="leading-relaxed subtitle mb-4">After completing all basic signup and onboarding
processes, the user comes to the Home screen which looks like this. The mobile app will
automatically ask users for their location so they can see their nearby available
salons.<br><br>I
designed a carousel for grooming tips and festive discounts. Then I designed a
Call-To-Action button for booking the appointment. When users open a Salon Catalogue where
they can see services and their prices with approx. time taken offered by a particular Salon
</p>
</div>
<div class="xl:w-1/2 lg:w-1/2 md:w-full problem-solved p-4">
<h2 class="title mb-2">Problem Solved</h2>
<p class="leading-relaxed subtitle mb-4">On the home page, Users have multiple options to
book an appointment. After allowing the location detection, they can see their nearby
salons. <br><br>
On the Salon catalog page, Users can see the Salon opening and closing times and the
information about the services including the price and approx time taken by a barber.
</p>
</div>
</div>
<div class="mt-12 lg:mb-10 sm:mb-2 flex flex-wrap justify-between">
<img class="w-1/2 mx-auto mt-12 mb-4" src="./res/casestudies/instyle/solvedui4.svg"
alt="Instyle Case Study image">
<img class="w-1/2 mx-auto mt-12 mb-4" src="./res/casestudies/instyle/solvedui3.svg"
alt="Instyle Case Study image">
<div class="mt-4 lg:mb-10 sm:mb-2 flex flex-wrap justify-between lg:px-8 sm:px-4 lg:py-6 sm:py-0">
<div class="xl:w-1/2 lg:w-1/2 md:w-full p-4">
<h2 class="title mb-2 yellow">Search Page and Profile</h2>
<p class="leading-relaxed subtitle mb-4">Users can check and book their appointment in the
desired location, date, and time. Users can also search for Salons in different places
by search bar.
</p>
</div>
<div class="xl:w-1/2 lg:w-1/2 md:w-full problem-solved p-4">
<h2 class="title mb-2">Problem Solved</h2>
<p class="leading-relaxed subtitle mb-4">Providing to choose any desired time and day for
the user to book an appointment inthe Salon. <br><br>For extra, If the user wants to
schedule an
appointment at another location, they can now search for places on the search page.
</p>
</div>
</div>
</div>
<img class="w-3/4 mx-auto mt-24 mb-4" src="./res/casestudies/instyle/solvedui2.svg"
alt="Instyle Case Study image">
<div class="mt-4 lg:mb-10 sm:mb-2 flex flex-wrap justify-between lg:px-8 sm:px-4 lg:py-6 sm:py-0">
<div class="xl:w-1/2 lg:w-1/2 md:w-full ">
<h2 class="title mb-2 yellow">Appointment and Checkout</h2>
<p class="leading-relaxed subtitle mb-4">Users can easily track their appointment status and
have Salon confirm their appointment or not. On the right side, is the checkout page, where
users have two options for making payments Online and Offline.
</p>
</div>
</div>
<div class="prototype mt-12 text-center w-full mb-10 mx-auto">
<h2 class="caption mb-1 opacity-40">Prototype may take few seconds to load.</h2>
<h1 class=" big-title mb-4">Interact with Final Prototype</h1>
<iframe class=" mx-auto" style="border: 1px solid rgba(0, 0, 0, 0.1);" width="1000" height="560"
src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2F9w2qqggJNfOxxZUrYiaXQs%2FInstyle-Salon%3Fnode-id%3D352%253A2063%26scaling%3Dscale-down%26page-id%3D0%253A1%26starting-point-node-id%3D352%253A2063"
allowfullscreen></iframe>
</div>
<div class="show-at-small mt-4 text-center w-full mb-4 mx-auto">
<img class="w-full mx-auto mt-12 mb-2" src="./res/casestudies/instyle/allmockup.svg"
alt="Instyle Case Study">
<h1 class="small-box title mt-4 mb-4 p-6">You can Interact with Final Figma Prototype on Desktop.
</h1>
</div>
<div class="mt-12 lg:mb-10 sm:mb-2 flex flex-wrap justify-between lg:px-8 sm:px-4 py-6">
<div class="xl:w-1/2 lg:w-1/2 md:w-full ">
<h2 class="title mb-2 yellow">What I Learned</h2>
<p class="leading-relaxed subtitle mb-4">Soemtimes, assumption is a good way to figure out all
possible
problems of the users, but We shouldn't rely only on assumption. We never know everything
about the user until and unless we talk to them, What we have to do is do the user research
without
being Omniscient.
</p>
</div>
<div class="xl:w-1/2 lg:w-1/2 md:w-full ">
<h2 class="title mb-2 invisible">Problem Solve</h2>
<p class="leading-relaxed subtitle mb-4">User Research is very important because it’s the
starting &
turning point of the product. It provides an essential foundation for design strategy. It
helps you to create an optimal product for users.
</p>
</div>
</div>
<div class="md:mt-10 sm:mt-4 flex flex-col text-center w-full md:mb-10 sm:mb-2 mx-auto">
<h1 class="big-title mb-4">Thank You!</h1>
<p class="px-6 md:w-1/2 sm:w-2/3 mx-auto text-center leading-relaxed subtitle mb-4">Thank you for
reading this Case
Study! If you liked this
let me
know your thoughts. You can mail me at <a href="mailto: uxrishu@gmail.com"
rel="noopener noreferrer" target="_blank"><b>uxrishu@gmail.com</b></a>
</p>
</div>
</div>
</section>
<a href="#" id="uparrow"><i class="fa-solid fa-angle-up"></i></a>
<footer class="mt-20 mb-0 md:mb-8 mx-0 md:mx-[15px]">
<div
class="bg-[#121212] text-white rounded-none md:rounded-[30px] p-8 md:p-12 lg:p-16 relative overflow-hidden min-h-[600px] md:min-h-0">
<!-- Top Section -->
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-center relative z-10">
<!-- Left Content -->
<div class="max-w-2xl w-full">
<h2 class="text-4xl md:text-5xl lg:text-7xl font-medium mb-8 leading-16 tracking-tight"
style="line-height: 1.3;">
Ready to begin?<br /> Let's talk!
</h2>
<!-- Original Buttons Removed for Physics Effect -->
</div>
</div>
<!-- Physics World Container -->
<div id="footer-physics-world"></div>
<!-- Spacer -->
<div class="h-16 md:h-24"></div>
<!-- Bottom Section -->
<div class="absolute bottom-0 left-0 right-0 z-30 px-8 md:px-12 lg:px-16 pb-8 md:pb-12 lg:pb-16">
<div
class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-end md:items-end gap-4 md:gap-0">
<p class="text-gray-500 text-sm md:text-base order-2 md:order-1 w-full md:w-auto text-left">
Crafted by me in 2026
</p>
<!-- Links removed for Physics Effect -->
</div>
</div>
<!-- Earth Visual Effect -->
<div class="footer-earth-wrapper">
<img src="./res/images/footer_earth_horizon_purple.png" alt="Earth Horizon"
class="footer-earth-image">
</div>
</div>
</footer>
<script src="./script/script.js"></script>
<script src="./script/footer_physics.js"></script>
<script>
// Initialize Footer Physics only on this page
document.addEventListener('DOMContentLoaded', () => {
if (typeof initFooterPhysics === 'function') {
initFooterPhysics();
}
});
</script>
</body>
</html>