-
Notifications
You must be signed in to change notification settings - Fork 0
/
kindergo.html
385 lines (333 loc) · 18.8 KB
/
kindergo.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
<!DOCTYPE html>
<html>
<head>
<title>Simon Nordon Product Designer Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<link href="./resources/css/style.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo 2:100,300,400,500,700,900" rel="stylesheet">
</head>
<body id="body-kindergo" class='body-project'>
<!--Nav Bar Begin-->
<div class=overflow-wrapper>
<div class=body-width>
<nav>
<a id="nav-logo" href="/index.html">
<p id="nav-logo-initial">S</p>
<div id="nav-logo-dot"></div>
<p>Nordon</p>
</a>
<div id="nav-menu">
<a id=nav-menu-work href="/index.html">Work</a>
<a id=nav-menu-blog href="/blog.html">Blog</a>
<a id=nav-menu-about href="/about.html">About</a>
</div>
</nav>
<section class=project-title>
<div id='project-title-text'>
<p>Shipped Title</p>
<h1>Kindergo</h1>
</div>
<figure>
<img id='project-title-bg' src="resources/images/kindergo/Kindergo-Hero.jpg">
<img id='project-title-hero' src="resources/images/kindergo/GoGoCutout.png">
</figure>
</section>
<div class='divider mobile-exclude'></div>
<!--Overview-->
<section id='kindergo-overview' class="project-section">
<h2>Overview</h2>
<div id='kindergo-overview-container'>
<div id='kindergo-overview-component-left' class='kindergo-overview-component'>
<p>Kindergo is a children's reading app with over 100,000 users and has been featured as app of
the day
several times.</p>
<figure>
<img src="resources/images/kindergo/appoftheday.png" alt='app of the day award'
height=133px>
<img src="resources/images/kindergo/kidsscreen.png" alt="kid screen nomination 2019"
height=133px>
</figure>
</div>
<div id='kindergo-overview-component-right' class='kindergo-overview-component'>
<h2>"Creating magical reading moments"</h2>
<p>ROLE</p>
<h3>Game Designer</h3>
<p>Research, wireframing, data analytics, visual design, prototyping.</p>
</div>
</div>
<div class='image'>
<div class=image-container>
<div class=image-container-images>
<figure><img src="resources/images/kindergo/kindergo03.jpg" alt="Kindergo mobile game">
</figure>
</div>
</div>
</div>
<p>Kindergo allows children to read through various, fully voiced, interactive books that are both fun
and educational. To date there has been over 260,000 books read in over 90 countries!</p>
</section>
<div class=divider></div>
<!--Details-->
<section id="kindergo-details" class="project-section">
<h2>Details</h2>
<p>When I first started working on Kindergo it was a free to play game with 15,000 users. One of my
responsibilities was to develop a monetisation model for the application.</p>
<!--Image-->
<div class='image'>
<div class=image-container>
<div class=image-container-images>
<figure><img src="resources/images/kindergo/kindergo01.jpg" alt="Kindergo mobile game">
</figure>
</div>
</div>
<figcaption>Kindergo helps kids learn to read.</figcaption>
</div>
<p>A unique problem with Kindergo is that when introducing a monetisation model, we actually need to
satisfy two separate users.</p>
<div class='diamonds'>
<div class='diamonds-container'>
<div class="diamonds-container-text">
<p>Primary User:</p>
<p>Child</p>
</div>
</div>
<div class='diamonds-container'>
<div class="diamonds-container-text">
<p>Secondary User:</p>
<p>Parent</p>
</div>
</div>
</div>
<p>Because of this, Kindergo required two User Experiences. While the existing design was great
for the child's experience, it had to opposite effect for parents and guardians.</p>
</section>
<div class=divider></div>
<section id="kindergo-analysis" class="project-section">
<h2>Analysis</h2>
<!--Image-->
<div class='image'>
<div class=image-container>
<div class=image-container-images>
<figure><img src="resources/images/kindergo/kindergo02.jpg" alt="Kindergo mobile game">
</figure>
</div>
</div>
</div>
<figcaption>Original Kindergo onboarding experience.</figcaption>
<p>The original onboarding experience was created with the same design language as the rest of the
application. Unfortunately, this created usability friction, including a 5 step sign up process that
included 17 clicks.</p>
<div class='image'>
<div class=image-container>
<div class=image-container-images>
<figure><img src="resources/images/kindergo/kindergo04.jpg" alt="Kindergo mobile game">
</figure>
</div>
</div>
</div>
<figcaption>Analysis of user conversion funnel.</figcaption>
<p>I took it upon myself to conduct a deep analysis of the user conversion funnel, identifying areas
that
required the most attention. This manual analysis collated date from all sources, and would not be
possible in a single product.</p>
</section>
<div class=divider></div>
<section id="kindergo-redesign" class="project-section">
<h2>Redesign</h2>
<div class='image'>
<div class=image-container>
<div class=image-container-images>
<figure class='figure-vertical'>
<img class='image-container-images-vertical'
src="resources/images/kindergo/kindergo-UI-01.jpg" alt="Kindergo UI design">
</figure>
<figure class='figure-vertical'>
<img class='image-container-images-vertical'
src="resources/images/kindergo/kindergo-UI-02.jpg" alt="Kindergo UI design">
</figure>
<div class="image-container-images-bg-container">
<div class="image-container-images-bg"></div>
</div>
</div>
</div>
<figcaption> UI Redesign.</figcaption>
</div>
<p>The entire onboarding experience was redesigned for parents specifically. Key points where a
reduction in steps, more familiar design language and creating a dichotomy between portrait and
landscape orientation depending on the user.</p>
<!--Image-->
<div class='image'>
<div class=image-container>
<div class=image-container-images>
<figure><img src="resources/images/kindergo/kindergo05.jpg" alt="Kindergo mobile game">
</figure>
</div>
</div>
</div>
<figcaption>Original Kindergo onboarding experience.</figcaption>
<p>Using Adobe XD to quickly iterate through different onboarding experiences helped validate ideas
internally in a fast manner. Early on it became apparent that mid-fidelity wireframing was more
suitable for a highly visual application such as this, where the 3D and visual elements contribute
to
the experience.</p>
</section>
<div class=divider></div>
<section id="kindergo-validation" class="project-section">
<h2>Validation</h2>
<p>In order to validate that the redesign was effective, I came up with a data taxonomy for the
Amplitude Analytics product that was implemented into the application. Specifically we where
looking for user conversion metrics.</p>
<div id="conversion-graphic">
<div class="conversion-graphic-component">
<h1>1.2%</h1>
<p>Paying conversion rate before redesign</p>
</div>
<div class="conversion-graphic-component">
<h1>7.99%</h1>
<p>Paying conversion rate after redesign</p>
</div>
</div>
<p>This large increase in paying user conversion resulted in greater sales overall, and has help
justified the continuing development of Kindergo.</p>
<p>I've outlined the onboarding redesign above, however this was not the only factor resulting in
improved usability. Other things that where looked at included;</p>
<li><span>Marketing Campaign Data</span> showed the marketing campaign was targeting the KPI's,
attracting
the wrong users. Correcting this drastically improved customer lifetime value.</li>
<li><span>In App Behavioural Data</span> was critical in assessing which features to expand upon, and
identifying user pain points. These findings where used to determine which future features
would have the greatest ROI.</li>
<li><span>In Person User Testing</span> was used for areas in which behavioural data was not enough.
Testing
in person with ESL children showed areas of frustrations and revealed opportunities not
possible with event streams.</li>
</section>
<div class=divider></div>
<section id="kindergo-learnings" class="project-section">
<h2>Learnings</h2>
<p>Before I first came on, there was little preliminary research and limited data sets in which to
evaluate the performance of the product. It wasn't even possible to assess at what level the
product was performing.
</p>
<p>The topics this project touched upon is vast, but the most important takeaway is to have a system
in place where by one can accurately assess the well-being of the product.
</p>
<p>This includes monitoring all aspects of the product including;
</p>
<li>User Funnel from first ad impression to paying user conversion.
</li>
<li>Product usability and satisfaction.</li>
<li>Development ROI on specific features and strategic pivots.</li>
<li>A/B testing and multi-variable testing.</li>
<li>Accurate and meaningful KPI's.</li>
<p>This framework allows a team to iteratively work towards a stronger product at an accelerating
rate, as it also allows the team to change and adapt it's internal processes to better match the
demands of incoming findings.</p>
</section>
<div class=divider></div>
<section id='other-projects' class='project-section'>
<h2>Other Projects</h2>
<div class=other-projects-container>
<div class=other-projects-component>
<figure>
<img src="resources/images/sanctuaryworld/SW_Hero_BG.jpg">
</figure>
<a href="sanctuaryworld.html"><img id = "sw-hero" class="other-project-hero-image" src="resources/images/sanctuaryworld/Frogman01.png"></a>
<h2>Sanctuary World</h2>
<a href="sanctuaryworld.html">
<h3>Learn more <span><img src="resources/images/arrow.png"></span></h3>
</a>
</div>
<div class=other-projects-gutter></div>
<div class=other-projects-component>
<figure>
<img src="resources/images/warhammerwarlords/hero-image-bg.jpg">
</figure>
<a href="warhammerwarlords.html"><img id="ww-hero" class="other-project-hero-image"
src="resources/images/warhammerwarlords/warhammer-warlords-hero.png"></a>
<h2>Warhammer Warlords</h2>
<a href="warhammerwarlords.html">
<h3>Learn more <span><img src="resources/images/arrow.png"></span></h3>
</a>
</div>
</div>
</section>
<div class=divider></div>
<!--Footer Begin-->
<footer>
<script>
function Hint(string) {
if (string == 'email') {
var targetID = document.getElementById('email-hint');
var otherID = document.getElementById('phone-hint');
otherID.style.opacity = '0';
otherID.style.zIndex = '0';
targetID.style.opacity = '1';
targetID.style.zIndex = '1';
return;
}
else if (string == 'phone') {
var targetID = document.getElementById('phone-hint');
var otherID = document.getElementById('email-hint');
otherID.style.opacity = '0';
otherID.style.zIndex = '0';
targetID.style.opacity = '1';
targetID.style.zIndex = '1';
return;
}
else {
var targetID = document.getElementById('phone-hint');
var otherID = document.getElementById('email-hint');
otherID.style.opacity = '0';
otherID.style.zIndex = '0';
targetID.style.opacity = '0';
targetID.style.zIndex = '0';
return;
}
}
</script>
<section onmouseover="Hint('')">
<h2>Want to know more?</h2>
<p>Feel free to call, text or email any time. You can also learn more about me <span><a
id="highlight" href="/about.html">here</a></span>.</p>
</section>
<section id="footer">
<a id="footer-image" href="/about.html" onmouseover="Hint()">
<img src="resources/images/headshots/HeadShot01.jpg" alt="Simon Nordon Headshot"></a>
<section id="footer-links">
<div id="footer-links-contact">
<!--Special Hint Links-->
<div id='email-hint' class=footer-links-contact-hint onmouseout="Hint()">
<p>[email protected]</p>
</div>
<div id='phone-hint' class=footer-links-contact-hint onmouseout="Hint()">
<p>+61 426 747 486</p>
</div>
<!--Normal Links-->
<a id="footer-links-contact-email" href="mailto:[email protected]"
onmouseover="Hint('email')">
<img src="resources/images/gmail_logo.png" height=16px alt="Email">
</a>
<a id="footer-links-contact-phone" href="tel:+61426-747-486" onmouseover="Hint('phone')">
<img src="resources/images/phone_logo.png" height=16px alt="Phone Number">
</a>
<a href="https://www.linkedin.com/in/simon-nordon-65868b76/" target="_blank"
onmouseover="Hint('')">
<img src="resources/images/logoSocialA.png" height=18px alt="">
</a>
<a href="https://twitter.com/SimonNordon" target="_blank" onmouseover="Hint('')">
<img src="resources/images/logoSocialB.png" height=16px alt="">
</a>
</div>
<a id="footer-links-resume" href="resources/downloads/simon-nordon-resume-2020.pdf" download="resources/downloads/simon-nordon-resume-2020.pdf" onmouseover="Hint()">Download Resume</a>
</section>
</section>
<section>
<p id='footer-trademark'>This website was made by me from scratch</p>
<p id='footer-copyright'>© Simon Nordon 2020</p>
</section>
</footer>
</div>
</div>
</body>
</html>