-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwork.html
executable file
·169 lines (167 loc) · 9.45 KB
/
work.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
<!doctype html>
<html lang="en" class="invert-dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chris Lee</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css"/>
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19583432-1']);
_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>
</head>
<body class="bg-near-white dark-gray">
<nav class="fixed top-0 bg-near-white gill-sans f6 ttu w-100 z-1">
<ul class="fw6 list ph4 ph5-ns flex-ns flex-row cl-mw center items-center nowrap overflow-x-auto">
<li class="dib mr4 flex-auto">
<a href="/" class="link dark-gray hover-cl-blue pv3"
><span class="tracked-mega">Chris Le</span>e</a
>
</li>
<li class="dib mr4 bb bw1 dark-gray pv3" style="margin-top: 2px">
<span class="tracked-mega">Wor</span>k
</li>
<li class="dib mr4">
<a href="/posts" class="link dark-gray hover-cl-blue pv3"
><span class="tracked-mega">Writin</span>g</a
>
</li>
<li class="dib">
<a href="/about" class="link dark-gray hover-cl-blue pv3"
><span class="tracked-mega">Abou</span>t</a
>
</li>
</ul>
</nav>
<main class="charter f6 lh-copy cl-mw center pa4 pt6 pa5-ns pt6-ns">
<section class="mb5 pb5 bb b--black-10">
<p class="f4 f3-ns lh-large mb4">Real decisions aren't simple. I solve complex problems through a combination of <strong class="cl-blue fw6">curiosity</strong>, <strong class="cl-blue fw6">creativity</strong>, and <strong class="cl-blue fw6">analytical decision-making</strong>.</p>
<div class="cf flex">
<div class="w-100">
<ul class="list">
<li class="mv1">Product strategy</li>
<li class="mv1">Interaction design</li>
<li class="mv1">Motion design</li>
<li class="mv1">Prototyping</li>
</ul>
</div>
<div class="w-100">
<ul class="list">
<li class="mv1"><a href="mailto:[email protected]" class="dark-gray hover-cl-blue">[email protected]</a></li>
<li class="mv1"><a href="https://twitter.com/cleerview" class="dark-gray hover-cl-blue">Twitter</a></li>
<li class="mv1"><a href="https://www.linkedin.com/in/cleer/" class="dark-gray hover-cl-blue">LinkedIn</a></li>
</ul>
</div>
</div>
</section>
<section class="mb5">
<div class="cf mb3 tl-ns">
<img src="images/ubereats-icon.png" class="w-icon fl mr3 br-icon shadow-icon">
<p><h2 class="fw6 di">Uber Eats</h2>, Senior Designer II</p>
<p>2020 to present</p>
</div>
<p class="lh-large mb3">I design our menus experience, ranging from internal tools for restaurants to consumer ordering functionality.</p>
</section>
<section class="mb5">
<div class="cf mb3 tl-ns">
<img src="images/chrome-icon.png" class="w-icon fl mr3 br-icon shadow-icon">
<p><h2 class="fw6 di">Google Chrome</h2>, Staff Designer</p>
<p>2013 to 2020</p>
</div>
<p class="lh-large mb3">I started working on Chrome as new college grad, creating one of the world's most popular software products with about five other designers. Over my seven years there, the team grew to dozens - and I initiated and drove some of our most ambitious initiatives.</p>
<blockquote class="mv3 bl bw1 b--black-10 pl3">
<p class="lh-large mb3 i">It's shameful that something so important is so intangible to describe, but Chris builds products. He *gets* what's important to systems and platforms, and then executes on them, and keeps executing on them until something takes hold in the org. He understands the value of planting seeds and seeing them come to fruition later.</p>
<footer>– Glen Murphy, UX Director, Chrome & Android</footer>
</blockquote>
<div class="mt4">
<div class="mv4 sw-100 bg-black-05 pa3">
<div class="pa3">
<h3 class="fw6">Mobile tab groups</h3>
<p class="lh-large">Even as computing has gone mobile, we often fall back to our desktop computers for complex tasks like buying a new pair of shoes or planning a trip. I led a redesign of Chrome's tabs experience to help you get these things done on the go. Featured on the <a href="https://blog.google/products/chrome/get-more-done-with-google-chrome/" class="dark-gray hover-cl-blue">Google blog</a>.</p>
</div>
<div class="flex-l">
<div class="w-100 pa3">
<img src="images/chrome-tg-1.gif" style="width: 100%; max-width: 360px">
<p class="lh-large mt2">Tab groups help you organize longer running, multiple page tasks</p>
</div>
<div class="w-100 pa3">
<img src="images/chrome-tg-2.gif" style="width: 100%; max-width: 360px">
<p class="lh-large mt2">Once you group tabs, you can compare them in just a tap</p>
</div>
</div>
</div>
</div>
<div class="mt4">
<div class="mv4 sw-100 bg-black-05 pa3">
<div class="pa3">
<h3 class="fw6">Desktop tab groups</h3>
<p class="lh-large">On desktop, people frequently have dozens of tabs across different tasks open. I led the design of tab groups to help you stay organized. Featured on the <a href="https://blog.google/products/chrome/manage-tabs-with-google-chrome/" class="dark-gray hover-cl-blue">Google blog</a>.</p>
<img src="images/chrome-dtg.gif" class="mt2">
</div>
</div>
</div>
<div class="mt4">
<div class="mv4 sw-100 bg-black-05 pa3">
<div class="pa3">
<h3 class="fw6">Mobile information architecture</h3>
<p class="lh-large">One of Chrome's largest UX challenges is how to scale to a growing feature set while staying simple. I led efforts to redesign Chrome to make core functionality more discoverable - and also easier to reach on larger phones. </p>
</div>
<div class="flex-l">
<div class="w-100 pa3">
<img src="images/chrome-ia-1.gif" style="width: 100%; max-width: 360px">
<p class="lh-large mt2">Our first attempt used the spatial metaphor of a peeking, expandable sheet - later popularized in other apps. This approach gained a loyal fanbase but ended up being too radical of a change for our mainstream users. </p>
</div>
<div class="w-100 pa3">
<img src="images/chrome-ia-2.png" style="width: 100%; max-width: 360px">
<p class="lh-large mt2">We took what we learned and revised, keeping the address bar in a familiar position while exposing additional functionality in a separate bottom bar.</p>
</div>
</div>
</div>
</div>
</section>
<h2 class="fw6 gill-sans ttu tracked-mega mb4">Volunteering</h2>
<div class="na2 f6">
<section class="ph2 pb5 w-50-ns fl-ns">
<div class="cf mb3">
<img src="images/afriscout-icon.png" class="w-icon fl mr3 br-icon shadow-icon">
<h2 class="fw6">AfriScout</h2>
<p>Google.org & PCI Global · August 2016</p>
</div>
<p class="lh-large">App design for <a href="https://www.pciglobal.org/afriscout/" class="dark-gray hover-cl-blue">mapping application</a> empowering African pastoralists to find pasture.</p>
</section>
<section class="ph2 pb5 w-50-ns fl-ns">
<div class="cf mb3">
<img src="images/nepal-icon.png" class="w-icon fl mr3 br-icon shadow-icon">
<h2 class="fw6">Nepal Human Development Report</h2>
<p>Google.org & Kathmandu Living Labs · July 2015</p>
</div>
<p class="lh-large">Website design and development for <a href="http://www.npc.gov.np/human_development_indicators_by_district/" class="dark-gray hover-cl-blue">data visualization</a> built for the Nepal government. Presented at <a href="http://interaction16.ixda.org/session/assisting-nepal-after-the-earthquake-lessons-learned-from-applying-design-thinking-in-a-post-disaster-context/index.html" class="dark-gray hover-cl-blue">Interaction 16</a>.
</section>
<section class="ph2 pb5 w-50-ns fl-ns">
<div class="cf mb3">
<img src="images/abide-icon.png" class="w-icon fl mr3 br-icon shadow-icon">
<h2 class="fw6">Abide</h2>
<p>Carpenters Code · 2015 to 2017</p>
</div>
<p class="lh-large">Landing page design and development for Christian meditation app.</p>
</section>
</section>
<section class="ph2 pb5 w-50-ns fl-ns">
<div class="cf mb3">
<img src="images/ymf-icon.png" class="w-icon fl mr3 br-icon shadow-icon">
<h2 class="b">You and Me Forever</h2>
<p>Crazy Love · 2014 to 2015</p>
</div>
<p class="lh-large">App design for book by bestselling Christian author Francis Chan. Proceeds benefit work against <a href="https://vimeo.com/107938492" class="dark-gray hover-cl-blue">poverty-induced prostitution</a> in Ethiopia.</p>
</section>
</div>
</main>
</body>
</html>