<figure><img alt="planet journey" src="https://cdn-images-1.medium.com/max/496/1*ZS93FzMQXTq-pE3cR4Oi_A.jpeg" /><figcaption>Campaign Journey of Challenges</figcaption></figure><blockquote>Disclaimer: This case study is a part of learning process on <a href="https://digitalent.kominfo.go.id/">Digital Talent Scholarship from Indonesia Ministry of Communication and Information Technology</a> in partnership with <a href="https://skilvul.com/">Skilvul</a> as a learning provider, and <a href="https://campaign.com/">Campaign.com</a> as a challenge partner. Writer and Teams are not part of campaign.com</blockquote><h3>Introduction</h3>Doing social charity used to be hard and time consuming. People want to extend their helping hand, but don’t know where to go. Campaign.com was the first social network built for change and social impact.campaign.com challenge us to boost their user engagement through gamification. Objectives we are trying to achieve are User Points, Leaderboards, and gamification of participating in the challenge it self.<h3>The Teams</h3><a href="https://medium.com/@coachnoob">Antonius Harry</a> — UI/UX Designer | Developer<a href="https://medium.com/@ancha.sevenfoldism">Ari Ansyah Siddiq</a> — UI/UX Designer<a href="https://medium.com/@kusharta">Fathira Putri Kusharta</a> — UI/UX Designer<a href="https://medium.com/@nafisgn32">Nafis Ghaniesa Noka</a> — UI/UX DesignerSulistyo Hutomo — UI/UX Designer | Graphic Designer<h3>Design Process</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/988/1*6jM6OjcnwUs0odYUDZ8iIw.jpeg" /><figcaption>Pain Points</figcaption></figure>from the pain points that we gathered, we summarize the problem that user face are: challenges in the apps are repetitive and there are no reward to motivate user to finish the challenges.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*m1H6qo8sK6eq2B_xqHgCFg.jpeg" /><figcaption>How Might We</figcaption></figure>this are the crazy ideas we were able to gather that might improve the challenges to be more interesting for existing and new users to participate in.UI-DesignHaving a Graphic Designer on the team was a great advantages, it helps us creates UI Design faster and more consistent.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ycDfsFwBmhOMqWmcLwNuLw.jpeg" /><figcaption>UI-Design</figcaption></figure>We come with this design as a gamification approach to make the challenges feels less repetitive and more rewarding for the user to keep going until the finish the challenges.PrototypingHere comes the fun part, prototyping the design we made with flow that fun and interesting for users.<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.figma.com%2Fembed%3Fembed_host%3Doembed%26url%3Dhttps%3A%2F%2Fwww.figma.com%2Fproto%2FDb516Zo1msRin5rCLxbte1%3Fembed_host%3Dshare%26kind%3D%26node-id%3D738%253A72122%26page-id%3D643%253A48959%26scaling%3Dscale-down%26show-proto-sidebar%3D1%26starting-point-node-id%3D738%253A72122&amp;display_name=Figma&amp;url=https%3A%2F%2Fwww.figma.com%2Fproto%2FDb516Zo1msRin5rCLxbte1%3Fembed_host%3Dshare%26kind%3D%26node-id%3D738%253A72122%26page-id%3D643%253A48959%26scaling%3Dscale-down%26show-proto-sidebar%3D1%26starting-point-node-id%3D738%253A72122&amp;image=https%3A%2F%2Fapi-cdn.figma.com%2Fresize%2Fthumbnails%2F29989857-3880-4af0-87e7-820bbdcbb6c8%3Fheight%3D450%26bucket%3Dfigma-alpha&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=figma" width="800" height="450" frameborder="0" scrolling="no"><a href="https://medium.com/media/51be9210345cab229972d1ddbc717cfd/href">https://medium.com/media/51be9210345cab229972d1ddbc717cfd/href</a></iframe><h3>Conclusion</h3>a simple gamification can turn a boring task into a fun and less repetitive thing to do. This will help increasing users attention and rewarding them with a fun experience every time they participate and finish the challenges.Special thanks for DTS, Skilvul, and all mentor that guide us throughout this learning process.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=534eedace134" width="1" height="1" alt="">

The Journey of Challenges, a UI/UX Case Study for Campaign.com

<h3>Boss, Saya Minta Naik Gaji !</h3><h4>Tingkatkan nilai diri, baru naik gaji.</h4><figure><img alt="gambar ilustrasi bos dan karyawan berjabat tangan" src="https://cdn-images-1.medium.com/max/1024/0*qsVZ8-MlpnQAhnxt" /><figcaption>Photo by <a href="https://unsplash.com/@officestock?utm_source=medium&amp;utm_medium=referral">Sebastian Herrmann</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure>Pernah nggak sih, merasa gaji kita segini - segini aja? Setiap gajian cuma lewat untuk bayar cicilan dan kebutuhan lain. Setiap tahun mengharapkan kenaikan gaji yang nggak seberapa dibandingkan dengan kenaikan harga kebutuhan. Belum lagi di masa pandemi seperti sekarang. Jangankan naik gaji, beberapa dari kita justru malah mengalami pemotongan gaji, atau bahkan harus di-PHK.Terkadang kita terlalu fokus untuk menuntut, tetapi lupa dengan apa yang bisa kita lakukan. Coba deh tanyakan beberapa pertanyaan ini ke diri kita sendiri:<h4>Pantaskah saya digaji segini?</h4>Kalau kita kerja dengan effort senilai Rp. 3 juta, dan kita digaji senilai Rp. 3 juta, berarti gaji yang kita dapat sudah sesuai dengan nilai diri kita. Sayangnya ada juga yang kerjanya rebahan, tapi minta gaji naik terus, dan menggunakan nominal “gaji” yang didapat untuk menjustifikasi kemalasan. “Kerja santai aja. Nggak usah banting tulang, toh gaji kita nggak dinaikkin” atau, “Kalau gaji saya naik, baru saya akan semangat kerja”. Mindset seperti ini justru yang membuat kita “stuck” dan nggak bisa berkembang.Terus gimana kalau Gaji kita Rp 3 juta, tapi ingin digaji Rp 10 juta? Dari pada menghabiskan waktu menuntut kepada perusahaan atau ikutan demo meminta kenaikan UMR, sebaiknya kita fokus pada pertanyaan selanjutnya.<h4>Apa yang bisa saya lakukan untuk meningkatkan nilai diri?</h4>“Seandainya saya punya gaji Rp 20 juta pasti saya bisa beli ini, makan itu, liburan kesana” lamunan saya sambil scrolling Instagram. Cukup melamunnya, sekarang kita fokus pada hal apa yang bisa kita lakukan untuk meningkatkan nilai diri kita.Pada dasarnya ada dua hal yang bisa dilakukan untuk mengembangkan diri, yaitu secara Vertical dan Horizontal.I. Vertical GrowthMengembangkan diri secara Vertical, berarti kita semakin mendalami bidang yang sedang kita geluti.Contohnya, coba deh kalian minta waktu ke atasan kalian terus tanya “Pak/Bu, apa yang bisa saya lakukan untuk membantu perusahaan berkembang ke arah yang positif?” Sampai disini atasan kalian pasti berpikir, “Si Upin “kesambet” apa dah, tiba-tiba tanya begini.”Setelah keheningan yang awkward selama beberapa saat, atasan kita pasti akan cerita hal-hal apa saja yang akan membantu perusahaan untuk maju. Jangan lupa catat poin-poin yang disampaikan, misalkan perusahaan membutuhkan laporan penjualan yang terstruktur, agar penagihan ke klien bisa dilakukan dengan cepat. Atau perusahaan membutuhkan sistem informasi pencatatan barang keluar dan masuk untuk mempercepat proses penyediaan barang.Setelah pertemuan dengan atasan, mulailah mempelajari skill dan ilmu yang diperlukan untuk mencapai hal-hal yang sudah mereka sampaikan. Setelah kita berhasil membuat laporan penjualan yang baik, atau sistem informasi barang, barulah kita ajak meeting lagi sambil membawa data dan hasil yang sudah kita capai.Ingatkan kembali atasan kita tentang pertemuan kalian beberapa bulan yang lalu, kemudian sampaikan hasil yang telah disiapkan.Misalnya, “Beberapa bulan lalu, bapak bilang bahwa kita membutuhkan laporan penjualan yang terstruktur, agar penagihan bisa dilakukan dengan cepat. Berikut saya sampaikan laporan penjualan yang saya buat. Dengan laporan ini, penagihan ke klien dapat dilakukan 70% lebih cepat, sehingga keuntungan perusahaan dalam 3 bulan meningkat 15%.”Mendengar hal seperti ini, atasan akan senang dan bangga pada kinerja kita. Disini lah kita bisa “tembak” dengan permintaan kenaikan gaji atau penyesuaian tunjangan dll.Pada tahap ini, atasan kita hanya punya dua pilihan: menaikan gaji sesuai dengan pencapaian dengan harapan kita akan terus memberikan value kepada perusahaan, atau menolak permintaan kenaikan gaji kita dengan risiko kita resign karena pencapaian yang tidak dihargai sehingga perusahaan kehilangan personel yang berharga.II. Horizontal GrowthMengembangkan diri secara Horizontal, maksudnya adalah mempelajari keterampilan lain yang tidak berhubungan dengan pekerjaan utama kita saat ini.Contohnya seperti hobi atau pekerjaan sampingan yang bisa membantu meningkatkan pendapatan. Misalnya, kita belajar fotografi dan menjadi fotografer freelance, belajar membuat konten untuk YouTube, belajar programming untuk menjadi freelance programmer, dll.Zaman sekarang, kita bisa mendapatkan ilmu dengan mudah dari internet, baik itu gratis maupun berbayar. Platform-platform edukasi tersebar luas di internet. Ada yang berupa tulisan, maupun video tutorial. Semua bisa kita akses dalam genggaman.Mau belajar atau rebahan, buka web edukasi atau jutru scrolling timeline; semua, pilihan yang kita buat akan menentukan nilai diri.<h4>Kesimpulan</h4>Pada akhirnya, rezeki akan sesuai dengan nilai diri. Ketika kita menuntut untuk mendapatkan kenaikan gaji, coba tanyakan pada diri sendiri, “Pantaskah saya dinilai sekian?” Jangan pernah berhenti belajar dan terus meningkatkan nilai diri ya!<blockquote>Anyone who stops learning is old, whether at twenty or eighty. Anyone who keeps learning stays young. The greatest thing in life is to keep your mind young. ~Hendry Ford</blockquote><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=21bc5dc805" width="1" height="1" alt="">

Boss, Saya minta Naik Gaji !

<h4>Penggunaan Method .filter() dan .map()</h4><figure><img alt="Picture of lines of codes." src="https://cdn-images-1.medium.com/max/1024/0*yEa-vqz6hipyLdKV" /><figcaption>Photo by <a href="https://unsplash.com/@markusspiske?utm_source=medium&amp;utm_medium=referral">Markus Spiske</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure>Saat kita sedang belajar JavaScript, pasti sering menemukan yang nama-nya loop / pengulangan. Mulai dari pengulangan dasar menggunakan for, while, dan juga method Array yang disediakan JavaScript seperti .forEach() dan .map()Pada kesempatan ini saya akan membahas method .map() dan contoh penggunaannya. .map() sangat berguna dalam manipulasi data, karena method ini akan membuat Array baru dari fungsi yang kita masukkan pada method ini, tanpa merubah Array awalnya. Beberapa hari yang lalu ada teman dari komunitas Zero To Mastery yang bertanya melalui DM di Discord, dia memberikan sebuah Array berisi object yang di dalamnya terdapat data tanggal, serta suhu pada tanggal tersebut, kemudian dia bertanya bagaimana cara mem-filter Array tersebut agar menampilkan tanggal saat suhu berada di kondisi tertentu.<pre>const weatherData = [{</pre><pre>date: &#39;2021-02-07&#39;,</pre><pre>lowestTemperature: -4,</pre><pre>highestTemperature: 2,</pre><pre>}, {</pre><pre>date: &#39;2021-02-08&#39;,</pre><pre>lowestTemperature: -1,</pre><pre>highestTemperature: 2,</pre><pre>}, {</pre><pre>date: &#39;2021-02-09&#39;,</pre><pre>lowestTemperature: -1,</pre><pre>highestTemperature: 9,</pre><pre>}, {</pre><pre>date: &#39;2021-02-10&#39;,</pre><pre>lowestTemperature: 6,</pre><pre>highestTemperature: 10,</pre><pre>}, {</pre><pre>date: &#39;2021-02-11&#39;,</pre><pre>lowestTemperature: 3,</pre><pre>highestTemperature: 9,</pre><pre>}, {</pre><pre>date: &#39;2021-02-12&#39;,</pre><pre>lowestTemperature: 5,</pre><pre>highestTemperature: 9,</pre><pre>}, {</pre><pre>date: &#39;2021-02-13&#39;,</pre><pre>lowestTemperature: -1,</pre><pre>highestTemperature: 6,</pre><pre>}, {</pre><pre>date: &#39;2021-02-14&#39;,</pre><pre>lowestTemperature: -5,</pre><pre>highestTemperature: -1,</pre><pre>}, {</pre><pre>date: &#39;2021-02-15&#39;,</pre><pre>lowestTemperature: -5,</pre><pre>highestTemperature: -3,</pre><pre>}, {</pre><pre>date: &#39;2021-02-16&#39;,</pre><pre>lowestTemperature: -2,</pre><pre>highestTemperature: -6,</pre><pre>}, {</pre><pre>date: &#39;2021-02-17&#39;,</pre><pre>lowestTemperature: -1,</pre><pre>highestTemperature: -7,</pre><pre>}, {</pre><pre>date: &#39;2021-02-19&#39;,</pre><pre>lowestTemperature: -11,</pre><pre>highestTemperature: 0,</pre><pre>}, {</pre><pre>date: &#39;2021-02-20&#39;,</pre><pre>lowestTemperature: -8,</pre><pre>highestTemperature: -3,</pre><pre>}, {</pre><pre>date: &#39;2021-02-21&#39;,</pre><pre>lowestTemperature: -1,</pre><pre>highestTemperature: -9,</pre><pre>}];</pre>Setelah mempelajari data yang diberikan ternyata maksud dari pertanyaan teman saya tersebut adalah menampilkan date pada kondisi lowestTemperature dan highestTemperature yang berada pada nilai minus (-). Sekarang kita mulai coding di Code Editor favorite kita.<pre>const answer = weatherData.filter(data =&gt; { if(data.lowestTemperature &lt; 0 &amp;&amp; data.highestTemperature &lt; 0) { return data } })</pre><pre>console.log(answer)</pre>Pertama kita declare variable baru bernama answer untuk menyimpan Array baru yang akan kita buat. Selanjutnya kita gunakan method .filter() untuk mem-filter weatherData menjadi Array data baru, sesuai dengan kondisi yang kita tentukan, dalam hal ini kondisi lowestTemperature dan highestTemperature pada nilai minus (-).<figure><img alt="result of filter method" src="https://cdn-images-1.medium.com/max/531/1*NMjND7Yo9edVuweNCSeY8Q.jpeg" /><figcaption>Filter Result by Antonius Harry</figcaption></figure>Dengan method .filter() kita sudah bisa mendapatkan data yang kita inginkan, namun karena data yang diminta hanya tanggal, disini lah method .map() kita gunakan untuk membuat Array baru.<pre>const answer = weatherData.filter(data =&gt; { if(data.lowestTemperature &lt; 0 &amp;&amp; data.highestTemperature &lt; 0) { return data } }).map(data =&gt; data.date)</pre><pre>console.log(answer)</pre>Pada method .map() ini kita masukkan fungsi untuk menampilkan tanggal dari data yang sudah di filter.<figure><img alt="method map result" src="https://cdn-images-1.medium.com/max/205/1*mSnsI8tLrkqCwtzgE5nQrw.jpeg" /><figcaption>Map Result by Antonius Harry</figcaption></figure>Demikian contoh penggunaan method .map() pada JavaScript. Method ini merupakan salah satu yang paling sering saya gunakan dalam Project dan pembelajaran JavaScript.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=9b2481565283" width="1" height="1" alt="">

Hi, my name is Harry

I am

What can I do for you ?

Recent Projects

App Project

Game Project

Blog Posts

The Journey of Challenges, a UI/UX Case Study for Campaign.com

Boss, Saya minta Naik Gaji !

Belajar Coding: Manipulasi Array pada JavaScript