- Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwork.html
More file actions
Latest commit
executable file
·169 lines (167 loc) · 9.45 KB
/
Copy pathwork.html
File metadata and controls
executable file
·169 lines (167 loc) · 9.45 KB
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>
<htmllang="en" class="invert-dark">
<head>
<metacharset="UTF-8">
<metaname="viewport" content="width=device-width, initial-scale=1">
<title>Chris Lee</title>
<linkrel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
<linkrel="stylesheet" href="style.css">
<scripttype="text/javascript">
var_gaq=_gaq||[];
_gaq.push(['_setAccount','UA-19583432-1']);
_gaq.push(['_trackPageview']);
(function(){
varga=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';
vars=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s);
})();
</script>
</head>
<bodyclass="bg-near-white dark-gray">
<navclass="fixed top-0 bg-near-white gill-sans f6 ttu w-100 z-1">
<ulclass="fw6 list ph4 ph5-ns flex-ns flex-row cl-mw center items-center nowrap overflow-x-auto">
<liclass="dib mr4 flex-auto">
<ahref="/" class="link dark-gray hover-cl-blue pv3"
><spanclass="tracked-mega">Chris Le</span>e</a
>
</li>
<liclass="dib mr4 bb bw1 dark-gray pv3" style="margin-top: 2px">
<spanclass="tracked-mega">Wor</span>k
</li>
<liclass="dib mr4">
<ahref="/posts" class="link dark-gray hover-cl-blue pv3"
><spanclass="tracked-mega">Writin</span>g</a
>
</li>
<liclass="dib">
<ahref="/about" class="link dark-gray hover-cl-blue pv3"
><spanclass="tracked-mega">Abou</span>t</a
>
</li>
</ul>
</nav>
<mainclass="charter f6 lh-copy cl-mw center pa4 pt6 pa5-ns pt6-ns">
<sectionclass="mb5 pb5 bb b--black-10">
<pclass="f4 f3-ns lh-large mb4">Real decisions aren't simple. I solve complex problems through a combination of <strongclass="cl-blue fw6">curiosity</strong>, <strongclass="cl-blue fw6">creativity</strong>, and <strongclass="cl-blue fw6">analytical decision-making</strong>.</p>
<divclass="cf flex">
<divclass="w-100">
<ulclass="list">
<liclass="mv1">Product strategy</li>
<liclass="mv1">Interaction design</li>
<liclass="mv1">Motion design</li>
<liclass="mv1">Prototyping</li>
</ul>
</div>
<divclass="w-100">
<ulclass="list">
<liclass="mv1"><ahref="mailto:chris@chrsl.net" class="dark-gray hover-cl-blue">chris@chrsl.net</a></li>
<liclass="mv1"><ahref="https://twitter.com/cleerview" class="dark-gray hover-cl-blue">Twitter</a></li>
<liclass="mv1"><ahref="https://www.linkedin.com/in/cleer/" class="dark-gray hover-cl-blue">LinkedIn</a></li>
</ul>
</div>
</div>
</section>
<sectionclass="mb5">
<divclass="cf mb3 tl-ns">
<imgsrc="images/ubereats-icon.png" class="w-icon fl mr3 br-icon shadow-icon">
<p><h2class="fw6 di">Uber Eats</h2>, Senior Designer II</p>
<p>2020 to present</p>
</div>
<pclass="lh-large mb3">I design our menus experience, ranging from internal tools for restaurants to consumer ordering functionality.</p>
</section>
<sectionclass="mb5">
<divclass="cf mb3 tl-ns">
<imgsrc="images/chrome-icon.png" class="w-icon fl mr3 br-icon shadow-icon">
<p><h2class="fw6 di">Google Chrome</h2>, Staff Designer</p>
<p>2013 to 2020</p>
</div>
<pclass="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>
<blockquoteclass="mv3 bl bw1 b--black-10 pl3">
<pclass="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>
<divclass="mt4">
<divclass="mv4 sw-100 bg-black-05 pa3">
<divclass="pa3">
<h3class="fw6">Mobile tab groups</h3>
<pclass="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 <ahref="https://blog.google/products/chrome/get-more-done-with-google-chrome/" class="dark-gray hover-cl-blue">Google blog</a>.</p>
</div>
<divclass="flex-l">
<divclass="w-100 pa3">
<imgsrc="images/chrome-tg-1.gif" style="width: 100%; max-width: 360px">
<pclass="lh-large mt2">Tab groups help you organize longer running, multiple page tasks</p>
</div>
<divclass="w-100 pa3">
<imgsrc="images/chrome-tg-2.gif" style="width: 100%; max-width: 360px">
<pclass="lh-large mt2">Once you group tabs, you can compare them in just a tap</p>
</div>
</div>
</div>
</div>
<divclass="mt4">
<divclass="mv4 sw-100 bg-black-05 pa3">
<divclass="pa3">
<h3class="fw6">Desktop tab groups</h3>
<pclass="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 <ahref="https://blog.google/products/chrome/manage-tabs-with-google-chrome/" class="dark-gray hover-cl-blue">Google blog</a>.</p>
<imgsrc="images/chrome-dtg.gif" class="mt2">
</div>
</div>
</div>
<divclass="mt4">
<divclass="mv4 sw-100 bg-black-05 pa3">
<divclass="pa3">
<h3class="fw6">Mobile information architecture</h3>
<pclass="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>
<divclass="flex-l">
<divclass="w-100 pa3">
<imgsrc="images/chrome-ia-1.gif" style="width: 100%; max-width: 360px">
<pclass="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>
<divclass="w-100 pa3">
<imgsrc="images/chrome-ia-2.png" style="width: 100%; max-width: 360px">
<pclass="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>
<h2class="fw6 gill-sans ttu tracked-mega mb4">Volunteering</h2>
<divclass="na2 f6">
<sectionclass="ph2 pb5 w-50-ns fl-ns">
<divclass="cf mb3">
<imgsrc="images/afriscout-icon.png" class="w-icon fl mr3 br-icon shadow-icon">
<h2class="fw6">AfriScout</h2>
<p>Google.org & PCI Global · August 2016</p>
</div>
<pclass="lh-large">App design for <ahref="https://www.pciglobal.org/afriscout/" class="dark-gray hover-cl-blue">mapping application</a> empowering African pastoralists to find pasture.</p>
</section>
<sectionclass="ph2 pb5 w-50-ns fl-ns">
<divclass="cf mb3">
<imgsrc="images/nepal-icon.png" class="w-icon fl mr3 br-icon shadow-icon">
<h2class="fw6">Nepal Human Development Report</h2>
<p>Google.org & Kathmandu Living Labs · July 2015</p>
</div>
<pclass="lh-large">Website design and development for <ahref="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 <ahref="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>
<sectionclass="ph2 pb5 w-50-ns fl-ns">
<divclass="cf mb3">
<imgsrc="images/abide-icon.png" class="w-icon fl mr3 br-icon shadow-icon">
<h2class="fw6">Abide</h2>
<p>Carpenters Code · 2015 to 2017</p>
</div>
<pclass="lh-large">Landing page design and development for Christian meditation app.</p>
</section>
</section>
<sectionclass="ph2 pb5 w-50-ns fl-ns">
<divclass="cf mb3">
<imgsrc="images/ymf-icon.png" class="w-icon fl mr3 br-icon shadow-icon">
<h2class="b">You and Me Forever</h2>
<p>Crazy Love · 2014 to 2015</p>
</div>
<pclass="lh-large">App design for book by bestselling Christian author Francis Chan. Proceeds benefit work against <ahref="https://vimeo.com/107938492" class="dark-gray hover-cl-blue">poverty-induced prostitution</a> in Ethiopia.</p>
</section>
</div>
</main>
</body>
</html>