-
Notifications
You must be signed in to change notification settings - Fork 0
/
tinkl.html
324 lines (295 loc) · 11.8 KB
/
tinkl.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
<!DOCTYPE html>
<html lang="en" class="html-tinkl">
<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: Tinkl 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>Tinkl case study</h1>
<a href="https://tloth.github.io" class="back_link"
>Back to the homepage</a
>
</div>
<section>
<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 Tinkl project</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="#building-section">Building & more testing</a>
</li>
</ol>
</div>
<img
src="./assets/tinkl/tinkl-tinkl.png"
alt="Tinkl logo smiling at you"
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>
A progressive web app to help you find a suitable toilet fast when
you're out and about in London.
</p>
<h3>Project duration</h3>
<p>
3 weeks in May 2019: a one-week design sprint, and two one-week
development sprints.
</p>
<h3>The problem</h3>
<p>
Drinking the recommended 2 litres of water a day means you need to use
the toilet often. It can be especially inconvenient when you're out in
the city and away from a toilet. It would be nice if you could track
down the nearest public toilet, whether it be a McDonald's, a
portapotty, or a free museum. An added bonus would be if the app could
tell you how much the toilet costs if not free, and give it a
cleanliness rating.
</p>
<h3>The goal</h3>
<p>
Provide users with a quick and easy way of finding the nearest public
toilet.
</p>
<h3>My role & responsibilities</h3>
<p>
I was the UX/UI Lead in a team of 4 (other roles were Scrum Master,
Operational Developer, Quality Assurance Lead). I was in charge of
finalising the app's visual identity and always advocating for the
user when deciding about functionality.
</p>
</div>
</section>
<section>
<h2 id="context-section" class="case_study-h2">
Context for the Tinkl project
</h2>
<div class="case_study-section">
<p>
We brought this project to life during my time at Founders and Coders.
An external product owner came to us with the problem, and our
cross-functional team of four used agile methodologies and followed
the double diamond design process to create an MVP which solves this
problem.
</p>
<p>We designed and built a PWA, which was live for three years.</p>
<img
src="./assets/tinkl/tinkl.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 4 Londoners who often walk the streets of
the city. We wanted to understand what they do if they need the
bathroom when they are out. We also wanted to learn about their
attitudes to public toilets.
</p>
<img
src="./assets/tinkl/tinkl-user_research.png"
alt="User research findings: users are reluctant to pay for public toilets, they usually wander around or look for toilet signs, and they would use a toilet finding app if it existed."
class="w-100"
/>
<h3>Pain points</h3>
<p>
We learned that each person had encountered the problem we were trying
to solve. They did not have a tried and tested solution to find a
bathroom to use when they are out in the city, which made some of them
anxious. They also felt strongly about places charging people to use
their bathroom.
</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 researched other public toilet finders. We found a couple of apps,
but their design was very cluttered. The data displayed was not
consistent as a result of it being open sourced. We knew that we had
to create a simple and clean user interface with consistent data
forms.
</p>
<h3>User stories</h3>
<p>
Main user journey: As a user, I want to find my closest suitable
toilet ASAP when I’m out and about in London.
</p>
<p>User stories:</p>
<ul>
<li>I want to choose how I input my location.</li>
<li>I want to select toilets that fit my needs.</li>
<li>I don’t want to select my filters every time.</li>
<li>I want to be able to easily navigate between pages.</li>
<li>I want to get a list of toilets near me.</li>
<li>I want directions to a particular toilet.</li>
</ul>
<h3>Paper wireframes</h3>
<p>
The team did a Crazy Eights exercise to brainstorm ideas for the
journey's different screens. We agreed to implement the following
screens.
</p>
<img
src="./assets/tinkl/tinkl-crazy_eights.png"
alt="Paper wireframes as a result of a Crazy Eights exercise"
class="w-100"
/>
<h3>Low-fidelity digital wireframes</h3>
<p>
We then transferred the designs into Figma, and created a prototype
for user testing.
</p>
<img
src="./assets/tinkl/tinkl-lowfi.png"
alt="Low fidelity digital wireframes"
class="w-100"
/>
</div>
</section>
<section>
<h2 id="usability-testing-section" class="case_study-h2">
Usability testing
</h2>
<div class="case_study-section">
<p>
We used a low-fidelity prototype on Figma to test the app with real
users.
</p>
<h3>Study details</h3>
<p>Study type: moderated usability study</p>
<p>Location: UCL campus, central London</p>
<p>Participants: 10 passers-by</p>
<p>Incentive: we gave out lollipops and jokes to participants</p>
<h3>Findings & themes</h3>
<p>
We received a lot of positive feedback on the concept. Having
experienced the issue we were trying to solve themselves, every
participant said they would definitely use the app if it existed.
</p>
<p>
We received some constructive feedback on the user experience of the
prototype. People found the toilet pages with the list of amenities a
bit excessive and did not like the chekmark/X system. They also found
the toggle switch on the "Edit toilet" screen confusing.
</p>
</div>
</section>
<section>
<h2 id="refining-the-design-section" class="case_study-h2">
Refining the design
</h2>
<div class="case_study-section">
<h3>Styles and high-fidelity wireframes</h3>
<p>
We had very little time, so we decided to have a very focused approach
to the visual design. We wanted to evoke a safe and clean bathroom
feeling with the help of colours, so we opted for a soft teal and blue
with an off-white background base.
</p>
<p>
The app needed a logo. We had a lot of fun playing around with it
(even in the very short amount of time we had), and settled on a
droplet: a recurring motif in one's journey to the washroom. After
some heated arguments, we decided on a more sophisticated and tasteful
blue droplet to be the main mascot. The yellow variant still managed
to somehow sneak into the designs, and add a little colour to the
header.
</p>
<p>
Here are a few of the landing screen designs. The last one is the
final version: the outline of the droplet is blurred, giving the
screen a more subtle vibe (also making it look more professional—we
did not have the time or resources to draw a high quality logo). We
also got rid of the face, which helped the app feel less tacky.
</p>
<img
src="./assets/tinkl/tinkl-landing-variations.png"
alt="Variants for the landing screen."
class="w-100"
/>
<p>
Time constraints meant we had to scale back the functionality: we had
to stick with the bare minimum for the MVP. The app will help you find
a suitable toilet near you, but you will not be able to edit or add
any toilets. This also solved the toggle switch issue we discovered
during the first round of usability testing.
</p>
</div>
</section>
<section>
<h2 id="building-section">Building & more testing</h2>
<div class="case_study-section">
<p>
Once we had our high-fidelity designs, we spent a week and a half
building the app. At the end of the build sprints, we took our
functioning app for a second round of usability testing.
</p>
<h3>Usability testing, round 2</h3>
<p>
Users still loved the concept and were very excited that a toilet
finder app exists.
</p>
<p>
Participants struggled to recognise links on the "Near you" screen.
These links take the user to Google Maps and show them the directions
to each toilet.
</p>
<p>
Participants found certain phrases in the app confusing. They did not
know what a "public" toilet actually meant, and most of them were
taken aback by the "Likely free" tag we added to toilets where our
data did not suggest a fee but we could not be sure it was completely
free.
</p>
<h3>Moving forward</h3>
<p>
The app was live and accessible to anyone for three years, after which
our hosting site switched to paid tiers, which we decided not to pay
for. We may come back to Tinkl one day and move it to another hosting
service. If this happens, we shall tackle the feedback we received
during our second usability testing session. We received
overwhelmingly positive feedback from users, so I do hope the app will
go live again.
</p>
</div>
</section>
</body>
</html>