Dicoding.com | UI/UX Web Study Case
A. Introduction
Dicoding adalah lembaga pelatihan komputer yang berfokus pada pemrograman komputer berbasis web. Dicoding memiliki 4 jenis pelayanan yang bisa digunakan yaitu Dicoding Academy, Dicoding Challenge, Dicoding Event, Dicoding Jobs Platform.
Dicoding memiliki visi untuk menjadi jaringan terbaik untuk developer di Indonesia. Dicoding memiliki dua misi utama. Pertama adalah membantu developer untuk menjadi entrepreneur yang mampu mengembangkan produk kelas dunia. Kedua adalah melahirkan talent digital sebanyak mungkin untuk industry IT di Indonesia.
Saat Dicoding ini telah memiliki 100k pengikut. Maka saatnya Dicoding rebranding websitenya. Ini adalah tampilan website lama.
Sedangkan ini tampilan website baru. Disini aku akan menjelaskan kenapa dibutuhkan perubahan pada website Dicoding.com
B. Research
Instagram Dicoding
Dicoding memiliki sebanyak 100k pengikut di Instagram. Di dalam Instagramnya sendiri Dicoding sering memposting tentang kelas yang ada di Dicoding Academy seperti:
Dicoding di Pencarian Google
Dari Instagram Dicoding bisa dibilang kalau Dicoding ingin mempromosikan Dicoding Academy.
Selanjutnya melalui Google Trends. saya mencari kata kunci “dicoding academy”, ”dicoding challenge”, “dicoding event”, “dicoding job”.
Kata kunci “dicoding academy” memiliki banyak pencarian dibandingakan ke 4 kata kunci tadi. Sedangkan jika ditambah kata kunci “dicoding” maka nilainya jauh dibandingkan dengan ke 4 kata kunci sebelumnya.
Dari Google Trends bisa dikatakan bahwa Dicoding Academy memiliki kata kunci tertinggi dibandingkan ke 3 kata kunci sebelumnya (selain kata kunci Dicoding).
Selanjutnya melihat isi situs web Dicoding. Pada website Dicoding terdapat 8 bagian yaitu:
1. Hero (Halaman pertama kali ditampilkan pada web)
2. Awards (Penghargaan)
3. 4 Pilar Dicoding
4. Partner Dicoding
5. List Kelas, Challenge, Event, Job Dicoding
6. Call To Action daftar Dicoding
7. Footer
Untuk selengkapnya bisa dilihat diwebsitenya Dicoding.com.
Kasus 1 :
Anggap saja saya orang awam yang belum kenal koding sama sekali. Saya melihat Instagram dan menemukan postingan Dicoding tentang Pemrograman Web. Saya mulai tertarik dengan dunia programming. Saya membuka browser lalu mengetik “dicoding”. Masuk ke situs web Dicoding, saya tidak menemukan tombol search kelas atau tombol uji coba kelas pada web tersebut. Maka saya harus mencari-cari tombol kelas tersebut dan akhirnya ketemu dibagian Academy -> Lihat Beranda Kelas.
Ini sedikit merepotkan bagi pengguna baru. Mereka harus mencoba tombol-tombol pada web tersebut. Dari sini saya memutuskan untuk merubah hero situs Dicoding dengan adanya Tombol Call To Action.
Kasus 2 :
Saya telah membeli token belajar Dicoding selama 30 Hari. Saya bingung dimana harus memasukan token tersebut. Saya membuka web Dicoding dan mencari-cari dimana tempat memasukan token. Akhirnya ketemu di bagian Academy -> Lihat Biaya Langganan.
Ini juga sedikit merepotkan harus mencari-cari tempat memasukan token. Dari sini saya memutuskan untuk meletakan memasukan token di landing page Dicoding.
Bedah Web Dicoding
1. Hero
Pada hero Dicoding menurutku ada beberapa kekurangan yaitu:
a. Hero Dicoding menggunakan gambar/image yang mengakibatkan proses loading page lambat. Internet Indonesia tidak secepat seperti negara-negara maju, ini akan membuat pengguna akan menunggu untuk proses loading situs web. Menurut saya lebih baik menggunakan vektor atau Scalable Vector Graphic atau SVG yang memiliki ukuran/size lebih kecil dibandingkan gambar/image.
b. Font title yang digunakan terlalu tipis membuat mata sakit untuk melihatnya apalagi dibagian background putih. Menurut saya menggunakan font yang tebal/bold biar enak dibaca.
c. Tidak ada tombol Call To Action/CTA untuk mengajak pengguna melakukan pencarian/pendaftaran Dicoding. Di halaman pertama yang paling contras yaitu pada tombol chat dan daftar yang berwarna merah.
d. Menurut saya lebih enak menggunakan logo yang bertulisan Dicoding dibandingkan hanya G. Umumnya Dicoding lebih dikenal dengan logo bertulisan Dicoding dibandingkan G.
e. Navbar dipisahkan dari logo dan dipindahkan ke rata kanan, sehingga logo tersebut lebih “stand out”.
f. Tulisan navbar web terlalu tipis untuk dibaca. Menurutku tulisannya menggunakan font tebal.
g. Notifikasi pada diatas navbar sangat kontras tetapi sedikit mengganggu User Interface. Notifikasi itu lebih baik disisipi dibagian bawah dan tidak terlalu kontras.
2. Awards Dicoding
Pada Awards Dicoding diletakan sebelum Partnership jadi dalam satu layar terdapat Awards dan Partner Dicoding.
3. 4 Pilar Dicoding
4 Pilar Dicoding ini sudah bagus hanya saja terlalu memakan tempat web dan tidak menerapkan “white space” sehingga kesannya ramai. Kalau bisa dipisahkan menjadi 2 bagian yaitu bagian title dan bagian ke 4 pilar Dicoding.
4. Partner Dicoding
Pada Partner Dicoding terdapat image yang menjadi background. Sama seperti pada bagian hero image mengakibatkan lambat loading karena ukuran berpengaruh. Setiap logo memiliki warna menunjukan identitasnya jika hanya warna putih hilang identitas logonya.
5. List Kelas, Challenge, Event, Jobs Dicoding
Pada List Kelas, Challenge, Event, Jobs menurutku ada beberapa kekurangan yaitu:
a. Pada bagian icon kelasnya terlalu besar sedangkan titlenya terlalu tipis sehingga susah dibaca.
b. Tulisan Kelas Favorit terlalu tipis dan susah dibaca.
6. Call To Action Daftar Dicoding
Tombol Call To Action mempunyai background gambar yang akan memiliki masalah seperti pada bagian hero dan partnership. Tombol Call To Action perlu diperbesar lagi.
7. Alumni Dicoding Academy
Pada Alumni Dicoding Academy sudah bagus. Tetapi pada bagian list alumni kurang terbaca tulisannya dan title menggunakan font kecil.
8. Footer
Untuk footer tidak ada masalah, tinggal menambah beberapa link lagi.
C. Ide/Brainstrom dan Sketch
Setelah melakukan research, saatnya melakukan brainstroming dan beberapa sketching pada website dicoding. Saya melakukan sketching dikertas lalu dibuat bentuk sketching digital menggunakan Invision. Terdapat 8 bagian web yang berhasil di sketch:
1. Hero (Halaman pertama kali ditampilkan pada web)
2. Dicoding 4 Pilar
3. Pengenalan Dicoding Academy
4. Awards (Penghargaan) dan Partner (Kerjasama)
5. List Kelas, Challenge, Event, Job
6. Alumni Dicoding
7. Call To Action Pembayaran/Uji Coba
8. Footer
Jika dilihat ada perubahan urutan pada web seperti awards dan kerjasama dijadikan satu, adanya bagian Dicoding Academy, serta menambah bagian pembayaran.
D. Wireframe
Setelah melakukan sketching, sebelum membuat desain website perlu dibuat kerangka-kerangka website yang biasanya disebut Wireframe. Wireframe berfungsi menampilkan bentuk kasar web sebelum dipercantik dengan warna, elemen-elemen desain.
1. Hero
Pada halaman hero hanya secara kasar akan menampilkan title “Bangun Karirmu Sebagai Developer Profesional” dengan memberikan Call To Action mencari kelas untuk membantu menjadi developer profesional dan tombol Uji Coba buat mereka yang pertama kali di Dicoding. Untuk kotak abu-abu nanti bisa diisi gambar/desain yang berhubungan dengan Title.
2. 4 Pilar Dicoding
Pada halaman selanjutnya terdapat 4 Pilar Dicoding yaitu Dicoding Academy, Dicoding Challenge, Dicoding Events, Dicoding Jobs Platform.
Setelah user melihat Hero website, user akan ditampilkan 4 Pilar Dicoding supaya bisa menjadi Developer Profesional seperti Title pada Hero website.
3. Dicoding Academy
Pada halaman sebelumnya Dicoding tidak memberikan informasi tentang Dicoding Academy padahal itu nilai jual Dicoding. Jadi saya berinisiatif untuk menambah bagian “Kenapa Dicoding Academy Berbeda”.
Disini user akan menjelaskan salah satu 4 Pilar Dicoding yaitu Dicoding Academy. Disini dijelaskan apa yang membuat Dicoding Berbeda dengan kelas-kelas programming lainnya.
4. Awards and Partnership
Pada halaman lama Dicoding, Awards dan Partnership dipisah. Disini saya menggabungkan Awards dan Partnership sehingga user tahu penghargaan apa saja dan siapa saja Partner Dicoding ini.
5. List Kelas, Challenge, Event, Jobs
Pada halaman lama Dicoding, Icon kelas menurut saya terlalu besar dan memakan space layar yang membuat judul kelas terlalu kecil dan sedikit sulit untuk dibaca. Disini saya melakukan perubahan dengan mengecilkan icon dan memperbesar judul kelas menggunakan font bold
Setelah user tahu siapa saja Partner Dicoding untuk membuat kelas programming. User mulai bisa mencari kelas yang mereka butuhkan.
6. Alumni Dicoding
Pada halaman lama Dicoding, bagian Alumni sudah lumayan bagus tetapi tulisan pada nama orang tersebut masih sulit terbaca sehingga pada halaman baru saya memperbesar tulisan dan gambar.
Disini user memperkenalkan siapa saja yang pernah mengikuti Dicoding Academy dan apakah mereka bisa menjadi developer profesional sesuai Title pada Hero web.
7. Pembayaran
Pada halaman lama Dicoding, bagian Pembayaran terdapat di web terpisah yang membuat orang harus berpindah-pindah halaman web. Jadi saya melakukan penambahan bagian Pembayaran setelah bagian Alumni Dicoding.
Disini user bisa melakukan pembelian kelas-kelas Dicoding, Uji Coba selama 15 hari, dan untuk memasukan token buat pengguna Dicoding memiliki token.
Pada halaman Hero terdapat tombol Call To Action Uji Coba, Setelah tombol itu klik maka menunju halaman ini.
8. Footer
Pada bagian footer sengaja dibuat lebih besar untuk memudahkan dalam membaca teks. Secara isi footer hampir sama dengan halaman lama Dicoding.
E. Design
Setelah melakukan wireframing, maka dibuat bentuk desainnya. Ini adalah hasil wireframe yang telah dibuat.
1. Hero
Pada halaman Hero saya warna background yang digunakan yaitu warna gradasi Dark Slate Blue yang merupakan warna Logo Dicoding dan warna biru tua.
Gambar yang digunakan yaitu illustrasi isometric 3D bentuk laptop yang merupakan representasi seorang developer.
Pada tombol CTA Uji Coba menggunakan warna merah yang membuat kesan kontras dengan warna biru. Saat user masuk ke halaman web Dicoding hal yang pertama dilihat user tombol Uji Coba karena paling mencolok diantara yang lain.
Pada bagian Navbar tombol Login memiliki kontras dengan tombol Navbar yang bertujuan user untuk melakukan login akun Dicoding.
2. 4 Pilar Dicoding
Pada bagian 4 Pilar Dicoding, menggunakan gambar dan isi konten yang sama pada halaman 4 Pilar Dicoding lama. Useri dsini akan berfokus pada tulisan “4 Pilar yang Dapat Kamu Manfaatkan” selanjutnya user melihat keempat pilar itu. Jika salah satu 4 Pilar itu di-hover maka akan menampilkan penjelasan tentang Pilar itu.
3. Dicoding Academy
Pada halaman Dicoding Academy, masih menggunakan image dan isi konten yang sama pada halaman Dicoding Academy yang lama. Disini saya mengubah layout yang pada halaman lama nya itu rata tengah dihalaman baru rata kanan untuk mempermudah dalam membaca teks.
4. Awards dan Partner Dicoding
Pada halaman awards dan partnership hanya menampilkan logo perusahan dan organisasi. Dihalaman baru ini, saya menggunakan background putih supaya logo-logo memiliki ciri khas sendiri.
5. List Kelas, Challenge, Event, Jobs
Pada halaman list kelas, terdapat tombol Lihat Kelas, Lihat Challenge, Lihat Events, Lihat Jobs Platform yang berwarna merah yang memiliki kontras warna sehingga mengajak user untuk melakukan klik pada tombol tersebut.
Pada background warna sedikit abu-abu yang memberikan kontras dibandingkan bagian lain. Background ini memberikan kontras pada bagian List Kelas, Challenge, Event, Jobs yang memiliki warna putih.
6. Alumni
Pada halaman Alumni mengubah menjadi background putih, foto diperbesar, dan tulisan diperjelas sehingga lebih enak untuk dilihat.
7. Pembayaran
Pada bagian pembayaran terdapat 3 kontras yaitu pada bagian Paket langganan terdapat tombol Saya Pilih Paket ini untuk mengajak user membeli paket. Kemudian pada bagian Uji Coba terdapat tombol Daftar Trial untuk mengajak Trial selama 15 hari. Terakhir terdapat tombol Aktfikan Token untuk mengajak user memasukan no token untuk aktivasi kelas.
8. Footer
Pada bagian Footer warna background yang digunakan yaitu Dark Slate Blue yang menciri khaskan warna Dicoding. Tulisan diperjelas untuk memudahkan dalam membaca teks.
9. Old vs New Website
Dibawah ini adalah perbandingan tampilan lama Dicoding dengan tampilan baru Dicoding.
F. Finishing
Setelah mendesain tampilan web, disini saya mengubah beberapa opsional tampilan seperti hovering navbar, chatbox, notification, dan masih banyak lainnya.
G. Conclusion
Kesimpulannya yaitu saya mendesain ulang konsep situs web Dicoding dengan menggunakan Invision Sketch dan Figma Protyping.
Pertama saya melakukan research dengan menelusuri Instagram Dicoding dan melakukan pencarian keyword pada Google Trends. Disitu saya dapat menyimpulkan bahwa Dicoding lebih terkenal Dicoding Academy dengan kelas programming. Dengan itu saya memutuskan pada halaman Landing page berfokus pada Dicoding Academy.
Data-data diatas tidak bisa dikatakan data valid karena membutuhkan lebih data seperti data survei, data biodata pengguna seperti umur, dan apakah distabilitas atau tidak, data halaman yang paling sering dibuka dan menguji coba langsung ke pengguna. Sehingga dapat menciptakan pengalaman pengguna lebih tertuju misalkan ada fitur khusus distabilitas.
Setelah melakukan researching, sketching pun dilakukan menggunakan Invision Sketch. Setelah dibuat sketch-nya selanjutnya dibuat menggunakan Figma Prototyping untuk prototype nya bisa diakses link dibagian External Resource.
Font yang digunakan yaitu Helvetica Neue dan warna yang digunakan warna biru dan merah.
Gambar dan Konten mengambil di halaman Dicoding yang lama dan beberapa mengambil di Freepik.
Saya meminta maaf jika ada kesalahan penulisan, maupun kesalahan dalam mendesain situs web ini. Saya masih banyak belajar lagi. Jika kalian ada saran bisa komentar di kolom komentar. Jika kalian ada saran situs web untuk didesain ulang bisa kasih linknya di kolom komentar juga.
Terima Kasih telah membaca, sampai jumpa!
External Links and Resource
Resource:
font: Helvetica Neue
Prototyping Figma bisa diakses disini
Hero Graphic menggunakan freepik
