Redesign of The Del FM Radio Application
“New Design of The Radio Del FM Application”
Daftar Isi :
1. TAHAP I : EKSPLORASI
1.1 Analisis Aplikasi Spotify
1.2 Analisis Aplikasi Joox
1.3 Analisis Aplikasi Groove Music
2. TAHAP II : EVALUASI APLIKASI RADIO DEL FM
2.1 Daftar Temuan Masalah
2.2 Rekomendasi Perbaikan
3. TAHAP III : REDESIGN APLIKASI RADIO DEL FM
3.1 Desain Baru Radio Del FM
3.2 User Interface Style Guide
Referensi
3. TAHAP III : REDESIGN APLIKASI RADIO DEL FM
Berdasarkan eksplorasi yang telah dilakukan terhadap 3 aplikasi layanan musik (Spotify, JOOX, Groove Music) dan evaluasi terhadap aplikasi Radio Del FM, maka berikut terdapat hasil dari redesign terhadap tampilan UI aplikasi Radio Del FM.
3.1 Desain Baru Radio Del FM
Hasil redesign aplikasi Radio Del FM akan ditampilkan per tiap menu agar lebih jelas, runtun dan mudah dipahami.
1.Tampilan Splash Screen
Tampilan Splash Screen merupakan tampilan yang pertama sekali muncul saat sebuah aplikasi dibuka. Tampilan ini umumnya dibuat sedemikian rupa menarik agar user yang pertama kali membuka aplikasi ini langsung tertarik dan nyaman untuk melakukan tahap selanjutnya. Pada desain aplikasi Radio Del FM sebelumnya, tampilan splash screen-nya sangat kecil sehingga kurang terlihat jelas dan kurang memiliki desain yang bagus.
Pada tampilan splash screen yang saya buat, saya menggunakan logo Del FM agar lebih memperjelas kembali bahwa aplikasi tersebut merupakan Radio 92,4 Del FM. Selain itu saya membuat overview dari aplikasi ini sendiri, yaitu ciri khas sekaligus tagline “Connecting You to Toba”. Dan pada bagian bawah halaman terdapat button yang dapat dipilih user ketika ingin langsung masuk ke halaman utama.
2. Tampilan Menu Live Streaming
Gambar diatas merupakan gambar menu Live Streaming yang akan dijadikan sebagai menu utama pada aplikasi Radio Del FM ini. Saya menjadikan menu ini sebagai halaman utama agar menandakan bahwa aplikasi Radio Del FM merupakan aplikasi streaming radio. Warna pada halaman ini juga dibuat menjadi warna yang lebih soft sehingga user merasa lebih nyaman dan tidak membosankan, ditambah juga dengan logo Del FM agar mempunyai ciri khas tersendiri. Di bagian bawah halaman juga terdapat icon untuk memutar dan memainkan lagu.
3. Tampilan Sidebar
Tampilan sidebar seperti gambar dibawah ini akan muncul apabila menekan icon yang berbentuk tiga garis pada halaman kiri bagian atas. Menu Sidebar ini memiliki 10 menu daftar menu. Hal yang berubah dari design sebelumnya adalah urutan tiap menu dan penempatan low level feedbacknya, dimana ketika user meng-klik salah satu menu maka akan memberikan feedback berupa perubahan warna font.
4. Tampilan Menu News
Menu pada gambar diatas terbagi menjadi dua sub menu yang berisi berita seputar Toba dan terdapat pada bagian atas halaman, yaitu Latest News dan Bonpaspedia. Berita dikelompokkan dengan tersusun rapi kebawah sehingga memudahkan user dalam membaca dan memilih berita. Warna yang digunakan pada halaman ini sama dengan halaman sebelumnya.
Caption pada tiap berita juga diberikan agar user dapat memilih berita yang ingin mereka baca tanpa harus membuka berita secara keseluruhan. Saat kita memilih salah satu berita maka akan terbuka halaman baru seperti gambar dibawah ini.
Pada halaman berita diatas terdapat gambar berita disertai dengan caption judul, tanggal publikasi berita dan isi berita. Setelah membaca informasi dari berita, user juga dapat melakukan beberapa aksi, seperti menambahkan berita ke daftar favorit, menyimpan isi berita atau bahkan membagikannya kepada orang lain. Di bagian bawah halaman juga tedapat Related berita yang dapat kita swipe up kesamping untuk melihat berita terkait lainnya.
5. Tampilan Menu DSH
Pada halaman ini terdapat beberapa textbox untuk mengisi data user yang ingin bergabung menjadi Del FM Squad. Pada bagian atas terdapat ilustrasi yang menandakan bahwa form ini berupa pengumuman. Pada bagian atas terdapat kalimat “syarat dan ketentuan berlaku” dengan tulisan teks berwarna merah sehingga user akan fokus kesana.
Textbox yang terdapat pada halaman ini disusun rapi berjejer kebawah sehingga terlihat rapi. Pada textbox tempat/tanggl lahir juga dipisahkan box tempat, tanggal, bulan dan tahun agar user mudah mengisinya. Di bagian paling bawah halaman terdapat textbox berwarna merah yang kontras sehingga user dapat dengan mudah membedakannya dengan textbox lainnya.
Ketika user telah mengisi data dengan benar dan valid, maka akan menekan button “Registrasi” dan kemudian akan muncul feedback berupa ucapan terimakasih kepada user karena telah melakukan pendaftaran.
6. Tampilan Menu Program
Menu-menu yang ada pada halaman ini tersusun dengan rapi dan dikelompokkan berdasarkan jenis nya dan disertai dengan nama program, judul program dan daftar waktu program sehingga user dapat dengan mudah mencari berita yang diinginkan.
Saat kita membuka salah satu program maka akan muncul tampilan seperti berikut ini:
Pada halaman diatas terdapat informasi mengenai program seperti jadwal acara. Di halaman tersebut juga tersedia fitur menarik pada program tersebut yang dapat kita swipe up. Pada bagian bawah halaman terdapat logo Del FM untuk mengisi kekosongan halaman agar tidak terlihat kaku disertai dengan social media Radio Del FM yang dapat dihubungi oleh user secara langsung.
7. Tampilan Menu Event
Pada halaman ini terdapat program-program yang telah dilakukan Radio Del FM. Info program dikelompokkan dengan tersusun rapi kebawah sehingga memudahkan user dalam membaca dan memilih berita. Program pada halaman ini disertai dengan judul kegiatan dan tanggal berlangsungnya kegiatan tersebut.
Saat kita mengklik salah satu berita di halaman tersebut maka muncul halaman berikut :
Pada halaman berita diatas terdapat gambar berita disertai dengan caption judul, tanggal publikasi program dan isi program kegiatan. Setelah membaca informasi dari program kegiatan tersebut, user juga dapat melakukan beberapa aksi, seperti menambahkan berita ke daftar favorite, menyimpan isi berita atau bahkan membagikannya kepada orang lain. Di bagian bawah halaman juga terdapat berita yang dapat kita swipe up kesamping untuk melihat berita terkait lainnya.
8. Tampilan Menu Topic of The Day
Saat pertama kali user membuka menu ini maka halaman seperti gambar diatas yang muncul, dimana user disuguhkan aktivitas untuk login terlebih dahulu. User akan disuguhkan beberapa jenis akses untuk login seperti masuk menggunakan facebook, gmail atau user bisa masuk menggunakan mode tamu. Jika user masuk menggunakan mode tamu maka user hanya perlu memasukkan nama sebagai identitas dan dapat langsung menekan tombol login.
Saat user telah berhasil login maka akan langsung muncul halaman group chat untuk user. Pada halaman tersebut terdapat beberapa icon yang disediakan agar user dapat melakukan beberapa aksi yang cepat seperti icon untuk menuju ke halaman profil, icon untuk melihat user yang sedang aktif.
Pada halaman diatas juga terdapat textbox untuk kita menulis pesan yang disertai dengan icon emoticon dan icon pesawat untuk mengirim pesan. Warna yang menjadi dasar percakapan adalah warna yang harmonis dengan warna dasar agar user nyaman dan tidak terganggu.
Berikut adalah tampilan saat user memilih tombol icon disebelah kanan atas group chat:
Pada halaman diatas user dapat mengganti atau mengubah isi profile. Tampilan yang disediakan untuk user sangat familiar dan mudah dimengerti. Tetapi untuk mengubah isi profil user harus terlebih dahulu login karena jika menggunakan mode tamu user tidak bisa mengganti profile. Kita dapat mengubah foto profil kita dengan mengetuk icon camera yang ada disebelah bawah gambar foto profil. Selanjutnya kita juga dapat mengubah nama, info, suara profil hingga kita bisa logout dari akun yang kita gunakan.
Pada bagian bawah halaman terdapat logo Del FM untuk mengisi kekosongan halaman agar tidak terlihat kaku disertai dengan social media Radio Del FM yang dapat dihubungi oleh user secara langsung.
9. Tampilan Menu Podcast
Pada halaman ini terdapat siaran non-streaming yang disampaikan melalui audio. Podcast di kelompokkan dengan tersusun rapi sejajar kebawah sehingga memudahkan user dalam membaca dan memilih podcast yang ingin didengarkan. Daftar podcast pada halaman ini disertai dengan judul kegiatan dan tanggal berlangsungnya kegiatan tersebut agar user mudah dalam mencari nformasi yang dibutuhkan. Pada halaman tersebut jumlah kegiatan hanya ditampilkan beberapa saja dan jika user ingin melihat semua nya maka user cukup menekan tombol Load More yang terdapat pada bagian bawah halaman.
Saat kita mengklik salah satu berita di halaman tersebut maka muncul halaman berikut :
Pada halaman menu tersebut terdapat beberapa aksi yang dapat dilakukan oleh user secara mudah, yaitu mulai dari atas halaman terdapat gambar ilustrasi mengenai judul program, dilanjutkan dengan judul program dan tanggal program. Selanjutnya terdapat suatu kolom tempat dimana audio dapat kita dengarkan dengan menekan icon play, kita juga dapat mengulang audio suara beberapa kali, mengatur kecepatanya bahkan menyimpan audio tersebut. Selain itu terdapat juga tags yang dapat memudahkan user untuk melakukan pencarian sebelumnya. Di bagian halaman menu juga terdapat kolom komentar dimana user dapat memasukkan kritik/saran mereka tetapi sebelumnya mereka harus login terlebih dahulu dengan memilih beberapa icon social media yang telah disediakan.
10. Tampilan Menu Favorites
Pada halaman menu favorites ini, terdapat kumpulan-kumpulan program/event yang kita sukai yang dibedakan berdasakan kategori. Cara kita melihat daftar favorite adalah cukup melakukan swipe-up terhadap kategori yang ingin dilihat, kemudian mengkliknya apabila program/event tersebut ingin kita baca kembali.
11. Tampilan Menu About
Pada tampilan menu About halaman diatas, terdapat penjelasan singkat mengenai Radio Del FM yang bertujuan untuk memberitahukan user sekilas mengenai informasi berdirinya Radio Del FM. Setelah informasi tersebut terdapat perkenalan singkat dari crew Radio Del FM seperti nama dan jabatan crew tersebut. Jika kita ingin melihat secara keseluruhan informasi mengenai crew maka kita dapat menekan text “lihat semua” pada lurusan baris “crew”.
Selanjutnya pada bagian bawah halaman menu tersebut terdapat button yang berisi text “Hubungi kami” dan disertai dengan social media Radio Del FM yang dapat dihubungi oleh user secara langsung. Berikut adalah salah satu contoh apabila icon youtube dipilih oleh user:
Pada halaman ini terdapat program-program yang telah disambungkan ke dalam youtube. Program acara dikelompokkan dengan tersusun rapi sejajar ke bawah sehingga memudahkan user dalam membaca dan memilih program yang ingin ditonton. Program pada halaman ini disertai dengan judul kegiatan dan tanggal berlangsungnya kegiatan tersebut.
Pada halaman diatas terdapat cuplikan gambar dari program yang akan kita tonton, kita dapat menekan langsung icon play untuk memulai melihat video. Dibawah gambar tersebut terdapat judul program dan tanggal publikasi. User juga dapat melakukan beberapa aksi terhadap video youtube tersebut, seperti menambahkan program ke daftar favorite, menyimpan isi program atau bahkan membagikannya kepada orang lain. Pada bagian halaman menu terebut terdapat kolom komentar, dimana user dapat menambahkan komentar mereka terhadap video tersebut.
12. Tampilan Menu Setting
Halaman menu diatas sama seperti menu setting pada aplikasi biasanya. Terdapat 2 sub menu untuk mengatur beberapa fungsi, yaitu General dan Other. Desain pada menu ini hampir sama dengan desain menu sebelumnya, hanya saja saya menambahkan icon Radio Del FM sebagai background agar tidak terlihat terlalu polos.
13. Tampilan saat Loading
Tampilan pada gambar diatas adalah tampilan saat halaman menu pada aplikasi Radio Del FM loading atau sedang di refresh. Tampilannya yang digunakan sebagai bacground adalah logp Radio Del FM agar tidak terlihat terlalu polos ditambah dengan icon yang menenadakan bahwa halaman sedang loading.
3.2 User Interface Style Guide
Style Guide merupakan bagian penting dalam desain yang dapat digunakan sebagai panduan dalam merancang sebuah User Interface (UI). Adapun tujuan membuat Style Guide adalah sebagai berikut:
1. Membuat standarisasi tampilan aplikasi
2. Mempertahankan konsistensi
3. Sebagai pedoman bagi tim developer untuk menyusun layout aplikasi
Berikut saya lampirkan desain UI Style Guide dari hasil redesign aplikasi Radio Del FM:
1. Overview/Mission Statement
Overview merupakan sebuah pengantar yang erfungsi untuk menyajikan gambaran tujuan secara umum kepada user. Dengan kata lain dapat dikatakan bahwa overview menyatakan sebuah misi yang akan dicapai ketika nantinya membuka suatu aplikasi.
Seperti pada gambar diatas, overview yang dimaksud adalah “Connecting You to Toba”, yang bertujuan bahwa user akan terhubung atau mendengar layanan streaming radio yang terkoneksi di sekitaran daerah Toba.
2. Layout (Or Grid)
Layout yang digunakan pada desain baru aplikasi Radio Del FM adalah memiliki 4 Columns dengan masing-masing Guitter Width sebesar 10 px, Coloumn Width sebesar 64 px dan menggunakan Linked left/right margins sebesar 37 px sebagaimana tampak seperti tampilan berikut ini :
3. Typography
Berikut adalah elemen size dan font yang terdapat dalam aplikasi Radio Del FM, dimana didalamnya terdapat font weights, Headings, dan Body.
4. Colour
Berikut adalah daftar warna apa saja yang digunakan pada aplikasi Radio Del FM yang disertai dengan nama dan keterangan hexa code.
5. Branding
Berikut terdapat beberapa penggunaan logo yang digunakan pada aplikasi Radio Del FM:
6. Buttons
Berikut adalah beberapa button yang digunakan pada aplikasi Radio Del FM yan bertujuan untuk mengarahkan user kepada suatu aksi atau fitr yang ada didalam aplikasi Radio Del FM.
7. Dropdowns
Dropdown ini merupakan elemen yang apabila pointer berada di area menu yang akan menghasilkan suatu sub menu, seperti berikut:
8. Text Fields
Text Fields adalah sebuah text control yang memungkinkan user dapat menginput teks singkat kedalamnya. Berikut terdapat beberapa rancangan field yang terdapat dalam redesign aplikasi Radio Del FM, yaitu yang dibedakan berdasarkan Place Holder with icon, Place Holder without icon dan Text Fields
9. Icons
Icon merupakan salah satu elemen terpenting dalam suatu design yang bertujuan untuk memudahkan user dalam mengenali dan mengoperasikan fitur pada suatu aplikasi, seperti berikut:
10. Extras
Extras merupakan kumpulan dari beberapa elemen yang berisi checkboxes, tooltips, Radio dan slider seperti tampak pada gambar berikut:
11. Images
Images yang ditampilkan pada desain aplikasi Radio Del FM memiliki beberapa tampilan bentuk, seperti berikut:
