Redesign Radio Del FM

Maxvania Manurung
7 min readMay 24, 2020

--

NIM : 11S18050

Konsep Redesign Radio Del FM

Pengantar

Pada artikel kali ini, saya akan menjelaskan konsep redesign aplikasi mobile Radio Del FM yang telah saya buat.

1. Design Baru Aplikasi Radio Del FM

a. Splash screen

Splash Screen Radio Del FM

Splash Screen adalah tampilan pertama saat sebuah aplikasi pertama kali dibuka. Splash Screen pada aplikasi Radio Del FM yang sebenarnya berukuran sangat kecil. Pada konsesp redesign ini saya mengubah ukurannya menjadi lebih besar dan menambahkan sedikit shadow agar logo tampak lebih bercahaya dan terdapat terkesan menegaskan logo tersebut.

b. Live Streaming

Live Streaming saat play(kiri) dan saat di pause(kanan)

Halaman pertama yang ditampilkan pada aplikasi ini sesaat setelah splash screen adalah Live Streaming. Fitur ini akan langsung memutar radio yang sedang streaming. Dapat distop dengan menekan tombol pause dan diplay kembali dengan menekan tombol play. Halaman juga memuat informasi berupa program apa yang sedang streaming dan siapa penyiarnya.

Saya mengubah total konsep design halaman Live Streaming yang asli. Pada design yang asli, Live Streaming hanya memiliki tombol play/pause serta warna background biru saja.

c. News

Halaman News

Halaman selanjutnya adalah “News”. Halaman ini menampilkan daftar berita dan Bonpaspedia. Keduanya di kelompokkan dalam Lastest News dan Bonpaspedia. Kemudian berita-berita dan bonaspedia yang banyak memiliki pembaca akan masuk ke kategori Popular. Pengguna juga dapat mencari berita yang ingin mereka baca dengan mencarinya pada fitur “Cari Berita”.

Yang saya ubah dari design sebelumnya adalah, sebelumnya berita-berita dikelompokkan menjadi 3 bagian yaitu Lastest News, DelFM Update, dan Bonpaspedia. Namun, setelah saya lihat bahwa Lastest News dan DelFM Update tidak ada perbedaan maka DelFM Update saya tiadakan. Pada design sebelumnya juga berita-berita disusun ke bawah tanpa ada jarak dan ruang. Maka dari itu, saya mengubah bentuk susunan dan urutan berita menjadi ke samping sesuai dengan kelompok berita­- berita tersebut. Kemudian berita- berita yang memiliki banyak pembaca akan masuk ke kategori Popular. Selain itu saya mengubah letak fitur pencarian berita.

d. Program

Halaman Program(kiri) dan Halaman In Del Morning(kanan)

Halaman selanjutnya adalah Program. Jenis-jenis program dikelompokkan dalam Senin-jumat dan weekend, dan yang sedang streaming akan masuk ke kategori Now Streaming. Jika salah satu jenis program diklik, akan di arahkan ke informasi lebih lanjut mengenai program tersebut. Contohnya jika In Del Morning di klik akan memunculkan halaman mengenai In Del Morning (gambar kanan). Di halaman tersebut terdapat nama program, jadwal, penyiar, informasi atau deskripsi singkat mengenai program, dan sebuah button untuk menambahkan program tersebut ke daftar favorit.

Yang saya ubah dari design sebelumnya adalah pada halaman Program, daftar program disusun berurutan ke bawah dan ukuran gambar-gambar program terlalu besar serta memiliki jarak yang terlalu sedikit. Maka saya mengelompokkannya ke dalam 3 jenis dan mengecilkan ukuran gambar-gambar program. Saya juga menambahkan jarak antar gambar dan jarak antara gambar dan dinding aplikasi. Sedangkan yang saya ubah dari halaman tiap info program adalah selain merubah susunannya agar lebih aesthetic dan minimalis, saya menambahkan jam streaming dan nama penyiar di bawah nama program. Serta menambahkan button love agar pengguna dapat menambahkan program yang mereka sukai ke daftar favorite.

e. DSH

Halaman DSH

Halaman selanjutnya adalah DSH (Del FM Squad Hunt). Halaman ini merupakan halaman pendaftaran bagi pengguna yang ingin mendaftar menjadi salah satu penyiar Radio Del FM. Halaman ini sudah menyediakan format pendaftaran yang dapat diisi. Yang saya ubah dari design sebelumnya adalah format pendaftaran sebelumnya diisi ke dalam textfield berbentuk kotak. Saya juga menambahkan sedikit jarak antara gambar Pendaftaran DSH dengan dinding aplikasi.

f. Event

Halaman Event

Halaman selanjutnya adalah Event. Halaman ini menyediakan daftar event atau acara-acara yang diadakan oleh Radio Del FM. Pengguna juga dapat mencari event yang ingin mereka baca atau cari tahu dengan mencarinya pada fitur “Cari Riwayat Event”. Yang saya ubah dari design sebelumnya adalah penempatan judul serta tanggalnya. Saya juga mengubah posisi fitur percarian. Dan juga, saya menambahkan jarak antara media event dengan dinding aplikasi, serta menambahkan icon “save” agar pengguna dapat membacanya kembali.

g. Podcast

Halaman Podcast

Halaman selanjutnya adalah Podcast. Pada halaman ini terdapat beberapa list podcast yang dapat di dengar oleh pengguna. Dalam satu podcast, sudah terdapat tombol play, share, judul, gambar, tanggal terbit, dan informasi / deskripsi singkat mengenai podcast tersebut. Pada design yang asli, podcast di gambarkan seperti list berita tanpa ada tombol play. Tombol untuk play akan muncul pada halaman berikutnya jika judul podcast diklik.

h. Online Request

Halaman Online Request

Halaman selanjutnya adalah Online Request. Fitur ini adalah fitur pengganti “Topic Of The Day”. Fitur Topic of The Day tersebut saya ganti dengan fitur Online Request karena menurut saya fitur ini akan lebih bermanfaat. Online Request adalah sarana merequest secara online terkhusus bagi pengguna yang tunawicara dan tidak bisa menggunakan telepon untuk merequest. Namun, fitur ini tidak melarang atau membatasi siapa pun untuk memakainnya.

i. About Us

Halaman About Us

Halaman selanjutnya adalah About Us. Halaman ini berisi tentang Radio Del FM, Social Media Radio Del FM, dan Crews yang bekerja disana. Yang saya ubah dari design yang asli adalah:

1. Gambar ON AIR tersebut sebelumnya terlalu besar sampai memenuhi halaman ini. Maka, gambar tersebut saya perkecil dan diberi sedikit white space di sekitarnya agar ada jarak antara gambar dan dinding aplikasi.

2. Social Media sebelumnya berada di luar “About Us” dan “Hubungi Kami” kami sebelumnya merupakan button yang mengarahkan pengguna ke internet positif. Maka, saya ubah “Hubungi Kami” tersebut menjadi bukan button lagi dan social media saya gabung ke “About Us” dan untuk mengaksesnya hanya perlu menekan tiap icon yang ada.

j. Settings

Halaman Settings

Halaman selanjutnya adalah Settings. Halaman ini berisi peraturan aplikasi serta pusat bantuan dan dokumentasi mengenai aplikasi ini. Yang berbeda dari design yang asli adalah bagian Show side menu on start sebelumnya berbentuk ceklis, sedangkan pada konsep redesign ini saya ubah menjadi tombol switch on-off. Kemudian, saya juga menambahkan fitur “Help” yang sebelumnya tidak ada. Saya menambahkannya karena menurut saya ini sangan penting untuk menjadi pusat bantuan bagi pengguna yang membutuhkannya.

k. Menu Sidebar

Halaman Sidebar

Halaman selanjutnya adalah Menu Sidebar. Sidebar aplikasi ini yang akan muncul jika menekan button 3 garis di kiri atas akan menampilkan menu-menu yang ada. Yang saya ubah dari design sebelumnya hanyalah urutan menu dan penempatan serta low level feedbacknya, yaitu ketika menu di klik akan memberikan feedback perubahan warna font menjadi merah. Dan karena saya menggabungkan semua opsi social media ke dalam fitur “About Us”, maka saya menghilangkan opsi pilihannya dari sidebar tersebut.

2. User Interface Style Guide

1. Layout

  • Grid

Grid yang digunakan pada konsep redesign aplikasi ini adalah jenis grid multicolum. Desain grid terdiri dari 4 kolom dengan ukuran lebar kolom adalah 64 pixels, dan jarak antar kolom adalah 10 pixels.

Grid pada redesign aplikasi Radio Del FM.
  • Whitespace

Whitespace adalah space yang kosong dalam satu halaman atau jarak antara grafik, kolom, gambar, teks, margins, dan elemen lainnya.

Garis biru sebagai whitespace pada halaman Live Streaming(kiri) dan Event(kanan)
  • Patern

Pattern yang digunakan adalah pattern Z. Karena design pada aplikasi ini sedikit menampilkan teks dan membuat user menjelajahi seluruh halaman pada tiap fitur aplikasi ini.

Garis biru sebagai pattern pada halaman program(kiri) dan news(kanan)

2. Warna

Warna adalah suatu kumpulan petunjuk prinsip-prinsip yang bisa kita gunakan untuk membuat harmonisasi kombinasi warna. Warna yang digunakan pada redesign aplikasi ini adalah:

Warna yang digunakan pada redesign aplikasi Radio Del FM

3. Typography

Typography memiliki dua elemen dasar yaitu font dan size.

Jenis , size, dan warna font yang digunakan pada redesign aplikasi Radio Del FM

4. Iconography

Icon adalah salah satu elemen terpenting dan yang paling sering muncul. Penggunaan icon sendiri bertujuan agar memudahkan pengguna dalam mengoperasikan fitur yang ada pada aplikasi Radio Del FM. Berikut icon-icon yang digunakan pada redesign aplikasi ini:

Icon-icon yang digunakan pada redesign aplikasi Radio Del FM

5. Buttons

Penggunaan button bertujuan untuk mengarahkan pengguna ke suatu aksi pada fitur-fitur yang ada pada aplikasi Radio Del FM. Adapun buttons yang digunakan pada konsep redesign ini adalah:

Buttons yang digunakan pada redesign aplikasi Radio Del FM.

6. Branding

Penggunaan logo Radio Del FM pada redesign aplikasi ini.

Branding pada redesign aplikasi Radio Del FM.

7. Navigation

Bagian ini mencakup semua aturan terkait navigasi, seperti penggunaan search box, sidebar, menu dan drop-down. Berikut adalah beberapa navigasi pada redesign aplikasi radio Del FM ini.

Navigasi pada redesign aplikasi Radio Del FM.

8. Media Treatment

Bagian media treatment berupa media-media yang digunakan pada aplikasi ini. Gambar di bawah ini menunjukkan beberapa media yang ada pada aplikasi Radio Del FM. Untuk podcast, program, event, dan news menggunakan beberapa media gambar.

Media-media pada redesign aplikasi Radio Del FM.

--

--