Mamikos Booking — Studi kasus optimasi UI/UX untuk Landing Page
Membuat sebuah desain landing page selalu menjadi tantangan yang exciting buat saya, baik dari segi UI, UX, bahkan aspek bisnis nya…
The Brief…
Beberapa bulan belakangan ini tim UI/UX Mamikos sedang disibukan oleh banyak project. Mulai dari produk baru hingga optimasi produk-produk yang sudah berjalan selama ini.
Salah satu project yang mendarat di meja saya adalah Mami Booking (Atau bisa disebut juga #BisaBooking). Sesuai nama nya, fitur ini memungkinkan pencari kost untuk melakukan booking pada kost pilihan nya, sebelum menempati kost tersebut.
Saya diminta untuk membuat satu buah landing page yang tujuan nya mengkonversi pemilik kost (Selanjutkan akan disebut Owner) untuk mengaktifkan fitur #BisaBooking pada “lapak” kost nya.
What makes a good landing page
Karena setiap landing page biasanya dibuat dengan tujuan marketing tertentu, mulai dari menambah user, menambah pembeli, dsb, maka sukses tidaknya sebuah landing page sangat bergantung dari seberapa menarik dan efektif nya desain yang kita buat:
Berikut ini adalah beberapa poin penting yang harus di perhatikan ketika membuat sebuah desain landing page:
- Memilik satu goal atau tujuan jelas (Misal: Mencari user sebanyak-banyaknya).
- Memiliki minimal satu buah CTA (Call to Action) button. Sehingga user bisa dengan mudah bergabung kapan saja.
- Landing page harus dibuat dengan visual hirarki yang jelas dan teratur. User harus dengan mudah membedakan mana bagian heading, mana bagian hero, mana bagian konten utama, mana footer, dsb.
- Informasi yang compact dan mudah di scan. Menurut Nielsen Norman Group, 79% user hanya melakukan scanning pada website yang mereka lihat, dan hanya 16% yang benar-benar membaca setiap kata nya.
- Memiliki Social Proof. Social proof bisa berbentuk testimonial, statistik & data atau ratings & reviews. Social proof bisa menjadi salah satu jalan efektif untuk meningkatkan kepercayaan user.
The Goals
Setidaknya ada 2 goal yang harus dicapai pada setiap landing page, apapun bentuk dan tujuan nya:
- Business goal
- Conversion goal
Pada kasus ini, goal yang di tuju Mamikos adalah:
Business goal:
Membuat sebanyak-banyak nya user menggunakan fasilitas Mami Booking.
Conversion goal:
User masuk kedalam akun mereka, dan mengaktifkan fitur booking sesegera mungkin.
Who are the audiences
Ada hal menarik yang saya temukan selama bergabung di Mamikos. Hal ini pula lah yang semakin menegaskan kalau, Kita tidak selalu tahu tentang user kita sendiri. Terkadang kita hanya… Well… Sok tahu.
Selama ini saya beranggapan, kalau Owner adalah user dengan rentang umur 40 atau 50 tahun ke atas, atau dengan kata lain, mereka adalah orang tua (senior). Yah walaupun hal tersebut benar, tetapi tidak sepenuh nya benar.
Selama saya melakukan testing dan interview kepada owner, lebih dari setengah yang saya temui, adalah anak muda. Bahkan ada yang umur sekitar 20 tahun’an, dan masih berkuliah. Sebagian lagi masih terbilang cukup muda dengan rentang umur 30 tahun’an.
Mereka adalah millenials yang cukup “melek” dengan teknologi dan tren saat ini. Selama ini saya merasa kami melakukan suatu kesalahan yang sangat fundamental: Desain Mamikos tidak cukup “ciamik” untuk membuat owner millenial tertarik, sedangkan owner senior juga tidak cukup peduli.
The challenge
Jika kita gabungkan antar Goal dan Audience, kita bisa mulai menarik benang merah nya, dan apa saja tantangan yang harus kita solve dengan landing page yang akan kita buat:
- Desain landing page harus lah modern dan clean, agar owner millenial tertarik, tetapi masih cukup mudah dimengerti oleh owner senior.
- Keseluruhan bagian landing page harus dibedakan dengan visual hirarki top-to-bottom yang jelas.
- Setiap bagian landing page haruslah mengarahkan user ke conversion, dengan meletakan CTA ditempat-tempat yang mudah ditemukan.
- Landing page harus dengan jelas menunjukan apa saja benfits yang akan diterima user jika bergabung.
Let’s start: Wireframe
Mari kita mulai dengan membuat wireframe dan information architecture nya. Pada tahap ini kita menyusun informasi apa yang perlu dilihat pengunjung. Wireframe ini akan sangat simple, dan harus clutter-free:
Seperti yang bisa Anda lihat, landing page ini terdiri dari 5 bagian penting:
- Hero/headline
- Social Proof
- Konten utama
- Tabel komparasi
- Bottom CTA
Dengan ini kita sudah siap untuk mulai mendesain. Now, let’s roll’!
The Design
1. Hero/Headline
Hero atau headline adalah hal pertama yang akan dilihat oleh pengunjung. Maka pastikanlah bagian ini adalah bagian terbaik dan yang paling attention-grabbing dari landing page Anda.
Bagian Hero haruslah clear, relevan dan menjelaskan apa keuntungan yang akan didapatkan oleh user Anda secara gambaran besar-nya:
Usahakan untuk selalu menempatkan konten penting mulai dari sebelah kiri. Alasan nya karena sebagian besar orang membaca mulai dari kiri ke kanan. Hal itu akan memudahkan mereka melakukan scanning pada konten.
Pastikan juga teks headline terbaca dengan jelas dan tegas, dan mampu menarik perhatian. Anda bisa mencoba menggunakan teks bold dan besar. Setelah itu jangan lupa menempatkan button CTA pada headline.
Saya juga membuat pola huruf “F” pada headline karena berdasarkan penelitian yang dilakukan Neilsen Norman Group terhadap 232 partisipan, user memiliki pattern atau pola membaca yang selalu sama, yaitu membentuk huruf “F”:
2. Social Proof
Social proof adalah klaim yang disampaikan oleh landing page, yang ditujukan untuk lebih meyakinkan user. Social proof bisa berbentuk testimonial, statistik, rating, review, dsb.
3. Main Content
Pada bagian ini kita harus bisa menunjukan apa saja benefits yang akan diterima user jika menggunakan produk kita. Buatlah konten yang relevan dengan produk kita, dan fokuslah pada kelebihan apa yang kita tawarkan kepada user.
Segala bentuk fitur-fitur canggih yang produk kita milik, haruslah diterjemahkan menjadi keuntungan bagi user:
Buatlah visual hierarchy dengan sungguh-sungguh, dan jelas. Karena pada bagian inilah biasanya banyak landing page yang “gagal” untuk men-deliver value prop mereka.
Perhatikan penempatan, posisi atas bawah, ukuran dan separation atau pemisah antar bagian nya. Berikan white-space yang cukup, agar konten bisa “bernafas”, dan user bisa melakukan scanning dengan nyaman.
Semua aset pendukung seperti gambar, foto atau video, juga haruslah berkualitas tinggi, tidak buram dan harus relevan dengan konten-nya. Aset pendukung berkualitas tinggi bisa mencerminkan profesionalisme Anda.
4. Comparison Table
Bagian ini hanya spesifik pada kasus ini. Saya ingin menunjukan apa saja kelebihan yang ditawarkan Mami Booking, dibandingkan produk standar-nya, tetapi ada trik menarik yang saya terapkan pada bagian ini:
Kalau Anda perhatikan, bagian #BisaBooking adalah yang paling mencolok dan menarik perhatian, dibanding fitur standar nya. Anda tentu sering melihat pola seperti ini dibanyak website. Kenapa orang-orang melakukan itu?
Ada sebuah hukum atau law dalam dunia UX dan psikologi yang disebut dengan Von Restorff Effect. Intinya adalah, ketika ada beberapa objek yang mirip, salah satu yang berbeda akan lebih menarik perhatian dan paling mudah di ingat. Contoh nya seperti notifikasi pada smartphone kita:
Dengan memanfaatkan hukum ini, saya berusaha menonjolkan produk yang ingin saya push kepada user, agar perhatian dan memori mereka lebih tertuju pada produk tersebut.
Trik ini pasti akan sangat berguna sekali jika Anda memiliki banyak produk sekaligus, tetapi ingin mengarahkan user pada produk tertentu saja.
5. Bottom CTA
Setelah user membaca atau melakukan scanning pada seluruh halaman, dan setelah mereka sudah familiar dengan produk apa yang saya tawarkan, maka the last push dari saya untuk meyakinkan mereka adalah dengan membuat Bottom CTA, atau CTA yang ditaruh di bawah (bottom) sebelum footer :
Tujuan dari bottom CTA adalah agar user yang sudah yakin, bisa langsung mencoba produk yang saya tawarkan tanpa harus melakukan scrolling ke atas lagi untuk mencari button CTA.
Buatlah bottom CTA yang meyakinkan, jelas, dan menarik. Karena bisa saja last push ini menjadi penentu apakah user akan mencoba produk kita atau tidak.
Takeaways
Proses pembuatan landing page membutuhkan banyak perhatian khusus, mulai dari UI, UX bahkan Writing nya. Target-nya adalah bukan “memamerkan” skill visual Anda, tetapi bagaimana conversion goal dan business goal bisa tercapai.
Lakukanlah riset mendalam terlebih dahulu tentang siapa target audience Anda, apa produk Anda, dan apa saja benefit yang Anda tawarkan. Selalu ingat kalau user tidak membeli fitur, tetapi “membeli” benefit apa yang akan mereka dapatkan.
Closing
Baik tulisan maupun desain ini masih sangat jauh dari kata sempurna, karena penulis sendiri masih dalam proses belajar. Segala bentuk saran dan kritik yang membangun, akan sangat direrima :)
