This repository has been archived by the owner on Feb 6, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsmartair.html
317 lines (218 loc) · 14.5 KB
/
smartair.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="//f.fontdeck.com/s/css/I+7V/2ZBKU5S9V0kveK9CHDgBZw/DOMAIN_NAME/34543.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic' rel='stylesheet' type='text/css'>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ted Patterson / Work</title>
<meta name="viewport" content="width=device-width, target-densitydpi=high-dpi" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="lean/lean-slider.js"></script>
<link rel="stylesheet" href="lean/lean-slider.css" type="text/css" />
<script type="text/javascript" src="jquery/scrolltotop.js"></script>
<script type="text/javascript" src="jquery/jquery.js"></script>
<!--my stylesheets -->
<link rel='stylesheet' media='all' href="style.css" />
<link rel='stylesheet' media='all and (max-width: 700px)' href='mobile.css' />
</head>
<body>
<div class="content" >
<h1 class="mobile"><a class="name-link" href="http://www.tedpatterson.io">Ted Patterson</a></h1>
<header id="header-content">
<h1>
<a class="name-link" href="http://www.tedpatterson.io">Ted Patterson</a>
</h1>
<nav>
<ul>
<li class="leftmost"><a class="work active" href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</nav>
</header>
<!-----below -->
<div id="title">
<h2>Smart Air<br/>Who needs clean, affordable air?</h2>
</div>
<div class="words bottom2-5">
<p>Smart Air is a small social enterprise that promotes DIY air filters as a low-cost solution to indoor particulate air pollution in China and India.</p>
</div>
<div class="full-image">
<img class="notop " src="images/smartair/P11.jpg">
<img class="notop " src="images/smartair/R2.jpg">
<!--<a class="big-link" href=""><div class="big-link-div">See the working prototype</div></a>-->
</div>
<div class="side-col">
<p><span class="bold">Type</span> <br/> Full-time position </a></p>
<p><span class="bold">Roles</span> <br/> Graphic designer (UX/UI, brochure, poster, warning label, business card, advertisement, etc.), product photographer, videographer, video editor, project management, R & D specialist, PR rep, and workshop organizer / promoter.</p>
<p><span class="bold">Timeline</span> <br/>May 2013 – July 2015</p> </div>
<div class="words">
<h4 class="notop">The Big Picture</h4>
<p>In January 2013, PhD student Thomas Talhelm wondered why air purifiers cost so much. He bought a HEPA filter on Taobao, strapped it to a simple fan, bought a particle counter, ran some tests, and published the results on a blog he called Particle Counting.</p>
<p>A few magazines wrote about Thomas's "rediscovery," and then the Beijing Energy Network suggested he lead DIY workshops to help other concerned Beijingers build their own.</p>
<p>When people said they had trouble finding the right type of fan and a trustworthy HEPA, Thomas and his friends Gus and Anna decided to launch Smart Air in September 2013 to ship fans and the best HEPAs they could find to people all over China.</p>
<p>The team believes that if more people saw our opensource data and testing, more people would know that clean air doesn't have to cost thousands of RMB.</p>
<div class="pull-out">
<p class="pull-quote">“Filters are actually very simple -- a HEPA filter is all you need to get over 99 percent of the PM 2.5
” </p>
<!-- <p class="credit"></p> -->
</div>
<p></p>
</div>
<div class="words">
<h4>Kicking Things In Gear</h4>
<p>In the summer of 2013 I came in contact with a funny guy named Gus Tate that happened to be leading an initiative in Beijing to educate people on the production and effectiveness of low-cost, DIY air purification alternatives. I jumped at the chance to volunteer and I quickly fell into place helping Smart Air streamline mostly all of their company assets. After all was said and done, I was able to improve the look and function of their marketing materials, Taobao storefront UX/UI design, educational pamphlets, product photos, promotional test videos, business card designs, workshop posters and many other assets so that the startup was able to better transition into what it is now.</p>
<p>I was very lucky to have crossed paths with the Smart Air team and, because of my experiences with them, I am better prepared to work with startups/companies (no matter their size, location, or native tongue) and understand what I am capable of in environments of varying levels of pressure, experience, and opinion.</p></p>
</div>
<div class="left-img nobottom">
<img class="nobottom" src="images/smartair/F2.jpg"/>
<img class="nobottom" src="images/smartair/P1.jpg"/>
<img class="nobottom" src="images/smartair/F1.jpg"/>
<img class="nobottom" src="images/smartair/P3.jpg"/>
<img class="nobottom" src="images/smartair/B2.jpg"/>
</div>
<div class="side-col">
<p>My first projects at Smart Air were focused in on print media. While I was focused on this I was able to develop a good collection of posters, pamphlets, handouts, infographics, product booklets, pop-up banners, warning labels, and whole bunch of other elements.</p>
</div>
<div class="left-img nobottom">
<img class="nobottom" src="images/smartair/L1.jpg"/>
<img class="nobottom" src="images/smartair/P8.jpg"/>
</div>
<div class="side-col">
<p>After standards were set, I started to look over our reserve and tried to refine the look / feel of the overall brand. In this period, I was tasked with running a campaign to find a new logo and product exteriors for the company and after lots of back and forth with the team, a teammate and I developed a few logos that met our requirements.</p>
</div>
<div class="left-img nobottom">
<img class="nobottom" src="images/smartair/P7.jpg"/>
<img class="nobottom" src="images/smartair/P9.jpg"/>
</div>
<div class="side-col">
<p>On top of everything mentioned, I was also tasked with updating our product catalog and photography. So I changed hats, yet again! I rent a camera and lighting gear or hired a freelance photographer, from time to time, and made sure that our units, despite the fact that they were budget, do-it-yourself products looked clean and cool. In addition, I also filmed and edited several promotional videos for Smart Air. These were used for social media and general education purposes. </p>
</div>
<div class="words">
<h4>Web development & mobile projects</h4>
<p>While I was with Smart Air I was tasked with streamlining a few of our online components. In specific, I was able to work on our e-commerce site and help our users access / understand our complex (and at times boring) test data. Through a simple system of icons, colors, and shape cues I was able to show users were to go, with out the use of text. In addition and before my departure from the group, I started developing a mobile app that was to be used in conjunction with a Smart Air branded filter. </p>
</div>
<div class="left-img nobottom">
<img class="nobottom" src="images/smartair/W0.jpg"/>
<img class="nobottom" src="images/smartair/W3.gif"/>
<img class="nobottom" src="images/smartair/W1.jpg"/>
</div>
<div class="side-col">
<p>In preparation for our Taobao overhaul, I dove into mobile and destop UX/UI articles spread across the web. This information provided me a great deal of insight as to where web experiences were headed, but, in the end, it help me pinpoint which direction we needed to go. I wanted to make it extremely easy for people to find their way while cruising down the page, so I decided to color code all of the different categories and denominate each section with a descriptive icon.</p>
</div>
<div class="left-img nobottom">
<img class="nobottom" src="images/smartair/A2.jpg"/>
<img class="nobottom" src="images/smartair/A4.jpg"/>
<img class="nobottom" src="images/smartair/A5.jpg"/>
</div>
<div class="side-col">
<p>Finally and before I made my way back to the U.S., I had the oppotunity to follow up on my mobile app and web experiences research by trying to develop mockups and some basic mobile apps. It never left the prototyping phase, but I'm somewhat eager to back track and revist this project. It was supposed to be a remote application for a Smart Air branded air purifier, but repurposing it and using the parts to create a trendy, accessible AQI app would be just as good, too.</p>
</div>
<div class="words">
<h4>Looking back</h4>
<p>Working with this team was a very demanding and passionate endeavor. All of us were in it to make a difference and at the end of the day, I'm glad I took on the challenge to improve what I could, while I was in Beijing. I mean, there's not many moments that I can look back on and say "I was responsible for helping, improving, or saving millions (possibly billions) of Chinese, Indian, and expat lives."</p>
<p>On top of this, through the work that you've seen listed here and those unlisted, I was provided with a lens that helps understand what it means to budget your time, resources, and capitol while running a startup. Every project that I've taken on has called on the failures and successes of this team and I have no doubt that I am exponentially better because of this.</p>
</div>
<div class="full-image">
<img class="nobottom" src="images/smartair/R3.jpg"/>
</div>
<div class="clear">
</div>
<footer>
<!--<a href="#" class="scrollToTop">
<div id="scrollbartop">
<p class=center> <i class="center fa fa-chevron-up fa-3x"></i></p>
</div>
</a>-->
<div class="content">
<h2>More work<i class="center fa fa-chevron-right fa-2x"></i></h2>
<a href="codekickoff.html" target="blank">
<div data-content="I started up a free programming practice meetup & group for people living in Knoxville." class="image right top">
<img class="top" src="images/codekickoff/M1.jpg"/>
</div>
</a>
<a href="growbioplastics.html" target="blank">
<div data-content="Over a weekend, I helped a startup build up a communicative website and a strong marketing strategy. " class="image">
<img class="top" src="images/growbioplastics/W1s.jpg"/>
</div>
</a>
<a href="codeworks.html" target="blank">
<div data-content="I mentored six startups and fine-tuned the image of a new code-focused accelerator." class="image right smartair">
<img src="images/codeworks/W1s.jpeg" />
</div>
</a>
<a href="mapsneedreading.html">
<div data-content="I crafted a website and cross-platform media that represented a Knoxville-based band's recently released EP. " class="image">
<img src="images/mapsneedreading/W4.jpeg"/>
</div>
</a>
<a href="smartair.html">
<div data-content="I refined the image of a DIY air purification startup that has challenged the status quo of a dishonest and profitable product." class="image right smartair">
<img src="images/smartair/W1s.jpg" alt="" />
</div>
</a>
<a href="jingsing.html">
<div data-content="After reconnecting with a friend from my days couchsurfing through New Zealand, I helped build up a choir and its brand." class="image jingsing">
<img src="images/jingsing/R1.jpg" alt="" />
</div>
</a>
<a href="jaccc.html">
<div data-content="I was commissioned by a Beijing based brewery and comedy crew to create a few event posters and some wild label concepts." class="image right jinga">
<img src="images/jaccc/D2.jpg"/>
</div>
</a>
<a href="juicebm.html">
<div data-content="I created basic t-shirt designs, menus, and brochures for a juice cleanse company." class="image juicebm">
<img src="images/juicebm/T1s.jpg"/>
</div>
</a>
<a href="countrygentlemen.html">
<div data-content="I found three other musicians that wanted to jam around town and, naturally, ended up becoming a graphic artist. " class="image countrygentlemen">
<img src="images/countrygentlemen/C1.jpg" alt="" />
</div>
</a>
</div>
<div class="words aboutme">
<h4>Connect with me.</h4>
<ul class="icons">
<li><a href="https://www.linkedin.com/pub/ted-patterson/72/583/877" target="blank"><i class="fa left-side mobile-left-side fa-linkedin fa-2x"></i></li></a>
<li><a href="https://https://www.twitter.com/tedjpatterson" target="blank"><i class="fa fa-twitter fa-2x"></i></li></a>
<li><a href="https://github.com/tedpatterson" target="blank"><i class="fa fa-github fa-2x"></i></li></a>
<li><a href="https://www.pinterest.com/tedjpatterson/spark/" target="blank"><i class="fa left-side mobile-left-side fa-pinterest fa-2x"></i></li></a>
<li><a href="https://instagram.com/tedjpatterson" target="blank"><i class="fa left-side mobile-left-side fa-instagram fa-2x"></i></li></a>
<li><a href="mailto:tedjpatterson@gmail.com" target="blank"><i class="fa left-side fa-envelope fa-2x"></i></li></a>
</ul>
</div>
<div class="clear"></div>
</footer>
</div> <!-- content div end -->
</div>
<script type="text/javascript">
$(document).ready(function() {
var slider = $('#slider').leanSlider({
directionNav: '#slider-direction-nav',
controlNav: '#slider-control-nav',
});
}); </script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12867043-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-12867043-4', 'tedpatterson.io');
ga('send', 'pageview');
</script>
</body>