-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
256 lines (214 loc) · 21.6 KB
/
index.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
<!DOCTYPE html>
<html lang="en" class="xs-fill-bg">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sarah Sampsel - Design Director and Digital Strategy</title>
<meta name="description" content="Design Director at Work & Co, specializing in digital design and product strategy. Formerly Director of Digital Strategy & Design at The Washington Post.">
<meta name="keywords" content="Sarah Sampsel, Work & Co, Work & Company, Work and Co, The Washington Post, The Post, Wapo, design, designer, digital, digital design, web design, digital journalism, journalism, art direction, UX design, user experience, user experience design, mobile design, ipad design, app design, information architecture, design strategy, @sarahsampsel, design director, creative director, New York City, NYC, New York, Brooklyn Designer, Sarah Rapela, Erie PA, Mercyhurst University">
<!-- Typekit -->
<script>
!function(e){var t,a={kitId:"sxb3hft",scriptTimeout:3e3,async:!0},c=e.documentElement,i=setTimeout(function(){c.className=c.className.replace(/\bwf-loading\b/g,"")+" wf-inactive"},a.scriptTimeout),n=e.createElement("script"),s=!1,o=e.getElementsByTagName("script")[0];c.className+=" wf-loading",n.src="https://use.typekit.net/"+a.kitId+".js",n.async=!0,n.onload=n.onreadystatechange=function(){if(t=this.readyState,!(s||t&&"complete"!=t&&"loaded"!=t)){s=!0,clearTimeout(i);try{Typekit.load(a)}catch(e){}}},o.parentNode.insertBefore(n,o)}(document);
</script>
<meta property="og:image" content="/images/social-promo.png">
<meta property="og:site_name" content="Sarah Sampsel">
<meta property="og:type" content="website">
<meta property="og:title" content="Sarah Sampsel - Design Director and Digital Strategy"/>
<meta property="og:description" content="Design Director at Work & Co, specializing in digital design and product strategy. Formerly Director of Digital Strategy & Design at The Washington Post.">
<meta property="og:url" content="http://sarahsampsel.com/">
<!-- <meta property="fb:app_id" content="316791285327607"> -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@sarahsampsel">
<meta name="twitter:title" content="Sarah Sampsel - Design Director and Digital Strategy"/>
<meta name="twitter:description" content="Design Director at Work & Co, specializing in digital design and product strategy. Formerly Director of Digital Strategy & Design at The Washington Post.">
<meta name="twitter:image" content="/images/social-promo.png">
<meta name="twitter:url" content="http://sarahsampsel.com/">
<!-- Fav & touch icons -->
<link rel="shortcut icon" href="/images/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/images/favicon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/favicon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/favicon-72.png">
<link rel="apple-touch-icon-precomposed" href="/images/favicon-57.png">
<link rel="stylesheet" href="/css/sarahsampsel.css">
</head>
<body>
<div class="">
<div class="topper container">
<div class="row">
<div class="xs-col-12 lg-offset-1 lg-col-10 xl-offset-2 xl-col-8 xs-text-center">
<h2 class="xs-mt8 xs-mb2 xl-mt10 xl-pt5 h1 bold">Hello! I’m Sarah.</h2>
<h1 class="xs-mx05 xs-mb10 dek light xs-line-height-default">Design Director at Work <span class="italic">&</span> Co, specializing in digital design and product strategy. You can find me on <a href="https://instagram.com/sarahsampsel" target="_blank" class="">Instagram</a>, <a href="https://flickr.com/sarahsampsel" target="_blank" class="">Flickr</a>, <a href="https://www.linkedin.com/in/sarahsampsel/" target="_blank" class="">LinkedIn</a>, <a href="https://angel.co/sarahsampsel" target="_blank" class="">AngelList</a>, <a href="https://twitter.com/sarahsampsel" target="_blank" class="">Twitter</a> <span class="italic">&</span> <a href="mailto:[email protected]?SUBJECT=Hello, Sarah!" class="">e-mail</a>.</h2>
</div>
</div>
</div>
<div class="container xs-relative">
<div class="row xs-mb6 md -mb10">
<div class="xs-col-12 lg-offset-1 lg-col-10 xl-offset-2 xl-col-8">
<div class="xs-border-thick-top"></div>
</div>
<div class="xs-col-12 md-col-6 lg-offset-1 lg-col-5 xl-offset-2 xl-col-4">
<h2 class="workco md-absolute xs-r2 xs-t7 lg-r7 xl-r9 xl-pr9 xs-mt4 xs-mb4 bold xs-text-right xs-line-height-tight">Work <span class="xs-block"><span class="italic">&</span> Co</span></h2>
<h3 class="xs-mb2 md-mt9">Design Director <span class="xs-block light italic xs-type-brand">October 2015 - Present</span></h3>
<p class="xs-mb2">I provide hands-on leadership to shape the direction of digital products for a variety of clients.</p>
<p class="xs-mb2">For the most part, I spend my time creating design concepts, frameworks, prototypes, and detailed flows for projects. I also develop UX deliverables such as user personas, user journey diagrams, site and app maps, and functional annotations.</p>
<p class="xs-mb2">I’m often pulled into working on new business initiatives where I help create strategy and designs for potential clients. This involves research and competitive analysis, providing insights into content strategy, design concepting and identifying new opportunities to shape the product.</p>
<p class="xs-mb2">I also assist in recruiting efforts, review candidates and participate in portfolio reviews. I help mentor junior designers with their career development and offer design feedback and coaching.</p>
<h4 class="xs-mb05 xs-pt2 light">Clients</h4>
<p class="xs-mb2 xs-mb2">I’ve worked on core products with YouTube, Disney, Marriott, Expa, Politico, TechCrunch, Eco Media, CAVA, Fox Entertainment, Goldman Sachs, Chase, State Street Global Advisors, Gol Airlines, and LifeMiles.</p>
</div>
<div class="xs-col-9 md-hide">
<div class="xs-mt5 xs-mb2 xs-border-top"></div>
</div>
<div class="xs-col-12 md-relative md-offset-1 md-col-4 xl-col-3">
<div class="md-absolute md-b0">
<h4 class="xs-mb05 light">Approach</h4>
<p class="xs-mb2">As someone who worked brand-side and now agency-side, I think about digital products in a holistic way – how to create the best possible solution, how it performs and how it will impact revenue. My experience at Work & Co, and previously at the Washington Post, has given me a unique outlook – developing new concepts versus building upon existing ones is vastly different, but I find that thinking from both ends of that spectrum can enhance the process.
</p>
<span class="rule-approach xs-hide md-block md-absolute md-b2 md-l0 md-border-right"> </span>
</div>
</div>
</div>
</div>
<div class="container md-relative md-mx2 lg-mx5 xl-mx-auto">
<div class="xs-hide md-block">
<div class="cat md-absolute md-t0 md-r0 lg-r0 xl-r4">
<img src="/images/cat.svg"/>
</div>
</div>
<div class="row md-mx0 xl-mb7">
<div class="xs-mx05 sm-mx0 xs-border">
<div class="xs-col-12 md-col-4 xl-offset-2 xl-col-3">
<h2 class="bio xs-mt7 xs-mb2 md-m0 md-absolute md-b7 lg-b8 lg-l5 xl-l-inherit xl-neg-ml1 bold xs-line-height-tight"><span class="h3 xs-block xs-mb1"> A short</span> Bio</h2>
</div>
<div class="xs-col-12 md-offset-4 md-col-8 md-offset-5 xl-col-6">
<p class="xs-mb7 xs-mr2 sm-mr4 md-mt6 lg-mt8 lg-mb8 h5 light serif-display xs-line-height-body">I’m originally from Erie, Pennsylvania, one of the snowiest cities in the world. Growing up there instilled in me a love of the outdoors, being with family, skiing, eating Polish food, and road trips. Now I’m based in New York City, a place full of adventure and the best jumping off point for traveling the world. Brooklyn is home, where I live with <a href="http://nieder.me/" target="_blank">John</a> and <a href="https://www.instagram.com/p/2j2UApKdGi/?taken-by=sarahsampsel" target="_blank">Katya</a>.</p>
</div>
</div>
</div>
</div>
<div class="container xs-mb10">
<div class="row">
<div class="xs-col-12 lg-offset-1 lg-col-10 xl-offset-2 xl-col-8 xl-relative">
<span class="rule-wapo xs-hide md-block md-absolute md-t0 md-l0 md-border-left"> </span>
<h2 class="xs-mt8 xs-mb2 bold italic xs-line-height-tight">The Wash<span class="xs-inline md-hide">—</span><span class="xs-block md-inline">ington Post</span></h2>
<h3 class="xs-mb4">Director, <span class="xs-block md-inline">Digital Strategy <span class="italic">&</span> Design</span> <span class="xs-block light italic xs-type-brand">2013 - 2015</span></h3>
</div>
<div class="xs-col-12 md-col-6 lg-offset-1 lg-col-5 xl-offset-2 xl-col-4">
<p class="xs-mb2">I opened a product design office in NYC to lead redesign efforts for the Washington Post's web platform. We worked on scope, strategy and execution of a site-wide rethink involving CMS capabilities as well as consumer-facing experiences.</p>
<p class="xs-mb2">I built the team from scratch, hiring design and strategy veterans from different industries with experience in solving complex design challenges, research, UX, and product development.</p>
<p class="xs-mb2">We collaborated closely with the newsroom, engineering and advertising on developing a product roadmap and implemented design sprints to generate ideas and concepts for user testing.</p>
<p class="xs-mb2">We designed plans and interviews for user testing sessions and developed recruiting strategies for both internal and external testers.</p>
<p class="xs-mb2 xs-mb5">I also worked on design strategy and assisted in hiring for the <a ref="https://coralproject.net/" target="_blank">Coral Project</a>, a collaboration between the Washington Post, the New York-Times, the Knight Foundation and Mozilla to build an open-source commenting platform.</p>
<h3 class="xs-mb2 xs-pt2 md-border-top">Director of Digital Design</span> <span class="xs-block light italic xs-type-brand">2011 - 2013</span></h3>
<p class="xs-mb2">I was a member of the core leadership team in the newsroom that focused on setting strategy and priorities for company-wide initiatives.</p>
<p class="xs-mb2">I built and managed a nimble team focused on digital, mobile and new product design, and created positions for and hired specialists in user experience, interaction design and development, motion graphics and visual design.</p>
<p class="xs-mb2">As readership habits changed and technology evolved, I had the honor of being a key voice in how to rethink core news products. I conceptualized and designed news products such as a live events platform, the politics app for Election 2012, an enterprise story template and created and evolved the designs for the iPad app.</p>
<p class="xs-mb2">My team launched a site-wide redesign in 2011, including a new CMS, and a design refresh in 2014.</p>
<p class="xs-mb2">I also worked in partnership with Google, Tumblr, Storify, Twitter and Facebook on creating new products for news consumption.</p>
<p class="xs-mb6">It was a privilege to work on digital storytelling and presentations for award-winning journalism projects. Some examples include <a href="https://en.wikipedia.org/wiki/Top_Secret_America" target="_blank">Top Secret America</a>, Muslims In America and two presidential elections.</p>
<div class="xs-hide md-block xs-mb2 xs-pt2 md-border-top">
<h4 class="h5 xs-mb2">Deputy Director of Digital Design</span> <span class="xs-block light italic xs-type-brand">2010 - 2011</span></h4>
<h4 class="h5 xs-mb2">Lead News Designer</span> <span class="xs-block light italic xs-type-brand">2007 - 2009</span></h4>
</div>
</div>
<div class="xs-col-12 md-offset-1 md-col-5 lg-col-4 xl-col-3">
<h4 class="light xs-mb2 xs-pt2 md-mb3 md-border-top">Selected Projects</h4>
<h6 class="xs-type-brand bold caps">Product Design Sprints</h6>
<p class="xs-mb2 md-mb3">Implemented <a href="http://www.niemanlab.org/2015/07/how-the-washington-post-built-and-will-be-building-on-its-knowledge-map-feature/">design sprints</a> inspired by Google. In one week we would develop and test a new product idea.</p>
<h6 class="xs-type-brand bold caps">Knowledge Map</h6>
<p class="xs-mb2 md-mb3">An in-article feature that pulls contextual and background information into an article for readers.</p>
<h6 class="xs-type-brand bold caps">Analytics Dashboard</h6>
<p class="xs-mb2 md-mb3">Created wireframes <span class="italic">&</span> designs for how reporters and editors could see how stories were performing.</p>
<h6 class="xs-type-brand bold caps">The Rethink Project</h6>
<p class="xs-mb2 md-mb3">This was a presentation I created to explain the overall thinking and approach for a sitewide redesign project.</p>
<h6 class="xs-type-brand bold caps">The Prophets of Oak Ridge</h6>
<p class="xs-mb2 md-mb3">Created a fully responsive story template in collaboration with all visual teams at the Post.</p>
<h6 class="xs-type-brand bold caps">Cycling’s Road Forward</h6>
<p class="xs-mb2 md-mb3">Created a custom responsive story template that became the foundation for all enterprise stories.</p>
<h6 class="xs-type-brand bold caps">The Grid</h6>
<p class="xs-mb2 md-mb3">Worked on overall design strategy for a live events platform for the political conventions in 2012.</p>
<h6 class="xs-type-brand bold caps">Election 2012</h6>
<p class="xs-mb2 md-mb3">Planned and designed the homepage for The Washington Post throughout the night of the presidential election.</p>
<h6 class="xs-type-brand bold caps">Best of The Post</h6>
<p class="xs-mb2 md-mb3">Redesigned the annual collection of the best photosand video journalism.</p>
<h6 class="xs-type-brand bold caps">Issue Engine</h6>
<p class="xs-mb2 md-mb3">Designed an interactive app to dig into political issues during campaign 2012.</p>
<div class="md-relative">
<h6 class="xs-type-brand bold caps">Top Secret America</h6>
<p class="xs-mb2 md-mb3">Lead design and UX for a 2-year investivative series focused on the expanding world of government agencies and intellegence since 9/11.</p>
<h6 class="xs-type-brand bold caps">Washington Post for iPad</h6>
<p class="xs-mb2 md-mb3">Designed the original Washington Post for iPad app, launched in 2010.</p>
<span class="rule-work xs-hide md-block md-absolute md-b0 md-l0 md-border-right"> </span>
</div>
</div>
</div>
</div>
<div class="container xs-mb9 md-pt6 xl-pt8 xl-mb4 xl-pb10 md-border-top">
<div class="row md-relative">
<div class="xs-col-12 md-absolute md-col-5 lg-offset-1 xl-offset-0 xl-col-3 xl-b0">
<h3 class="other xs-mb5 xs-pb5 md-mb3 bold xs-line-height-tight italic xs-border-thick-bottom"><span class="bio xs-block">&</span> other stuff <span class="xs-block">I’ve done</span></h3>
</div>
<div class="xs-col-12 md-offset-7 md-col-5 lg-offset-6 xl-offset-4 xl-col-4">
<h3 class="xs-mb05">Georgetown University</span></h3>
<p class="xs-mb3"><span class="xs-inline-block serif-display xs-type-brand">Adjunct Professor, 2013 <span class="xs-mx05 light">|</span></span> I taught a course that focused on digital design in media and design thinking methodology for graduate students in Journalism and Public Relations.</p>
<h3 class="xs-mb05">Freelance Design</span></h3>
<p class="xs-mb3"><span class="xs-inline-block serif-display xs-type-brand">2006 - 2012 <span class="xs-mx05 light">|</span></span> I did web design <span class="italic">&</span> development for clients such as the Kaiser Foundation and Kaiser Health News, Stanford d.School and North Base Media.</p>
<h3 class="xs-mb05">CyberInk</span></h3>
<p class="xs-mb3"><span class="xs-inline-block serif-display xs-type-brand">2002 - 2007 <span class="xs-mx05 light">|</span></span> Started my career here. The work included marketing and community web sites, and digital storytelling projects with the Erie Times-News newsroom. It’s where I fell in love with journalism.</p>
</div>
<div class="xs-col-12 md-offset-7 md-col-5 lg-offset-6 xl-offset-0 xl-col-4">
<h3 class="xs-mb05">Mercyhurst University</span></h3>
<p class="xs-mb1"><span class="xs-inline-block serif-display xs-type-brand">Graduated 2003<span class="xs-mx05 light">|</span></span> I went to college here. I earned a BA in Fine Arts with a concentration in Graphic Design and Literature.</p>
<p class="xs-mb3"><span class="xs-inline-block serif-display xs-type-brand">Adjunct Professor, 2004 - 2007<span class="xs-mx05 light">|</span></span> This was also my first teaching gig. I was an adjunct instructor for a few years after I graduated, teaching courses in web design and Flash.</p>
<h3 class="xs-mb05">Society of News Design</span></h3>
<p class="xs-mb3"><span class="xs-inline-block serif-display xs-type-brand">2012 - 2015 <span class="xs-mx05 light">|</span></span> Volunteered and served on the board.</p>
<h3 class="xs-mb05">Poynter Institute Leadership</span></h3>
<p class="xs-mb3"><span class="xs-inline-block serif-display xs-type-brand">2011 <span class="xs-mx05 light">|</span></span> I spent a week with my peers and some of my heros in journalism learning to be a better manager.</p>
</div>
</div>
</div>
<div class="container md-relative md-mx2 lg-mx5 xl-mx-auto">
<div class="row md-mx0 xl-mb7">
<div class="xs-col-12 md-relative md-offset-1 md-col-10 xl-offset-2 xl-col-8 xs-border">
<div class="xs-col-12 md-col-4 xl-offset-2 xl-col-3">
<h2 class="speak xs-mt6 xs-mr1 md-absolute md-m0 md-b7 md-r5 lg-b9 lg-r5 xl-r6 bold xs-line-height-tight xs-text-right">Speak<span class="xs-block">—ing</span></h2>
</div>
<div class="xs-col-12 md-col-8 xl-col-6">
<p class="xs-mb2 xs-mt5 md-mt7 md-ml2 lg-mt8 xl-ml3 h5 light serif-display xs-line-height-body">I give talks on digital design, the role of visual teams in journalism, product strategy, and project case studies. I’m open to speaking opportunities. <a href="mailto:[email protected]?SUBJECT=Hello, Sarah!">Hit me up</a>.</p>
<p class="xs-mb6 md-mb7 md-ml2 lg-mb8 xl-ml3 h5 light serif-display xs-line-height-body">Previously, I’ve presented at the Brookings Institute, Society of News Design annual conferences, ASNE, WAN-IFRA, and Industry Conference.</p>
<p class="md-my10 lg-py5 xl-py6"> </p>
</div>
</div>
</div>
</div>
<div class="xs-mt8 md-mt10">
<div class="xs-mx1 md-mx3">
<ul class="list-unstyled xs-mx05 xs-mb6 lg-mx2 xl-mx7 xl-mb10">
<li class="xs-inline-block xs-pl05 xs-pb05 h6 sans xs-type-brand bold caps">Contact Me</li>
<li class="h6 sans caps"><a href="https://instagram.com/sarahsampsel" target="_blank" class="link-footer xs-inline-block xs-p05">Instagram</a></li>
<li class="h6 sans caps"><a href="https://flickr.com/sarahsampsel" target="_blank" class="link-footer xs-inline-block xs-p05">Flickr</a></li>
<li class="h6 sans caps"><a href="https://www.linkedin.com/in/sarahsampsel/" target="_blank" class="link-footer xs-inline-block xs-p05">LinkedIn</a></li>
<li class="h6 sans caps"><a href="https://twitter.com/sarahsampsel" target="_blank" class="link-footer xs-inline-block xs-p05">Twitter</a></li>
<li class="h6 sans caps"><a href="mailto:[email protected]?SUBJECT=Hello, Sarah!" class="link-footer xs-inline-block xs-p05">e-mail</a></li>
</ul>
</div>
</div>
<!-- Page Frame -->
<div class="frame xs-hidden lg-block lg-fixed lg-p1 lg-t0 lg-l2 lg-r2 xl-p2 xl-t0 xl-l4 xl-r4 lg-fill-bg-translucent lg-border-thick-bottom"></div>
<div class="frame xs-hidden lg-block lg-fixed lg-p1 lg-b0 lg-l2 lg-r2 xl-p2 xl-b0 xl-l4 xl-r4 lg-fill-bg-translucent lg-border-thick-top"></div>
<div class="frame xs-hidden lg-block lg-fixed lg-p1 lg-t2 lg-b2 lg-l0 xl-p2 xl-t4 xl-b4 xl-l0 lg-fill-bg-translucent lg-border-thick-right"></div>
<div class="frame xs-hidden lg-block lg-fixed lg-p1 lg-t2 lg-b2 lg-r0 xl-p2 xl-t4 xl-b4 xl-r0 lg-fill-bg-translucent lg-border-thick-left"></div>
<!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2386898-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>
</body>
</html>