Vidio Design Challenge — Live Concert & Podcast Apps

as part of Vidio Design Challenge

Background

Pandemi COVID-19 membawa dampak pada behavior kita ketika akan melakukan kegiatan. Semua kegiatan offline, sekarang ditransisikan menjadi kegiatan online termasuk konser, workshop & seminar. Vidio melihat hal ini sebagai peluang untuk merambah ke pasar Audio Stream & Live Event (e-concert)

Desk Research

dari latar belakang tersebut, muncul beberapa pertanyaan tentang live konser dan Audio Streaming

Mengapa orang mau nonton koser?

Hasil desk research, kenapa orang mau nonton konser

Mengapa orang mau dengerin Audio Stream?

Hasil desk research, kenapa orang mau dengerin Audio Stream

lalu…

Bagaimana caranya agar kita dapat membawa vibes konser offline ke e-concert agar motivasi dari pengguna akan meningkat?

Bagaimana caranya agar kita dapat meningkatkan discoverability pada konten podcast?

Current Design

karena adanya penambahan tipe konten pada Vidio, yaitu audio stream & live concert. Maka perlu dilakukan pengubahan pada alur navigasi di Aplikasi. Untuk itu, saya mencoba untuk melakukan audit sederhana agar dapat mengetahui bagaimana alur navigasi yang baik setelah penambahan konten baru.

Live page, yang berisi konten-konten live stream di Vidio

Bottombar pada aplikasi Vidio

High Level User Flow

Setelah melakukan audit sederhana, saya mencoba membuat high level user flow untuk menggambarkan bagaimana alur user saat akan mengakses konten

Flow untuk live konser

Flow untuk audio stream

Wireframe

Kemudian saya membuat wireframe untuk membuat gambaran layout atau design sederhana untuk menuangkan ide dengan lebih cepat. Saya menggunakan paper wireframe karena lebih simpel dan tidak banyak kompleksitas dari aplikasi

Wireframe untuk redesign dan penambahan fitur baru

High Fidelity Design

Setelah membuat wireframe dan high level user flow, saya mulai masuk ke high fidelity design

Bottombar

New Bottombar Concept

1. Penambahan menu podcast pada bottombar karena podcast memiliki format yang berbeda dibandingkan konten lainnya (stream audio vs video)
2. Menu live yang dipindahkan ditengah dan memiliki state aktif yang berbeda agar mendapatkan center stage effect dengan harapan user akan lebih banyak mengakses live content
3. Menu yang sebelumnya menggunakan copy watchlist, diganti menjadi Koleksi agar tetap sesuai konteksnya dengan penambahan konten podcast
4. Menu games yang sebelumnya berada pada barisan terakhir dari bottomBar, diganti menjadi menu akun yang dapat mempermudah user baru untuk beradaptasi dengan Vidio. Menu games dapat dijadikan shortcut pada homescreen dan sekarang pun sudah ada floating bar.

Live Page

Konsep halaman Live konten

1. Shortcut Changes: Menu yang disimplifikasi dengan membuat grup berdasarkan tipe konten yang akan di deliver. Tujuannya agar user dapat menemukan tipe konten yang diminati dengan lebih cepat. Pada shortcut juga ditambahkan dua konten baru, Konser & Webinar
2. Hierarki changes: Konten yang sedang live, dalam contoh kasus ini adalah konser, ditaruh dibagian atas agar ketika user pertama masuk ke menu live sudah dapat melihat konten apa atau siapa yang lagi melakukan siaran langsung.
3. Viewers count: Menampilkan jumlah viewers pada konten atau seseorang yang sedang melakukan siaran langsung untuk membuat efek social proof, dengan harapan user yang melihat viewers count tinggi akan ikut tertarik untuk melihat konten tersebut.

Live Concert Player

konsep halaman live konser

1. VOD/Live Ekslusif: Dengan adanya tag status tersedia atau tidaknya VOD untuk suatu konser online, akan memunculkan efek scarcity dan membuat kesan exclusive. Berkaca pada konser offline, momen pada suatu konser offline belum tentu bisa dirasakan kembali dan hal ini yang mau coba dibawa
2. Social Button & Live Chat: Untuk memunculkan vibes yang sama, user dapat berinteraksi dengan penonton lainnya melalui fitur chat. User juga dapat memberikan apresiasi kepada musisi dengan memberikan gift sekaligus berlomba menjadi top fans dari musisi. Ketika memberikan gift, user akan mendapatkan spotlight effect karena bentuk chatnya yang akan berbeda sendiri.
3. Top Fans: Leaderboard untuk user yang menonton live concert, dimana user akan mendapatkan point dari menonton konser, memberikan gift, maupun membagikan konser. Ide bisnis mungkin, top fans 1–4 dapat memperoleh hadiah exclusive dari musisi

Upcoming Concert

Konsep halaman konser mendatang

1. Calendar: Pada halaman konser yang dapat diakses pada shortcut dihalaman live, terdapat beberapa section (konser for you, mendatang & sudah beli). Pada bagian konser mendatang dibuat seperti kalendar dalam format hari.
2. Countdown + Reminder: Countdown selain berperan sebagai informasi kapan konser akan dimulai, countdown juga dapat berperan sebagai time scarcity yang dapat memotivasi user untuk melakukan pembelian tiket. Reminder nantinya akan berperan sebagai signal prompt ke user untuk membuka aplikasi dan melihat konser.
3. Attendee: Jumlah orang yang datang + beberapa foto user yang datang berperan sebagai social proof kalo ada orang lain yang ikut konser ini. Foto juga memberikan efek emosional karena yang terlihat bukan cuma angka tapi ada wajah orang.

Podcast Page

konsep halaman podcast

1. Continue Section: Section yang muncul ketika user sudah pernah mendengarkan podcast tapi belum selesai mendengarkannya. Section ini berperan sebagai shortcut untuk user agar bisa kembali mendengarkan lagi
2. Copy Informatif: Copy yang digunakan informatif & tapi casual agar muncul kesan intim/friendly. Section banyak didengar memanfaatkan social proof dengan harapan user juga akan mendengarkan podcast tersebut

Podcast Player

Konsep player podcast

1. Podcast Type Switch: Memperkuat kesan flexible dari podcast dimana adanya switch ini dapat mengakomodri user yang lebih senang dengan visual maupun pendengar biasa. Sekaligus tetap membawa brand Vidio sebagai platform streaming Video di Indonesia.
2. Media Control: Memberikan user kebebasan untuk mengatur playback dari podcast. selain itu juga memberikan informasi tentang progress podcast yang sudah didengar
3. Related Content: Section yang memunculkan podcast episode selanjutnya yang dapat berperan sebagai trigger user agar berlama-lama dalam aplikasi

Prototype

Konsep Prototype dengan figma

Takeaways

Dari challenge ini, saya belajar bahwa untuk membawa kan experience sebuah kegiatan offline menjadi online, kita perlu memahami dengan baik bagaimana kegitan offline (eg: Konser) tersebut bekerja. Karena user sudah memiliki mental model atau gambaran bagaimana sebuah konser seharusnya bekerja.

Apa yang bisa di Improve?

Ada beberapa celah yang bisa di Improve, salah satunya mungkin dari bagaimana kita dapat membawakan vibes konser offline ke dalam konser online. Karena Vibes dan Keotentikan sebuah konser menjadi motivasi utama mengapa seseorang mau mengikuti konser. Sehingga, untuk melakukan improve pada design ini, kita perlu memperhatikan hal tersebut. Contoh yang dapat dilakukan mungkin seperti penambahan reaction emoji ataupun konten ekslusif yang hanya one time only.

PS: I need feedback, feel free to leave your critics or feedback regarding my design or writings.
Thank you for reading my case study! and give a clap👏🏻 if you like it but still don’t hesitate to leave your comments 😁

Mata Ao!