-
Notifications
You must be signed in to change notification settings - Fork 0
/
book-club.html
563 lines (532 loc) · 20.1 KB
/
book-club.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
<!DOCTYPE html>
<html lang="en" class="html-book_club">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Anna T: Book Club app case study</title>
<link rel="icon" href="./assets/favicon.png" />
<link rel="stylesheet" type="text/css" href="./index.css" />
</head>
<body>
<div class="header">
<h1>Book Club case study</h1>
<a href="https://tloth.github.io" class="back_link"
>Back to the homepage</a
>
</div>
<section class="">
<h2 class="case_study-h2">Table of Contents</h2>
<div class="grid case_study-section">
<div>
<ol>
<li><a href="#project-overview-section">Project overview</a></li>
<li><a href="#context-section">Context for the Book Club</a></li>
<li>
<a href="#understanding-the-user-section"
>Understanding the user</a
>
</li>
<li>
<a href="#starting-the-design-section">Starting the design</a>
</li>
<li><a href="#usability-testing-section">Usability testing</a></li>
<li>
<a href="#refining-the-design-section">Refining the design</a>
</li>
<li><a href="#going-forward-section">Going forward</a></li>
</ol>
</div>
<img
src="./assets/bookclub/bookclub-elephant.png"
alt="A smiley, illustrated elephant reading a book"
class="w-100"
/>
</div>
</section>
<section>
<h2 id="project-overview-section" class="case_study-h2">
Project overview
</h2>
<div class="case_study-section">
<h3>The product</h3>
<p>
Book Club web app for a book club to keep track of what books members
have read and when
</p>
<h3>Project duration</h3>
<p>March - April 2023 (design phase)</p>
<h3>The problem</h3>
<p>
The Book Club does not have a single source of truth for which books
members have read, when, whose choice it was and where they held the
meeting
</p>
<h3>The goal</h3>
<p>
A web app to serve as an information hub for the Book Club with
accurate statistics
</p>
<h3>My role & responsibilities</h3>
<p>Lead designer</p>
<p>User research, wireframing, prototyping, and usability testing</p>
</div>
</section>
<section>
<h2 id="context-section" class="case_study-h2">
Context for the Book Club
</h2>
<div class="case_study-section">
<p>
The Book Club is a self-organised group of 3-6 people (currently 4).
Members take turns suggesting 3 books to read, from which the others
vote democratically for one. They agree on a time and date to meet,
this usually allows one or two months to read the book. All the
organising happens in a WhatsApp group chat.
</p>
<img
src="./assets/bookclub/bookclub-preview.png"
alt="Preview of the app on a laptop and on mobile"
class="w-100"
/>
</div>
</section>
<section>
<h2 id="understanding-the-user-section" class="case_study-h2">
Understanding the user
</h2>
<div class="case_study-section">
<h3>User research summary</h3>
<p>
We conducted interviews with 3 members of the Book Club. We wanted to
understand why they are still in the Book Club after months/years as
it is a community-driven club with no financial or other tangible
incentive to read and discuss books other than a love for books and
spending time together.
</p>
<p>
An assumption we made was there being a need to save notes and quotes
in one place that readers can later go back to. The interviews,
however, showed only two readers confirming this.
</p>
<p>
All readers mentioned it being hard to look up a book they had read
before if they can't remember the title or author.
</p>
<p>
There was a wide range of platforms readers consume their books on:
physical copies, e-readers, audiobooks (via an app or sometimes even
Youtube).
</p>
<h3>Pain points</h3>
<ul>
<li>saving notes and quotes in one place</li>
<li>looking up a book if they don't remember the title</li>
<li>not remembering whose turn it is to pick a book next</li>
<li>voting for a book</li>
<li>finding a time and date that works for everyone</li>
</ul>
<h3>Problem statement</h3>
<p>
Minna is a Book Club member who needs a way to organise and keep track
of Book Club meetings and the books they read because she wants to
keep a record of all the books and meetings in one place.
</p>
</div>
</section>
<section>
<h2 id="starting-the-design-section" class="case_study-h2">
Starting the design
</h2>
<div class="case_study-section">
<h3>Competitive audit</h3>
<p>
We audited two book club apps, Bookclubs and Fable, and noticed that
both have a very simple colour scheme in order to let the book covers
stand out.
</p>
<h3>Abandoned features</h3>
<p>
We did Crazy Eights exercises to come up with ideas for two problems:
voting for a book from three options and finding a meeting time and
date that works for everybody.
</p>
<p>
Using the voting feature in the Book Club app would require members to
leave WhatsApp (where we currently handle all the organising), use the
app, then come back to WhatsApp. This is way more hassle than using
WhatsApp's new poll feature (or even just typing out the three
options), so we decided to leave the voting feature out.
</p>
<p>
Finding a meeting time and date has been quite difficult in the group
chat, however, moving this to the app would make the process easier
only if everyone had an always up-to-date digital calendar that they
wouldn't mind sharing, which not everybody does. Hence this feature
was scrapped, too.
</p>
<h3>Sitemap</h3>
<img
src="./assets/bookclub/bookclub-sitemap1.png"
alt="Initial sitemap"
class="w-100"
/>
<p>
The first usability testing session showed that the initial
low-fidelity digital wireframes based on this sitemap were highly
confusing. What was the difference between a book and a meeting?
Aren't they interconnected? So we started from scratch and created a
new sitemap based on user stories.
</p>
<h3>User stories</h3>
<ul>
<li>
I want to <strong>add a new book</strong> when the group decides
what to read next
</li>
<li>
I want to <strong>create a new meeting</strong> when the group
decides where and when to meet to discuss the book
</li>
<li>
I want to immediately
<strong
>see what the club is currently reading and the details of the
next meeting</strong
>
</li>
<li>
I want to <strong>take notes and save quotes</strong> from the book
I'm currently reading
</li>
<li>
I want to <strong>see all the books</strong> the club has read
</li>
<li>
I want to <strong>filter and search the books</strong> the club has
read
</li>
<li>
For each book, I want to see the details, my notes and rating, and
meeting details in one place (members present, ratings, where and
when)
</li>
<li>I want to see all the current and past members of the club</li>
</ul>
<h3>Sitemap v2</h3>
<img
src="./assets/bookclub/bookclub-sitemap2.png"
alt="Updated sitemap"
class="w-100"
/>
<p>
We merged books and meetings to be one entity and removed the
"Members" page as it did not serve a purpose with the revised user
stories.
</p>
<h3>Paper wireframes</h3>
<div class="grid">
<img
src="./assets/bookclub/bookclub-paper_wireframes1.jpeg"
alt="Paper wireframes part 1"
class="w-100"
/>
<img
src="./assets/bookclub/bookclub-paper_wireframes2.jpeg"
alt="Paper wireframes part 2"
class="w-100"
/>
</div>
<h3>Low-fidelity digital wireframes</h3>
<div class="grid">
<img
src="./assets/bookclub/bookclub-lofi-wireframe-1.jpg"
alt="Low fidelity digital wireframe 1"
class="w-100"
/>
<img
src="./assets/bookclub/bookclub-lofi-wireframe-2.jpg"
alt="Low fidelity digital wireframe 2"
class="w-100"
/>
</div>
<p>
See more
<a
href="https://www.figma.com/file/tXqoGNZkkOc7D23vt9jeiE/Book-Club?node-id=20%3A457&t=kOQga3oQ3dWXYnFP-1"
target="_blank"
>low-fidelity wireframes</a
>
on Figma.
</p>
</div>
</section>
<section>
<h2 id="usability-testing-section" class="case_study-h2">
Usability testing
</h2>
<div class="case_study-section">
<p>
We used this
<a
href="https://www.figma.com/proto/tXqoGNZkkOc7D23vt9jeiE/Book-Club?node-id=22-777&scaling=scale-down&page-id=20%3A457&starting-point-node-id=22%3A777&show-proto-sidebar=1"
target="_blank"
>low-fidelity prototype</a
>
on Figma to test the app with real users.
</p>
<h3>Study details</h3>
<p>Study type: moderated usability study</p>
<p>Location: online remote in the UK</p>
<p>
Participants: 4 participants (all book club members or book lovers)
</p>
<h3>Findings & themes</h3>
<p>
After compiling the findings with the help of an affinity diagram, we
discovered the following themes:
</p>
<ul>
<li>
<p>How users search for books</p>
<ul>
<li>scroll and skim to find book</li>
<li>search for tags —> books need tags</li>
<li>search by date —> need visible timeline/dates</li>
</ul>
</li>
<li>
<p>Confusion over</p>
<ul>
<li>
“Books”: we need to make the scope of the app clear: Book Club
only, not all the books in the world like Goodreads
</li>
<li>
“Profile”: profile page should only contain account information;
have a separate “My shelves” page for a personalised books page
</li>
</ul>
</li>
<li><p>Edit icon was not intuitive</p></li>
<li>
<p>Suggestions from users</p>
<ul>
<li>want to see ratings (individual, average)</li>
<li>see other people's notes & quotes after the meeting</li>
</ul>
</li>
</ul>
<h3>Insights</h3>
<ul>
<li>
Users have different ways of searching for books in a list: search
for keywords, search for dates, skim visually by scrolling. (Dates
are already visible under each book. The covers are there so users
can scroll and skim.)
</li>
<li>
Users get confused by the scope of the app: does it contain all the
books they have read or only books the Book Club has read? (This
should be clear once the app is populated. Book clubs only for now.
Rename sections to make clearer.)
</li>
<li>
Users expect to find basic personal and account information on the
"Profile" page
</li>
<li>
Users expect to find their personalised book collections on a
different page, most commonly on “My shelves”
</li>
<li>Users want to rate books and see other people's ratings</li>
<li>
Users want to see other people's notes and quotes after the Book
Club meeting
</li>
</ul>
<h3>Actionable tasks based on insights (prioritised)</h3>
<ul>
<li>
P0: Profile page should contain account information only. Navbar:
rename “Books” to “Club books”, add “My shelves”, rename “Profile”
to “My account”
</li>
<li>
P0: Create new “My shelves” page for personalised book lists (”Books
I have read”, “Books I want to read”). Rename “Books I have read” to
“Club books I have read”
</li>
<li>P0: Rate book, see average rating for each book</li>
<li>
P1: Add tags to books which you can then search for/filter books by
(might be available via an API)
</li>
<li>
P2: Reveal everyone's notes and quotes on the book page after the
meeting
</li>
</ul>
</div>
</section>
<section>
<h2 id="refining-the-design-section" class="case_study-h2">
Refining the design
</h2>
<div class="case_study-section">
<h3>Sticker sheet and high-fidelity wireframes</h3>
<div class="grid">
<div>
<p>
First of all, we created a
<a
href="https://www.figma.com/file/tXqoGNZkkOc7D23vt9jeiE/Book-Club?node-id=30%3A2&t=kOQga3oQ3dWXYnFP-1"
target="_blank"
>sticker sheet</a
>
with reusable components to make the process more streamlined and
flexible.
</p>
<p>
I always keep accessibility in the forefront of my mind. We tested
the colour contrast using WebAIM's contrast checker, and set the
base/smallest font size to be 18pt. We made sure each interactive
element has enough padding for bigger fingers or shaky cursors. We
made each interactive element stand out so users can be certain
about what they can click or tap. I will liaise with the developer
to make sure that there is a logical flow for keyboard and/or
screenreader users and that the headings are in a hierarchical
order.
</p>
<p>
We turned the most common components into Figma components for
ease (navbar and CTAs).
</p>
</div>
<img
src="./assets/bookclub/bookclub-sticker_sheet-atoms.png"
alt="Sticker sheet atoms"
class="w-100"
/>
</div>
<img
src="./assets/bookclub/bookclub-sticker_sheet-components.jpg"
alt="Sticker sheet components"
class="w-100"
/>
<img
src="./assets/bookclub/bookclub-sticker_sheet-components-mobile.jpg"
alt="Sticker sheet navbar for mobile"
class="w-100"
/>
<p>
I used a Wacom digital tablet to create some simple illustrations
(they are the Book Club members' favourite animals enjoying some
literature!) to spice up the otherwise simple colour scheme and
designs.
</p>
<img
src="./assets/bookclub/bookclub-illustrations.png"
alt="Illustrations of an elephant, a hedgehog, a seal, a duck and an owl consuming books in different formats: physical books, audiobook, an e-reader."
class="w-100"
/>
<p>
We designed for desktop and mobile screens, and used the smallest
possible frame for both. This will make it easier for developers to
implement the designs. The grid we used also restricts the content to
never overflow on huge screens and stay legible and skimmable to the
human eye.
</p>
<img
src="./assets/bookclub/bookclub-desktop_mobile.png"
alt="A showcase of some app screens in both desktop and mobile sizes"
class="w-100"
/>
<p>
See all the
<a
href="https://www.figma.com/file/tXqoGNZkkOc7D23vt9jeiE/Book-Club?node-id=105%3A2&t=kOQga3oQ3dWXYnFP-1"
target="_blank"
>high-fidelity wireframes</a
>
on Figma.
</p>
<h3>Specific areas of improvement</h3>
<h4>Navbar</h4>
<p>We renamed navigation items for clarity.</p>
<img
src="./assets/bookclub/bookclub-navbar_before.png"
alt="Navbar before"
class="w-100"
/>
<img
src="./assets/bookclub/bookclub-navbar_after.png"
alt="Navbar after"
class="w-100"
/>
<h4>"My shelves" page</h4>
<p>
We renamed navigation items for clarity. "Books I have read" became
"Club books I have read", and "Books I want to read" became "Books I
want us to read" to make the scope of this page clear.
</p>
<div class="grid">
<img
src="./assets/bookclub/bookclub-my_shelves_before.png"
alt="Books page before"
class="w-100"
/>
<img
src="./assets/bookclub/bookclub-my_shelves_after.png"
alt="Books page after"
class="w-100"
/>
</div>
<h3>Usability testing, round 2</h3>
<p>
The second round of usability testing, where the tasks were the same
as in the first round, was overall very positive. Users found the flow
intuitive and pleasant. See the
<a
href="https://www.figma.com/proto/tXqoGNZkkOc7D23vt9jeiE/Book-Club?node-id=122-1584&scaling=min-zoom&page-id=122%3A1583&starting-point-node-id=122%3A1584&show-proto-sidebar=1"
target="_blank"
>high-fidelity prototype</a
>
on Figma.
</p>
<p>Some suggestions came up that we will definitely consider:</p>
<ul>
<li>
Fill up space on homepage with most used action (e.g. "Add quote")
</li>
<li>Show who chose each book</li>
<li>
Remove “Mark all as TBC” from "Add new book" page, default time,
date and location to TBC
</li>
<li>Make it clear which section is visible to everyone/only you</li>
<li>Move "Sort by" and "Search" under the “Currently reading” box</li>
<li>Extend "Sort by"</li>
</ul>
</div>
</section>
<section>
<h2 id="going-forward-section" class="case_study-h2">Going forward</h2>
<div class="grid case_study-section">
<div>
<p>
The app is currently in development. First, we annotated the Figma
designs with heading levels, functionality comments and engineering
questions. Then we sat down with the engineering team to go through
the annotations and raise/answer any questions.
</p>
</div>
<img
src="./assets/bookclub/bookclub-handover.png"
alt="A snippet of the Figma designs with design-engineering handover annotations, e.g. heading levels and questions to the developer."
class="w-100"
/>
</div>
</section>
</body>
</html>