-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexploratorium.html
92 lines (91 loc) · 4.62 KB
/
exploratorium.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
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<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">
<title>Exploratorium Plankton kiosk | Sam Ward</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="row">
<div class="small-9 small-centered large-centered columns"><h2>Sam Ward</h2></div>
</div>
<div class="row intro">
<div class="small-9 small-centered large-centered columns"><h1>Exploratorium Plankton kiosk</h1>
</div>
</div>
<div class="row">
<div class="small-11 small-centered large-centered columns">
<div class="project">
<div class="project_image"><img src="images/explo.png"></div>
<div class="project_contents">
Plankton Book is a touchscreen kiosk I designed for The Exploratorium, one of San Francisco’s most popular science museums. The museum was opening a new gallery devoted to life in the San Francisco Bay, right outside the museum’s doors. This kiosk told the story of the Bay’s microscopic life.
</div>
</div>
</div>
<div class="row">
<div class="small-11 small-centered large-centered columns">
<div class="project">
<div class="project_image left"><img src="images/image6.png"></div>
<div class="project_contents">
The museum had a few clear goals for the interactive: To show that the San Francisco Bay is filled with microscopic life (plankton); to show the Bay is a dynamic ecosystem, changing over time in response to conditions; that there is a large diversity of plankton species in the bay; and lastly, that that The Exploratorium is also an active research facility.
</div>
</div>
</div>
<div class="row">
<div class="small-11 small-centered large-centered columns">
<div class="project">
<div class="project_image"><img src="images/image9.png"></div>
<div class="project_contents">
With those goals in mind, I started exploring different interaction models that might accomplish the institution’s goals. One of the key limitations of the project is the time a user will interact with an in-gallery exhibit such as this kiosk. The average session is under 30 seconds, so the design had to communicate those points quickly.
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-11 small-centered large-centered columns">
<div class="project">
<div class="project_image"><img src="images/EXPL_info.png"></div>
<div class="project_contents">
One interaction model was driven by the aesthetics of the plankton themselves – users could explore the various species on a visual level. Another approach used a simulation model, where users could collect their own virtual plankton, and then analyze their sample, thereby echoing the research of Exploratorium scientists. A third approach was driven by data - the museum was interested in a data visualization of the plankton population as a main UI element.
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-11 small-centered large-centered columns">
<div class="project">
<div class="project_image"><img src="images/kiosk.jpg"></div>
<div class="project_contents">
During later design rounds, I continued to refine the interaction model. I decided a combination of the visual and data-driven approaches would be the best solution for the museum. User-testing prototypes with museum visitors showed us that a simple and straightforward approach to the design made the most sense, especially in light of the short engagement times.
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-2 small-centered large-centered columns footer"><a class="button secondary" href="index.html">HOME</a> </div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-42679505-2', 'auto');
ga('send', 'pageview');
</script>
<script src="js/scrollreveal.min.js"></script>
<script type="text/javascript">
(function(){
window.sr = ScrollReveal();
sr.reveal('.project_image');
})();
</script>
</body>
</html>