generated from clmntnbrn/clmntnbrn2019
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index-wip.html
608 lines (525 loc) · 34.3 KB
/
index-wip.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
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
<!DOCTYPE html>
<html lang="en">
<head>
<title>Clementine Brown — Principal Product Designer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link href="https://fonts.googleapis.com/css?family=Muli:300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
<div class="container-fluid">
<div class="d-flex align-items-center">
<div class="site-logo"><a href="index.html">clmntnbrn</a></div>
<div>
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li><a href="#home-section" class="nav-link">Home</a></li>
<li><a href="#what-i-do-section" class="nav-link">At the moment</a></li>
<li><a href="#work-section" class="nav-link">Work</a></li>
<li><a href="#notwork-section" class="nav-link">Not work</a></li>
<li><a href="#speaking-section" class="nav-link">Speaking</a></li>
<!-- <li><a href="#process-section" class="nav-link">Process</a></li>
<li><a href="#services-section" class="nav-link">Services</a></li> -->
</ul>
</nav>
</div>
<div class="ml-auto">
<!-- <nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu site-menu-dark js-clone-nav mr-auto d-none d-lg-block">
<li class="cta"><a href="#contact-section" class="nav-link"><span class="rounded border border-primary">Contact</span></a></li>
</ul>
</nav> -->
<a href="#" class="d-inline-block d-lg-none site-menu-toggle js-menu-toggle text-black float-right"><span class="icon-menu h3"></span></a>
</div>
</div>
</div>
</header>
<div class="intro-section" id="home-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-4 mr-auto" data-aos="fade-up">
<h1>Find the right problem, you'll design the right solution.</h1>
<p class="mb-5">I’m not an artist, or cake decorator, or precious snowflake. I’m not a superhero-ninja-rockstar with a portfolio of award-winning work. In fact, I’m not a portfolio designer at all.</p>
<p class="sub-title">I solve real problems, <br>for real people.</p>
<p class="sub-title">I just happen to do it <br>through design.</p>
<!-- <p><a href="#" class="btn btn-outline-light py-3 px-5">Get Started</a></p> -->
</div>
<div class="col-lg-2 ml-auto" data-aos="fade-up" data-aos-delay="100">
<picture class="img-absolute">
<source srcset="images/clementine_brown.png" media="(max-width: 600px)">
<img src="images/clementine_brown.png" alt="Image" class="img-fluid">
<!-- <p class="small">I <i class="icon-heart icon-heart-lemon" aria-hidden="true"></i> love open source - image made with the <a href="https://www.humaaans.com/" target="_blank">humaaans library</a> by Pablo Stanley</p> -->
</picture>
</div>
</div>
</div>
</div>
<!-- END INTRO -->
<!-- WHAT I DO -->
<div class="site-section site-section-end" id="what-i-do-section"">
<div class="container">
<div class="row">
<div class="col-lg-8 mb-5">
<span class="section-sub-title d-block">Right now</span>
<h2 class="section-title">At the moment</h2>
<p>I work as <a href="https://red-badger.com/people/clementine-brown" target="_blank"> Principal Product Designer</a> at a digital consultancy called <a href="http://red-badger.com" target="_blank">Red Badger</a> - which is a notoriously difficult task in itself, because it’s made up of <a href="http://red-badger.com/about-us/people/" target="_blank">a bunch of smart people</a> who are all at the top of their game. And I get to work along side them.</p>
<p>I get to see the inside of interesting (I mean <strong>really</strong> interesting) companies like the <a href="http://m.ft.com" target="_blank">Financial Times</a>, <a href="http://www.asos.com" target="_blank">ASOS</a>, disruptor tech companies like <a href="https://tandem.co.uk" target="_blank">Tandem</a>, family favourites like<a href="https://nandos.co.uk" target="_blank"> Nando's</a>; and delve my sticky little mitts into the heart of their newest, brightest, bleeding-edge projects.</p>
<p>I get to spend each day working with designers like <a href="https://red-badger.com/people/rob-brathwaite" target="_blank">Rob Brathwaite</a> and <a href="https://red-badger.com/people/kim-habib" target="_blank">Kim Habib</a>, developers like <a href="https://twitter.com/charypar" target="_blank">Viktor Charypar</a> and <a href="https://twitter.com/jonyardley" target="_blank">Jon Yardley</a>, and talented project managers and product owners to fix problems and build products that people <b>want</b> to use.</p>
<p>I get to learn from the people around me, and collect skills that allow me to <a href="http://heartbreaklaunderette.co.uk" target="_blank">build myself websites like this</a> (and this one actually), and draw, build and <a href="http://clmntnbrn.github.io/Jellyfish/" target="_blank">experiment with things like this</a> (it should be motion 📱, touch 👆 and mouse 🐭 reactive)!</p>
<p>I get to share my experiences with students at <a href="https://generalassemb.ly/instructors/clementine-brown/8763" target="_blank">General Assembly</a>, and talk about <a href="https://nvite.com/DesignPlus/ovl7ed" target="_blank">design+ethics</a> at <a href="http://invisionapp.com" target="_blank">InVision</a>, with smart people from the likes of the BBC, GDS and Ideo.</p>
<!-- <p>But wait. No. You're right.</p>
<p>There is no portfolio here.</p>
<p>I <i>could</i> show you a picture of this card component, or that navigation system, this live news feed - but without the conversation of <i>why it was built this way</i>, or <i>how it was designed with React in mind</i>, or <i>how we managed this edge-case</i> - well, it’s all rather clean and shiny.</p>
<p>And I want you to see the dirt under those manicured nails.</p> -->
</div>
</div>
</div>
<!-- END WHAT I DO -->
<div class="site-section section-1 work-section-cb bg-light" id="work-section">
<div class="container">
<div class="row">
<div class="col-lg-8 mb-5">
<span class="section-sub-title d-block">Work</span>
<h2 class="section-title">Abridged Works</h2>
<p>I've just pulled out a few of the most interesting projects I've worked on in the past five years - using a PAR (Problem, Action, Result) framework for speed and clarity. If you would like to know more about anything you see on this site, please do drop me a line at <a href="mailto:clementine@clmntnbrn.co.uk?subject=Hello Clementine!" target="_blank">clementine@clmntnbrn.co.uk</a></p>
</div>
</div>
</div> <!-- end container -->
<!-- start carousel -->
<!-- <div class="owl-carousel nonloop-block-13">
<a class="work-thumb" href="images/ft_homepage.png" data-fancybox="gallery">
<div class="work-text">
<h3>Financial Times</h3>
<span class="category">Adaptive redesign of a (very) old static site <br> for a media giant</span>
</div>
<img src="images/ft_homepage.png" alt="Image" class="img-fluid">
</a>
<a class="work-thumb" href="images/nandos_app_order_menu.jpg" data-fancybox="gallery">
<div class="work-text">
<h3>Nando's</h3>
<span class="category">Design and build of the order journey in <br>Nando's app</span>
</div>
<img src="images/nandos_app_order_menu.jpg" alt="Image" class="img-fluid">
</a>
<a class="work-thumb" href="images/asos_my_account.png" data-fancybox="gallery">
<div class="work-text">
<h3>Asos</h3>
<span class="category">Responsive redesign of the My Account section</span>
</div>
<img src="images/asos_my_account.png" alt="Image" class="img-fluid">
</a>
<a class="work-thumb" href="images/tandem_app.png" data-fancybox="gallery">
<div class="work-text">
<h3>Tandem bank</h3>
<span class="category">Discovery phase for an in-app offering</span>
</div>
<img src="images/tandem_app.png" alt="Image" class="img-fluid">
</a>
<a class="work-thumb" href="images/pride_london.png" data-fancybox="gallery">
<div class="work-text">
<h3>Pride London</h3>
<span class="category">Full redesign and replatform for the festival app</span>
</div>
<img src="images/pride_london.png" alt="Image" class="img-fluid">
</a>
</div> end carousel -->
</div>
<!-- END WORK SECTION -->
<!-- FINANCIAL TIMES -->
<div class="site-section section-1">
<div class="container">
<div class="row">
<div class="col-lg-5 mr-auto mb-5">
<div class="mb-5">
<p class="section-sub-title d-block">THE FINANCIAL TIMES</p>
<h2 class="section-title-small">Designing when design is not the deliverable</h2>
<p>Back in 2015, I got to work on one of the most interesting projects of my career.</p>
<p>Red Badger were engaged by the Financial Times to help with the redesign of the website - the project was
called Next FT and they were bringing the site from a static 970px fixed width framework (complete with
separate web app) to a fully responsive experience. But, that wasn't the problem we were there to solve.
</p>
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="image-absolute-box">
<img src="images/financial-times-ideation.png" alt="Image" class="img-fluid">
<p class="small">I <i class="icon-heart" aria-hidden="true"></i> open source - image made with the <a
href="https://www.humaaans.com/" target="_blank">humaaans library</a> by Pablo Stanley</p>
</div>
</div>
</div> <!-- end row -->
<div class="row">
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="">
<div class="process p-3">
<span class="number">01</span>
<div>
<span class="flaticon-glasses display-4 text-primary mb-4 d-inline-block"></span>
<h3>Problem</h3>
<p>The current programme was running a form of Dev Anarchy (if you're not familiar you can check out <a href="https://www.youtube.com/watch?v=uk-CF7klLdA" target="_blank">this YouTube video</a>) and it wasn't working out well for anybody. Specifically the UXD team were feeling the burn of a
way of working that left design as an after thought - and the business knew it. </p>
</div>
</div>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
<div class="process p-3">
<span class="number">02</span>
<div>
<span class="flaticon-vector display-4 text-primary mb-4 d-inline-block"></span>
<h3>Action</h3>
<p>The initial phase was a two month period to prove out our way of working. In seven weeks we designed and
deployed an entirely new homepage. This speed of delivery led to our engagement lasting for 18 months, so
that we could empower designers to have a strategic voice. Working with one team at a time and approaching
the solution though osmosis, we were able to demonstrate the value of embedded UXD in product teams.</p>
</div>
</div>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="process p-3">
<span class="number">03</span>
<div>
<span class="flaticon-monitor display-4 text-primary mb-4 d-inline-block"></span>
<h3>Result</h3>
<p>By working closely with the FT senior management we were able to ensure that the cultural shift in
working practices lived on. Our persistent demonstration of integrated UXD and iterative change formed a
culture of lean, user-centred design, that has now filtered through to other areas of product delivery
across the organisation.</p>
</div>
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end section -->
<!-- END FINANCIAL TIMES -->
<div class="container">
<hr>
</div>
<!-- NANDO'S -->
<div class="site-section section-1">
<div class="container">
<div class="row">
<div class="col-lg-5 mr-auto mb-5">
<div class="mb-5">
<p class="section-sub-title d-block">NANDO'S</p>
<h2 class="section-title-small">Bringing online ordering in-app as Acting Head of Design</h2>
<p>This year I have been on the inside of one of the most love-filled companies in the UK (fun fact: 😯 Nando's is <i>also</i> the biggest importer of Halloumi in the UK)</p>
<p>Red Badger are working in-house with Nando’s to design a customer ordering journey, and integrate it into their current app. </p>
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="image-absolute-box">
<img src="images/nandos-web-to-app.png" alt="Image" class="img-fluid">
<p class="small">I <i class="icon-heart" aria-hidden="true"></i> open source - image made with the <a
href="https://www.humaaans.com/" target="_blank">humaaans library</a> by Pablo Stanley</p>
</div>
</div>
</div> <!-- end row -->
<div class="row">
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="">
<div class="process p-3">
<span class="number">01</span>
<div>
<span class="flaticon-glasses display-4 text-primary mb-4 d-inline-block"></span>
<h3>Problem</h3>
<p>Nando’s are currently supporting multiple platforms for engagement with their customers: the Brand website <a href="https://nandos.co.uk" target="_blank">nandos.co.uk</a>, the Takeaway and Delivery website <a href="https://nandos.co.uk" target="_blank">get.nandos</a>, and the native app. If a customer wishes to place an order and begins the journey inside the app, they are currently redirected to the responsive web ordering journey.</p>
</div>
</div>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
<div class="process p-3">
<span class="number">02</span>
<div>
<span class="flaticon-vector display-4 text-primary mb-4 d-inline-block"></span>
<h3>Action</h3>
<p>We are using <strong>agile principles</strong> to deliver value into the hands of customers early and focusing on an </strong>MDP</strong> - the thinnest slice of releasable functionality to learn/validate the approach as quickly as possible. The teams are prioritising the Takeaway journey first, with Delivery being a fast follower. We are achieving this with two (soon to be three) teams working side by side on parallel scope - I am in the role of <strong>Acting Head of Design</strong> for the programme while helping Nando’s recruit for the internal position.</p>
</div>
</div>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="process p-3">
<span class="number">03</span>
<div>
<span class="flaticon-monitor display-4 text-primary mb-4 d-inline-block"></span>
<h3>Result</h3>
<p>Co-locating a multi-disciplinary team is allowing us to provide technical and strategic consulting services, and to recommend the best strategic approach to adding a takeaway and delivery journey to the current app. The programme of work is ongoing.</p>
</div>
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end section -->
<!-- END NANDO's -->
<div class="container">
<hr>
</div>
<!-- GA'S -->
<div class="site-section section-1">
<div class="container">
<div class="row">
<div class="col-lg-5 mr-auto mb-5">
<div class="mb-5">
<p class="section-sub-title d-block">GENERAL ASSEMBLY</p>
<h2 class="section-title-small">Helping to form the next generation of UX designers</h2>
<p>Since summer 2016, I have been leading workshops and courses at <a href="https://generalassemb.ly" target="_blank">General Assembly</a>.
<p>Teaching, as well as being inspiring, has given many things back to me: I am a more accomplished <strong>speaker</strong> and <strong>presenter</strong>; I have learned to <strong>explain anything in an infinite number of ways</strong>; I have deeper understanding and more <strong>successful interpretation</strong> of the needs of the stakeholders I find myself working with; and I constantly get to reaffirm my <i class="icon-heart" aria-hidden="true"></i> for what I do</p>
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="image-absolute-box">
<img src="images/general-assembly.png" alt="Image" class="img-fluid">
<p class="small">I <i class="icon-heart" aria-hidden="true"></i> open source - image made with the <a
href="https://www.humaaans.com/" target="_blank">humaaans library</a> by Pablo Stanley</p>
</div>
</div>
</div> <!-- end row -->
<div class="row">
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="">
<div class="process p-3">
<span class="number">01</span>
<div>
<span class="flaticon-glasses display-4 text-primary mb-4 d-inline-block"></span>
<h3>Problem</h3>
<p>Over the past few years <strong>a lot</strong> of people, from a <strong>wide range</strong> of backgrounds, have been recognising the importance of design in their industries: the creative process in which we use our intuition and analytical ability to understand the opportunities and constraints, business goals, competitive markets, customer needs and technologies present; and <strong>then</strong> envision, communicate, and realise practical solutions that meet customer needs and create business value.</p>
</div>
</div>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
<div class="process p-3">
<span class="number">02</span>
<div>
<span class="flaticon-vector display-4 text-primary mb-4 d-inline-block"></span>
<h3>Action</h3>
<p>Through creating an iterative learning experience, I lead students through multiple cycles of the lean UX process, building on concepts and expanding contextual knowledge of their applications. This allows them to experience that optimal solutions require an effective design process that provides a framework within which designers can consistently <strong>validate - ideate - repeat.</strong></p>
</div>
</div>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="process p-3">
<span class="number">03</span>
<div>
<span class="flaticon-monitor display-4 text-primary mb-4 d-inline-block"></span>
<h3>Result</h3>
<p>By enabling students to ideate solutions in a user-centered way, they graduate with the knowledge that design is full of <strong>processes</strong>, not rigid methodologies, and is, by nature, an iterative process: so what we discover through empathy, research, validation and usability testing often dictates the solution. They also produce a individual project who's outcomes make me consistently proud.</p>
</div>
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end section -->
<!-- END GA -->
<!-- START NOTWORK SECTION -->
<div class="site-section section-2 work-section-cb bg-light" id="notwork-section">
<div class="container">
<div class="row">
<div class="col-lg-8 mb-5">
<span class="section-sub-title d-block">Not Work</span>
<h2 class="section-title">The Diff</h2>
<p>My energy for learning is boundless, and I have an insatiable drive to explore new disciplines and cross boundaries. I believe that the more I’m aware of, the more references I have to draw on - so the more I find myself able to see unlikely associations and connect my digital day with my analogue night. </p>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div>
<div class="site-section section-2 work-section-cb" id="notwork-section"></div>
<div class="container">
<div class="row">
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="">
<div class="process p-3">
<div>
<span class="section-sub-title d-block">silversmithing</span>
<img src="images/no-miracles-here.png" class="img-fluid box-shadow">
<p>After an evening workshop run by <a href="https://www.theworkbenchlondon.com/" target="_blank">The Workbench</a>, a couple of years ago I founded my own mini accessories label <a href="https://nomiracleshere.co.uk" target="_blank">no miracles here</a>, learning about lost wax casting and silver soldering from YouTube 💍</p>
</div>
</div>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
<div class="process p-3">
<div>
<span class="section-sub-title d-block">parallax illustrations</span>
<img src="images/jellyfish-parallax.png" class="img-fluid box-shadow">
<p>Having become obsessed with the drawing app Procreate, I have been learning how to structure and code parallax illustrations like <a href="https://clmntnbrn.github.io/Jellyfish/" target="_blank">this jellyfish</a>. Why jellyfish? I took my parents on a trip to Monterey bay earlier this year, and have been fascinated by them ever since 🐙</p>
</div>
</div>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="process p-3">
<div>
<span class="section-sub-title d-block">surface design</span>
<img src="images/terrazzo.png" class="img-fluid box-shadow">
<p>Terrazzo is a recent find - I actually stumbled across it as I was looking for a way to display the accessories I was making. I'm a big fan of supporting makers and craftspeople (my dad is a wonderful <a href="http://feathercarver.co.uk" target="_blank">wood carver</a>) so I took a workshop run by a surface designer - and I'm hooked 🎨</p>
</div>
</div>
</div>
</div> end row
</div> <!-- end container -->
</div>
<!-- END NOT WORK SECTION -->
<!-- start alt not work section -->
<div class="site-section section-2 work-section-cb bg-light" id="notwork-section">
<div class="container">
<div class="row">
<div class="col-lg-8 mb-5">
<span class="section-sub-title d-block">Not Work</span>
<h2 class="section-title">The Diff</h2>
<p>My energy for learning is boundless, and I have an insatiable drive to explore new disciplines and cross boundaries. I believe that the more I’m aware of, the more references I have to draw on - so the more I find myself able to see unlikely associations and connect my digital day with my analogue night. </p>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div>
<div class="site-section section-1">
<div class="container">
<div class="row">
<div class="col-lg-5 mr-auto mb-5">
<div class="mb-5">
<p class="section-sub-title d-block">silversmithing</p>
<p>After an evening workshop run by <a href="https://www.theworkbenchlondon.com/" target="_blank">The Workbench</a>, a couple of years ago I founded my own mini accessories label <a href="https://nomiracleshere.co.uk" target="_blank">no miracles here</a>, learning about lost wax casting and silver soldering from YouTube 💍</p>
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="image-absolute-box">
<img src="images/no-miracles-here.png" alt="Image" class="img-fluid">
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end section -->
<div class="container">
<hr>
</div>
<div class="site-section section-1">
<div class="container">
<div class="row">
<div class="col-lg-5 mr-auto mb-5">
<div class="image-absolute-box">
<img src="images/jellyfish-parallax.png" alt="Image" class="img-fluid">
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="mb-5">
<p class="section-sub-title d-block">parallax illustrations</p>
<p>Having become obsessed with the drawing app Procreate, I have been learning how to structure and code parallax illustrations like <a href="https://clmntnbrn.github.io/Jellyfish/" target="_blank">this jellyfish</a>. Why jellyfish? I took my parents on a trip to Monterey bay earlier this year, and have been fascinated by them ever since 🐙</p>
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end section -->
<div class="container">
<hr>
</div>
<div class="site-section section-1">
<div class="container">
<div class="row">
<div class="col-lg-5 mr-auto mb-5">
<div class="mb-5">
<p class="section-sub-title d-block">Surface Design</p>
<p>Terrazzo is a recent find - I actually stumbled across it as I was looking for a way to display the accessories I was making. I'm a big fan of supporting makers and craftspeople (my dad is a wonderful <a href="http://feathercarver.co.uk" target="_blank">wood carver</a>) so I took a workshop run by a surface designer - and I'm hooked 🎨</p>
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="image-absolute-box">
<img src="images/terrazzo.png" alt="Image" class="img-fluid">
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end section -->
<!-- start speaking -->
<div class="site-section section-2 work-section-cb bg-light" id="speaking-section">
<div class="container">
<div class="row">
<div class="col-lg-8 mb-5">
<span class="section-sub-title d-block">Speaking</span>
<h2 class="section-title">That's what <em>she</em> said</h2>
<p>When I began teaching I learned that telling a story was the best way to help someone understand a framework, a methodology, an example, an application. Speaking is a privilege, and I find immense joy in it. </p>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div>
<div class="site-section section-2 work-section-cb" id="notwork-section"></div>
<div class="container">
<div class="row" style="padding-bottom: 4rem;">
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="">
<div class="process p-3">
<div>
<span class="section-sub-title d-block">Jam London</span>
<img src="images/jam_london.jpg" class="img-fluid box-shadow">
<p><strong>MDP vs MVP</strong></p>
<p>About your customers, or for them?</p>
<span style="background: linear-gradient(to top, yellow 50%, transparent 50%"> <a href="images/clementine_brown_mvp_vs_mdp_talk.pdf" target="_blank">See the deck here</a> </span>
</div>
</div>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
<div class="process p-3">
<div>
<span class="section-sub-title d-block">InVision Panel</span>
<img src="images/design_ethics_invision.jpg" class="img-fluid box-shadow">
<p><strong>Design+Ethics</strong></p>
<p>What would you do?</p>
<span style="background: linear-gradient(to top, yellow 50%, transparent 50%"> <a href="https://www.youtube.com/watch?v=O2pinw_OmJY&feature=youtu.be&utm_campaign=design%2Bethics&utm_source=hs_email&utm_medium=email&utm_content=28316536&_hsenc=p2ANqtz-_1kD8erSPveJhABz4l8fptX-pFn7ewoF25tsuQN6_aeLSKDWWvpxP9RQK86y0hiS-RtOX6LYWUj_CDOv1fiqf8KS09_g&_hsmi=28316536" target="_blank">Watch the event here</a> </span>
</div>
</div>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="process p-3">
<div>
<span class="section-sub-title d-block">UXD Exchange Meetup 2017</span>
<img src="images/circular_design_meetup.jpg" class="img-fluid box-shadow">
<p><strong>Circular is the New Straight</p></strong>
<p>Document disassembly.</p>
<span style="background: linear-gradient(to top, yellow 50%, transparent 50%"> <a href="images/clementine_brown_circular_design_talk.pdf" target="_blank">See the deck here</a> </span>
</div>
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div>
<!-- end speaking -->
<footer class="footer-section text-center">
<div class="row">
<div class="col-md-12">
<div>
<p>
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This site is made with <i class="icon-heart" aria-hidden="true"></i> by <a href="#home-section" class="mr-auto">me</a>
</p>
</div>
</div>
</div>
</footer>
</div> <!-- .site-wrap -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/main.js"></script>
</body>
</html>