-
Notifications
You must be signed in to change notification settings - Fork 0
/
feed.xml
744 lines (558 loc) · 48.8 KB
/
feed.xml
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
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Tessa Goh</title>
<description>👋 Hi! I'm Tessa. I'm a UX designer, currently based in Singapore.</description>
<link>http://localhost:4000/</link>
<atom:link href="http://localhost:4000/feed.xml" rel="self" type="application/rss+xml"/>
<pubDate>Mon, 13 May 2024 16:43:49 +0800</pubDate>
<lastBuildDate>Mon, 13 May 2024 16:43:49 +0800</lastBuildDate>
<generator>Jekyll v4.2.1</generator>
<item>
<title>YouTrip</title>
<description><h3 id="problem">Problem</h3>
<p>The YouTrip app has been stagnating, with few improvements to the app since it started four years ago. With a business model that mainly profits through cross-border transactions, it is likely the business suffered a heavy blow with the travel ban during the COVID-19 pandemic.</p>
<p>It is little surprise, therefore, that YouTrip introduced Perks - exclusive privileges in the form of discounts and rebates with partner merchants for its cardholders to encourage transactions using their Mastercard. More recently, they have also partnered with HL Assurance, a local insurance company, to offer discounted insurance plans for YouTrip travellers.</p>
<p>However, even as an avid YouTrip user myself, I find these newly introduced features difficult to use due to their poor usability.</p>
<p>From word of mouth, I understand the company places significant investments in their marketing efforts. YouTrip has a blog and Telegram channel that the marketing team updates frequently. However, they offer their customers only disjointed access to this marketing content.</p>
<p>There has also been an increasing number of competitors that have entered the Singapore market since, which begs an improvement in the YouTrip app to ensure it stays competitive and retains its market share in the long run.</p>
<div class="additional-notes"><h4>💜 Disclaimer</h4>
I am not affiliated with YouTrip and this redesign was done completely of my own volition.</div>
<hr />
<h4 id="online-reviews">Online Reviews</h4>
<p>To verify that I was not the only user who thought YouTrip experience could be further improved, I looked at user reviews available online for data.</p>
<figure>
<p><img src="assets/images/youtrip-review-scores.png" alt="YouTrip Online Review Scoreboards" /></p>
<figcaption>YouTrip has a review score of 4.6 on Seedly (a personal finance community) forum. <br /> It also sits relatively high with scores of 4.3 and 4.0 on the Apple Store and Google Play Store respectively</figcaption>
</figure>
<p>YouTrip has a relatively high review score on the various review boards. However, inspection reveals recent reviews are not doing as well.</p>
<figure>
<p><img src="assets/images/youtrip-review-screengrabs.png" alt="YouTrip Online Review Screengrabs" /></p>
<figcaption>While the overall review scores fare relatively well, recent reviews are dropping.</figcaption>
</figure>
<p>Common feedback observed can be summarised as such:</p>
<figure>
<p><img src="assets/images/youtrip-review-summary.png" alt="YouTrip Online Review Summary Points" /></p>
<figcaption>Summary of common feedback retrieved from online reviews</figcaption>
</figure>
<hr />
<h3 id="competitive-analysis">Competitive Analysis</h3>
<p>To understand the competitors that YouTrip was up against, I did a simple competitive analysis of other multi-currency accounts available in the market:</p>
<figure>
<p><img src="assets/images/youtrip-ca.jpeg" alt="YouTrip compared to other popular multi-currency accounts available in the market." /></p>
<figcaption>YouTrip compared to other popular multi-currency accounts available in the market.</figcaption>
</figure>
<p>It is clear from this simple feature comparison that YouTrip mainly appeals to potential customers as a free multi-currency wallet for convenient travel payments during travel.</p>
<hr />
<h3 id="heuristics-evaluation">Heuristics Evaluation</h3>
<p>To identify issues with the existing app, I assessed its information architecture and did a round of heuristics evaluation on the user interface.</p>
<figure>
<p><img src="assets/images/youtrip-heuristics-eval.png" alt="YouTrip User Persona" /></p>
<figcaption>A screenshot and site map of the existing YouTrip iOS mobile app</figcaption>
</figure>
<p>The YouTrip app consists of five tabs in the navbar and a settings page that allows the configuration of account information and app settings. It has an interface that is straightforward to navigate and simple to use. However,</p>
<ul>
<li>it <strong>offers little convenience</strong> to its users.
<ul>
<li>As a product that allows its user to ‘Lock in competitive exchange rates, it does not offer a glossary view of forex rates. Rather, a user would have to swipe to each of the 10 supported currencies to view the current exchange rate. This is highly inconvenient for users (like myself) who do not have the habit (and thus use any existing tools) of keeping a lookout for favourable currency rates.</li>
<li>In addition, when using the app for making purchases in other currencies apart from the 10 in-app exchange currencies supported, there is no convenient way to check the current exchange rate in-app. As usual, Google is the best companion.</li>
</ul>
</li>
<li>it <strong>lacks customisability</strong>
<ul>
<li>The app arranges all wallets from left to right by most recent to least recently accessed. It does not allow users to customise their wallet view so the user can easily access currency wallets that matter more quickly.</li>
</ul>
</li>
<li>its <strong>information architecture could be improved</strong>
<ul>
<li>The information architecture of the app could also be re-organised. For instance, the Card tab takes up precious space in the navbar but provides little additional useful information and control to users. The discounted insurance plan offered occupies a separate tab on its own in the navbar, even though it is also a Perk offered to the users, in partnership with HL Insurance.</li>
</ul>
</li>
<li>some of its functions have <strong>poor discoverability</strong>
<ul>
<li>Certain functions like Search for transactions also have poor discoverability. There are also instances of poor contrast resulting in poor legibility due to the adherence to branding colours.</li>
</ul>
</li>
</ul>
<h3 id="user-research">User Research</h3>
<p>To validate these issues identified, I conducted an online survey with 16 YouTrip users using Typeform.</p>
<figure>
<p><img src="assets/images/youtrip-survey.png" alt="Survey Screengrab on YouTrip experience with Typeform" /></p>
<figcaption>As I was scouting for participants for my research that it was difficult to find YouTrip users, even among my peers, who are generally tech-savvy</figcaption>
</figure>
<figure>
<p><img src="assets/images/youtrip-survey-results.png" alt="Survey Results on YouTrip experience with Typeform" /></p>
<figcaption>Selected survey results on the YouTrip experience</figcaption>
</figure>
<p>What I found was as follows:</p>
<ul>
<li>As expected, <strong>users mainly used YouTrip during travel</strong>, only a small percentage for online shopping.</li>
<li><strong>Most users did not have a habit of keeping a lookout for favourable currency rates</strong> and thus were unlikely to use YouTrip to ‘lock’ in on favourable exchange rates.</li>
<li>Before making purchases with YouTrip, users generally head to <strong>Google to check and convert prices to SGD</strong>.</li>
<li>The <strong>onboarding and findability of Perks can be improved to encourage usage</strong>.</li>
<li>Despite their strong marketing efforts, <strong>72.7% of users did not know that YouTrip has a blog</strong>.</li>
</ul>
<h4 id="user-persona-and-journey-mapping">User Persona and Journey Mapping</h4>
<p>I summarised all my research findings in the form of a user persona and mapped out the experience of using YouTrip as the main mode of payment for a travel trip to better identify opportunities for improvement.</p>
<figure>
<p><img src="assets/images/youtrip-persona.png" alt="YouTrip User Persona" /></p>
<figcaption>User Persona capturing the needs and frustrations of a typical user who intends to use YouTrip as her mode source of payment for a travel trip to Japan</figcaption>
</figure>
<figure>
<p><img src="assets/images/youtrip-userjourney.png" alt="YouTrip User Journey Map" /></p>
<figcaption>User Journey Map detailing the potential opportunities for design improvements</figcaption>
</figure>
<hr />
<h3 id="ideation">Ideation</h3>
<p>As always, ideation began on pen and paper, before moving on to a digital prototyping tool.</p>
<figure>
<p><img src="assets/images/youtrip-ideation.png" alt="YouTrip User Journey Map" /></p>
<figcaption>Figma was used as the main prototyping tool for the whole of this project</figcaption>
</figure>
<hr />
<h3 id="usability-testing">Usability Testing</h3>
<p>I began testing my low-fi designs by using Maze as the platform for unmoderated remote usability testing, making sure to use convincing placeholder data in my wireframes. I got about five users to test my preliminary design.</p>
<figure>
<p><img src="assets/images/youtrip-ut1.png" alt="Screenshot of Usability Testing done on Maze" /></p>
<figcaption>The pre-requisite for participants was to be existing YouTrip users</figcaption>
</figure>
<h4 id="findings--insights">Findings &amp; Insights</h4>
<ol>
<li>The <strong>discoverability of new tabs</strong> in the navbar could be improved.
<ul>
<li>User onboarding in the form of overlays can potentially alleviate this.</li>
<li>The term ‘Marketplace’ was also not intuitive to the users.</li>
</ul>
</li>
<li>Users tend to skip ahead of reading ‘How to’ when redeeming their perks.
<ul>
<li>Dialogue prompts for first-time perk users can help.</li>
</ul>
</li>
</ol>
<p>With these findings &amp; insights in mind, I improved upon my designs as I worked on the hi-fidelity prototypes.</p>
<figure>
<p><img src="assets/images/youtrip-prototyping.png" alt="Screenshot of YouTrip hi-fi prototyping done on Figma" /></p>
<figcaption>Hi-fidelity prototypes done on Figma</figcaption>
</figure>
<hr />
<h3 id="the-solution">The Solution</h3>
<p>Several feature additions and improvements been added to improve the overall experience of the app, with the following highlights:</p>
<div class="hifi-solution">
<div class="row">
<div class="col-md">
<div class="video-center">
<video width="72%" type="video/mp4" controlsList="nodownload" controls="" autoplay="" loop="" muted="">
<source src="assets/images/youtrip-solution-01-ertable-converter.m4v" />
Your browser does not support the video.
</video>
</div>
</div>
<div class="col-md" id="solution-description">
<h4>Real-Time Exchange Rate Table and Converter</h4>
<p> A new feature addition that
<ul>
<li><b>streamlines price checking</b> and decision-making process during travel or while making online purchases</li>
<li>helps <b>differentiate</b> between in-app exchange currencies and other supported currencies</li>
</ul>
</p>
</div>
</div>
</div>
<div class="hifi-solution-2">
<div class="row">
<div class="col-md">
<div class="video-center">
<video width="72%" type="video/mp4" controlsList="nodownload" controls="" autoplay="" loop="" muted="">
<source src="assets/images/youtrip-solution-06-calculator.m4v" />
Your browser does not support the video.
</video>
</div>
</div>
<div class="col-md" id="solution-description">
<h4>Calculator</h4>
<p> Another new feature addition complementing the in-app real-time exchange rate table and converter above that
<ul>
<li>also <b>streamlines price checking</b> and decision-making process during travel</li>
<li>help in <b>expense tabulation</b> and <b>encourage ATM withdrawal</b></li>
</ul>
</p>
</div>
</div>
</div>
<div class="hifi-solution">
<div class="row">
<div class="col-md">
<div class="video-center">
<video width="72%" type="video/mp4" controlsList="nodownload" controls="" autoplay="" loop="" muted="">
<source src="assets/images/youtrip-solution-04-perks.m4v" />
Your browser does not support the video.
</video>
</div>
</div>
<div class="col-md" id="solution-description">
<h4>Improved Perks</h4>
<p> Proposed improvements to existing YouTrip Perks that
<ul>
<li>makes it easier to search for perks by <b>categorising priviledges available and offering a search function</b></li>
<li>offers <b>visibility on cashback status</b> through 'Accumulated Perks'</li>
<li><b>improves onboarding</b> to encourage usage</li>
</ul>
</p>
</div>
</div>
</div>
<p><br /></p>
<h4 id="prototype">Prototype</h4>
<p>Feel free to click around with the high fidelity mockups below:</p>
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="600" src="https://www.figma.com/embed?embed_host=share&amp;url=https%3A%2F%2Fwww.figma.com%2Fproto%2FVkUaLxbcoS5rMtlqUMe1gn%2FPersonal-Project---YouTrip-(Mockups)%3Fpage-id%3D12%253A2%26node-id%3D349%253A12631%26viewport%3D586%252C599%252C0.05%26scaling%3Dscale-down%26starting-point-node-id%3D349%253A12631%26show-proto-sidebar%3D1" allowfullscreen=""></iframe>
<hr />
<h3 id="takeaways">Takeaways</h3>
<h4 id="project-learnings">Project Learnings</h4>
<ul>
<li><strong>Always set the expectations of participants in a usability test if you can do so yourself</strong>:
It was my first time conducting a usability test in an unmoderated, remote environment. Even when using an established tool for the usability test, one should always stage the environment and set the expectations when you can do it personally.</li>
</ul>
<h4 id="what-could-be-done-better">What could be done better</h4>
<ul>
<li><strong>Limited access to YouTrip users</strong>: &lt;20 users involved in the survey, and are mostly tech-savvy working adults; in the same target group</li>
<li><strong>Usability Testing</strong>
<ul>
<li>Maze is on desktop and YouTrip is a mobile app</li>
<li>Unmoderated usability testing has its drawbacks as you are not personally with the participant as they work through their tasks.</li>
</ul>
</li>
</ul>
<h4 id="areas-for-further-development">Areas for further development</h4>
<ul>
<li>
<p><strong>Reliability of payments</strong>:
Visibility of payment status for transactions could be improved to raise trust in the service. However, more in-depth information would be necessary to build on the solution.</p>
</li>
<li>
<p><strong>Security Issues and Customer support</strong>:
Internal issues that are beyond my control without more information but are critical to the overall YouTrip experience.</p>
</li>
</ul>
</description>
<pubDate>Thu, 01 Sep 2022 00:00:00 +0800</pubDate>
<link>http://localhost:4000/youtrip-redesign</link>
<guid isPermaLink="true">http://localhost:4000/youtrip-redesign</guid>
<category>Mobile App</category>
<category>Personal Project</category>
</item>
<item>
<title>Super C3 System</title>
<description><div id="disclaimer-nda"><h4>‼️ Disclaimer</h4> <em>As a past employee at DSTA, I am to abide by the Official Secrets Act and safeguard the confidentiality of the information I have had access to during my employment. As such, I cannot display the works I have done during my time at the company. However, I am willing to share more in detail about my contributions to the project over a face-to-face chat. ☕️</em></div>
<h3 id="about-the-project">About the Project</h3>
<h4 id="what-the-super-c3-system-is">What the Super C3 System is</h4>
<p>In the military context, C3 Systems are fundamental to operations by delivering the critical information required to <strong>plan, coordinate and control forces and operations across defence missions</strong> in real-time.</p>
<p>The Super C3 System is a powerful desktop app that serves the <strong>planning, monitoring and execution needs</strong> of army soldiers across the various vocations during wartime exercises and operations. It follows a modular software architecture and builds on a <strong>Smart Geographical Information System (GIS)</strong>.</p>
<h4 id="why-it-started">Why it Started</h4>
<figure>
<p><img src="assets/images/superc3-why.png" alt="Desktop application built on a GIS" /></p>
<figcaption>The legacy system that the Super C3 System replaces has poor UX, requires tasks to be completed manually and has poor data integration</figcaption>
</figure>
<p>The Super C3 System replaces an existing legacy system that has become <strong>increasingly obsolete</strong>. With the outdated system, <strong>user experience was poor</strong>, and many mundane and procedural tasks with automation potential still <strong>had to be done manually</strong>. A new replacement was long overdue to improve work efficiency. Advances in communication technology also mean data integration is now possible to allow <strong>better interoperability across the army forces</strong>, which was previously impossible with the old technology and poorly integrated modules.</p>
<h4 id="primary-design-goals">Primary Design Goals</h4>
<ul>
<li>Create a user-friendly experience to <strong>reduce resources on user training</strong> by aligning with commercial design patterns.</li>
<li><strong>Be a great landing pad</strong>. Many users will be transitioning from the existing legacy system, which should be a fluid experience.</li>
<li><strong>Raise work efficiency</strong> by harnessing the potential of automation, eliminating the effort required for procedural tasks.</li>
</ul>
<hr />
<h3 id="team-structure">Team Structure</h3>
<figure>
<p><img src="assets/images/superc3-team.png" alt="Team structure" /></p>
<figcaption>The project team splits into smaller development teams consisting a lead developer and couple with one or a pair of UX designers</figcaption>
</figure>
<p>Managed by two product managers, the project team consists of ~20 software developers and a small design team. The design team grew from a strength of two to four towards the last quarter of 2021.</p>
<p>The project team splits into 3-5 development teams (depending on the project timeline) and practices the <strong>Scrum methodology, with bi-weekly sprints</strong> held concurrently. Each development team has a ScrumMaster cum lead developer and couples with at least one or a pair of UX designers.</p>
<p>I was matched with three development teams and collaborated closely with a fellow UX designer when she joined the team.</p>
<hr />
<h3 id="the-design-process">The Design Process</h3>
<p>For the modules in the system under my charge, I adhered to a consistent design process in my delivery.</p>
<h4 id="user-research">User Research</h4>
<p>As a team, I conducted user research sessions through <strong>qualitative user interviews</strong> and <strong>user research workshops</strong> to <strong>elicit user needs and pain points</strong> from the users’ existing work processes.</p>
<p>We also <strong>synthesised design opportunities</strong> from ‘How Might We’ statements gathered from these user research sessions.</p>
<h4 id="insights">Insights</h4>
<p>I generated <strong>UX artefacts to document complex military workflows</strong> and align the project team in the existing user flows.</p>
<h4 id="prototyping">Prototyping</h4>
<p>I created the <strong>information architecture</strong> and <strong>low-fidelity concepts</strong> for primary use cases and workflows. After obtaining the green light from the product managers, developers and stakeholders, these concepts are translated to <strong>high-fidelity and interactive digital mock-ups</strong>, most times by my teammate or occasionally by myself.</p>
<h4 id="usability-testing">Usability Testing</h4>
<p>I <strong>led my team to conduct testings</strong> of our product to verify designs nearing product release.</p>
<ul>
<li>Before product releases, we tested our designs with various user groups by <strong>simulating mission scenarios</strong> to ensure the product was usable and covered all their operational needs.</li>
</ul>
<hr />
<h3 id="seeing-results">Seeing Results</h3>
<figure>
<p><img src="assets/images/superc3-results.png" alt="Impact on the project's UX in quantitative terms" /></p>
<figcaption>The overall system usability improved following a revamp of the system’s UX.</figcaption>
</figure>
<ul>
<li>The <strong>overall system usability improved</strong> from an average System Usability Scale (SUS) score of 50.0 to 63.6 following a revamp of the system’s user experience.</li>
<li>For one of the modules I designed,
<ul>
<li>The average SUS score was <strong>80.8</strong>, and</li>
<li>a user estimated the module to <strong>reduce up to 90% of the total time required</strong> in their existing workflow.</li>
</ul>
</li>
</ul>
<hr />
<h3 id="a-mini-design-system">A Mini Design System</h3>
<p>I co-led the delivery of a <strong>mini design system</strong> that specifies the system’s design principles and guidelines. This mini design system helps ensure design consistency throughout the Super C3 System and alignment with the C3D Design System.</p>
<hr />
<h3 id="project-learnings">Project Learnings</h3>
<ol>
<li><strong>Anyone can be a user (but yourself).</strong> It is easy to fall prey to the false-consensus effect when designing. Always test to verify a design. When time is lacking, anyone can be the user, including our project mates. Sometimes, a fresh new perspective is all that is needed.</li>
<li><strong>Test early and continuously.</strong> Involving stakeholders/users in the process as early as possible can help identify loopholes and unlock insights that save precious time and effort later on.</li>
<li><strong>Prioritisation is key.</strong> Focus on delivering a quality MVP first when rolling out new features/functions and avoid getting distracted by out-of-scope requests (or sometimes, even your own ideas).</li>
<li><strong>The design ≠ the final product.</strong> Sometimes we can get carried away with producing pixel-perfect designs, but what matters most is always the final product delivered. When resources are tight, ensuring the product is developed right should be the priority.</li>
</ol>
</description>
<pubDate>Wed, 02 Mar 2022 00:00:00 +0800</pubDate>
<link>http://localhost:4000/superc3system</link>
<guid isPermaLink="true">http://localhost:4000/superc3system</guid>
<category>Design Lead</category>
<category>User Research</category>
</item>
<item>
<title>Achieva Vending</title>
<description><h3 id="the-problem">The Problem</h3>
<p>The main reasons behind the re-design were as such:</p>
<ol>
<li>The site looked <strong>outdated</strong> and contained visuals of poor resolution.</li>
<li>It <strong>did not offer a seamless experience across all devices</strong>.</li>
<li>It neither met <strong>new business needs</strong> nor reflected the <strong>business’s values</strong> well.</li>
</ol>
<figure>
<p><img src="assets/images/av-redesign-old.png" alt="Home and What We Offer page of Achieva Vending Pte Ltd's old website" /></p>
<figcaption>Screengrabs of the old site</figcaption>
</figure>
<h3 id="research">Research</h3>
<h4 id="target-audience">Target audience</h4>
<p>To <strong>identify the main types of users</strong> visiting the company’s website, I <strong>scouted past contact form submissions</strong> to understand why users visited the site.</p>
<figure>
<p><img src="assets/images/av-redesign-formsubmissions.png" alt="Form submissions taken from Achieva Vending Pte Ltd's website" /></p>
<figcaption>Past contact form submissions</figcaption>
</figure>
<p>The main types of users identified were:</p>
<ol>
<li><strong>Potential customers looking for vending solutions</strong>,</li>
<li>Existing customers in need of <strong>service support</strong> or wishing to <strong>provide feedback</strong> and</li>
<li>Food and beverage <strong>suppliers looking for collaboration</strong>.</li>
</ol>
<h4 id="content-strategy">Content Strategy</h4>
<p>I spoke to the founder and sales team to understand the <strong>company’s strategy in standing out from its competitors</strong>.</p>
<figure>
<p><img src="assets/images/av-redesign-values.png" alt="What Achieva Vending Pte Ltd strives towards in its services" /></p>
<figcaption>What the company strives towards in its vending services, collated during my discussion with the founder and sales team</figcaption>
</figure>
<h4 id="voice-and-tone">Voice and Tone</h4>
<p>What sets the company apart, as an SME, is also the cordialness it offers to its customers. With this and the above list in mind, the improved website should, therefore, adopt a <strong>clean</strong> look and adopt a <strong>friendly tone of writing</strong>.</p>
<h3 id="ideation">Ideation</h3>
<h4 id="competitive-analysis">Competitive Analysis</h4>
<p>For the initial brainstorming, I sourced inspiration from the websites of other vending providers, both local and abroad and identified the good attributes that I could learn from, such as <strong>understanding common industry terms to help in clarity in communication for the new website</strong>.</p>
<h4 id="information-architecture">Information Architecture</h4>
<p>After a preliminary sharing and discussion with the business owners, some sections in the proposed IA were removed due to business considerations and eventually looked like this:</p>
<figure>
<p><img src="assets/images/av-redesign-ia.png" alt="Improved site map for Achieva Vending's website" /></p>
<figcaption>Site map for the improved website</figcaption>
</figure>
<p>The new website adds a new ‘Careers’ page to help raise the visibility of the vacancies available in the company given the business’s manpower shortage needs.</p>
<h4 id="wireframing">Wireframing</h4>
<p>I started conceptualising by first creating low-fi wireframes on a note-taking app.</p>
<div id="slider1">
<img src="assets/images/av-redesign-wireframes1.png" title="Low-fi wireframes (1/4)" alt="Home Page" />
<img data-src="assets/images/av-redesign-wireframes2.png" title="Low-fi wireframes (2/4)" src="" alt="What We Offer page" />
<img data-src="assets/images/av-redesign-wireframes3.png" data-src-2x="" src="" title="Low-fi wireframes (3/4)" alt="Careers page" />
<img data-src="assets/images/av-redesign-wireframes4.png" data-src-2x="" src="" title="Low-fi wireframes (4/4)" alt="Contact Us page/Contact form" />
</div>
<script src="bower_components/ideal-image-slider/ideal-image-slider.js"></script>
<script src="bower_components/ideal-image-slider/extensions/bullet-nav/iis-bullet-nav.js"></script>
<script src="bower_components/ideal-image-slider/extensions/captions/iis-captions.js"></script>
<script>
// new IdealImageSlider.Slider('#slider');
var slider1 = new IdealImageSlider.Slider({
selector: '#slider1',
//height: 400, // Required but can be set by CSS
interval: 4000
});
// var slider = new IdealImageSlider.Slider('#slider');
slider1.addBulletNav();
slider1.addCaptions();
slider1.start();
</script>
<h3 id="prototyping">Prototyping</h3>
<h4 id="color-scheme">Color Scheme</h4>
<p>The site’s colour scheme builds upon the colours existing in the company’s logo by adding a colour (Trypan Blue #3D14B8) that is complementary to the Apple Green (#8fb914) present in the logo.</p>
<figure>
<p><img src="assets/images/av-redesign-color-scheme.png" alt="Colour palette used for Achieva Vending's new website" /></p>
<figcaption>Color scheme adopted for the new site, built upon the company’s logo</figcaption>
</figure>
<h4 id="high-fidelity-prototypes">High-fidelity prototypes</h4>
<p>I made the hi-fi prototypes with <strong>Sketch</strong>, the visual graphics with <strong>Adobe Illustrator and Photoshop</strong>.</p>
<figure>
<p><img src="assets/images/av-redesign-hifi.png" alt="Achieva Vending's hi-fi prototypes" /></p>
<figcaption>Hi-fi mockups created on Sketch</figcaption>
</figure>
<figure>
<p><img src="assets/images/av-redesign-header.png" alt="Achieva Vending's website header image" /></p>
<figcaption>Header image in the Home page</figcaption>
</figure>
<figure>
<p><img src="assets/images/av-redesign-visuals.png" alt="Achieva Vending's website illustrations" /></p>
<figcaption>Vending Machine illustrations created for the Home page</figcaption>
</figure>
<h3 id="the-final-product">The Final Product</h3>
<h4 id="implementation">Implementation</h4>
<p>The site was <strong>implemented and published with Weebly</strong>. I built the site on top of an existing theme available and then modified it to match my designs using the HTML editor. Below are screenshots of the improved website.</p>
<figure>
<p><img src="assets/images/av-redesign-final-product1.png" alt="Screengrabs of Achieva Vending's new website" /></p>
<figcaption>Screenshots of the improved site: ‘Home’ page and ‘What We Offer’ page</figcaption>
</figure>
<h3 id="evaluation">Evaluation</h3>
<h4 id="constraints">Constraints</h4>
<p><strong>Budget considerations</strong> and <strong>limited functionalities</strong> of the Weebly website builder meant that many design decisions had to be tweaked due to a lack of <strong>feasibility in implementation</strong>, or else to ensure a seamlessly <strong>responsive experience</strong> across mobile devices.</p>
<h4 id="areas-for-improvement">Areas for Improvement</h4>
<p><strong>Vending Machine specifications</strong> such as the machines’ dimensions and power input are required to allow potential customers to <strong>gauge the feasibility of employing the company’s services</strong> before reaching out. This information was included in the initial planning during ideation but has been omitted later due to the lack of data available.</p>
<h3 id="project-learningstakeaways">Project Learnings/Takeaways</h3>
<ol>
<li><strong>Focus on building an MVP first.</strong> In an SME, there is only so much time and effort that its staff can invest for you, so it’s important to focus on building an MVP and then improving from there (e.g. including vending machine specifications)</li>
<li><strong>Always make sure you fully understand your constraints prior to designing.</strong> I began re-designing certain micro-interactions without first verifying if it was feasible to implement those designs on the site builder. I later had to tweak my design to fit within the constraints of Weebly’s site-building tools.</li>
<li><strong>Business considerations are prime.</strong> As much as UX is important to me as a UX practitioner, paying more monthly to deploy a website that offers a better UX to the site visitors but has little add-on value to the business is deemed unnecessary by the business owners. As such, the improved website still builds upon the Weebly website builder, instead of other website builders available in the market that offers greater flexibility in design.</li>
</ol>
<div class="additional-notes">
👉 Click <a href="http://www.achievavending.com.sg/" target="_blank">here</a> to view the final product.
</div>
</description>
<pubDate>Tue, 01 Mar 2022 00:00:00 +0800</pubDate>
<link>http://localhost:4000/vending-website</link>
<guid isPermaLink="true">http://localhost:4000/vending-website</guid>
<category>Web Design</category>
<category>Visual Design</category>
</item>
<item>
<title>Google MyMaps</title>
<description><h3 id="the-focus">The Focus</h3>
<p>Users who use the platform for their travel trips, which generally consists of three stages:</p>
<ol>
<li>the <strong>initial brainstorming</strong>,</li>
<li><strong>creation of the trip itinerary</strong> and</li>
<li><strong>navigation</strong> during travel.</li>
</ol>
<h3 id="competitive-analysis">Competitive Analysis</h3>
<p>I looked into popular travel planning apps to understand what makes a travel planning app great. The three well-received apps I narrowed down in my research were <strong>Sygic Travel</strong>, <strong>TripAdvisor</strong> and <strong>TripIt</strong>.</p>
<figure>
<p><img src="assets/images/google-mymaps-ca1.png" alt="Sygic Travel, TripAdvisor, Tripit." /></p>
<figcaption>The three popular travel planning apps I narrowed down in my research were Sygic Travel, TripAdvisor and TripIt</figcaption>
</figure>
<p>Unsurprisingly, each of these apps has a solid feature that sets it apart from other apps on the market:</p>
<ul>
<li><strong>Sygic Travel</strong>: Seamless GPS navigation with the travel itinerary</li>
<li><strong>TripAdvisor</strong>: Smart suggestions, readily available reviews and forums, ease of booking</li>
<li><strong>TripIt</strong>: One-stop depository of the travel itinerary and booking confirmations</li>
</ul>
<h4 id="the-main-getaway">The Main Getaway</h4>
<p>These apps are all <strong>itinerary-based</strong>, contrasting the GoogleMyMaps platform, which is <strong>layer-based</strong>. Even though allowing users to sort their saved places into different layers offers more customizability, this sorting process can be <strong>manual and tedious</strong>.</p>
<h3 id="user-research">User Research</h3>
<p>To improve the platform, I needed to know why existing users were dissatisfied with Google MyMaps.</p>
<h4 id="app-ratings--reviews">App Ratings &amp; Reviews</h4>
<figure>
<p><img src="assets/images/google-mymaps-ur1.png" alt="Google MyMaps User Ratings taken from the Google Play Store" /></p>
<figcaption>Screenshot of user reviews and ratings taken from the Google MyMaps app listing in the Google Play Store</figcaption>
</figure>
<p>Google MyMaps’s mobile app was only available for Android. Looking through the app listing in the Google Play Store, <strong>“the lack of integration with Google Maps”</strong> was common feedback I spotted (which echoed my brief experience with the platform).</p>
<h3 id="qualitative-feedback">Qualitative Feedback</h3>
<p>I also conducted a short online survey with 15-20 participants using SurveyMonkey to obtain more feedback on the platform.</p>
<p>The feedback gathered could be summarised as such:</p>
<figure>
<p><img src="assets/images/google-mymaps-ur2.png" alt="Survey responses reflecting usage of Google MyMaps desktop platform" /></p>
<figcaption>Survey responses collected on the Googe MyMaps desktop experience</figcaption>
</figure>
<h3 id="insights">Insights</h3>
<p>After conducting the competitive analysis and user research, I summarised the user needs and frustrations in a user persona.</p>
<figure>
<p><img src="assets/images/google-mymaps-persona.png" alt="User Persona summarising user needs and frustrations of a typical user using the platform for travel planning" /></p>
<figcaption>User persona summarising the needs and frustrations of a typical user using Google MyMaps for travel planning</figcaption>
</figure>
<p>I also mapped out the user journey, splitting it into the three stages identified prior, and listed the opportunities for improvements accordingly for each.</p>
<figure>
<p><img src="assets/images/google-mymaps-userjourney.png" alt="User Journey Map detailing the opportunities for improvements for users using the platform for travel planning" /></p>
<figcaption>User journey map detailing potential opportunities for improvements when using Google MyMaps for travel planning</figcaption>
</figure>
<h3 id="conceptualisation">Conceptualisation</h3>
<p>It was clear to me at this point what the focus areas were for improving the platform, and they were to:</p>
<ol>
<li>better the <strong>integration</strong> of the platform with <strong>Google Maps</strong>,</li>
<li><strong>optimise</strong> the platform for <strong>itinerary planning</strong> and</li>
<li>improve the platform’s <strong>accessibility on mobile</strong> while travelling on the go</li>
</ol>
<h4 id="wireframing">Wireframing</h4>
<p>I started conceptualising improvements by first creating low-fi wireframes on pen and paper.</p>
<div id="slider">
<img src="assets/images/google-mymaps-wireframes_gm-integration.png" title="Low-fi wireframes I drew to kickstart my solutioning (1/3)" alt="Better the integration of Google MyMaps with Google Maps." />
<img data-src="assets/images/google-mymaps-wireframes_trip.png" title="Low-fi wireframes I drew to kickstart my solutioning (2/3)" src="" alt="Optimise Google MyMaps for trip planning." />
<img data-src="assets/images/google-mymaps-wireframes_mobile-accessibility.png" data-src-2x="" src="" title="Low-fi wireframes I drew to kickstart my solutioning (3/3)" alt="Improve Google MyMaps's mobile accessibility." />
</div>
<script src="bower_components/ideal-image-slider/ideal-image-slider.js"></script>
<script src="bower_components/ideal-image-slider/extensions/bullet-nav/iis-bullet-nav.js"></script>
<script src="bower_components/ideal-image-slider/extensions/captions/iis-captions.js"></script>
<script>
//new IdealImageSlider.Slider('#slider');
var slider = new IdealImageSlider.Slider({
selector: '#slider',
//height: 400, // Required but can be set by CSS
interval: 4000
});
slider.addBulletNav();
slider.addCaptions();
slider.start();
</script>
<h3 id="the-solution">The Solution</h3>
<p>My suggested improvements adhere to the approach outlined from my former analysis and apply to both the desktop and mobile platforms.</p>
<h4 id="desktop">Desktop</h4>
<ol>
<li><strong>Ease of adding locations</strong> directly to custom maps created in Google MyMaps from location listings in Google Maps.</li>
<li><strong>Addition of trip-oriented data fields</strong> to alleviate other aspects of trip planning (e.g. Budgeting)</li>
<li><strong>Offering an alternate day itinerary view</strong> (on top of the existing layer view) of pinned locations in custom maps for travel planning</li>
</ol>
<figure>
<div class="embed-container">
<iframe src="https://www.youtube.com/embed/iIXuqaPvaO8" width="700" height="480" frameborder="0" allowfullscreen="true" scrolling="no" autoplay="yes">
</iframe>
</div>
<figcaption>Suggested improvements for the Google MyMaps desktop platform. </figcaption>
</figure>
<h4 id="mobile">Mobile</h4>
<p>For mobile, I propose to <strong>build Google MyMaps as a feature in the existing Google Maps mobile app</strong>. Users can then have full access to data available on Google Maps while referring to their itinerary when travelling on the go.</p>
<figure>
<div class="embed-container">
<iframe src="https://www.youtube.com/embed/Zk6WJHvrs4c" width="700" height="480" frameborder="0" allowfullscreen="true" scrolling="no" autoplay="yes">
</iframe>
</div>
<figcaption>Suggested improvement for Google MyMaps on mobile: integrate it directly with the Google Maps mobile app. </figcaption>
</figure>
<h3 id="evaluation">Evaluation</h3>
<h4 id="areas-for-improvement">Areas for Improvement</h4>
<p>My mobile solution <strong>assumes that mobile access is mainly for referencing the itinerary while navigating on the go during travel.</strong> However, this may be a skewed assumption since <strong>unpredictability is part and parcel of travel</strong>. One might have to adjust the itinerary by adding stops or even shift plans when needed. A more polished solution, therefore, would be required.</p>
<h4 id="re-evaluating-assumptions">Re-evaluating Assumptions</h4>
<p>The basis of this case study <strong>focuses only on one particular user group on the platform</strong>; those who use it for their travel planning. However, <strong>Google MyMaps is also often used to present map data</strong>. It might not have been fair thus to only compare the platform with other travel planning apps since they <strong>do not share the same primary use case.</strong></p>
<figure>
<p><img src="assets/images/google-mymaps-explore.png" alt="Re-evaluating Assumptions: Google MyMaps is not merely a travel planning platform" /></p>
<figcaption>Re-evaluating Assumptions: Google MyMaps is not merely a travel planning platform, but also a means to visualise and present map data</figcaption>
</figure>
<div class="additional-notes">
<h4>ℹ️ Updates on Google MyMaps</h4>
<em>As of October 15, 2021, the My Maps app for Android devices has been shut down and removed from the Play Store. Only the web app is supported presently.</em>
</div>
</description>
<pubDate>Sat, 07 Dec 2019 00:00:00 +0800</pubDate>
<link>http://localhost:4000/google-mymaps</link>
<guid isPermaLink="true">http://localhost:4000/google-mymaps</guid>
<category>App Improvement</category>
<category>Personal Project</category>
</item>
</channel>
</rss>