Rancang Beranda yang Lebih Baik dengan Kerangka StoryBrand

Homepage seperti jendela toko. Mereka harus memberikan gambaran kepada konsumen tentang apa yang dilakukan bisnis, siapa yang menjalankan bisnis, dan setidaknya petunjuk tentang produk dan layanan yang ditawarkan, apakah itu barang yang sebenarnya untuk dijual, informasi, atau hiburan.

Sama seperti etalase toko, desain beranda dapat menarik orang untuk melihat lebih dalam, atau gagal menarik perhatian pengunjung (atau lebih buruk lagi, secara aktif mengusir mereka). Menyampaikan cerita merek dengan jelas adalah salah satu metode yang dapat digunakan desainer UX untuk membuat orang tetap berada di situs dan cukup terlibat untuk menjelajahi di luar beranda (kerangka kerja StoryBrand menyediakan peta jalan yang baik untuk ini).

Apa Tujuan dari Homepage?

Tujuan halaman arahan adalah untuk mengonversi pengunjung, sedangkan tujuan halaman beranda adalah untuk melibatkan pengunjung dengan merek dan menawarkan solusi untuk masalah mereka. Jika dilakukan secara efektif, pengunjung beranda dapat berubah menjadi pelanggan—berpotensi menjadi pelanggan tetap.

Beranda telah meningkat dengan cepat selama beberapa dekade terakhir berkat analitik dan tim pemasaran dan desain yang telah membuat peningkatan kinerja berdasarkan data tersebut.

Kembali pada tahun 1993, ketika hanya ada 600 situs web, satu-satunya metode untuk mengukur lalu lintas situs web adalah log server yang menghitung jumlah pengunjung. Berikutnya adalah penghitung hit, dan akhirnya suite analitik yang lebih komprehensif yang memberikan wawasan tentang hal-hal seperti pengunjung unik, tampilan halaman, dan rasio pentalan.

Dengan menggunakan data analitik itu, desainer UX dapat mengoptimalkan penempatan ajakan bertindak, meningkatkan kecepatan situs, pengujian A/B, menggunakan video untuk melibatkan pengunjung, menggunakan gambar berkualitas tinggi untuk menarik perhatian orang, dan menyertakan alat perpesanan untuk meningkatkan kinerja sebuah beranda. Namun, apakah hal ini akan menjamin loyalitas dan kepercayaan dari konsumen?

Tiga Kesalahan Umum Saat Merancang Beranda

Bisnis—dan oleh desainer ekstensi—mengalami tiga jebakan utama saat membuat beranda:

1. Mereka tidak fokus pada hal-hal penting. Mereka memberi tahu orang-orang semua tentang karakteristik layanan atau produk mereka. Orang-orang tidak peduli tentang ini. Mereka ingin tahu bahwa bisnis akan memecahkan masalah mereka dan meningkatkan kehidupan mereka.
2. Bisnis tidak mengkomunikasikan pesan mereka dengan jelas. Seperti yang dikatakan Tony Haile dari Chartbeat, sebuah situs web memiliki waktu kurang dari 15 detik untuk menarik perhatian pengunjung.
3. Mereka memiliki produk yang buruk yang tidak memecahkan masalah siapa pun. Tidak banyak yang dapat dilakukan seorang desainer untuk bisnis jika ini masalahnya.

Apa itu Kerangka StoryBrand?

Terlepas dari apa yang tampaknya diyakini oleh beberapa bisnis, logo tidak sama dengan merek. Jauh dari itu; sebuah merek adalah sebuah janji di baliknya terletak alasan mereka ada.

Orang memilih satu merek daripada merek lain karena alasan rasional dan emosional. Pesan merek yang kuat dapat menghasilkan loyalitas terhadap merek itu sendiri daripada hanya produk individual yang diciptakannya. Pesan yang jelas dan konsisten sangat penting untuk mencapai tujuan itu. Apa yang membedakan merek dari pesaingnya adalah cerita merek.

Mendongeng banyak digunakan oleh pengusaha untuk merayu investor dalam promosi dan jejaring sosial. Perusahaan seperti Apple memahami dan mengintegrasikan kekuatan penceritaan yang jelas dan sederhana dalam segala hal yang mereka lakukan. Mereka tahu ini bukan tentang mereka; ini tentang pelanggan mereka.

Kerangka kerja StoryBrand adalah formula bercerita yang dibuat oleh Donald Miller untuk membantu bisnis mengomunikasikan pesan mereka yang paling kuat secara sederhana dan jelas. Dalam bukunya Building a Story Brand , Miller menyatakan, “pelanggan Anda harus menjadi pahlawan cerita, bukan merek Anda. Inilah rahasia yang dipahami oleh setiap bisnis yang sukses secara fenomenal.”

Cara Menggunakan StoryBrand dengan Klien

Baik itu perusahaan kecil atau merek bernilai jutaan dolar, klien harus memahami bahwa membingungkan pelanggan mereka akan merugikan mereka. Mengklarifikasi pesan mereka melalui formula StoryBrand akan, seperti yang dikatakan Miller, "mengatur pemikiran mereka, mengurangi upaya pemasaran mereka, menghilangkan kebingungan, menakuti persaingan, dan akhirnya membuat bisnis mereka tumbuh lagi."

Miller membandingkan membangun StoryBrand dengan menulis cerita untuk skenario. Dia memecahnya menjadi tujuh poin plot.

Karakter yang menginginkan sesuatu (orang yang menggunakan situs web) menemui masalah (kebutuhan mereka), kemudian bertemu dengan pemandu (bisnis) yang memberi mereka rencana (menunjukkan langkah selanjutnya) dan memanggil mereka untuk bertindak (tombol ajakan bertindak), yang menghasilkan kisah sukses (mereka membeli produk) dan membantu mereka menghindari kegagalan (mengingatkan apa yang akan terjadi jika mereka tidak membeli).

Struktur ini dapat dikenali di hampir setiap film yang sukses. Ini juga dapat berlaku untuk bisnis dan pelanggannya. Langkah selanjutnya bagi klien untuk menulis kisah merek mereka mengikuti struktur ini:

1. Karakter : Pelanggan selalu menjadi pahlawan dalam cerita, bukan merek. Terserah desainer UX untuk mencari tahu apa yang diinginkan pelanggan dari merek, biasanya melalui penelitian UX dan pengujian pengguna. Mereka perlu fokus pada keinginan yang mendorong orang, hal-hal seperti menghemat sumber daya keuangan, menghemat waktu, membangun jaringan sosial, atau mendapatkan status.
2. Memiliki masalah : Penjahat di arc StoryBrand adalah masalah karakter. Sangat berguna untuk mempersonifikasikan masalah itu dan memahami bahwa produk perusahaan seperti senjata yang dapat digunakan pelanggan untuk mengalahkannya. Perusahaan cenderung berfokus pada pemecahan masalah eksternal, tetapi pelanggan membeli solusi untuk masalah internal . Orang memiliki tiga tingkat konflik:
   - Eksternal (kebanyakan bisnis mencoba memecahkan masalah eksternal)
   - Internal (seperti frustrasi, intimidasi, rasa tidak aman)
   - Filosofis (mengapa cerita ini penting?)
3. Dan memenuhi panduan : Panduan adalah bisnis atau merek. Pelanggan membutuhkan seseorang untuk menangani masalah tersebut. Persepsi mereka tentang merek akan sangat penting untuk kepercayaan mereka. Dua hal yang harus dikomunikasikan:
   - Empati (menunjukkan pemahaman tentang rasa sakit yang mungkin dirasakan pelanggan)
   - Otoritas (akan memberikan kepercayaan pelanggan bahwa merek mampu membantu mereka)
4. Siapa yang memberi mereka rencana : Bisnis menunjukkan kepada pelanggan apa yang perlu mereka lakukan selanjutnya. Pelanggan masih tidak yakin apakah akan membeli sampai ditunjukkan rencana tindakan sederhana. Desainer UX dapat menjelaskan langkah selanjutnya yang tepat untuk pelanggan. Mereka juga dapat mengurangi kecemasan apa pun yang mungkin dimiliki pelanggan dengan mengatasi masalah yang terkait dengan produk atau layanan.
5. Dan mengajak mereka untuk bertindak : Ajakan bertindak yang efektif memfasilitasi pembelian atau pendaftaran.
6. Itu membantu mereka menghindari kegagalan : Apa yang dipertaruhkan bagi pelanggan? Apa kerugian mereka jika tidak membeli dari merek ini?
7. Dan berakhir dengan sukses : Beri tahu pelanggan bagaimana tindakan spesifik ini dapat mengubah hidup mereka. Tunjukkan pada mereka seperti apa kehidupan mereka nantinya setelah mereka membeli produk dan bagaimana perasaan mereka terhadap resolusi itu. Tiga cara yang solid pendongeng mengakhiri cerita adalah dengan membiarkan karakter untuk:
   - Menangkan kekuatan atau posisi
   - Temukan seseorang atau sesuatu yang membuat mereka utuh
   - Alami beberapa bentuk realisasi diri yang juga membuat mereka utuh

Cara Menggunakan Kerangka StoryBrand di Beranda

Sebuah homepage tidak boleh tentang bisnis. Ini harus tentang pelanggan potensialnya.

Seperti pada kencan pertama, kesan itu penting dan tujuannya adalah untuk membangkitkan minat. Desainer UX harus strategis dalam konten apa yang disertakan dan bagaimana pengaturannya. Mengikuti kerangka kerja seperti yang dijelaskan di bagian sebelumnya akan membantu desainer memastikan pesan yang tepat diletakkan di tempat yang tepat.

Meskipun mungkin terdengar sederhana, hanya ada lima elemen penting yang perlu diingat saat mendesain beranda.

Judulnya

Judul, terkadang digunakan dalam kombinasi dengan gambar yang menarik, ditempatkan di bagian atas beranda. Dalam hampir setiap kasus, headline harus berpusat pada pelanggan dan menunjukkan kepada pengunjung bahwa merek memiliki sesuatu yang menguntungkan mereka. Judul harus:

• Komunikasikan manfaat kepada pelanggan
• Identifikasi masalah yang dimiliki pengunjung dan yakinkan mereka bahwa merek dapat menyelesaikannya untuk mereka
• Jelaskan apa yang dilakukan bisnis dengan cara yang jelas dan ringkas

Ciptakan Kepercayaan dengan Menunjukkan Otoritas

Sangat penting untuk memposisikan bisnis sebagai panduan dan solusi untuk masalah pelanggan. Desainer UX yang menguasai seni menciptakan kepercayaan akan lebih mudah meyakinkan orang bahwa merek khusus ini adalah solusi yang tepat untuk masalah mereka. Mereka dapat melakukan ini dengan:

• Termasuk testimonial dari pelanggan penting yang merekomendasikan merek tersebut
• Menampilkan logo perusahaan yang pernah bekerja sama dengan merek tersebut
• Menampilkan data spesifik seputar jumlah pengguna, transaksi, dll.
• Menampilkan penghargaan dan penghargaan, karya yang diterbitkan, penampilan media, dan pencapaian serupa
• Menampilkan gambar tim atau kantor pusat perusahaan

Panggilan untuk bertindak

Menciptakan hubungan emosional dengan pengunjung beranda adalah langkah pertama dalam mengubah mereka menjadi pelanggan. Setelah hubungan emosional itu dibuat, terserah pada ajakan bertindak untuk menyegel kesepakatan.

Ada dua jenis ajakan bertindak:

1. Ajakan bertindak langsung ditujukan untuk orang-orang yang tahu bahwa mereka siap untuk membeli atau mendaftar, dan menyertakan bahasa seperti "Beli", "Daftar", atau "Mulai". Mengklik CTA ini akan membawa pembeli langsung ke formulir untuk menyelesaikan transaksi mereka.
2. Ajakan bertindak transisional ditujukan bagi pengunjung yang belum siap untuk membeli. Mereka mungkin membutuhkan lebih banyak waktu dan informasi sebelum mereka berkomitmen. Ini datang dalam bentuk tombol "Info selengkapnya", "Coba gratis", atau "Hubungi".

Beberapa ajakan bertindak dapat menggabungkan keduanya, atau menempatkannya secara berdampingan (seringkali terlihat sebagai sepasang tombol “Beli Sekarang” dan “Pelajari Lebih Lanjut”).

Gambar yang Menarik

Terlepas dari seberapa serius konten beranda, kerangka kerja StoryBrand menuntut akhir yang bahagia. Saat memilih gambar, ingatlah bahwa beberapa di antaranya harus memberikan perasaan "bahagia selamanya".

Gambar menarik emosi pengunjung, terutama gambar orang bahagia. Menampilkan foto orang-orang yang bahagia membantu orang-orang membayangkan seperti apa akhir bahagia mereka jika mereka melakukan pembelian.

Teks pendek

Semakin sedikit teks, semakin baik. Banyak konsumen tidak akan membaca blok teks yang panjang, jadi yang terbaik adalah menyampaikan pesan merek dalam kata-kata sesedikit mungkin.

Desainer UX harus membantu klien berbagi cerita mereka dengan cara yang paling sederhana.

Beranda Berhasil Menjawab Pertanyaan Kunci

Beranda yang berhasil akan dapat menarik minat pengunjung dalam waktu kurang dari lima detik. Dari sana, akan ada waktu sekitar 15 detik untuk menjawab tiga pertanyaan yang diajukan orang pada diri mereka sendiri (seringkali secara tidak sadar) saat mengunjungi beranda:

• Apa yang mereka lakukan?
• Bagaimana mereka bisa membantu saya?
• Apa yang harus saya lakukan untuk membeli atau terlibat?

Desainer UX dapat menggunakan kerangka kerja StoryBrand untuk membuat beranda yang langsung menarik minat dan menjawab pertanyaan tersebut secara efektif. Ini menawarkan jalan yang jelas untuk sukses bagi desainer dan merek.

Beri tahu kami pendapat Anda! Silakan tinggalkan pemikiran, komentar, dan umpan balik Anda di bawah ini.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• Apakah Semua Tren Layak? 5 Kesalahan UX Paling Umum yang Dilakukan Desainer Web
• Cara Mendesain Halaman Arahan yang Efektif
• Dibangun Untuk Mengkonversi – Praktik Terbaik Desain Halaman Arahan
• Panduan Utama untuk Desain Situs Web eCommerce
• Panduan Komprehensif untuk Arsitektur Informasi