-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
429 lines (410 loc) · 23.7 KB
/
index.html
File metadata and controls
429 lines (410 loc) · 23.7 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Human Experience - Powered by 99X Technology</title>
<meta name="title" content="Human Experience - Official Website" />
<meta name="description" content="A creative set of professionals dedicated to creating better experience for humans." />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700|Roboto" rel="stylesheet">
<link href="http://cdn.materialdesignicons.com/1.7.22/css/materialdesignicons.min.css" rel="stylesheet">
<link href='assets/css/hex-theme.css' rel='stylesheet' type='text/css'>
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body>
<nav class="main-navigation">
<a href="#">
<img class="hex-logo" src="assets/images/logo.svg" alt="logo">
</a>
<span id="mobileMenuButton" class="mobile-menu-button open"></span>
<ul class="navbar-hex" style="display:none">
<li id="servicesLink">Services we offer</li>
<li id="workLink">Our work</li>
<li id="eventsLink">Events</li>
<li id="teamLink">Meet the team</li>
</ul>
</nav>
<!-- Page 01 -->
<section class="hex-overview">
<div class="main-section">
<div class="cartoon-area"><img src="assets/images/cartoon-1.png" alt="here is a new product"></div>
<div class="slogan-area">
<h1>Bridging the gap between your <br> <span>Ideas</span> and business</h1>
<div class="scroll-down-button"></div>
</div>
</div>
</section>
<!-- Page 02 -->
<section class="our-services" id="serviceSection">
<div class="container">
<div class="section-title">
<h1>We<span> help you</span> with</h1>
</div>
<div class="row">
<div class="services-container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-6">
<div class="media" data-toggle="modal" data-target="#marketReserach">
<div class="media-left media-middle">
<img class="media-object illustration" src="assets/images/market-research.png" alt="Market Reserach and Competitive Analysis">
</div>
<div class="media-body">
<h3 class="service-text">Market Research & <br>Analysis</h3>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="media" data-toggle="modal" data-target="#productConcept">
<div class="media-left media-middle">
<img class="media-object illustration" src="assets/images/conceptualization.png" alt="Product Conceptualization">
</div>
<div class="media-body">
<h3 class="service-text">Product <br>Conceptualization</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="media" data-toggle="modal" data-target="#interactionDesign">
<div class="media-left media-middle">
<img class="media-object illustration" src="assets/images/prototyping.png" alt="Interactive Prototyping">
</div>
<div class="media-body">
<h3 class="service-text">Interaction Designing & <br>Prototyping</h3>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="media" data-toggle="modal" data-target="#expertAnalysis">
<div class="media-left media-middle">
<img class="media-object illustration" src="assets/images/concept-validation.png" alt="Expert Analysis">
</div>
<div class="media-body">
<h3 class="service-text">Expert Analysis</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="media" data-toggle="modal" data-target="#uxEvangelism">
<div class="media-left media-middle">
<img class="media-object illustration" src="assets/images/ux-evangelism.png" alt="UX Evangelism">
</div>
<div class="media-body">
<h3 class="service-text">UX Evangelism</h3>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="media" data-toggle="modal" data-target="#uxStratergy">
<div class="media-left media-middle">
<img class="media-object illustration" src="assets/images/stratergy.png" alt="UX Stratergy Implementation">
</div>
<div class="media-body">
<h3 class="service-text">UX Stratergy <br>Implementation</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal one-->
<div class="modal fade" id="marketReserach" tabindex="-1" role="dialog" aria-labelledby="marketReserachAnalysis">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h3 class="modal-title" id="myModalLabel">Market Reserach and Analysis</h3>
</div>
<div class="modal-body">
<p> This is a systematic process of collecting and analyzing target market data, the competition, and the environment. Findings of this research and analysis will help in making critical business decisions in various aspects like product offering, pricing, marketing and branding, But the primary goal always is to understand what people will buy and how you should take your product to the market.
</p>
<p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal two-->
<div class="modal fade" id="productConcept" tabindex="-1" role="dialog" aria-labelledby="productConceptualization">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h3 class="modal-title" id="myModalLabel">Product Conceptualization</h3>
</div>
<div class="modal-body">
<p>
We provide comprehensive conceptualizing solution for your new idea, finding answers to all sorts of questions to help evolve the idea from its initial stage through the various stages of innovation.</p>
<p> We mainly take a lean approach to establish your new business modal focusing on what is the problem that the idea solves, who is the targeted consumer for the idea, does your idea solve the consumer’s problems and how will the solution be delivered to the consumer.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal three-->
<div class="modal fade" id="interactionDesign" tabindex="-1" role="dialog" aria-labelledby="interactionDesigningPrototyping">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h3 class="modal-title" id="myModalLabel">Interaction Designing & Prototyping</h3>
</div>
<div class="modal-body">
<p>
No Human Experience team is completed without offering Interaction design as a service. It is is a process in which designers focus on creating engaging interfaces with logical and thought out behaviors and actions.
</p>
<p>
We take a step further and help you to validate your product idea or solution through an interactive high fidelity prototype. This prototype can be used as your first minimum viable product, which targeted end users can engage and test to find answers to the business hypothesis you made during the process.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal four-->
<div class="modal fade" id="expertAnalysis" tabindex="-1" role="dialog" aria-labelledby="expertAnalysis">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h3 class="modal-title" id="myModalLabel">Expert Analysis</h3>
</div>
<div class="modal-body">
<p>
In another terms "Heuristic evaluation". This is a quick way of finding your product is usable or not. We provide a brief usability assessment report having inspected and evaluated your product based on global usability heuristics and local first hand experiences of our experts. This is something you can get done within a very limited time and budget.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal five-->
<div class="modal fade" id="uxEvangelism" tabindex="-1" role="dialog" aria-labelledby="uxEvangelism">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h3 class="modal-title" id="myModalLabel">UX Evangelism</h3>
</div>
<div class="modal-body">
<p>
This is primarily a community service where our human experience designers share their experiences and knowledge with the community and conduct hands on workshops. </p>
<p>The goal of this endeavor is to take the local UX community to the next level.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal six-->
<div class="modal fade" id="uxStratergy" tabindex="-1" role="dialog" aria-labelledby="uxStratergyImplementation">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h3 class="modal-title" id="myModalLabel">UX Stratergy Implementation</h3>
</div>
<div class="modal-body">
<p>
We help organizations and teams to implement, maintain and upgrade good UX strategy which eventually help you to create successful product/s gives priority to human experience.
</p>
<p>
Our experts will come and evaluate your current process and help you to understand and solves what blocks you from creating a UX culture within your organization.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</section>
<!-- Page 03 -->
<section class="case-studies" id="caseStudiesSection">
<div class="container">
<div class="section-title">
<h1>Case <span>Studies</span></h1>
<p class="secondory-text">Some of our finest crafted work</p>
</div>
<div class="row">
<div class="col-md-6 ">
<div class="case-study-item approvely" id="approvely">
<div class="case-study-details">
<h2>Re-thinking the first use experience</h2>
<p>1400% increased in active users within a month, after redesign and strategic turnaround.</p>
</div>
<div class="caption">
<h4>Approve.ly</h4>
<p>Location : Norway</p>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="case-study-item superoffice" id="superoffice">
<div class="case-study-details">
<h2>Strategizing revamp process to optimize UX</h2>
<p>How to enhance user experience without throwing away the old code base.</p>
</div>
<div class="caption">
<h4>Superoffice</h4>
<p>Location : Norway</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 ">
<div class="case-study-item icon-global" id="iconGlobal">
<div class="case-study-details">
<h2>Simplifying on-site healthcare assessments</h2>
<p>This initiative is to help users be mobile and carry out care assessments faster and more efficiently.</p>
</div>
<div class="caption">
<h4>Icon Global Solutions</h4>
<p>Location : Australia</p>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="case-study-item hatteland" id="hatteland">
<div class="case-study-details">
<h2>Is Whitespace so evil in enterprise applications?</h2>
<p>How to utilize whitespace in a complex interface to give optimum user experience</p>
</div>
<div class="caption">
<h4>Hatteland</h4>
<p>Location : Norway</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Page 04 -->
<section class="events" id="eventsSection">
<div class="container">
<div class="section-title">
<h1>Events</h1>
<p class="secondory-text"><span class="highlighted-text bold-text">Dear UX lovers</span>, we are passionate to share our knowlege and experience with the community</p>
<div class="promo-ad">
<h2>10 things you perhaps worry about.</h2>
<ol class="prompt-list confused-guy">
<li>I’m not sure what I’m doing is <span class="bold-text">right or wrong</span> as a <span class="bold-text">UX</span> designer.</li>
<li>I have read about <span class="bold-text">UX</span> but i dont know how to do it <span class="bold-text">practically.</span></li>
<li>How can I <span class="bold-text">convince</span> my customer/boss to do<span class="bold-text"> UX</span></li>
<li>I feel this <span class="bold-text">design</span> works well but they want me to <span class="bold-text">change</span> it.</li>
<li>Project Team follows Agile, how can I do <span class="bold-text">UX with Agile.</span></li>
<li>My Project is in a <span class="bold-text">tight schedule</span>, they dont have time for <span class="bold-text">UX.</span></li>
<li>I want to go up in the <span class="bold-text">career ladder</span> as a <span class="bold-text">UX</span> person but I dont know how.</li>
<li>how can I select the <span class="bold-text">right UX process</span> for my project?</li>
<li>what the hell is <span class="bold-text">UX process?</span></li>
<li>They treat me like a <span class="bold-text">Photoshop guy.</span></li>
</ol>
<div class=coming-soon-text>
Don't worry... we can help you to solve the mystery. A series of structured <span class="bold-text">hands-on workshops</span> addressing above problems and many more will be conducted very soon. (Limited seats)
<div class="button-panel"><a class="btn primary-button" id="join-button" href="https://docs.google.com/forms/d/1YeXfUn4f2l2KCQ5q3W1dIBq3tDGnW15ITa_npCDqgRA/edit" target="_blank">I want to join</a></div>
<h3>Stay in touch for more information.</h3>
</div>
</div>
</div>
</div>
</section>
<!-- Page 05 -->
<section class="our-team" id="meetTheTeamSection">
<div class="section-title">
<h1>Behind the <span>Screen</span></h1>
</div>
<div class="team-pic">
</div>
</section>
<!-- Page 06 -->
<section class="contact-us">
<div class="container">
<div class="section-title">
<h1>Got an <span>exciting</span> project for us?</h1>
</div>
<div class="row mapcontainer">
<div class="col-md-6">
<h2>Norway</h2>
<div id="map"></div>
<div class="col-md-6">
<address>
Bogstadveien 27B, 0355<br>
Oslo, Norway<br>
</address>
</div>
<div class="col-md-6">
<address class="phone">
<abbr title="phone"></abbr> +47 901 31348 <br>
<a href="mailto:info@99x.lk">info@99x.lk</a>
</address>
</div>
</div>
<div class="col-md-6">
<h2>Sri Lanka</h2>
<div id="map2"></div>
<div class="col-md-6">
<address>
65 Walukarama Rd,<br>
Colombo 00300, Srilanka<br>
</address>
</div>
<div class="col-md-6">
<address>
<abbr title="Phone"></abbr> +94 11 4721194 <br>
<a href="mailto:info@99x.lk">info@99x.lk</a>
</address>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="follow-us">
<p>Follow us via</p>
<div class="icons">
<a class="social-icons" href="https://www.facebook.com/HumanExperienceSL" target="_blank"><i class="mdi mdi-facebook"></i></a>
<a class="social-icons" style="display:none" href="https://twitter.com/99XTechnology" target="_blank"><i class="mdi mdi-twitter"></i></a>
<a class="social-icons" style="display:none" href="https://www.youtube.com/user/99XTechnology" target="_blank"><i class="mdi mdi-youtube-play"></i></a>
<a class="social-icons" style="display:none" href="https://medium.com/99xtechnology" target="_blank"><i class="mdi mdi-medium"></i></a>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid">
<span class="text-muted">Made with <i class="mdi mdi-heart-outline"></i> 99X Technology </span>
</div>
</footer>
</section>
<script src="assets/js/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="assets/js/hex-main.js"></script>
<script src="assets/js/locationmap.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDqmH5Yj4LaVrXLbmIQdwms26HcOqa7SzY&callback=initMap">
</script>
</body>
</html>