-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patharticle_critter.html
306 lines (275 loc) · 14 KB
/
article_critter.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
<!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>Critter: Successfully Failed Mobile App - 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-critter">
<div class="container col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8">
<h1>Critter: Successfully Failed Mobile App</h1>
<p>May, 2015</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">
<p>
My friend <a href="https://mikaelfloresamper.wordpress.com/">Miki</a> (a sculptor and all-around swell guy) had an idea. “he knew that valuable conversations about art sometimes occurred during classes or in casual discussion, but he felt that these conversations were rarer than they should be.
</p>
<p class="quote text-center">How could we facilitate better conversation within the art community?</p>
<p>
The idea was interesting, and eventually we built it out as a mobile web app structured as an events calendar with a focus on user comments.
</p>
<p>
Ultimately the app flopped, but with our fail-fast mentality going into it, we were able to take it as a learning experience without using unnecessary time
and resources.
</p>
<p>
<h2>Challenges</h2>
</p>
<p>
<b>Budget:</b> Basically none. We each pitched in a small bit of personal money towards an SSL certificate, web hosting, and some promotional materials.
</p>
<p>
<b>Experience:</b> I had never led a project like this before, but I drew on the experiences of others for help and knowledge.
</p>
<p>
<b>Time:</b> We gave ourselves about one month to go from concept to launch at the popular “Alloverstreet” gallery event.
</p>
<p>
<h2>Process</h2>
</p>
<p>
We went into the process with the goal of having an MVP out in a month, so we used quick and efficient techniques to have our product ready in time for
quick validation.
</p>
<p>
<h3>Prototyping</h3>
</p>
<p>
We started with an extremely low fidelity "prototype" to figure out the basic functionalities of the application. I went to a gallery event with a small
notebook, and wrote something down every time I felt compelled to use the app.
</p>
<a class="fancybox" href="img/critter/sketchbook.jpg">
<img src="img/critter/sketchbook.jpg" class="img-responsive" alt="lo-fi prototype">
</a>
<p class="caption">Prototype exercise (feat. unrelated sketch)</p>
<p>
From this we gained valuable insights as to when a person might use this during their gallery experience and how a person might interact with others while
using it.
</p>
<p>
<h3>Design & Development</h3>
</p>
<p>
First we tried to use an open-source forum software (phpBB) to develop the product, but it lacked the customization options necessary to create an
easy-to-use web application.
<a class="fancybox" href="img/critter/phpbb.jpg">
<img src="img/critter/phpbb.jpg" class="img-responsive" alt="Critter on the phpBB platform">
</a>
<p class="caption">Critter running on the clunky phpBB platform</p>
</p>
<p>
We then called on our friend <a href="https://github.com/Kramdar93">Mark</a>, a seasoned developer who agreed to jump on board the project. We then decided we’d build the mobile web app from scratch.
Mark would handle the backend and databases (using Perl and SQL) while I would handle the front-end (HTML, CSS, and Twitter Bootstrap).
</p>
<p>
Miki and I took to the whiteboard, and eventually came up with the app’s user flows and general layout.
</p>
<a class="fancybox" href="img/critter/whiteboard_1.jpg">
<img src="img/critter/whiteboard_1.jpg" class="img-responsive" alt="whiteboard">
</a>
<p class="caption">Early whiteboard drawings</p>
<a class="fancybox" href="img/critter/sketch-mobile.jpg">
<img src="img/critter/sketch-mobile.jpg" class="img-responsive" alt="sketches">
</a>
<p class="caption">Initial sketches</p>
<p>
For the logo we called up another friend with a strong visual design background, and iterated until we got to our fun little
"critter" (derived from the word "critique"):
</p>
<a class="fancybox" href="img/critter/logo.jpg">
<img src="img/critter/logo.jpg" class="img-responsive" alt="Critter logo development">
</a>
<p class="caption">Development of the Critter logo</p>
<p>
I used the sketches to create hi-fi mockups which I would reference during the development phase.
</p>
<a class="fancybox" href="img/critter/hifi.png">
<img src="img/critter/hifi.png" class="img-responsive" alt="Hi-Fi Mockups">
</a>
<p class="caption">HiFi Comps</p>
<p>
<h3>Pre-Launch</h3>
</p>
<p>
As Mark and I were in the height of the development phase, Miki reached out to the founder of a popular Baltimore art news source, Bmore Art. We met with her over
coffee, discussing our idea, possibilities of expansion, and what she could do to help us. We sent her a press release and <a href="http://www.bmoreart.com/2015/05/bmorearts-picks-baltimore-art-galleries-openings-and-events-may-5-9.html">it was posted to Bmore Art</a>, which many people at the launch mentioned they had seen
</p>
<a class="fancybox" href="img/critter/bmore-art.png">
<img src="img/critter/bmore-art.png" alt="Press release on Bmore Art" class="img-responsive">
</a>
<p class="caption">Press Release published on Bmore Art</p>
<p>
We promoted the event on Facebook, and teamed up with Alloverstreet to have it sent out in their pre-event email. I also designed flyers to be posted around the venue and to be posted on social media leading up to the launch.
</p>
<p>
<h3>Launch</h3>
</p>
<p>
We prepared our table outside of the Alloverstreet event with a purple tablecloth and matching balloons, as well as lollipops (as I said, low budget).
</p>
<a class="fancybox" href="img/critter/miki.jpg">
<img src="img/critter/miki.jpg" class="img-responsive">
</a>
<p class="caption">Miki manning the booth</p>
<p>
As people filtered in, we asked them if they wanted a lollipop, and gave a small pitch about what Critter was and how they could use it. We talked to
nearly 100 people, but a problem began to quickly emerge: many of the people we spoke to didn’t own a smartphone. This was not something we had considered while developing a mobile-first web app. A lot of people seemed interested in the idea, and we had 13 sign-ups by the end of the night.
</p>
<p>
Four hours later, we broke down for the night, and not a single comment had been posted. There could have been many reasons as to why this occurred, but after
much thought we decided the overwhelming disinterest was enough to discontinue the project.
<!-- </p>
<a href="https://critter.buzz">View the live Critter mobile website here <i class="fa fa-chevron-right"></i></a>
<p> -->
<h2>What I Would Do Differently</h2>
</p>
<p>
Conducting more initial user research would have led to earlier invalidation of our original idea, which could have possibly led to new similar concepts.
</p>
<p>
Our launch was not extremely well-planned. Providing further motivation in some form for users to sign up and comment may have helped to drive usage.
</p>
<p>
Rather than treating the lack of interest as a failure, we could have looked into pivoting to find other places for growth.
</p>
<p>
<h2>What Went Well</h2>
</p>
<p>
We went into the project with a fail-fast mentality, and we were able to release an MVP within a month. Even if it failed, we were successful in our
pursuit of learning.
</p>
<p>
I was able to hone my HTML and CSS skills by applying them to a tangible project.
</p>
<p>
Leading the full ideation-design-iteration-development process was incredibly interesting and I gained the confidence to go through a similar processin the future.
</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_ta.html">
<img src="img/cover_ta.png" class="img-responsive center-block" style="max-height:168px">
<p>Tissue Analytics Landing Page</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>