/
content-localdata.php
132 lines (130 loc) · 7.94 KB
/
content-localdata.php
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
<section id="opportunity" class="page-section">
<div class="outer-container">
<div class="inner-container mt-5">
<h3 class="future-A h3">opportunity</h3>
<p>If cities and towns across the country are to thrive in the decades ahead, the detailed, parcel-level data that community groups, planners and government agencies collect needs to be transformed.</p>
<p>When three eager technologists were embedded in the Detroit city government as part of their Code for America fellowship, they knew they had their work cut out for them.</p>
<ol class="list-unstyled os-numbered-list mb-4">
<li><span class="number future-A h3">1</span>They saw Detroit as the vast sprawling city.</li>
<li><span class="number future-A h3">2</span>Looking for the best opportunities to use technology.</li>
<li><span class="number future-A h3">3</span>Outdated surveys providing inadequate data for informed decisions, was a major issue.</li>
<li><span class="number future-A h3">4</span>Surveying was a time and resources-intensive process involving paper forms, content-entry errors and many months to plot an area.</li>
</ol>
</div>
</div>
<blockquote>
<p><span class="quote">“</span>They saw Detroit, the vast sprawling city, and the outdated surveys providing inadequate data for informed decisions, as a major issue.<span class="quote">”</span></p>
</blockquote>
</section>
<section id="process" class="page-section ">
<figure class="alignnone mt-nudge">
<img src="<?php echo os_path('inspiration.jpg', 'localdata') ?>" width="1400" height="530">
<div class="outer-container"><figcaption class="inner-container">Inspiration</figcaption></div>
</figure>
<div class="outer-container">
<h3 class="future-A h3 inner-container mt-5">process</h3>
<p class="mt-1 inner-container">We worked with LocalData’s team to streamline the visual communication of their offering. The fully configureable nature of the product and its emphasis on geolocation technology is revealed in the compass arrow icon, which was inspired by the Tinker Toys from our youth, embodying the spirit of a set of tools with limitless possibilities. The elemental color set further emphasizes the simplicity that is at the core of the value proposition.</p>
</div>
<figure class="ld-logo active-on-inview mt-5" data-offset="0.5">
<div class="ld-logo-container clearfix">
<img class="compass" src="<?php echo os_path('LD-Compass.png', 'localdata') ?>" srcset="<?php echo os_path('LD-Compass.png', 'localdata') ?> 1x, <?php echo os_path('LD-Compass-@2x.png', 'localdata') ?> 2x" width="190" height="190" />
<img class="logotype" src="<?php echo os_path('LD-Wordmark.png', 'localdata') ?>" srcset="<?php echo os_path('LD-Wordmark.png', 'localdata') ?> 1x, <?php echo os_path('LD-Wordmark-@2x.png', 'localdata') ?> 2x" width="450" height="79" />
</div>
</figure>
<figcaption class="outer-container">
<div class="inner-container">The LocalData Wordmark</div>
</figcaption>
<div class="outer-container">
<p class="inner-container mt-5">We further helped the team design a product interface with an emphasis on clear and bold information communication, highlighting key data points with large and crisp typography.</p>
</div>
<figure class="os-slideshow-container mt-5">
<div id="tool-landing-dots"></div>
<ul class="list-unstyled os-slideshow center-mode" data-slick='{ "prevArrow": "#tool-landing-nav .prev", "nextArrow": "#tool-landing-nav .next", "appendDots": "#tool-landing-dots" }'>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('LD-Tool1-min.png', 'localdata'); ?>" srcset="<?php echo os_path('LD-Tool1-min.png', 'localdata'); ?> 1x, <?php echo os_path('LD-Tool1-@2x-min.png', 'localdata'); ?> 2x" width="850" height="600">
</div>
</div>
<figcaption>Local Data Tool Login Page</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('LD-Tool2-min.png', 'localdata'); ?>" srcset="<?php echo os_path('LD-Tool2-min.png', 'localdata'); ?> 1x, <?php echo os_path('LD-Tool2-@2x-min.png', 'localdata'); ?> 2x" width="850" height="600">
</div>
</div>
<figcaption>Local Data Tool Landing Page</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('LD-Tool3-min.png', 'localdata'); ?>" srcset="<?php echo os_path('LD-Tool3-min.png', 'localdata'); ?> 1x, <?php echo os_path('LD-Tool3-@2x-min.png', 'localdata'); ?> 2x" width="850" height="600">
</div>
</div>
<figcaption>Local Data Survey Dashboard</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('LD-Tool4-min.png', 'localdata'); ?>" srcset="<?php echo os_path('LD-Tool4-min.png', 'localdata'); ?> 1x, <?php echo os_path('LD-Tool4-@2x-min.png', 'localdata'); ?> 2x" width="850" height="600">
</div>
</div>
<figcaption>Local Data Neighborhood Map page</figcaption>
</li>
</ul>
<?php os_slide_nav("tool-landing-nav"); ?>
</figure>
</section>
<section id="solution" class="page-section ">
<div class="outer-container">
<h3 class="future-A h3 inner-container">solution</h3>
<p class="mt-1 inner-container">The same logic applies to design of other communication, such as the website, where data points explain how Local Data has already helped a host of other cities, from Lynn, Massachusetts, to Gary, Indiana.</p>
</div>
<figure class="os-slideshow-container mt-5">
<div id="homepage-slide-dots"></div>
<ul class="list-unstyled os-slideshow center-mode" data-slick='{ "prevArrow": "#homepage-slide-nav .prev", "nextArrow": "#homepage-slide-nav .next", "appendDots": "#homepage-slide-dots" }'>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('LD-Homepage-min.png', 'localdata') ?>" srcset="<?php echo os_path('LD-Homepage-min.png', 'localdata') ?> 1x, <?php echo os_path('LD-Homepage-@2x-min.png', 'localdata') ?> 2x" width="850" height="600">
</div>
</div>
<figcaption>Local Data Homepage</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('LD-In-Action-Page-min.png', 'localdata') ?>" srcset="<?php echo os_path('LD-In-Action-Page-min.png', 'localdata') ?> 1x, <?php echo os_path('LD-In-Action-Page-@2x-min.png', 'localdata') ?> 2x" width="850" height="600">
</div>
</div>
<figcaption>Local Data Action Page</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('LD-Story-Page-min.png', 'localdata') ?>" srcset="<?php echo os_path('LD-Story-Page-min.png', 'localdata') ?> 1x, <?php echo os_path('LD-Story-Page-@2x-min.png', 'localdata') ?> 2x" width="850" height="600">
</div>
</div>
<figcaption>Local Data Story Page</figcaption>
</li>
</ul>
<?php os_slide_nav("homepage-slide-nav"); ?>
</figure>
<figure class="aligncenter">
<img src="<?php echo os_path('LD-Stationery-min.png', 'localdata') ?>" srcset="<?php echo os_path('LD-Stationery-min.png', 'localdata') ?> 1x, <?php echo os_path('LD-Stationery-@2x-min.png', 'localdata') ?> 2x" width="1200" height="797">
<div class="outer-container">
<figcaption class="inner-container">LocalData Stationery</figcaption>
</div>
</figure>
<div class="colophon mt-2 outer-container clearfix">
<p class="h3 future-A h3 inner-container"><a href="http://localdata.com" class="cta-link" target="_blank">localdata.com <span class="icon arnhem rotate-cc-45">→</span></a></p>
</div>
</section>