| layout | color | title | shortHeader | date | image |
|---|---|---|---|---|---|
portfolio |
light-green |
What I've been up to |
true |
1-1-2005 |
/images/projects/envelope-collective/EnvelopeCollective-Cover.jpg |
{% assign pageColor = 'BFE3F2' %}
<div class="gallery">
<img class="br2" src="/images/bio/farm.jpg" alt="A pleasant farm road in the daytime in Maryland" />
<img class="br2 hidden-m" src="/images/bio/farm2.jpg"
alt="A barn in the autumn with several sheep milling about" />
<img class="br2 hidden-s" src="/images/bio/farm4.jpg" alt="A field of corn during sunset in Maryland" />
</div>
<p>
I grew up in rural Maryland during the final analog years, helping raise animals and making cash on the
weekends tending to farms nearby. The plan was to keep doing this until college, but I discovered the
web.</p>
<h3>2000</h3>
<!--
////////////////////////////////////////////////////////////////
VIRTUAL SPROCKETS
////////////////////////////////////////////////////////////////
-->
<img alt="Virtual Sprockets homepage, 2002" src="/images/bio/virtualsprockets.jpg"
class="br2 gallery-single" />
<p>I got pretty good with Photoshop and started working after school for a web development company, <a
href="http://www.virtualsprockets.com/" class="highlight"
style="color:#5652ba; text-decoration-color: #5652ba">VirtualSprockets </a>, where I eventually
learned to code. We
built mailing list
software and early online web store infrastructure for non-profits like the <a
href="https://aclu.org/">ACLU</a>
and <a href="https://defenders.org">Defenders of Wildlife</a>. In 2003, the company was acquired by <a
href="https://www.crunchbase.com/organization/kintera">Kintera</a>, which was bought five years
later by <a href="https://www.crunchbase.com/organization/blackbaud">Blackbaud</a>, which will probably
get bought by someone else down the road.</p>
<h3>2005</h3>
<!--
////////////////////////////////////////////////////////////////
THE ENVELOPE COLLECTIVE
////////////////////////////////////////////////////////////////
-->
<img alt="The Envelope Collective" src="/images/projects/envelope-collective/EnvelopeCollective-Cover.jpg"
class="br2 gallery-single">
<p>I created <a href="/projects/envelope-collective" class="highlight"
style="color:#ad170c; text-decoration-color: #ad170c">The Envelope Collective </a> with <a
href="http://mrmrs.cc/">Adam Morse</a>
while we were attending Oberlin College in Ohio. We rented a post office box and invited people from the
internet to send us art in the mail, with the promise to scan and share every piece we received. Over
two years, we
received 1,500 submissions from 30 countries and shared them all online. It was even the Yahoo site of
the day,
back when that was a big deal.</p>
<p>The Oberlin College Art Library's <a
href="https://isis2.cc.oberlin.edu/library/art/MailArt/History-MailArt.html">fondly
remembers</a> the project:</p>
<blockquote>
In 2005 two senior studio majors created "The Envelope Collective," a project that collected and scanned
decorated envelopes from contributors around the world. Neither artist was aware at the time of the
Oberlin
Library Mail Art Collection, nor of the mail art movement in general.
</blockquote>
<h3>2006</h3>
<!--
////////////////////////////////////////////////////////////////
SECRETS
////////////////////////////////////////////////////////////////
-->
<img alt="Virginia Square metro" src="/images/bio/virginia.jpg" class="br2 gallery-single" />
<p>I got a job working for a defense contractor in Washington, DC. I had a clearance and did
work for various government agencies.</p>
<h3>2008</h3>
<!--
////////////////////////////////////////////////////////////////
OPOWER
////////////////////////////////////////////////////////////////
-->
<img alt="President Obama visits Opower in 2010" src="/images/bio/obama-opower.jpg"
class="br2 gallery-single" />
<p>Seeking a more mission-oriented project, I joined a tiny company called Positive Energy as its first
designer and frontend engineer. We sent <a
href="https://www.researchgate.net/figure/Example-of-OPOWER-Home-Energy-Report_fig3_277986161">energy
reports</a> to
folks showing them how they compared to similar homes
nearby as part of an effort to
reduce overall energy consumption <sup><a class="footnote" href="#fn3-25665" id="fnr3-25665"
title="see footnote">1</a></sup>. The plan worked -- the company got bigger, was mercifully
renamed to <a href="https://opower.com/" class="highlight"
style="color:#3978d9; text-decoration-color: #3978d9">Opower </a>, received a <a
href="https://www.youtube.com/watch?v=k6bgVKSnMs0">visit from the
President</a>, <a href="https://www.vox.com/2014/4/4/11625292/opower-shares-soar-in-ipo">went
public</a>, and then went less public into the arms of <a
href="https://www.oracle.com/corporate/pressrelease/oracle-buys-opower-050216.html">Oracle</a>.</p>
<h3>2012</h3>
<!--
////////////////////////////////////////////////////////////////
DOODLE OR DIE
////////////////////////////////////////////////////////////////
-->
<img alt="Doodle or Die website screenshot" src="/images/projects/doodle-or-die/screen-explore.jpg"
class="br2 gallery-single" />
<p>Moonlighting after-hours at Opower, I worked on a game called <a href="/projects/doodle-or-die"
class="highlight" style="color:#3f77f8; text-decoration-color: #3f77f8">Doodle or Die </a> with a
few
other folks
<sup><a class="footnote" href="#fn4-25665" id="fnr4-25665" title="see footnote">2</a></sup>. The
concept is
probably familiar -- it's like the game of telephone, but with a drawing round every other turn. At its
peak, we had over
3 million players creating millions of drawings a month. It was so much fun to work on this game.
</p>
<p>I also had a few smaller creative projects, notably <a href="/projects/windoodles">Windoodles</a> and <a
href="/projects/imaginawesome">Imaginawesome</a>. All were cute and
whimsical, back when the internet was still the right size for those kinds of things.</p>
<h3>2013</h3>
<!--
////////////////////////////////////////////////////////////////
MAPBOX
////////////////////////////////////////////////////////////////
-->
<img alt="The Mapbox DC office, 2014" src="/images/bio/mapbox.jpg" class="br2 gallery-single">
<p>Seeking early startup vibes again, I joined <a href="https://mapbox.com" class="highlight"
style="color: hotpink; text-decoration-color: hotpink">Mapbox </a> to focus on design and
engineering, eventually creating and leading the Labs team. I built <a
href="https://blog.mapbox.com/download-the-completely-redesigned-meattext-5f0189400f5b">mobile
apps</a>, <a href="projects/million-runs">made map visualizations</a>,
<a href="https://blog.mapbox.com/detailed-terrain-maps-for-athletes-83a861263a3f">designed maps</a>, <a
href="https://blog.mapbox.com/walking-directions-api-98951c9896c7">built APIs</a>, helped the
company <a
href="https://techcrunch.com/2015/06/17/mapbox-raises-52-6m-led-by-dfj-to-build-the-map-layer-for-all-apps/">fundraise</a>,
and moved deeper into
strategy and <a href="https://blog.mapbox.com/pinterest-scaling-beautiful-maps-f087eb9e0d3a">sales</a>
as we expanded the
business.
</p>
<h3>2015</h3>
<!--
////////////////////////////////////////////////////////////////
SLACK
////////////////////////////////////////////////////////////////
-->
<div class="gallery">
<img alt="The Slack SF office, 2016" src="/images/bio/slack-office.jpg" class="br2">
<img alt="The Slack Kit project logo" src="/images/bio/slack-kit-logo.png" class="br2 hidden-s">
</div>
<p>I began working at <a href="https://www.slack.com/" class="highlight"
style="color:#6e13a6; text-decoration-color: #6e13a6">Slack </a> as an engineer,
working with the newly-created Platform team to
<a href="https://twitter.com/heyitsgarrett/status/677552114399207424">build and launch</a> the <a
href="https://www.slack.com/apps">App
Directory</a>. I eventually helped create and grow <a
href="https://slack.engineering/the-gradual-design-system-how-we-built-slack-kit/">Slack Kit</a>,
Slack's interface design system <sup><a class="footnote" href="#fn4-kit" id="fnr4-kit"
title="see footnote">3</a></sup>. I also shipped <a
href="https://twitter.com/heyitsgarrett/status/741390884185350144">bugs</a>,
<a href="https://twitter.com/SlackHQ/status/1172165133956603904">dark mode</a>, a <a
href="https://twitter.com/heyitsgarrett/status/1085690889194823681">company rebrand</a>, and a lot
of other code that
may be holding a few rectangles together somewhere down deep in the application.
</p>
<p>After it received organizational support, I led the Slack Kit team, overseeing engineering and product
direction. It was combined with Slack's
Accessibility effort into the Product Systems team, which I
led for my final two years with the company.</p>
<h3>2021</h3>
<!--
////////////////////////////////////////////////////////////////
WONDERFUL TOOLS
////////////////////////////////////////////////////////////////
-->
<p>
I left Slack to build something new with <a href="http://bruceape.com/">Bruce Sullivan</a>. It was a
company named <strong style="color:#E7566C; text-decoration-color: #f59590;">Wonderful Tools</strong>, working on a product
that had an ambitious scope. We couldn't align business goals with the product's potential, so we put it on hold.
</p>
<h3>2022</h3>
<!--
////////////////////////////////////////////////////////////////
FIGMA
////////////////////////////////////////////////////////////////
-->
<img alt="The Figma Office, SF California, 2023" src="/images/bio/figma.jpg" class="br2 gallery-single">
<p>
In 2022, <a href="https://figma.com">Figma</a> began to invest more seriously in its prototyping capabilities. I joined the team to lead the product
effort, working with a team of engineers and designers to bring <a href="https://www.youtube.com/watch?v=3OeeONOueF0">advanced prototyping</a> and higher fidelity
functionality to the product.
</p>
<div class="footnotes">
<ol>
<li id="fn3-25665">
<p>We built Opower's PDF reports using HTML on top of a Java engine. Due to the state of PDF
technology at the
time, we could only use default HTML for any visual rendering. I built the bar chart
comparisons entirely with
HTML tables, using nesting and background colors to create the overall effect. It felt like
a
real heist at the time. <a class="reversefootnote" href="#fnr3-25665"
title="return to article">↩︎</a></p>
</li>
<li id="fn4-25665">
<p>Dylan Greene and Aaron Silverman built the original game in a 48-hour Node.js hackathon. I
joined them after
to redesign the experience and build out new features. Wyn Bennett built the mobile version
of the game.
<a class="reversefootnote" href="#fnr4-25665" title="return to article">↩︎</a>
</p>
</li>
<li id="fn4-kit">
<p>Design systems are the library of buttons and knobs that live between Slack's code and users'
button presses, along with a ongoing process of governance for understanding and
explaining how all the visual interface elements should work together.
<a class="reversefootnote" href="#fnr4-kit" title="return to article">↩︎</a>
</p>
</li>
</ol>
</div>
<div class="mt6 mb4">
<div class="h3 w3 center partymonster db" title="Whoa there, please don't pet the Monster">
<!-- Party monster! -->
</div>
</div>
</div>
</div>