-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvesselresearch.html
733 lines (689 loc) · 26.6 KB
/
vesselresearch.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
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
<!doctype html>
<html class="no-js" lang="en" style="height: 100%;">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vessel Research - David Yang</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link href='https://fonts.googleapis.com/css?family=Raleway:400,700|Merriweather:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body style="height: 100%;">
<section class="bauhaus-header">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h1>Vessel Research</h1>
Product - Vessel Science
</div>
</div>
</div>
</section>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Origins</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
My roommate, <a href="https://www.linkedin.com/in/bryan-lin-6904ba47">Bryan Lin</a>, was a researcher for a biotech at the time. He often had to dash to the lab at midnight to end experiments and turn off machinery.
<br>
<br>
This was medieval in my eyes: I lived in the world of automated builds and Jenkins. My natural inclination was to design a prototype that could make Bryan's life easier.
<br>
<br>
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/vesselOrigins1.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
One of Bryan's most common task was managing reagent mixing cycles.
I took a <a href="http://www.lightlabsusa.com/Intelli-Mixer-Rotator-Mixer-RM-2-Large.html">rotator</a> used for mixing and connected it to an wifi-enabled arduino chip. The chip could toggle turn on/off the rotator.
<br>
<br>
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/vesselOrigins2.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
I built a simple cloud service that enabled Bryan to manage the rotator anywhere with a wifi connection. I added the ability to schedule rotations in the same manner you create calendar events. Less lab trips for Bryan!
</div>
</div>
</div>
<section class="lab-excerpt">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two exercept">
We believed that research labs were behind on productivity tools.
<br>
<br>
We could empower scientists in their daily workflows by leveraging cloud and mobile technologies.
<br>
<br>
We just needed to understand how we could help...
</div>
</div>
</div>
</section>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Understanding the Problem</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
We conducted ethnographic field studies to understand our users and the domain.
We started with open-ended interviews and contextual inquiries at over 20+ university labs.
<br>
<br>
Our burning questions:
</div>
</div>
<div class="row">
<div class="eight columns offset-by-three explanation-text groundrules">
<ol>
<li>What is the typical day like for a researcher?</li>
<li>How do researchers work with each other?</li>
<li>What do researchers hate doing?</li>
</ol>
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
<br>
From initial conversations, we extrapolated an overarching research lifecycle:
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/researchCycle.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-three explanation-text groundrules">
<ol>
<li>Plan <strong>protocols</strong> to test a hypothesis</li>
<li>Run the actual <strong>experiment</strong></li>
<li><strong>Record</strong> data and notes during the experiment</li>
<li><strong>Iterate</strong> and improve protocol</li>
</ol>
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<br>
<img class="u-max-full-width card-shadow" src="images/labNotebook.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
The <strong>lab notebook</strong> is at the heart of this research lifecycle. Protocols were written inside the notebook. Researchers documented all observations, data and results here.
<br>
<br>
The notebook is also at the center of many frustrations:
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Researchers had to paste in data for each experiment.
<br>
This could be anything from PH strips to photos; this process was laborious .
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/labNotebookPHStrips.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Most experiments were variations on past protocols.
<br>
Researchers had to tediously track these variations by hand.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/labNotebookVariables.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Researchers could fill up a notebook in a few weeks.
<br>
Data recall from past work became difficult.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/labNotebookStack.jpg">
</div>
</div>
</div>
<section class="labnotebook-excerpt">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two exercept">
<br>
<br>
We decided to design a web/mobile application centered on protocols, experiments and data recording.
<br>
<br>
We aimed to free scientists from the tedium associated with lab notebooks.
<br>
<br>
</div>
</div>
</div>
</section>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">User Roles</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
Two defined user roles came to light through our field research:
<br>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="five columns offset-by-one">
<div class="user-header">
<h5>Research Associate (RA)</h5>
<img class="u-max-full-width card-shadow" src="images/vesselResearcher.jpg">
</div>
<div class="user-info">
<strong class="info-label">Who:</strong>
<div class="info-text">
Post-docs, PHD candidates, undergrad assistants
</div>
<br>
<strong class="info-label">Tasks:</strong>
<div class="info-text">
Design and conduct experiments, gather data and results, publish papers
</div>
<br>
<strong class="info-label">Goals:</strong>
<div class="info-text">
Publish papers and graduate
</div>
<br>
</div>
</div>
<div class="five columns">
<div class="user-header">
<h5>Principal Investigator (PI)</h5>
<img class="u-max-full-width card-shadow" src="images/vesselPI.jpg">
</div>
<div class="user-info">
<strong class="info-label">Who:</strong>
<div class="info-text">
Professors/lab-owner
</div>
<br>
<strong class="info-label">Tasks:</strong>
<div class="info-text">
Lab administration, oversee researchers, review data and results, write grants for funding, publish papers
</div>
<br>
<strong class="info-label">Goals:</strong>
<div class="info-text">
Publish papers and keep lab funded
</div>
</div>
</div>
</div>
</div>
</div>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Workflow Design</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
I used the research lifecycle as the foundation for Vessel Research. I laid out a few core features that would carry users through this workflow:
<br>
<br>
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width" src="images/processMap.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
A protocol editor that followed standard scientific format and could track edits and variable changes.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/protocolEditor.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
An "experiment runner" where users could step through their protocols and record variable changes and data.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/experimentRunner.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Project pages where researchers could organize experiments and present their work.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/project.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
<br>
We reached out to researchers and sought early feedback as the code became demoable.
<br>
<br>
We first would inquire about the subject's personal lab workflow and then ask for initial impressions and criticisms of the product. This allowed us to rapidly iterate and validate (or invalidate) our design assumptions.
<br>
<br>
Here is one such <a href="https://docs.google.com/document/d/1OlIP4gsjw2plmuBNtmfkHl-Q2GTD9BAkz6U80TzRjbA/edit?usp=sharing">interview writeup</a>.
</div>
</div>
</div>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Brand Identity</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
I feel that science carries an air of bold adventure. In a romantic way, scientists are the explorers who push humanity forward. After all, these are the people who will cure cancer one day.
<br>
<br>
I was inspired by the winged design of NASA patches. I started with an angular "winged-v" to emulate this sense of intrepidness.
<br>
<br>
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width" src="images/vesselLogo1.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
<br>
Next, I wanted to ground the logo in something that scientist were familiar with. By "filling" up the V, I created the outline of a pipette tip.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/vesselLogo2.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/vesselLogo3.jpg">
</div>
</div>
</div>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Visual Identity</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
I focused on functionality first when I began prototyping the Vessel; I wanted to test the core features and workflows first before heavily investing in detailed designs.
<br>
<br>
Vessel was a content heavy app. Clean lines and muted colors would bring focus to the data and research itself.
I saved bright colors for highlight purposes inorder to bring focus on a specific context.
<br>
<br>
As the codebase matured, I started to iterate on the design. Here are some high fidelity mockups in Sketch:
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width card-shadow" src="images/vesselMockup1.jpg">
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width card-shadow" src="images/vesselMockup2.jpg">
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width card-shadow" src="images/vesselMockup4.jpg">
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width card-shadow" src="images/vesselMockup3.jpg">
</div>
</div>
</div>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Development</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
I built Vessel Research with the <a href="http://mean.io/#!/">MEAN</a> stack. I used <a href="http://ionicframework.com/">Ionic</a>, a hybrid mobile framework, to develop the iPhone and Android applications.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width" src="images/vesselStack.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
I was also responsible for training and managing our development team.
<br>
<br>
Two of my friends joined Vessel. They both had lab-research backgrounds but only touched computer science in high school. I mentored and trained them to be fullstack developers.
</div>
</div>
</div>
<section class="vesselHQ-excerpt">
<div class="container">
<div class="row">
<div style="text-align:center;"class="eight columns offset-by-two exercept">
<br>
<br>
Vessel Headquarters
<br>
<span style="font-size:2rem">( my apartment room )</span>
</div>
</div>
</div>
</section>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Design Patterns</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
Vessel was a designed to be a full-screen single page application.
I featured a simple left-to-right hierarchy with a vertical navigation bar.
<br>
<em style="color: gray;">These are screenshots of final code.</em>
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width card-shadow" src="images/vesselDesignPattern1.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
<br>
Each page had a title which also housed the the main actions. Color was used to highlight primary actions. Furthermore, I used color to form a distinction between <em>creation actions</em> and <em>editing actions</em>.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width" src="images/vesselDesignPattern2.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
Vessel also had a core set of common interaction patterns such as making comments and adding/removing. These <em>micro-interactions</em> would appear in many different pages in many different contexts.
<br>
<br>
I heavily leveraged <a href="https://docs.angularjs.org/guide/directive">Angular Directives</a> to build reusable and extensible components to articulate these patterns.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width" src="images/vesselDesignPattern3.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
Not only did these components reduce code repetition, but they also ensured unified and consistent interactions across the application.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width" src="images/vesselDesignPattern4.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
By fully taking advantage of directives and building a library of common interactions, I was able to safeguard design integrity without sacrificing development agility.
</div>
</div>
</div>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">User Testing</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
As we wrapped up our private beta, we began to fine-tune the initial onboarding experience.
The onboarding workflow illustrates how Vessel features fit in to our users' research cycle.
<br>
<br>
The first-time-user experience was very important; we did not want researchers to get lost after login. Our initial goal was to lower the friction for first-time-users and to get them recording their experiments and data as soon as possible.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/onboarding2.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
I conducted a series of usability tests for this feature. I asked our subjects (current or past lab researchers) to run through onboarding while thinking out loud.
<a href="https://docs.google.com/document/d/18SqS6BwLdd8UgFyNiNulwcBX9eIILBzfnQtjE-qCKXg/edit?usp=sharing">Sample writeup</a> of a onboarding usability test.
<br>
<br>
After many tests and iterations, we found our subjects wanted a more workflow-driven approach that explained our application in the context of their daily tasks.
<br>
<br>
We also discovered the need to improve our copy so that we could clearly explain how Vessel features worked together to aid the research process.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
We used visual diagrams and explanatory text to ground our features in terms that researchers were familiar with.
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width card-shadow" src="images/vesselOnboarding1.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
We were more direct and used wizards to guide users through an initial workflow.
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width card-shadow" src="images/vesselOnboarding2.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
We also generated initial documents and guided input step-by-step to reduce friction.
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width card-shadow" src="images/vesselOnboarding3.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
After the updates, we found that our test subjects were able to complete the basic tasks of creating an experiment and uploading data without any outside guidance.
</div>
</div>
</div>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Final Product</h3>
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
We launched Vessel for browsers, iOS, and Android on January 2015. The product was the culmination of six months of research, design and development.
</div>
</div>
<div class="row">
<div class="twelve columns">
<a href="https://app.vesselsci.com/#!/home">
<img class="u-max-full-width card-shadow" src="images/vesselPage.jpg">
</a>
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
The <a href="https://app.vesselsci.com/#!/home">home page</a> has a breakdown of all features. The application is available for free: give it a spin!
</div>
</div>
</div>
</section>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Outcomes</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
Vessel was adopted by individual researchers in the US, Canada, UK, Netherlands and India. College universities such as <a href="https://www.usfca.edu/">USF</a> and <a href="http://www.laney.edu/wp/">Lanely College</a> used the application to teach lab-based classes.
<br>
<br>
Ultimately, we ran into a few difficulties regarding our target market:
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text groundrules">
<ol>
<li>Most principal investigators (professors) did not care much about project management and organization; their primary focus was on securing grants.</li>
<li>Professors did not want to enforce workflows or software on their PHD students. </li>
<li>Pricing was an issue. Funding was lacking for most research labs.</li>
</ol>
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
We made Vessel Research free, and decided to pivot into a more enterprise focused product: <a href="/vesselproduction.html">Vessel Production</a>.
<br>
<br>
<br>
</div>
</div>
</div>
<section class="additional-projects">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h5 class="secondary-font section-title"> Next:</h5>
</div>
</div>
</div>
<a href="/vesselproduction.html" style="color:black;">
<div class="container">
<div class="row product-preview">
<div class="six columns">
<img class="u-max-full-width card-shadow" src="images/vesselProductionThumbnail.jpg">
</div>
<div class="six columns">
<h5>Vessel Production</h5>
<em class="case-study-label">Private Beta</em>
Batch and inventory management platform designed for Biotechs to effortlessly comply with FDA regulation.
</div>
</div>
</div>
</a>
<div class="container">
<div class="row">
<div class="twelve columns home">
<a href="/index.html">home</a>
</div>
</div>
</div>
</section>
</body>
</html>