-
Notifications
You must be signed in to change notification settings - Fork 0
/
Screenshot Summary of the New CO – Basecamp.htm
662 lines (436 loc) · 63.7 KB
/
Screenshot Summary of the New CO – Basecamp.htm
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
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
<!DOCTYPE html>
<html class="" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex">
<style data-tag-name="beanstalk-signup" type="text/css">beanstalk-signup { display: block }</style><style data-tag-name="beanstalk-event" type="text/css">beanstalk-event { display: block }</style>
<script type="text/javascript" data-turbolinks-eval="false">var Timing = { times: {}, mark: function(e, t) { Timing.times[e] = t || new Date().getTime() } }; Timing.mark("firstbyte")</script>
<meta charset="utf-8">
<style>
.design-thoughts {
margin-top:18px !important;
padding: 12px;
background-color: #fffdee;
}
.design-thoughts p {
margin:8px 0px !important;
}
</style>
<script>
//<![CDATA[
(function(style) {
style.innerText = ".loading__hide { opacity: 0 }";
document.head.appendChild(style);
addEventListener("DOMContentLoaded", function() {
requestAnimationFrame(function() {
document.head.removeChild(style)
})
})
})(document.createElement("style"))
//]]>
</script>
<link rel="dns-prefetch" href="https://3.basecamp-static.com/"><link rel="dns-prefetch" href="https://public.3.basecamp.com/p/chat.3.basecamp.com"><link rel="dns-prefetch" href="https://public.3.basecamp.com/p/dash.37signals.com">
<link rel="stylesheet" media="all" href="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/fonts-a417f885fdef09696757113159107f75dfde63c6ba473a5ccd4efe.css" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/desktop-b0529797b9df490d7867a75157d9be9d8fa518c8a2b3197a2303.css" data-turbolinks-track="reload">
<script src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/public-fd681bb74f544f401af1b34acdc5bdf0c7f47f72c6e680e78d0730.js" defer="defer" data-turbolinks-track="reload"></script>
<link rel="subresource" href="https://3.basecamp-static.com/assets/rich_text-a8c436d81182d05d50d96c0a7748499c8b75d5515ea0dd9e5a3015186841966d.js" data-script="rich_text" data-turbolinks-track="reload">
<link rel="subresource" href="https://3.basecamp-static.com/assets/billing-0cc333e796b2e15e842e560fe8c78ad4e4e47a726b840d8d425d9ee1e554fc25.js" data-script="billing" data-turbolinks-track="reload">
<link rel="subresource" href="https://apis.google.com/js/platform.js?onload=setupGoogleSignIn" data-script="google_platform" data-turbolinks-track="reload">
<title data-bridge-alt="Screenshot Summary of the New CO">Screenshot Summary of the New CO – Basecamp</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="robots" content="noindex">
<meta name="referrer" content="origin-when-cross-origin">
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="+WSF3BhN7lXgQfOwfDHBnZNzzyAsLmURiRdXivZIbLJL4AMOxEdpVKg56pMH8FfFSL8jxEdFzjE9DkCb3OSb6A==">
<meta name="turbolinks-root" content="/3128980">
<meta name="turbolinks-cache-control" content="cache">
<meta name="cable-url" content="wss://chat.public.3.basecamp.com/3128980">
<meta name="current-account-slug-path" content="/3128980">
<meta name="current-recording-type" content="Message"><meta name="current-recording-title" content="Screenshot Summary of the New CO"><meta name="current-recording-is-docked" content="false"><meta name="current-dock-tool-title" content="Message Board">
<meta name="google-signin-client_id" content="341981671303-g568phroodi4guli3inqb7gnsvbvqnlk.apps.googleusercontent.com">
<meta name="google-signin-scope" content="profile email openid">
</head>
<body class="chromeless public">
<div class="panel panel--perma">
<article class="recordable">
<div style="font-size:14px;">
<p>Hi Folks,
<p>It's <a href="https://cgrobb.github.io/" title="Robb's Main Professional Page">Robb Beal</a>.
<p>This is a summary of some of my product work at Booksource where I led a team that rehabbed/reinvented the user experience of an extensive educator- and student-facing web app, in a market/domain I was new to, with a small team that had never worked together before, half of which were new to the company, in about <strong>75 working days (really!)</strong>, with super-high quality.
<p>The work achieved <strong>30% YOY MAU growth</strong> after slow-to-no growth over the previous couple of years.
<p>I played the role of Product Manager and Product Designer supported by a Junior Product Manager, 2 Engineers, and a contract Visual Designer.
<p>The best part of this project was getting an ovation from my management peers soon after its launch.
<p>The most challenging aspect of this project was that there was so much accumulated design and technical debt that made making improvements difficult. Further complicating things was that the web app shares logic and data with 2 other major apps (a native mobile app and a school-level library organizer app) which practically could not be improved at the same time. For a taste of just how far we took this app, follow the links to shots of the previous version.
<!--<p>(Not conveyed in the screenshots is a considerable redesign of the teacher library search functionality, moving from a search input affordance for every piece of book metadata to a simpler, single search input affordance + <a href="http://cohelpdesk.booksource.com/help/search-prefixes" title="more details in the app's help documentation">reserved prefixes</a> (e.g. interest-level:K-3).)-->
<p>
<div data-behavior="embeddable_attachments_enabled" class="panel panel--perma">
<article class="message">
<section>
<h2 class="flush--top push_half--bottom">Classroom Organizer Fall '16 Rehab</h2>
<!--<p class="flush--top push_half--bottom">By <a href="https://cgrobb.github.io/" title="Intro to Robb Beal, Product Leader"><strong>Robb Beal</strong></a></p>-->
<div class="formatted_content">
<bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1MzQ1MT9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--e3f8cc7d7b3d1223dc10648f9e5e99fefad41c52" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/38574a11bb2997651a53e3b71ed2a1510010/previews/full/pasted-file-1.png" href="https://public.3.basecamp.com/3128980/blobs/38574a11bb2997651a53e3b71ed2a1510010/download/pasted-file-1.png" filename="pasted-file-1.png" filesize="589465" width="1486" height="1042" previewable="true" caption="Landing Page. Users See This Until They've Successfully Logged In Once"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_024.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Landing Page | <a href="https://web.archive.org/web/20160323144212/https://classroom.booksource.com/default.aspx">See Previous Version</a>
</figcaption>
</span>
</figure></bc-attachment><br>
<div class="design-thoughts">
<p>Users see this until they've successfully logged in once. I find this approach much more preferable than giving the site landing page 2 different purposes: Marketing and Login/Account Creation. Most of the time taking that approach means doing both of those poorly.
</div>
<br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1MzU1MD9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--20fc053caec69a5da184d81f2a4364f063294fd2" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/68575759fa5b76397a4123ecea38f5c30010/previews/full/pasted-file-3.png" href="https://public.3.basecamp.com/3128980/blobs/68575759fa5b76397a4123ecea38f5c30010/download/pasted-file-3.png" filename="pasted-file-3.png" filesize="156052" width="1486" height="1042" previewable="true" caption="1st Page of Sign Up"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_030.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
1st Page of Sign Up
</figcaption>
</span>
</figure></bc-attachment><br>
<div class="design-thoughts">
<p>We were inspired by the design form that Simple.com used for its Sign Up. The middle section makes it clear to users "Why" we ask for certain info.
</div>
<br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1MzUwND9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--90001c47d864721a7b373b08623724b6e36e131b" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/38574a2c1ace662daf3d763aa874bc950010/previews/full/pasted-file-2.png" href="https://public.3.basecamp.com/3128980/blobs/38574a2c1ace662daf3d763aa874bc950010/download/pasted-file-2.png" filename="pasted-file-2.png" filesize="117222" width="1486" height="1042" previewable="true" caption="Login Page"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_022.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Login Page
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1MzY4MD9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--8f2b348e1727f69bac55f4cd1fbfcfb48cca694b" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/e301fa97545f431086c5047559b623020010/previews/full/pasted-file-4.png" href="https://public.3.basecamp.com/3128980/blobs/e301fa97545f431086c5047559b623020010/download/pasted-file-4.png" filename="pasted-file-4.png" filesize="374525" width="1486" height="1042" previewable="true" caption="The Choose Your Path Page"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
The Choose Your Path Page
</figcaption>
</span>
</figure></bc-attachment><br><br><br>
<strong>TEACHER-FACING EXPERIENCE</strong><br><br>
<bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1Mzc4Mj9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--76cce89a9e0e1e677c7a7b3e34bc525feb0a1153" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/0daca2e27afb6066c3f64ddc843d1c8a0010/previews/full/pasted-file-5.png" href="https://public.3.basecamp.com/3128980/blobs/0daca2e27afb6066c3f64ddc843d1c8a0010/download/pasted-file-5.png" filename="pasted-file-5.png" filesize="183031" width="1486" height="1042" previewable="true" caption="Teacher Login Page"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_013.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Teacher Login Page
</figcaption>
</span>
</figure></bc-attachment><br>
<div class="design-thoughts">
<p>Unable to eliminate this 2nd password for teachers, I asked the visual designer to invest time in making this a beautiful moment for Teachers as a way to help them forget how inconvenient this additional prompt is.
</div>
<br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1MzgwMj9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--49cb989f540fc9efd65d5c40942156ce2bb7e5fe" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/7dacab8ebfb87703beb1b5fabae041530010/previews/full/pasted-file-6.png" href="https://public.3.basecamp.com/3128980/blobs/7dacab8ebfb87703beb1b5fabae041530010/download/pasted-file-6.png" filename="pasted-file-6.png" filesize="352698" width="1486" height="1042" previewable="true" caption="Teacher Dashboard Initial State"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_026.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Teacher Dashboard Initial State | <a href="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/co-old-teacher-dashboard.png" title="Previous Version of Library">See Previous Version</a>
</figcaption>
</span>
</figure></bc-attachment><br>
<div class="design-thoughts">
<p>This is the app's Home Page. (See also: the shot below.) Previous versions of the app effectively had no Dashboard like this. (Additionally, the app previously had no ubiquitous left nav.) If you wanted the info shown here, you had to go dig through the app to find it. We developed a large amount of candidate content/functionality for this page and used attitudinal and qualitative user research methods to arrive at the point you see here. In order to align the design and business strategy, we included e-commerce content/functionality that too was previously buried within the app.
<p>Note: This is a shot from late development that was further improved before shipping.
</div>
<br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU2MDAzNj9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--385954b634ba9eba7ecbb023f990bf7f96ad0a03" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/38fc3246eb4528426e53a651487167b00010/previews/full/pasted-file-25.png" href="https://public.3.basecamp.com/3128980/blobs/38fc3246eb4528426e53a651487167b00010/download/pasted-file-25.png" filename="pasted-file-25.png" filesize="349817" width="1486" height="1042" previewable="true" caption="Teacher Dashboard After Use"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_023.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Teacher Dashboard After Use
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1Mzg0OD9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--7ec79f4443421afbb9bdfd37e81ec72fc9e2e50b" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/18574cfafcfa656bd7bf9a66b2e2b5720010/previews/full/pasted-file-7.png" href="https://public.3.basecamp.com/3128980/blobs/18574cfafcfa656bd7bf9a66b2e2b5720010/download/pasted-file-7.png" filename="pasted-file-7.png" filesize="363996" width="1486" height="1042" previewable="true" caption="Teacher Library"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_003.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Teacher Library | <a href="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/old-co-library.png" title="Previous Version of Library">See Previous Version</a>
</figcaption>
</span>
</figure></bc-attachment><br>
<div class="design-thoughts">
<p>This Library page, a key site page where teachers add and manage books, was the most challenging portion of the redesign. The previous version of this experience (see link) was a single page that attempted to satisfy a ton of use cases all in a single page. It did that horribly and because of its complexity, wouldn't allow for new functionality or promotion.
<p>I broke the page up into 4 subpages each mapping to important use cases. Especially important was the creation of a separate page for eBooks. The thinking here was that given appropriate real-estate, we could do thoughtful eBook promotion to users (e.g., click now to automatically place a free eBook in your Library).
<p>An additional major improvement here was the teacher library search functionality, moving from a search input affordance for every piece of book metadata to a simpler, single search input affordance + <a href="http://cohelpdesk.booksource.com/help/search-prefixes" title="more details in the app's help documentation">reserved prefixes</a> (e.g. interest-level:K-3).)
</div>
<br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1NDE2Nz9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--81755870e6c190664fd36c7c37dea68b34a3e71e" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/70cd97e9de9e24fde65e8447f504fcae0010/previews/full/pasted-file-13.png" href="https://public.3.basecamp.com/3128980/blobs/70cd97e9de9e24fde65e8447f504fcae0010/download/pasted-file-13.png" filename="pasted-file-13.png" filesize="293701" width="1486" height="1042" previewable="true" caption="Teacher Library Copy"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_021.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Teacher Library Copy | <a href="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/old-co-library.png" title="Previous Version of Library">See Previous Version</a>
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1MzkyNT9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--3f3ca4cf2d13fe20911397b6feea60837e75159a" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/adaca88f75cc121d232d4a2124f5bd840010/previews/full/pasted-file-8.png" href="https://public.3.basecamp.com/3128980/blobs/adaca88f75cc121d232d4a2124f5bd840010/download/pasted-file-8.png" filename="pasted-file-8.png" filesize="310010" width="1486" height="1042" previewable="true" caption="Import via Invoice Page"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_029.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Import via Invoice Page | <a href="http://classroom.booksource.com/Images/help/Screenshots/ClassroomOrg/22.png">See Previous Version</a>
</figcaption>
</span>
</figure></bc-attachment><br>
<div class="design-thoughts">
<p>Previous versions of this page did a really poor job of letting customers know how to find the Booksource account number that was necessary to import books.
<p>I worked across the organization to unearth all of the various physical and digital artificats that Booksource customers would receive that displayed their account number. This page visually describes the 3 artifacts I discovered and where to find the account number on each.
</div>
<br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1Mzk2MD9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--538a8b124bc8c720f5fa3a3036ed4b40798907c4" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/bdaca7ff5f29f16d92701a244096496a0010/previews/full/pasted-file-9.png" href="https://public.3.basecamp.com/3128980/blobs/bdaca7ff5f29f16d92701a244096496a0010/download/pasted-file-9.png" filename="pasted-file-9.png" filesize="179859" width="1486" height="1042" previewable="true" caption="Student Management Page"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_010.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Student Management Page
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1Mzk3OD9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--3a779d51d7b738e642854a12d4b4df8131d92c5d" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/a8575337720f70d4341ac8435ea246360010/previews/full/pasted-file-10.png" href="https://public.3.basecamp.com/3128980/blobs/a8575337720f70d4341ac8435ea246360010/download/pasted-file-10.png" filename="pasted-file-10.png" filesize="183567" width="1486" height="1042" previewable="true" caption="Create Student Page"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_009.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Create Student Page
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1NDAyMj9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--ac0466a03078644092fcec96773bfe86987f7d59" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/7302017fd489fc9da5b5c2e82423debb0010/previews/full/pasted-file-11.png" href="https://public.3.basecamp.com/3128980/blobs/7302017fd489fc9da5b5c2e82423debb0010/download/pasted-file-11.png" filename="pasted-file-11.png" filesize="517885" width="1486" height="1042" previewable="true" caption="Teacher Resources Page"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_025.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Teacher Resources Page
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1NzMzOD9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--d890f4b5feb63295a65b3fd28d717082876ad239" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/33937f802497e834850297b0f994d0d90010/previews/full/pasted-file-15.png" href="https://public.3.basecamp.com/3128980/blobs/33937f802497e834850297b0f994d0d90010/download/pasted-file-15.png" filename="pasted-file-15.png" filesize="343645" width="1486" height="1042" previewable="true" caption="Title Recs (Popular)"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_012.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Title Recs (Popular)
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU2MDUwMD9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--a50cb79468886bac3f9da95e43f2e77b7a9cc4f0" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/33a6dd7ff30bc3ebf09dce3dbbd55be40010/previews/full/pasted-file-26.png" href="https://public.3.basecamp.com/3128980/blobs/33a6dd7ff30bc3ebf09dce3dbbd55be40010/download/pasted-file-26.png" filename="pasted-file-26.png" filesize="306134" width="1486" height="1042" previewable="true" caption="Approve Reviews"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_035.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Approve Reviews
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU2MDc0NT9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--79d80d688b482fcc363ed2a0f10c4faa9dfd32a9" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/68fc2f851f1e682b745c99ef1b23f4c40010/previews/full/pasted-file-27.png" href="https://public.3.basecamp.com/3128980/blobs/68fc2f851f1e682b745c99ef1b23f4c40010/download/pasted-file-27.png" filename="pasted-file-27.png" filesize="348154" width="1486" height="1042" previewable="true" caption="Teacher Return Books"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_036.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Teacher Return Books
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU2MTcxNz9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--313cbcb771e26247365908686313ddefb13b6c91" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/1cf762e01dc4a5f87a6b7a12f9e7eb2e0010/previews/full/pasted-file-29.png" href="https://public.3.basecamp.com/3128980/blobs/1cf762e01dc4a5f87a6b7a12f9e7eb2e0010/download/pasted-file-29.png" filename="pasted-file-29.png" filesize="291694" width="1486" height="991" previewable="true" caption="Reading History for Student (Zoomed in Browser)"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 66.66666666666666%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_034.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Reading History for Student (Zoomed in Browser)
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1NzQ5MD9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--127f86e73df398387d112c29ae170d3d6df14648" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/9085dc21a94cc1d2e08fcb975b36f31e0010/previews/full/pasted-file-16.png" href="https://public.3.basecamp.com/3128980/blobs/9085dc21a94cc1d2e08fcb975b36f31e0010/download/pasted-file-16.png" filename="pasted-file-16.png" filesize="187001" width="1486" height="1042" previewable="true" caption="Your Account Main"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_033.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Your Account Main
</figcaption>
</span>
</figure></bc-attachment><br>
<div class="design-thoughts">
<p>The app's considerable preferences were previously a hot mess. This page's purpose was to organize the various preferences so that users weren't overwhelmed. I'm particularly proud of the clarity I was able to bring through the content grouping and UI labelling on this page.
</div>
<br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1NzUzMz9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--902d892481798233fe34d81323d2d869ca98d03c" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/4085e1e6bba3ced98dcd06bae06d6a410010/previews/full/pasted-file-17.png" href="https://public.3.basecamp.com/3128980/blobs/4085e1e6bba3ced98dcd06bae06d6a410010/download/pasted-file-17.png" filename="pasted-file-17.png" filesize="210225" width="1486" height="1042" previewable="true" caption="Your Account Preferences"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_037.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Your Account Preferences | <a href="http://classroom.booksource.com/Images/help/Screenshots/ClassroomOrg/15.png">See Previous Version</a>
</figcaption>
</span>
</figure></bc-attachment><br>
<div class="design-thoughts">
<p>I put a lot of effort into describing these preferences in terms of what they do and the effect they will have. Further, the UI exposes the precise logic for things like when a book will become overdue and doesn't place the burden on the user to run an experiment to figure this out on their own.
</div>
<br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1NzYwMD9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--24faacf7cffebbf096ad7f7da45ee5d1bcf0f3ed" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/65db3434ba2a3b62a39e6f634850319e0010/previews/full/pasted-file-18.png" href="https://public.3.basecamp.com/3128980/blobs/65db3434ba2a3b62a39e6f634850319e0010/download/pasted-file-18.png" filename="pasted-file-18.png" filesize="165429" width="1486" height="1042" previewable="true" caption="Your Account Library Data"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_027.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Your Account Library Data
</figcaption>
</span>
</figure></bc-attachment><br>
<br><br><strong>STUDENT-FACING EXPERIENCE</strong><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1Nzg4Nz9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--11cb2df04dfd9aa4cc586e3560a2f9bb36a2bf5a" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/25db388b6d98cf84b87a223f8e3abb070010/previews/full/pasted-file-19.png" href="https://public.3.basecamp.com/3128980/blobs/25db388b6d98cf84b87a223f8e3abb070010/download/pasted-file-19.png" filename="pasted-file-19.png" filesize="147068" width="1486" height="1042" previewable="true" caption="Student Selection"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_018.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Student Selection
</figcaption>
</span>
</figure></bc-attachment><br>
<div class="design-thoughts">
<p>This is the home page of the student experience.
<p>We chose to have a separate/distinct visual experience for students. A key challenge here was finding a visual experience that could span the enormous differences in kids spanning grades K-8. We initially did visual ideation with a ~2nd Grade student in mind, but management and teacher (see below) feedback pushed us closer to ~4th Grade visual sensibility.
<p>Owing to their age and the difficulty of user research testing of kids, we used teachers as a proxy for kids in our user research for the student experience. Further, we found visual inspiration from other educational sites that addressed similar grade levels.
<p>Finally, I had to make the tough call that we'd spend considerably more effort improving the teacher experience and consequently less effort on the student experience. The thinking was that if we didn't have teachers creating libraries, then it wouldn't matter that the student experience was stellar. Additionally, there was a considerable percentage of the user base that had chosen not to even utilize the student side of the app.
</div>
<br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1Nzk1Nz9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--af5a496b04e8390334ec852db8fa0647d9a2002a" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/b5db3fe647448d15f6127186a786faf80010/previews/full/pasted-file-20.png" href="https://public.3.basecamp.com/3128980/blobs/b5db3fe647448d15f6127186a786faf80010/download/pasted-file-20.png" filename="pasted-file-20.png" filesize="233452" width="1486" height="1042" previewable="true" caption="Student Dashboard"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_011.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Student Dashboard
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1ODE0OT9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--b5d3cb44f34b990259cc3d1658e0aa030ef80f98" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/6085df6ba95064c03379cea6b18120e70010/previews/full/pasted-file-21.png" href="https://public.3.basecamp.com/3128980/blobs/6085df6ba95064c03379cea6b18120e70010/download/pasted-file-21.png" filename="pasted-file-21.png" filesize="455476" width="1486" height="1042" previewable="true" caption="Check Out & Read (Hover Over Book)"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_017.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Check Out & Read (Hover Over Book)
</figcaption>
</span>
</figure></bc-attachment><br>
<div class="design-thoughts">
<p>There are certain aspects of books that can be helpful for kids when deciding what to read. We chose to display this info to kids upon hovering over a book card. We used a card flip animation to add a sense of playfullness.
</div>
<br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1ODIwMD9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--9f7f0d598ffae33719e1e3695ad3d75fd0db97c4" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/75db339107d6a99808913d096595ea050010/previews/full/pasted-file-22.png" href="https://public.3.basecamp.com/3128980/blobs/75db339107d6a99808913d096595ea050010/download/pasted-file-22.png" filename="pasted-file-22.png" filesize="384835" width="1486" height="1042" previewable="true" caption="Check Out & Read Book Detail State"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_032.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Check Out & Read Book Detail State
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU5ODE2Nj9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--0ef79f8a1a311a8b26deff38b363392c907232d3" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/ceb1d26e0a0c989b1e47bafe92a044400010/previews/full/pasted-file-2.png" href="https://public.3.basecamp.com/3128980/blobs/ceb1d26e0a0c989b1e47bafe92a044400010/download/pasted-file-2.png" filename="pasted-file-2.png" filesize="35090" width="496" height="511" previewable="true" caption="Default Book Cover Art for When We Have None and the Teacher Hasn't Add One"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 496px;"><div class="inline_media_height_constraint" style="padding-top: 103.0241935483871%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_028.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Default Book Cover Art for When We Have None and the Teacher Hasn't Add One
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1ODM2Mj9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--ca176f6b619a97f743be4a4a5178cdf2cdd810ba" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/3e51874f04a9c7e7ada4744b43f94cb30010/previews/full/pasted-file-23.png" href="https://public.3.basecamp.com/3128980/blobs/3e51874f04a9c7e7ada4744b43f94cb30010/download/pasted-file-23.png" filename="pasted-file-23.png" filesize="288147" width="1486" height="1042" previewable="true" caption="Return Books Main"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_004.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Return Books Main
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU1ODc5NT9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--5994afdfa0ff18d573319e639c757c67edfdeeeb" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/73a6d90179b3b7aef29257cb929a28420010/previews/full/pasted-file-24.png" href="https://public.3.basecamp.com/3128980/blobs/73a6d90179b3b7aef29257cb929a28420010/download/pasted-file-24.png" filename="pasted-file-24.png" filesize="280033" width="1486" height="1042" previewable="true" caption="Return Book with Rate & Review"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 70.02923976608187%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_016.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Return Book with Rate & Review
</figcaption>
</span>
</figure></bc-attachment><br><br><br><strong>MISC. EXPERIENCES</strong><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU2MTE3NT9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--f5090dd524f7824671526008dfa04ab609df2c50" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/07a20e1702ce7fb870c15a2f8311c8360010/previews/full/pasted-file-28.png" href="https://public.3.basecamp.com/3128980/blobs/07a20e1702ce7fb870c15a2f8311c8360010/download/pasted-file-28.png" filename="pasted-file-28.png" filesize="76187" width="1486" height="283" previewable="true" caption="Snack Bar Success Message Example"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 19.005847953216374%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_014.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Snack Bar Success Message Example
</figcaption>
</span>
</figure></bc-attachment><br>
<div class="design-thoughts">
<p>The previous version of the app didn't do a great job of communicating status to users and even when it did communicate status, it did so inconsistently.
<p>We communicated the status of every important app action and did so through the snack bar UI pattern shown here. The effect of this work was much greater confidence in the app and much greater clarity about whether and why an action failed.
</div>
<br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU2MjExND9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--dcd3d912a358058559babd1d27951ce6a1563f32" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/356db12a122b1ec94581a848b2c3c7ae0010/previews/full/pasted-file-34.png" href="https://public.3.basecamp.com/3128980/blobs/356db12a122b1ec94581a848b2c3c7ae0010/download/pasted-file-34.png" filename="pasted-file-34.png" filesize="142912" width="1486" height="991" previewable="true" caption="Password and ID Recovery"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 66.66666666666666%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_007.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Password and ID Recovery
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU2MTkxND9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--b8b90423cf3287b87f7efd1c3476e4dbac146515" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/724cc2dca733c72f279817675c4f70ae0010/previews/full/pasted-file-32.png" href="https://public.3.basecamp.com/3128980/blobs/724cc2dca733c72f279817675c4f70ae0010/download/pasted-file-32.png" filename="pasted-file-32.png" filesize="270845" width="828" height="915" previewable="true" caption="Verification Email"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 110.38011695906434%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_005.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Verification Email
</figcaption>
</span>
</figure></bc-attachment><br>
<div class="design-thoughts">
<p>The previous version of the app had 2 or 3 separate email visual styles and the quality of the content of those emails and their calls to action was very poor.
<p>Collaborating with a content designer, we made those emails visually consistent with clear copy and calls to action.
<p>I was able to additionally eliminate a series of status emails whose content was now available from the app's Dashboard. Email deliverability was a consistent support issue which further motivated the elimination.
</div>
<br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU2MTg1NT9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--e8039d81b40dd8f9f5d029e40f375c52a5f5ce35" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/2cf7719ae7311b73ea3ae69ef2bad82f0010/previews/full/pasted-file-30.png" href="https://public.3.basecamp.com/3128980/blobs/2cf7719ae7311b73ea3ae69ef2bad82f0010/download/pasted-file-30.png" filename="pasted-file-30.png" filesize="173437" width="795" height="1023" previewable="true" caption="Welcome Email"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 128.6549707602339%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_008.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Welcome Email
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU2MjIwMz9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--0805305dd6a293eb062a062285497eb8aac9d564" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/7ac312c343f405a65141ea0d7d8974740010/previews/full/pasted-file-35.png" href="https://public.3.basecamp.com/3128980/blobs/7ac312c343f405a65141ea0d7d8974740010/download/pasted-file-35.png" filename="pasted-file-35.png" filesize="243754" width="795" height="915" previewable="true" caption="Password Reset Email"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 115.05847953216374%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_019.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Password Reset Email
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU2MjY2MT9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--b13dfcb17e34fe551abce9e9f89397e583810724" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/b01864df9e5a4e642836260e7e70facc0010/previews/full/pasted-file-40.png" href="https://public.3.basecamp.com/3128980/blobs/b01864df9e5a4e642836260e7e70facc0010/download/pasted-file-40.png" filename="pasted-file-40.png" filesize="260966" width="1486" height="991" previewable="true" caption="Help Center (Adding Books Topic)"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 66.66666666666666%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_015.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Help Center (Adding Books Topic)
</figcaption>
</span>
</figure></bc-attachment><br>
<div class="design-thoughts">
<p>The previous app had a static, monolithic FAQ page that was not searchable, poorly maintained, and with articles that couldn't be linked to directly. In short, it wasn't a knowledge base.
<p>I provided 4-5 candidate Help Center/KB apps and working with my junior product manager, identified our preferred solution. (The one we chose was one of the few Help Center/KB apps that had multi-level article grouping.) I then provided advice/guidance and even certain complex content to the junior product manager as she developed the Help Center/KB structure and content.
<p>Finally, I decided where in the app to provide page-specific help (~15 pages) and to what topic/article to link to for each.
</div>
<br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU2MjUyOT9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--16416d1e5f3c4daca97d83b3642ba2a90a9de76d" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/256db2d685104e8f06f1bd684fa942de0010/previews/full/pasted-file-39.png" href="https://public.3.basecamp.com/3128980/blobs/256db2d685104e8f06f1bd684fa942de0010/download/pasted-file-39.png" filename="pasted-file-39.png" filesize="17467" width="1072" height="136" previewable="true" caption="Page-Specific Help (Links to Help Center)"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 12.573099415204677%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_002.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Page-Specific Help (Links to Help Center)
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU2MjM3MT9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--a72c81e9ccf09dddbbdfd4777ed214ec65a5d829" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/7018680e7ed57c55542c1b79e748267f0010/previews/full/pasted-file-36.png" href="https://public.3.basecamp.com/3128980/blobs/7018680e7ed57c55542c1b79e748267f0010/download/pasted-file-36.png" filename="pasted-file-36.png" filesize="329705" width="1486" height="991" previewable="true" caption="Product Tour (Step 1)"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 66.66666666666666%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_020.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Product Tour (Step 1)
</figcaption>
</span>
</figure></bc-attachment><br>
<div class="design-thoughts">
<p>I'm a huge believer in the importance of a great 1st use experience for any app and thus chose to invest heavily in a 1st use walk through experience.
<p>My team and I evaluated a number of walk through products (including building our own open source solution) and chose to use inlinemanual.com. It had the nice quality of additionally being able to provide the page-specific help functionality we needed.
<p>I authored the product tour, striking just the right balance between number of steps and comprehensiveness and with the constraint that 1st time users would have empty libraries and student rosters.
</div>
<br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU2MjM5Mj9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--5d4cb473772b61307a48f86630691a964b12de12" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/00185fe51e0c16498a1094235488e53c0010/previews/full/pasted-file-37.png" href="https://public.3.basecamp.com/3128980/blobs/00185fe51e0c16498a1094235488e53c0010/download/pasted-file-37.png" filename="pasted-file-37.png" filesize="191071" width="1486" height="991" previewable="true" caption="Product Tour (Library)"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 66.66666666666666%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_006.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Product Tour (Library)
</figcaption>
</span>
</figure></bc-attachment><br><br><br><bc-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIsZ2lkOi8vYmMzL0F0dGFjaG1lbnQvOTU2MjQzMD9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--b89e0649fe77a044f2243e994afed84077b96640" content-type="image/png" url="https://public.3.basecamp.com/3128980/blobs/3ac316419956c17b30ac81139424026d0010/previews/full/pasted-file-38.png" href="https://public.3.basecamp.com/3128980/blobs/3ac316419956c17b30ac81139424026d0010/download/pasted-file-38.png" filename="pasted-file-38.png" filesize="324038" width="1486" height="991" previewable="true" caption="Product Tour (Last Step)"><figure class="attachment attachment--image png attachment--preview">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 66.66666666666666%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/preview_031.png" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Product Tour (Last Step)
</figcaption>
</span>
</figure></bc-attachment>
<br>
<br>
<br>
<bc-attachment><figure class="attachment attachment--image png attachment--preview" id="reading-levels-chart">
<div class="attachment__frame attachment__hideable"><div class="inline_media_width_constraint" style="width: 684px;"><div class="inline_media_height_constraint" style="padding-top: 66.66666666666666%;"><div class="inline_media_box"><img src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/Reading-Level-Chart.png" style="height:auto;" alt="Preview"></div></div></div></div>
<span class="attachment__details">
<figcaption class="attachment__caption">
Reading Level Chart Showing Social Sharing in Progress
</figcaption>
</span>
</figure>
<br>
<div class="design-thoughts">
<p>This was a separate project at Booksource. It was the 1st launched project in collaboration with <a href="https://www.behance.net/elizabethrenda" target="_blank">Liz Renda</a>, the stellar product designer I hired after the launch of the Classroom Library app. <a href="http://www.booksource.com/reading-level-chart" target="_blank">Visit the live page</a>.
<p>My analysis of our analytics was telling us that this page was a key organic search landing page, but the team that did the previous site redesign managed to regress the page, choosing to turn it into a PDF that a) didn't link to any other site pages and thus was a dead end, b) didn't present well in Google search results, c) had no social sharing, and d) didn't have key branding elements. This page's design fixed all of those things.
<p>Liz's visual and interaction design was sublime and she did a great job of working cross-functionally to understand and balance a variety of important content considerations. Because we wanted to ensure Liz's sublime visual design was implemented perfectly by our busy engineering team, she and I developed an HTML prototype that would serve as the starting point for the engineering team's implementation.
<p>Finally, while Liz worked on the core of this page, working with her and a copywriter, I led the prototyping of this page's social sharing across Facebook, Twitter, and Pinterest. The prototyping allowed us to very deliberately consider things like a) how do we embed the shareable image of the page without displaying it to users, b) what is the optimal size and aspect ratio of the shareable image, and c) what fields (titles, descriptions, hashtags, etc) were available and what field length display limitations we would face across each social network.
<p>Without taking this time to prototype, to really be comprehensive, this social sharing experience would have undoubtedly been lowest common denominator or worse, exposed to users for weeks or months until we had the opportunity to comprehensively redesign it.
</div>
</bc-attachment>
</div>
</div>
</section>
</article>
</div>
</article>
<footer class="centered push--bottom">
<a href="https://basecamp.com/">
<img class="img--sized" src="Screenshot%20Summary%20of%20the%20New%20CO%20-%20Basecamp_files/logomark-bc3-transparent-fe91e0971c68cddf8c8f250e53fb6cf29a8.png" alt="Logomark bc3 transparent" height="65" width="80">
</a> <p class="flush">Shared with <a class="decorated" href="https://basecamp.com/">Basecamp</a></p>
</footer>
</div>
</body></html>