Praktik Terbaik UX dan UI Kartu Hadiah

Diterbitkan: 2022-04-18

Tidak mengherankan bahwa kartu hadiah telah menjadi topik hangat di e-niaga. Mereka tidak hanya bagus untuk mengungkapkan rasa terima kasih dan kasih sayang tetapi juga merupakan solusi efektif untuk beberapa dilema pembelian yang meningkat ketika Anda kehabisan waktu untuk menemukan ide cerdas untuk hadiah.

Daftar Isi

  • Rancang jalur pembelian terpisah untuk kartu hadiah
  • Buat halaman arahan terpisah yang mencantumkan semua opsi pemberian hadiah
  • Sediakan bagian terpisah bagi pelanggan untuk memeriksa status kartu hadiah
  • Promosikan kartu hadiah di banyak tempat
  • Rancang perjalanan pembelian kartu hadiah
  • Memilih jenis hadiah
  • Memilih format kartu
  • Memilih tanggal pengiriman (opsional)
  • Memilih jumlah kartu hadiah
  • Memberikan informasi penerima
  • Personalisasi kode kartu hadiah
  • Memilih template voucher hadiah
  • Mengunggah foto untuk menyesuaikan kartu
  • Proses checkout
  • Kirim kartu ke penerima melalui beberapa saluran
  • Munculkan desain email yang efektif
  • Menebus kartu hadiah‍
  • Izinkan penukaran sebagian
  • Rancang bidang masukan kartu hadiah
  • Buat pesan sukses dan pesan kesalahan
  • Desain pemberitahuan kedaluwarsa kartu hadiah
  • Ringkasan
Hampir $ 3 miliar uang tunai kartu hadiah tidak digunakan pada tahun 2019 saja. Sementara itu, total pengeluaran kartu hadiah pada tahun 2019 mencapai $98,6 miliar. Sumber

Mengetahui bahwa kartu hadiah adalah alat yang sangat ampuh, ada baiknya untuk menyederhanakan proses pembelian dan penukaran kartu hadiah. Tetapi bagaimana seharusnya bidang input dirancang? Di subhalaman mana mereka harus dipromosikan? Dan bagaimana seharusnya tampilan pembelian dan penukaran kartu berdasarkan prinsip-prinsip UX?

Postingan blog ini mengumpulkan praktik dan inspirasi terbaik untuk mendesain UX dan UI kartu hadiah untuk situs web dan seluler. Kami akan membahas seluruh perjalanan pelanggan mulai dari mempromosikan kartu hadiah di situs Anda hingga menyelesaikan proses pembelian, membagikan kartu dengan penerima yang beruntung, dan akhirnya, menukarkan kartu di toko Anda.

{{EBOOK}}

{{BUKU AKHIR}}

Catatan: Semua tangkapan layar desktop dibuat di Mac, Chrome.

Catatan: Fokus utama posting ini adalah kartu hadiah yang dapat dibeli baik sebagai kode digital atau kartu cetak. Jika Anda ingin mempelajari lebih lanjut tentang menggunakan kartu hadiah sebagai alat promosi dan insentif, saya sangat menyarankan untuk membaca panduan UX kami untuk kupon dan promosi .

Rancang jalur pembelian terpisah untuk kartu hadiah

Jalur pembelian untuk kartu hadiah dapat sangat berbeda dari perjalanan pelanggan standar, terutama jika Anda menawarkan voucher hadiah digital. Inilah sebabnya mengapa itu harus dirancang sebagai modul terpisah dari situs Anda. Sebagian besar jalur pembelian kartu hadiah akan mengarah ke beberapa langkah penting yang perlu tercermin dalam desain UI Anda:

  • Pertama, temukan bagian kartu hadiah di toko Anda.
  • Memilih format dan template kartu hadiah (disarankan).
  • Memilih nilai kartu.
  • Mengatur metode dan tanggal pengiriman.
  • Mengisi informasi penerima dan pesan yang akan dikirimkan dengan kartu.
  • Periksa.

Seperti yang Anda perhatikan, proses ini bervariasi dari pembelian produk standar di mana produk ditambahkan ke troli, dan tidak ada detail tambahan yang perlu diberikan. Inilah sebabnya mengapa Anda perlu mengembangkan desain yang berbeda untuk bagian ini yang berbeda dari halaman tampilan produk standar Anda. Tapi lebih lanjut tentang itu nanti.

Posting ini ditulis terutama untuk kartu e-gift. Jika Anda hanya menawarkan voucher hadiah di lokasi fisik, berikut adalah daftar praktik terbaik UX untuk kartu fisik:

  • Buat mereka menarik – desain dapat memutuskan apakah pelanggan akan memperhatikannya dan mempertimbangkan untuk membeli.
  • Bungkus mereka – masukkan kartu ke dalam amplop dan sediakan ruang bagi pelanggan untuk menulis pesan pribadi atau harapan terbaik.
  • Letakkan di pajangan – letakkan di mana-mana dan buat mereka tidak mungkin diabaikan (misalnya, meja kasir).
  • Jadikan mereka ramah seluler – pastikan penukaran seluler dan izinkan pelanggan menukarkan kartu hadiah yang ditampilkan di perangkat seluler. Misalnya, dengan menggunakan kode QR atau barcode yang dapat dipindai dan disimpan di perangkat seluler.

Namun, jika Anda beralih ke digital, berikut adalah beberapa panduan utama untuk memastikan bahwa perjalanan kartu hadiah Anda dirancang dengan tepat dari perspektif UX dan UI.

Buat halaman arahan terpisah yang mencantumkan semua opsi pemberian hadiah

Sekarang setelah Anda mengetahui tentang perlunya menginvestasikan sedikit lebih banyak waktu untuk merancang modul pemberian Anda, menjadi jelas bahwa Anda juga memerlukan halaman arahan. Laman landas kartu hadiah Anda harus menjelaskan dengan jelas opsi kartu hadiah yang tersedia. Ini harus menampilkan desain kartu yang berbeda (jika Anda menawarkan banyak) dan menyajikan opsi pengiriman kartu yang berbeda (jika Anda memberikan email dan cetak). Disarankan juga untuk menempatkan beberapa FAQ atau T&C di sana untuk menawarkan informasi tambahan kepada calon pembeli.

Contoh:

Zalando memiliki halaman arahan khusus untuk mempromosikan kartu hadiah mereka. Dari tampilan ini, calon pembeli dapat melihat semua opsi personalisasi yang memungkinkan dan memilih antara kartu standar dan kotak hadiah.

Opsi penyesuaian kartu hadiah Zalando di halaman arahan mereka

Winc, bisnis e-niaga anggur, menyertakan bagian FAQ di halaman arahan kartu hadiah mereka dengan salinan pintar.

Bagian FAQ Winc tentang kartu hadiah

Anda dapat menggunakan halaman arahan tidak hanya untuk memamerkan penawaran Anda, tetapi juga untuk memungkinkan pelanggan memeriksa saldo kartu mereka saat ini. Beberapa perusahaan juga menggunakan ruang ini untuk memungkinkan pengguna mengisi ulang kartu yang sudah mereka miliki.

Sediakan bagian terpisah bagi pelanggan untuk memeriksa status kartu hadiah

Tidak masalah jika Anda menawarkan kartu hadiah sebagai insentif atau produk yang dapat dibeli, tetap disarankan untuk menyediakan ruang terpisah bagi pengguna untuk memverifikasi status kartu mereka. Anda dapat mengizinkan pelanggan untuk memeriksa validitas kartu, saldo saat ini atau bahkan mengisi ulang kartu atau mentransfer kredit ke kartu lain.

Contoh:

Shein memiliki widget kecil di bagian kartu hadiah mereka yang memungkinkan pelanggan untuk memeriksa saldo kartu hadiah mereka menjadikan ruang ini tempat tujuan untuk apa pun yang terkait dengan kartu hadiah.

Bagian Shein untuk memeriksa saldo kartu hadiah

Starbucks memungkinkan pengguna memeriksa saldo, mentransfer saldo, melaporkan masalah apa pun, atau memuat ulang kartu di bagian halaman yang terpisah.

Halaman arahan Starbucks dengan beberapa opsi untuk kartu hadiah

Promosikan kartu hadiah di banyak tempat

Selain membuat halaman arahan untuk kartu hadiah Anda, Anda harus membuat bagian toko Anda ini mudah diakses oleh calon pelanggan. Anda tidak akan melihat banyak pendapatan mengalir dari pemberian hadiah jika pelanggan tidak dapat dengan mudah menemukan kartu di situs Anda. Informasi tentang kartu hadiah harus ditempatkan di bilah navigasi halaman dan footer. Jika kartu hadiah adalah sesuatu yang baru atau musim pemberian hadiah akan segera dimulai, Anda dapat mempertimbangkan untuk meluncurkan kampanye promo khusus dengan diskon pada kartu hadiah untuk meningkatkan kesadaran pelanggan.

Contoh:

Home Depot, selain bilah navigasi, juga memiliki bilah atas dengan layanan tambahan. Mereka memutuskan untuk menggunakan ruang ini untuk mempromosikan voucher hadiah. Ini mengikuti praktik UX yang baik karena pelanggan akan selalu melihat penawaran ini di bagian atas halaman.

Promosi kartu Home Depot di spanduk atas

Mereka juga menyertakan kartu hadiah di footer.

Catatan kaki HomeDepot

Zalando menginformasikan tentang kartu hadiah baik di bilah navigasi dan footer. Namun, dalam kasus ini, kartu hadiah terdaftar di bawah kategori Aksesori, membuatnya lebih sulit ditemukan daripada di The Home Depot.

Kartu hadiah Zalando di navbar

Selain navigasi situs web atau aplikasi seluler, Anda juga dapat menambahkan kartu hadiah ke footer email Anda. Selain itu, Anda juga dapat memasukkannya ke dalam tahapan tertentu dari perjalanan pelanggan. Misalnya, Anda dapat menyebutkan kartu hadiah di email ucapan terima kasih pascapembelian untuk mendorong pembeli agar memberikan kartu hadiah kepada seseorang ke toko Anda karena mereka sudah senang berbelanja dengan merek Anda. Ide lain adalah menambahkan kartu ke bagian item yang direkomendasikan di dekat tampilan keranjang.

Berbicara tentang email, Anda juga dapat mempertimbangkan untuk mengirim pesan terpisah untuk mempromosikan kartu hadiah pada waktu-waktu tertentu dalam setahun. Misalnya, targetkan liburan seperti Natal atau Hari Ibu dengan pesan email khusus tentang kemungkinan pemberian hadiah di toko Anda.

Contoh :

Winc mengirim email terpisah untuk mengingatkan pelanggan tentang Hari Ibu dan mempromosikan kartu hadiah.

Winc email promosi kartu hadiah untuk Hari Ibu


Alloy Apparel meluncurkan kampanye diskon untuk semua kartu hadiah fisik saat sehari sebelum Natal untuk memberi pelanggan kesempatan membeli kartu di menit-menit terakhir.

Promosi kartu hadiah Alloy Apparel dari Natal

Rancang perjalanan pembelian kartu hadiah

Memilih jenis hadiah

Sekarang setelah kami mengetahui cara memastikan bahwa pelanggan menemukan penawaran kami, kami dapat merancang jalur pembelian terbaik. Tentu saja, jalur pembelian Anda mungkin berbeda dari yang akan saya bahas di bawah.

Contoh:

PrettyLittleThing hanya menawarkan satu jenis dan format hadiah. Inilah sebabnya mengapa perjalanan pelanggan mereka dimulai dengan pemilihan template voucher hadiah.

Hal kecil yang cantik memilih desain kartu hadiah

Mari kita mulai dengan memilih jenis kartu hadiah. Ada banyak pilihan hadiah yang tersedia, mulai dari voucher digital individu hingga kartu perusahaan dan hadiah grup. Desain untuk fase ini akan sangat bervariasi tergantung pada kisaran kartu hadiah yang ingin Anda tawarkan. Pastikan bahwa tidak peduli berapa banyak opsi yang ada, semuanya terdaftar dengan jelas – sangat disarankan untuk menjaga arsitektur informasi Anda tetap datar kecuali Anda ingin menekankan hanya satu opsi pemberian.

Contoh :

Home Depot menawarkan beberapa opsi pemberian hadiah. Masing-masing kartu dipromosikan di spanduk atas di atas kisi opsi bonus yang sama pentingnya, membuat tata letak dapat dimengerti oleh pengguna dan semua opsi terlihat sekilas.

Pemilihan jenis kartu hadiah Home Depot

Zalando juga menawarkan lebih banyak opsi penyesuaian tetapi memilih tata letak vertikal di mana pelanggan perlu menggulir ke bawah untuk melihat semua opsi yang tersedia. Karena Zalando hanya menawarkan kartu individu, mereka tidak memerlukan tata letak datar. Sebagai gantinya, mereka menggunakan halaman untuk mengalihkan fokus ke templat dan opsi yang berbeda. Opsi tambahan (kotak hadiah) ditawarkan di bagian bawah halaman, memperjelas bahwa itu bukan produk utama.

Opsi kartu hadiah Zalando

Memilih format kartu

Jika Anda menawarkan voucher hadiah digital dan fisik, langkah selanjutnya dalam jalur pembelian harus menjadi pilihan di antara dua opsi ini. Perhatikan bahwa ini dan langkah-langkah berikut harus disajikan dalam satu halaman. Mengarahkan pengguna ke halaman baru untuk menyelesaikan proses pembelian kemungkinan akan merusak pengalaman dan menyebabkan mereka keluar.

Pemilihan antara metode penyampaian harus jelas. Anda dapat mencoba menggunakan warna atau ikon yang kontras untuk menggarisbawahi perbedaan antara kedua opsi. Disarankan juga untuk menggunakan salinan yang jelas – kontras antara “Kirim melalui email” dan “Kirim melalui pos” harus cukup transparan. Anda juga dapat menawarkan opsi untuk memiliki desain yang dapat dicetak (PDF yang dilampirkan ke email) selain format digital sepenuhnya jika orang yang berbakat menerimanya melalui email tetapi ingin membawanya ke toko untuk dicetak. Anda juga dapat memasukkan kode QR hadiah di email sehingga dapat dipindai dengan cepat di POS.

Contoh:

Victoria's Secret memulai perjalanan pelanggannya dengan pilihan antara metode pengiriman. UI menempatkan kepentingan yang sama pada kedua opsi. Namun, saya akan merekomendasikan CTA yang lebih kontras – “Kirim melalui surat” dan “Kirim melalui email” dapat membingungkan, terutama untuk penutur bahasa Inggris non-pribumi.

Pilihan format kartu Victoria's Secret

Memilih tanggal pengiriman (opsional)

Untuk meningkatkan UX voucher hadiah Anda, Anda dapat menambahkan sedikit lebih banyak personalisasi ke kartu digital Anda dengan memungkinkan pengguna untuk memilih kapan tepatnya kartu harus dikirim. Masuk akal dari perspektif kegunaan karena kartu biasanya dikirim sebagai hadiah – mengirim hadiah ulang tahun lima hari sebelum tanggal besar itu menyebalkan, bukan?

Contoh:

PrettyLittleThing mengharuskan pengguna untuk mengatur tanggal dan jam pengiriman yang diinginkan. Mereka menggunakan daftar dropdown sederhana. Saya akan merekomendasikan menggunakan pemilih tanggal kalender sebagai gantinya, yang memberi pengguna tampilan yang lebih baik dari tanggal yang mereka pilih (misalnya, hari dalam seminggu).

Memilih opsi pengiriman Prettylittlething

Memilih jumlah kartu hadiah

Pada langkah berikutnya, Anda harus mengizinkan pengguna untuk memilih jumlah kartu hadiah. Kombinasi nilai yang disarankan dan dapat diklik serta bidang masukan khusus berfungsi paling baik. Dengan cara ini, Anda memberi petunjuk kepada pengguna tentang nilai hadiah yang seharusnya dan membuatnya mudah untuk dipilih, dan pada saat yang sama menawarkan bidang untuk penyesuaian jika pelanggan ingin membeli nilai kartu yang tidak standar.

Contoh:

Saatchi Art, pasar seni online, menggunakan nilai yang disarankan dan bidang masukan khusus untuk tidak memaksakan batasan apa pun. Jika pengguna melebihi nilai kartu hadiah maksimum, mereka akan menerima pesan kesalahan yang memberi tahu mereka tentang detail kesalahan di bagian atas halaman.

Saatchi Art memilih nilai kartu
Saatchi seni memilih nilai kartu

Zalando memberlakukan batasan pada nilai kartu hadiah yang menempatkan nilai yang mungkin antara 50 dan 100 GBP. Pendekatan ini masuk akal dari sudut pandang ekonomi. Namun, ini secara dramatis membatasi fleksibilitas voucher Anda dan dapat mengarahkan pengguna keluar dari situs Anda jika mereka ingin mendapatkan kartu hadiah yang lebih mahal.

Jumlah minimum & maksimum kartu hadiah Zalando

Tiffany & Co. tidak menawarkan nilai kartu khusus. Sebagai gantinya, mereka memberikan nilai kartu yang telah ditentukan sebelumnya. Yang perlu diperhatikan adalah bahwa nilai kartu default adalah $500 meskipun nilai yang lebih rendah tersedia. Dengan cara ini, Tiffany & Co. berhasil mengarahkan pelanggan untuk fokus pada kartu yang bernilai lebih tinggi dan membuatnya lebih diinginkan dan dianggap sebagai harga standar.

Jumlah kartu hadiah default Tiffany Co

Memberikan informasi penerima

Ini adalah langkah penting dari proses desain, terutama dalam konteks voucher digital. Anda harus mencakup setidaknya dua bidang masukan di sini – alamat email penerima dan pesan kartu hadiah yang harus dibawa oleh email tersebut. Beberapa perusahaan juga menawarkan opsi penyesuaian baris subjek untuk membuat pengiriman kartu menjadi lebih personal. Kuncinya adalah hanya memerlukan informasi yang diperlukan (nama penerima dan alamat email). Jangan sertakan terlalu banyak bidang tambahan.

Hal lain adalah pesan kartu – sebaiknya berikan pesan yang sudah ditulis sebelumnya untuk memudahkan pelanggan mengirim kartu lebih cepat. Namun, Anda harus mengizinkan pengguna mengubah atau menyesuaikan pesan jika mereka tidak menyukai teks yang telah ditulis sebelumnya. Juga, buat bidang pesan opsional.

Contoh :

Starbucks menawarkan UI sederhana untuk informasi penerima dan pengirim.

Starbucks menambahkan informasi penerima

Amazon memberi pengguna pesan pra-tertulis sederhana untuk memberi mereka gambaran tentang seperti apa pesan itu.

Pesan kartu hadiah Amazon yang telah ditulis sebelumnya

Personalisasi kode kartu hadiah

Jika kartu hadiah adalah bagian besar dari bisnis Anda, Anda mungkin berpikir untuk lebih meningkatkan potensi personalisasinya. Perangkat lunak kartu hadiah Anda harus memungkinkan Anda untuk menyesuaikan kode kartu hadiah agar sesuai dengan nama depan penerima atau menyertakan acara khusus yang terkait dengan kartu tersebut (misalnya, HAPPYBIRTHDAY7593). Trik sederhana ini akan membuat kartu lebih mudah diingat. Pola yang unik juga akan memudahkan untuk menerapkan kode kartu di kasir karena pengecualian karakter membingungkan atau panjang yang tepat. Buka di sini untuk detail selengkapnya tentang meningkatkan pengalaman validasi kode.

Memilih template voucher hadiah

Karena kartu hadiah biasanya dikirim sebagai hadiah, yang terbaik adalah membuatnya menyenangkan secara visual dan terkait dengan acara tersebut. Misalnya, bayangkan mendapatkan kartu ulang tahun yang semuanya berwarna abu-abu dan tanpa ucapan selamat ulang tahun. Itu bukan hadiah terbaik, bukan? Inilah sebabnya mengapa disarankan untuk menawarkan setidaknya beberapa templat voucher hadiah.

Contoh:

Amazon menawarkan banyak templat kartu, dan pengguna dapat berbelanja berdasarkan kesempatan, menyederhanakan jalur pembelian kartu. Mesin kartu hadiah mereka menyediakan hadiah untuk banyak kesempatan. Selain itu, dengan desain yang beragam dan beragam, membuat kartu prabayar terlihat seperti hadiah yang dibuat khusus.

Templat kartu Amazon

Mengunggah foto untuk menyesuaikan kartu

Bonus kemenangan cepat UX adalah memungkinkan pengguna mengunggah foto mereka untuk mempersonalisasi kartu. Namun, perhatikan bahwa menambahkan fitur ini mengharuskan Anda membuat persyaratan penggunaan untuk foto guna melindungi diri Anda dari pelanggaran hak kekayaan intelektual pihak ketiga.

Contoh:

Zalando memungkinkan pengguna untuk membuat desain kartu mereka. Namun, untuk memastikan bahwa semuanya diselesaikan di sisi hukum, Zalando mengharuskan pengguna untuk mematuhi persyaratan penggunaan mereka.

Zalando memilih pengiriman kartu

Proses checkout

Saat pengguna mengisi semua informasi yang diperlukan, lanjutkan ke langkah pembayaran, yang dirancang sebagai pembayaran standar Anda. Pastikan bahwa pengguna dapat dengan cepat memperbaiki informasi yang mereka berikan atau membuat perubahan pada kartu tanpa menghapus seluruh keranjang dan mulai dari awal setiap kali mereka melakukan perubahan. Disarankan juga untuk menyesuaikan detail kartu dalam tampilan ini. Anda dapat menggunakan teks yang dapat diperluas yang disembunyikan secara default dan ditampilkan saat pengguna mengeklik ikon yang ditentukan atau mengarahkan kursor ke kartu.

Contoh :

PrettyLittleThing adalah contoh UX checkout kartu hadiah yang buruk. Setelah pengguna menambahkan kartu ke keranjang, tidak ada cara mudah untuk memperbarui detail kartu, seperti info penerima atau nilai voucher. Satu-satunya cara adalah mengeluarkan kartu dari troli dan memulai seluruh proses lagi.

Pengalaman checkout yang buruk dari PrettyLittleThing

Winc memungkinkan pengguna untuk memperbarui nilai kartu saat masih dalam tampilan keranjang.

Ubah nilai kartu di Winc

Kirim kartu ke penerima melalui beberapa saluran

Ada beberapa opsi untuk berbagi kartu dengan penerima. Berikut adalah beberapa di antaranya:

  • Kirim melalui pesan email.
  • Kirim ke pembeli sebagai PDF yang dapat dicetak yang dapat dibagikan secara fisik dengan penerima.
  • Kirimkan kartu fisik melalui pos kepada pembeli atau penerima.
  • Kirim melalui media sosial, misalnya Messenger, Whatsapp.

Sejauh desain UI berjalan, kami akan fokus pada kartu digital yang dikirim melalui pesan email ke penerima. Jika ini pertama kalinya penerima mendengar tentang merek Anda, Anda dapat menerapkan beberapa sinyal kepercayaan ke email Anda. Berikut adalah beberapa tips tentang bagaimana tidak berakhir di spam:

  • Identitas pengirim yang jelas adalah penanda kepercayaan yang penting – Anda dapat mempertimbangkan untuk menyertakan nama pengirim di baris subjek email dengan kartu hadiah yang dilampirkan untuk meningkatkan kepercayaan. Misalnya, gunakan baris subjek "Katie baru saja mengirimi Anda hadiah!"
  • Manfaatkan personalisasi – jika Anda memiliki nama penerima, Anda harus menambahkannya ke email Anda untuk meningkatkan UX dan membuat pesan lebih dapat dipercaya.
  • Jangan terlalu melebih-lebihkan nilai kartu hadiah di baris subjek – cobalah untuk tidak menggunakan frasa seperti “voucher”, “kode”, “kesepakatan”, atau nilai kartu numerik di baris subjek. Penyedia email penerima mungkin memperlakukan pesan Anda sebagai spam atau menempatkannya di tab Promosi di kotak surat.

Munculkan desain email yang efektif

Ketika datang ke konten email, perlu mencakup beberapa poin:

  • Sertakan nilai kartunya.
  • Sertakan tautan ke S&K tertentu atau informasi tambahan tentang batasan penukaran kartu (jika ada).
  • Kode kartu hadiah yang mudah disalin ke papan klip, sebaiknya dengan satu klik.
  • CTA yang membawa penerima ke toko Anda.

Ingatlah bahwa pengguna dapat membaca email Anda di desktop dan perangkat seluler. Untuk memastikan bahwa kartu hadiah Anda ramah seluler, Anda dapat menyertakan tautan dalam di CTA untuk memastikan bahwa pengguna langsung membuka aplikasi e-niaga Anda dengan kode hadiah yang sudah ditambahkan ke dompet digital mereka. Jika Anda memutuskan format email saja, maka pastikan untuk menyertakan kode batang atau kode QR yang mudah di-zoom dengan tingkat kontras tinggi untuk memastikan perangkat pemindai di POS dapat menebusnya.

Contoh:

Watsi, sebuah organisasi kesehatan amal, menandai semua kotak centang dalam hal desain email kartu hadiah yang tepat.

Email kartu hadiah watsi

Amazon memperlakukan kartu hadiah sebagai kredit toko yang dapat disimpan di akun. Dalam pesan email mereka, mereka menyertakan tautan dalam yang mengarahkan pengguna langsung ke situs web atau aplikasi Amazon (bergantung pada perangkat) yang secara otomatis menerapkan kredit ke akun penerima.

Email Amazon dengan kartu hadiah

Menebus kartu hadiah

Seperti yang dikemukakan oleh Kim Salazar, kegunaan kupon dan gift voucher berbanding lurus dengan kemudahan penggunaannya di toko online.

Anda harus menghindari penerapan batasan pada penukaran voucher hadiah, seperti jumlah pesanan minimum. Praktik UX umum yang baik lainnya adalah mengingat bahwa penerima kartu hadiah akan lebih sensitif terhadap informasi pengiriman dan biaya produk. Pelanggan seperti itu mengonfigurasi konten keranjang dengan perhatian yang lebih besar dari biasanya. Hal ini karena dikhawatirkan selisih nilai nominal kartu dan jumlah pesanan akan hilang. Inilah sebabnya mengapa Anda juga harus melihat perjalanan pengguna secara keseluruhan dan memperkenalkan perbaikan untuk memberikan pengalaman pengguna sebaik mungkin.

{{PELANGGAN}}

{{PELANGGAN AKHIR}}

Izinkan penukaran sebagian

Anda dapat memperlakukan kartu hadiah sebagai metode pembayaran, bukan voucher promo. Opsi ini sangat bagus jika Anda menggunakan kartu hadiah yang dapat diisi ulang, seperti dalam kotak Starbucks. Kemudian saldo pada kartu dihitung secara dinamis, dan kredit digunakan sebagai metode pembayaran. Mirip dengan kartu kredit atau debit. Jika Anda memilih solusi ini, Anda perlu memastikan bahwa kartu hadiah tidak memiliki tanggal kedaluwarsa (atau yang sangat panjang). Hal ini dapat membuat kartu hadiah Anda sangat menarik, tetapi pada saat yang sama, memerlukan infrastruktur berkualitas tinggi agar kartu dapat ditukarkan selamanya.

Contoh:

Berbelanja dengan kartu hadiah Zalando itu mudah, tetapi memulai dapat menimbulkan tantangan bagi pengguna. Untuk menggunakan kartu hadiah sebagaimana dimaksud, penerima perlu membuat akun dan menemukan “tab voucher Anda”, dan menempatkan kode kartu hadiah di bidang teks yang ditentukan untuk menukarkannya. Setelah penukaran, uang tunai yang dimuat pada kartu diperlakukan sebagai kredit Zalando dan dapat digunakan sebagai metode pembelian.

Penukaran kartu Zalando

Masalah dengan pendekatan ini adalah bahwa pengguna mungkin tidak tahu bahwa mereka perlu membuat akun untuk menebus kartu dan melihat saldo mereka. Penukaran kartu juga dimungkinkan di kasir dengan menempatkan kode kartu hadiah di bidang voucher. Jumlah voucher kemudian diterapkan ke jumlah total di keranjang belanja. Saya akan merekomendasikan membuat kedua kemungkinan menjadi sangat jelas bagi penerima kartu.

Rancang bidang masukan kartu hadiah

Penerima kartu hadiah ingin menggunakan hadiah mereka sesegera mungkin. Untuk memenuhi kebutuhan ini, Anda harus memberikan kolom input voucher di awal proses pembelian, sebaiknya di keranjang sebelum checkout. Pendekatan ini memungkinkan pelanggan untuk memeriksa apakah kartu tersebut valid sejak dini sebelum memasukkan informasi pribadi.

Pendekatan yang lebih baik lagi adalah dengan menawarkan kemungkinan untuk menukarkan voucher hadiah pada tahap proses pembelian sedini mungkin, jauh lebih awal daripada selama finalisasi dan pembayaran pesanan.

Contoh:

Winc menawarkan desain UI langsung dan memungkinkan pengguna menukarkan voucher hadiah di awal perjalanan mereka, secara efektif membatasi stres atau ketidaknyamanan yang terkait dengan ketidakmampuan untuk menemukan bidang penukaran.

Penukaran voucher hadiah Winc

Birchbox, merek produk kecantikan berlangganan, juga memungkinkan pengguna untuk langsung menukarkan voucher hadiah. Informasi tentang penukaran kartu cepat ditempatkan di footer halaman.

Penukaran kartu Birchbox

Selain itu, penempatan input voucher harus menjadi bagian inti dari proses checkout dan ditampilkan dengan benar di situs web atau struktur aplikasi. Pastikan untuk membuatnya cukup panjang untuk memuat seluruh kode voucher.

Praktik baik lainnya yang terkait dengan kode hadiah adalah membedakan dengan jelas antara bidang pembayaran dan voucher karena kedekatan dan kesamaannya dapat menjadi sumber frustrasi bagi calon pembeli.

Pedoman ini cocok dengan praktik terbaik untuk UI kupon. Jika Anda ingin mempelajari cara mendesain bidang input voucher, bacalah.

Contoh:

Birchbox adalah contoh yang sangat baik dari kotak input voucher. Nama kotaknya, “Promos & Gift Codes”, memperjelas tujuan kotak itu. Banyak situs e-niaga menggunakan "Kode Promo" sebagai nama untuk bagian ini, yang dapat membingungkan pemilik kartu hadiah karena kartu tidak dianggap sebagai promosi. Mereka juga menawarkan tautan untuk membuka kotak kode kupon di tampilan checkout bagi mereka yang melewatkannya di tampilan keranjang belanja. Ini adalah cara yang bagus untuk mempertahankan opsi untuk menambahkan kode kupon di kedua langkah.

Kotak penukaran birchbox

Buat pesan sukses dan pesan kesalahan

Tampilkan pesan sukses dan total pesanan yang diubah untuk mengonfirmasi bahwa kode voucher hadiah berhasil diterapkan. Tempatkan pesan di dekat bidang voucher untuk memastikan pengguna melihatnya dan mengaitkannya dengan kode yang dimasukkan. Menampilkan pesan itu di bagian atas halaman atau di bagian bawah halaman mungkin membingungkan. Namun, pesan sukses seharusnya bukan satu-satunya konfirmasi yang didapat pengguna. Mencerminkan total pesanan yang diubah di tampilan keranjang belanja dan checkout.

Dengan logika yang sama, Anda juga harus menampilkan pesan kesalahan yang relevan yang menyatakan jenis masalah dengan kartu hadiah. Jangan tampilkan pesan kesalahan yang sama dalam setiap kasus karena tidak akan menginstruksikan pengguna apa yang salah dan bagaimana mereka dapat memperbaiki masalah tersebut. Berikut beberapa contohnya:

  • "Kode kartu hadiah salah. Coba lagi."
  • "Kode kartu hadiah sudah kedaluwarsa."
  • "Anda bukan pemegang kartu hadiah (jika Anda memberikan voucher hadiah kepada pelanggan individu)."
  • "Pesanan Anda tidak memenuhi ketentuan kartu hadiah (jika Anda menetapkan batas untuk penukaran kartu)."

Contoh:

SummerSalt menampilkan pesan kesalahan jika kode yang dimasukkan tidak valid atau jika kondisi promosi tidak terpenuhi. Mereka mendorong pelanggan untuk memeriksa ulang kode mereka.

Pesan kesalahan Summersalt

Desain pemberitahuan kedaluwarsa kartu hadiah

Jika kartu Anda memiliki tanggal kedaluwarsa, Anda perlu merencanakan lebih awal dan menyiapkan pemberitahuan otomatis untuk meminta pengguna menggunakan saldo kartu mereka sebelum kedaluwarsa. Di sini, Anda harus mengikuti praktik UX terbaik yang terkait dengan pemasaran email, yaitu membuat visual menarik, menjaga salinan tetap cerdas, menambahkan CTA yang kontras dengan baik, dan menahan diri untuk tidak menggunakan kata-kata yang dapat ditandai sebagai spam (“diskon” , "kesepakatan", "penjualan").

Ringkasan

Saya harap daftar praktik terbaik ini akan membantu Anda mulai mendesain situs web dan seluler Anda untuk kartu hadiah atau meningkatkan desain UI Anda saat ini. Jika Anda mencari saran umum untuk membuat kampanye kartu hadiah, pastikan untuk membaca panduan ini.

{{CTA}}

Siap membawa kartu hadiah Anda ke level selanjutnya?

Memulai

{{ENDCTA}}