-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patharticle_readapp.html
364 lines (302 loc) · 15.3 KB
/
article_readapp.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="John Robb">
<title>Reading Companion Design - John Robb, UX Designer</title>
<!-- Normalize -->
<link href="css/normalize.css" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/6570aa56bc.js"></script>
<!-- Custom CSS -->
<link href="robbstrap.css" rel="stylesheet">
<link href="media.css" rel="stylesheet">
<!-- FancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,900' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,400i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,900" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-M688J4"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-M688J4');</script>
<!-- End Google Tag Manager -->
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Jr</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html#projects">Projects</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="article">
<div class="jumbotron" style="padding-right: 0" id="article-readapp">
<div class="container col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6">
<h1>Designing a Reading Companion (WIP)</h1>
<p>August, 2017</p>
</div>
</div>
<!--Added "margin-bottom:96px" as a hack - otherwise the article would be blocked by the footer at the bottom on all articles-->
<div class="container col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6" style="margin-bottom:96px">
<a class="fancybox" href="img/readapp/gr-cover.png">
<img src="img/readapp/gr-cover.png" class="img-responsive no-shadow" alt="Progression of design iterations">
</a>
<p class="caption">Progression of design iterations</p>
<p>
For about a month this summer, I became an obsessive bookworm. During this time I found some pain points (finding a book to read, no updated apps to track books I’ve read) and delights (having great conversations about a book, sampling books from the library).
</p>
<p>
In order to exercise my design skills and practice using Sketch, I began to design an app with this prompt in mind:
</p>
<p class="quote text-center">
What would a great book-reading companion app look like?
</p>
<h2>Challenges</h2>
<p>
<b>Time:</b> I was making this app during my personal time after work, so I didn't have much time or resources to dedicate to the project
</p>
<p>
<b>Scope:</b> An app like this could quickly get messy with too many features, the scope would have to be clearly defined.
</p>
<h2>Process</h2>
<p>
Before designing the app, I captured what my current book reading experience was like, and where it could be improved by writing up rudimentary user journeys. I used these to look for delighters and pain points throughout the current reading experience and where my app might fit into the experience.
</p>
<a class="fancybox" href="img/readapp/journeys.png">
<img src="img/readapp/journeys.png" class="img-responsive no-shadow" alt="Sketches of user journeys">
</a>
<p class="caption">Sketches of user journeys</p>
<h2>Current Landscape</h2>
<p>
I looked to non-reading apps for inspiration and ideas:
</p>
<ul>
<li>Spotify’s playlists and “Discover” feature are both great ways to explore new content</li>
<li>Duolingo’s “Clubs” feed is great inspiration for a book club-style feature</li>
<li>Runkeeper and Duolingo’s “Profile” pages show status and profile details</li>
</ul>
</p>
<a class="fancybox" href="img/readapp/inspiration.png">
<img src="img/readapp/inspiration.png" class="img-responsive no-shadow" alt="Taking inspiration from Spotify playlists, Runkeeper profile, and Duolingo Clubs">
</a>
<p class="caption">Taking inspiration from Spotify playlists, Runkeeper profile, and Duolingo Clubs</p>
<p>
I spotted a few pain points that already exist in Goodreads (which would be a direct competitor):
</p>
<ul>
<li>Long onboarding flow</li>
<li>Confusing information architecture</li>
<li>No good ‘exploration’ experience to find new books</li>
<li>Outdated visual design style</li>
</ul>
<a class="fancybox" href="img/readapp/goodreads-shots.png">
<img src="img/readapp/goodreads-shots.png" class="img-responsive no-shadow" alt="Goodreads has a cumbersome onboarding flow and confusing architecture">
</a>
<p class="caption">Goodreads has a cumbersome onboarding flow and confusing architecture</p>
<!-- <h2>Exploring the problem space</h2>
To
Why do people choose to read a book?
Prestige? (everyone’s talking about it)
Critically acclaimed? (A friend’s recommendation)
The time of year/mood?
Time in their life (Self-help books)
If they identify with the author (Thoreau)
The author’s story (Between a rock and a hard place)
A popular movie is out (Girl on a train)
An author I enjoy (Cat’s Cradle)
Book club (Persepolis)
I looked back on books that I had read, and why I read them? -->
<h2>Information Architecture</h2>
<p>
I created a preliminary information architecture to help guide my designs and define a scope for the project.
</p>
<p>
Creating this architecture helped me think through which features would logically appear where, and helped me to know which pages would be best to design first.
</p>
<a class="fancybox" href="img/readapp/info-arch.png">
<img src="img/readapp/info-arch.png" class="img-responsive no-shadow" alt="Basic app architecture">
</a>
<p class="caption">Basic app architecture</p>
<!--BACK BUTTON, breadcrumb-->
<!-- <a href="index.html" class="btn btn-default" role="button" style="margin-bottom:18px; margin-top: 24px">
<i class="fa fa-angle-left"></i> <b>Home</b>
</a> -->
<!-- <h2>Wireframes and Visual Design</h2> -->
<h2>Now Reading: your reading companion</h2>
<p>
This is for ‘during’ the reading experience. The goal of comments would to get the benefit of an insightful conversation about a good book without attending a book club.
</p>
<a class="fancybox" href="img/readapp/read-wires.png">
<img src="img/readapp/read-wires.png" class="img-responsive no-shadow" alt="Now reading wireframe iterations">
</a>
<p class="caption">"Now Reading" wireframe iterations</p>
<a class="fancybox" href="img/readapp/read-designs.png">
<img src="img/readapp/read-designs.png" class="img-responsive no-shadow" alt="Now reading design iterations">
</a>
<p class="caption">"Now Reading" design iterations</p>
<!-- <p>
Spoilers here would be a huge issue, so I included a slider to only show comments relevant to that chapter. Commenters would be able to include a “spoiler alert.”
</p>
<p>
By making a flexible book-card, people that pick up multiple books at once could also easily use the interface.
</p> -->
<h2>Explore: discovering new books</h2>
<p>
One of my major pain points is finding a new book to read, and no apps or websites have been able to assist me. After thinking about how people decide to read a new book, I realized books aren’t often chosen by the say they are often sorted (by genre or title), but rather by categories such as:
</p>
<ul>
<li>An interest in the author’s life story</li>
<li>A recommendation from a friend</li>
<li>Enjoying previous works by that author</li>
<li>Reading it for a book club</li>
</ul>
<a class="fancybox" href="img/readapp/explore-wires.png">
<img src="img/readapp/explore-wires.png" class="img-responsive no-shadow" alt="Explore wireframe iterations">
</a>
<p class="caption">"Explore" wireframe iterations</p>
<p>
For these reasons, I decided that using a playlist metaphor here would work best. Rather than being sorted only by genre, books can be selected from groups like:
</p>
<ul>
<li>“Summer short stories”</li>
<li>“Top 10 horror stories of all time”</li>
<li>“My saved books”</li>
<li>“Bill Gates’ summer reading list”</li>
</ul>
<h2>Sampling books like Snapchat: Immersive Playlist view</h2>
<p>
Another pain point I found while looking for a new book in the library was often that most of my selection process involved judging a book by its cover, picking it up, then reading the first few paragraphs. There is no digital equivalent of sampling books this quickly.
</p>
<p>
My question here was:
</p>
<p class="quote text-center">
What if we had a way to sample books with the ephemerality and low commitment of the way users scan through Snapchat?
</p>
<a class="fancybox" href="img/readapp/snapchat-wires.png">
<img src="img/readapp/snapchat-wires.png" class="img-responsive no-shadow" alt="Immersive playlist view wireframe iterations">
</a>
<p class="caption">"Immersive playlist view" wireframe iterations</p>
<p>
This is where the "Immersive playlist view" would come in. After tapping on a playlist, it would take you to the Immersive Playlist view. The user could read a few sentences/paragraphs of the first book or look through a summary of the book, its accolades, or user reviews.
</p>
<h2>What's next</h2>
<p>
I met with a fellow Bentley grad, <a href=”http://www.reedsnider.com/”>Reed</a> to get feedback on my ideas. A couple of takeaways from the conversation:
</p>
<ul>
<li>Create a more visual experience, use the book covers more strongly</li>
<li>Set more clear goals to avoid scope creep</li>
<li>Create an interactive prototype</li>
</ul>
<h2>What I would do differently</h2>
<p>
Invest more time for informal research (possibly send out an informal survey to friends/family about their reading habits)
</p>
<p>
Set more clear goals to address at the beginning of the project (personal goals, product goals, and user needs). A journey map might help establish these goals
</p>
<p>
Use forums, design communities, and friends to get more feedback throughout the design process
</p>
<h2>What went well</h2>
<p>
Going through the full process of design iterations rather than jumping right to high-fidelity mocks saved me time and made for more appealing designs
</p>
<p>
I became more familiar with Sketch as a tool for all stages of design
</p>
<p>
I started to move towards creating more modern visual designs and and staying up-to-date with the latest design trends
</p>
</div>
</div>
<!-- <div class="container-fluid otherwork">
<div class="container col-xs-12 col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8">
<h3 style="text-align:center">Other Work</h3>
<div class="col-xs-4">
<a href="article_biz.html">
<img src="img/cover_biz.png" class="img-responsive center-block" style="max-height:168px">
<p>Business Magazine: UX Research</p>
</a>
</div>
<div class="col-xs-4">
<a href="article_critter.html">
<img src="img/cover_critter.png" class="img-responsive center-block" style="max-height:168px">
<p>Critter Mobile App</p>
</a>
</div>
<div class="col-xs-4">
<a href="article_nhc.html">
<img src="img/cover_nhc.png" class="img-responsive center-block" style="max-height:168px">
<p>Nursing Home Compare: Usability Test</p>
</a>
</div>
<div class="col-xs-4 col-xs-offset-2">
<a href="article_pl.html">
<img src="img/cover_pl.png" class="img-responsive center-block" style="max-height:168px">
<p>Plainlanguage.gov: Information Architecture</p>
</a>
</div>
<div class="col-xs-4">
<a href="article_punchpal.html">
<img src="img/cover_pp.png" class="img-responsive center-block" style="max-height:168px">
<p>Kronos: Gamifying Workforce Timekeeping</p>
</a>
</div>
</div>
</div> -->
<footer class="footer">
<p>Coded up by John Robb</p>
</footer>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>