Pemburu kod promo

Pada tahun lepas (2018) Wahdah melancarkan page Deals. Halaman tersebut mendapat sambutan, tetapi dengan konsep promo code, agak sukar bagi pelanggan kami untuk memilih promo yang boleh digunakan dan aplikasi semasa pembayaran.

Halaman Deals memaparkan promo kod

Melihat dari jumlah penggunaan promo kod yang tidak memberangsangkan kami perpendapat pelanggan menyukai apabila promo kod terus diaplikasi semasa carian dijalankan. Lebih ada umpph orang kata kerana pelanggan akan fokus kepada promosi tersebut dan membuat tempahan.

Promosi terus pada halaman carian

Kami ingin mengubah behaviour pelanggan apabila mencari kereta. Kami mahu mereka rancang perjalanan mereka dan tempah pada hari harga kereta lebih murah, bukan sebaliknya. Ia seperti carian di AirAsia apabila anda akan rancang cuti berdasarkan harga pada hari yang murah.

Seperti biasa, dari idea carian AirAsia, kami mengolah antaramuka seperti mereka

Carian di AirAsia

Hasil daripada konsep tersebut, kami olah sedikit untuk membolehkan pelanggan melihat harga dalam tarikh seminggu, mengikut kereta dan kawasan. Hasilnya adalah seperti halaman Deals yang baharu, https://www.wahdah.my/deals

Page Deals yang baharu

Ia juga boleh mengasingkan senarai kereta yang mempunya Diskaun atau semua jenis kereta secara default. Dengan halaman Deals yang baharu, pelanggan boleh melihat senarai harga kereta dan membuat keputusan untuk melakukan tempahan berdasarkan promosi yang ditawarkan.

Kami belum lagi mendapatkan data yang penuh untuk mengetahui adakah konsep ini lebih berkesan berbanding halaman yang lama. Tiada A/B test, hanya kaedah campak ke dinding dan lihat idea itu melekat atau tidak 😀

Bagaimana pendapat anda ?

Perubahan terhadap harga

Pada permulaan aplikasi Wahdah, fokus banyak diberikan kepada kawasan Johor Bahru. Proses meletakkan harga di mulakan dengan senarai semua kenderaan. Kenderaan yang ada check ikon dan edit kalendar ikon (bewarna oren)

Selepas itu akan terpapar senarai kalendar untuk bulan itu.

Di bawah kalendar adalah senarai-senarai harga yang ada perubahan untuk lokasi tersebut. Sama ada

  1. Kenaikan harga
  2. Ada hari minimum untuk tempahan
  3. Kenderaan tidak terpapar
  4. Tidak boleh ambil @ pulang kereta pada hari tersebut
  5. Kuantiti kereta yang tersedia pada hari tersebut.

Untuk perubahan kriteria di atas, memerlukan pemilihan hari dan klik butang “manage”

Selepas itu perubahan boleh dilakukan untuk kenderaan tersebut. Proses ini perlu dilakukan untuk setiap kenderaan di lokasi tersebut, dan pada permulaan semasa kami hanya di Johor Bahru, proses ini tidak melecehkan.

Apabila kami berkembang ke 10 lagi tempat di seluruh Malaysia, proses ini boleh dikatakan tidak scalable dan akan terlepas pandang, jika ada kereta yang tidak ada stock, tetapi terlupa di blok.

Setiap feature di dalam aplikasi akan tiba saat perlu ditambah baik, walau proses yang sama, sesuatu fungsi itu akan bermasalah apabila syarikat berkembang. Pembaharuan perlu dilakukan seiring dengan perkembangan syarikat.

UI/UX yang baharu difikirkan untuk membolehkan perubahan harga lebih cepat dan kurang kesilap dilakukan oleh pihak operasi.

Antaramuka baharu

Proses antaramuka baharu lebih mudah.

  1. Pilih lokasi untuk melihat semua kenderaan yang boleh disewa.
  2. Terus edit harga dan kriteria lain dalam satu proses
  3. Semua data akan disimpan secara auto

Proses ini amat mudah, secara default akan ada surge (kenaikan harga) dan blok. Jika ingin edit kriteria yang lebih, klik anak panah v akan terus expand untuk lihat lebih lagi. Berbanding dengan proses lama, proses baharu menjimatkan banyak masa pihak operasi untuk melakukan perubahan harga. Kami akan senantiasa melakukan penambahbaikan ini secara berterusan untuk feature-feature lama yang tidak scalable.

Sebagai pengaturcara kita jangan berasa marah, jika berlaku kesilapan dan soalan berulang-ulang kali untuk satu proses. Ini mungkin datang dari kesusahan antaramuka yang susah difahami.

Filter Input Escape Output. Hello ?

Ada satu terma di dalam pengaturcaraan, Filter Input, Escape Output. Pos ini bukanlah tentang programming, tetapi tentang nombor telefon.

Wahdah merupakan satu sistem yang menerima tempahan bukan sahaja dari Malaysia, tetapi negara lain. Apabila tempahan diterima, kami akan menghantar notifikasi SMS melalui no telefon yang diterima. Kadang-kadang, nombor yang dihantar bukan dalam format negara yang betul. Contoh nombor telefon Malaysia dimulakan dengan +60 dan Singapura bermula dengan +65 . Jika pelanggan menulis 90849394 kami tidak tahu adakah 90 itu kod negara atau nombor tanpa kod negara. Ini adalah masalah bagi kami.

Masalah pertama yang perlu diselesaikan adalah dengan menggunakan form yang meletakkan kod negara dihadapan input nombor telefon.

Kami menggunakan plugin International Telephone Input untuk menjadikan form ini. Dengan cara ini, pelanggan sudah diberikan panduan, bagaimana untuk memasukkan format nombor telefon. Plugin ini sangat membantu dan saya sangat sarankan pengaturcara gunakan plugin ini jika anda mempunyai sistem yang mementingkan  input format telefon dengan betul.

Setelah kami selesaikan masalah input format nombor telefon, lebih mudah untuk kami hubungi pelanggan kami. Sekarang kami fokus kepada bagaimana memudahkah untuk kami menghubungi pelanggan pula.

Di web aplikasi kami, proses menghubungi pelanggan adalah dengan copy / paste dari aplikasi web dan paste di telefon, dan proses berbeza pula untuk Whatsapp pelanggan dan ia satu proses yang rumit bagi staff kami .

Di aplikasi Wahdah Partner (iOS / Android) kami terus buat satu link untuk partner kami klik link tersebut, dan terus mendail no telefon pelanggan. Walaupun ia nampak mudah, tetapi banyak aplikasi mobil yang tidak mempunyai features seperti ini (contoh Expedia Partner Central) .

Pada web aplikasi juga kami mempunyai link tersebut

Dan satu lagi kebiasaan adalah menghantar Whatsapp, dan di aplikasi web kami menambahkan link ke Whatsapp aplikasi, tanpa memerlukan partner / customer support menyimpan nombor untuk menghantar mesej.  Apabila klik icon whatsapp, terus akan membuka aplikasi Whatsapp di desktop atau pun mobile. 

Dan untuk menambah lagi kemudahan, kami terus sediakan template untuk seperti nama pelanggan, jenis kenderaan dan juga nombor booking untuk memudahkan pengenalan dihantar kepada pelanggan.

Walaupun penambah baikan ini sedikit, tetapi menambahkan efisyen kepada proses kerja kami. Ini adalah misi UX dalam mana-mana aplikasi yang kami bangunkan. Harap pos ini dapat memberikan idea bagaimana penambah baikan yang mudah ini adalah penting dalam pembangunan aplikasi.

Siri UX : Tambah baik muat naik dokumen

Ini adalah proses pembayaran sebelum ini, apabila pelanggan sudah membuat pembayaran, mereka akan dipaparkan ucapan terima kasih dan redirect ke halaman tempahan mereka. Mereka akan menerima satu email apabila tempahan sudah diterima untuk muat naik passport / IC dan lesen mereka (untuk pemandu kereta tersebut).  Masalahnya kadang-kadang mereka tutup terus browser dan terlupa untuk muat naik sehingga hari tempahan mereka 🙁

Ada beberapa situasi dalam proses ini :

  • Pelanggan sedia ada, dokumen yang sama dengan tempahan sebelumnya
  • Pelanggan sedia ada, dokumen yang baharu kerana mereka menggunakan pemandu lain.
  • Pelanggan baharu.

Jadi apa yang boleh dibuat ?

Paparan 1 : Iterasi pertama

Ini adalah iterasi pertama, tidak terus redirect, tetapi diberi pilihan sama ada mereka boleh terus ke halaman tempahan atau terus ke halaman muat naik dokumen. Saya nampak ada cara boleh ditambah baik.

 

Paparan 2: Iterasi ke 2

Kami paparkan invois untuk lebih banyak maklumat apabila proses pembayaran berjaya. Ini tidak menambahkan proses tetapi hanya memenuhkan maklumat di halaman tersebut.

Paparan 3: Iterasi ke 3

Dalam situasi pelanggan sudah ada dokumen sebelum ini, kami paparkan dokumen mereka , dan jika mereka setuju, hanya klik Yes. Tetapi butang Booking Details, Yes, I want to upload a new one , sangat berterabur.

 

Jadi kami cuba satu konsep menggunakan pilihan, paparkan details pembayaran dan beri mereka pilihan jika mereka mahu menghantar IC / Lesen sekarang atau kemudian.

Paparan 4 : paparan untuk pengguna baharu.

Paparan 5 : paparan untuk pengguna berulang

Butang ini akan berubah dengan pilihan yang dipilih.

Jadi ada 3 butang bertukar mengikut pilihan,

  1. Go to booking Details
  2. Go to Upload Documents
  3. Submit Documents and go to Booking details

Setakat ini kami berpuas hati dengan iterasi ini. Sudah sebulan dilancarkan hampir 90% tempahan memuat naik terus dokumen mereka berbanding 50% sahaja sebelum ini. Kami berharap proses ini memberikan idea bagaimana kami menggunakan pembaikan berterusan. Tidak perlu sempurna, tetapi pusingan Build -> Measure -> Learn akan digunakan untuk iterasi baharu  hasil dari data pelanggan.

 

Dimulakan dengan design

Saya adalah orang yang visual, dan walau pun dalam diri adalah programmer, tetapi apabila saya memulakan proses berfikir, saya akan bermula dengan design.

Sebagai contoh saya ada melihat website travel ada mengeluarkan popup seperti 5 people where eyeing on this property

Saya berfikir bagaimana untuk menggunakan konsep yang sama di wahdah.my

1 . Mencari external solution

Saya ada melihat www.useproof.com untuk digunakan di website. Melihat footer verified by Proof menyebabkan saya kurang gembira mengiklan website mereka dan juga membayar 29 usd / bulan

2. Mencari solusi yang paling gempak

Menggunakan websocket dan HTML5 atau javascript notification yang lain merasakan feature ini mungkin belum perlu  satu solusi yang betul ‘high  end’.Jadi langkah pertama disebabkan malas berfikir, saya menggunakan notifyjs.com untuk menghasilkan apa output yang saya fikir menarik tanpa memikirkan apakah backend yang akan digunakan.

dengan code

boleh menghasilkan alert/ notification seperti

Tak menarik bukan ? Jadi terus job ini diserahkan kepada designer untuk dihasilkan seperti yang dikehendaki


Menarik bukan ? Tetapi ini adalah hasil dari NotifyJS dan designer kemaskini dan hantar notifikasi secara manual

Dengan klik butang, notify.js di atas, notifikasi akan keluar.  Sekarang dari segi etika data ini perlu betul dan bukan notifikasi palsu tanpa ada data di belakang. Jadi sama ada notifikasi realtime atau kita mengunakan AJAX secara berkala untuk menerima update terkini kepada pelanggan.

Infrastruktur notifikasi realtime adalah kompleks dan saya belum bersedia untuk melabur masa. Jadi sama ada menggunakan infrastruktur luar seperti Pusher https://pusher.com/tutorials/realtime-notifications  atau menggunakan AJAX secara berkala.

Keputusannya ?  saya akan eksperimen dengan AJAX secara berkala kerana beban trafik untuk halaman web Wahdah tidak seberat Lazada dan menggunakan AJAX adalah lebih logik kerana hasil yang sama dengan masa yang lebih sedikit 😀 .

Jadi tunggu sedikit masa lagi, anda akan lihat notifikasi ketika pelanggan cari kereta mereka di Wahdah.  Diharapkan bagaimana proses saya design feature baharu di Wahdah membantu anda sedikit sebanyak.

Wah dah nak habis ! Cepat booking !

Untuk meningkatkan conversion, kami perlu kaji emosi pelanggan apabila membuat satu tempahan. Ada beberapa penambah baikan yang dilakukan minggu lepas. Kebiasaanya apabila kuota kereta sudah habis, kami hanya blok secara manual dan senarai kereta semakin sedikit. Ini menyebabkan pelanggan merasakan kami tidak mempunyai inventori kereta yang banyak.

Feature baru yang kami perkenalkan adalah inventori “sold out” .  Kereta yang sudah diblok tidak akan hilang dari senarai, tetapi akan di ubah warna dengan dilabelkan dengan “fully booked”. Desain ini akan menjerit WAH DAH NAK HABIS ! CEPAT BOOKING !!!! 😅

Wah dah habis stok ! Cepat booking

Air Asia antara yang popular dengan mengajar pelanggan-pelanggan mereka, bahawa siapa yang booking awal (sehingga awal setahun !) akan diupah dengan diskaun. Kami menggunakan konsep ini dengan mengajar pelanggan-pelanggan kami bahawa “early bird get gets the worm”. Untuk bulan November ini kami memberi diskaun kepada pelanggan yang ingin tempah pada bulan Februari.  Lama kelamaaan pelanggan kami tahu bahawa mereka perlu tempah awal dan tak perlu minta diskaun setiap kali untuk mendapat penjimatan.

Klik di sini untuk lihat diskaun pada bulan Februari 🤑

Wah Dah Murah ! Cepat Tempah !!

Ini juga perlu diselarikan dengan kod untuk menyokong promo “auto-applied” untuk setiap kereta. Pelanggan tidak perlu meletakkan promo code sebelum membuat pembayaran.

Dan yang akhir sekali, kami perasan conversion di langkah terakhir banyak yang tidak bertukar kepada pembayaran. Pelanggan banyak berhenti di langkah mencari promo code.

  1. bertanya customer servis ada tak promo code sekarang ?
  2. mencari di Google “wahdah promo code” dan jika promo code tidak valid, mereka meninggalkan tempahan tersebut 😭

Promo code form

Apa yang kami buat adalah sembunyikan form ini untuk mengurangkan gangguan semasa membuat pembayaran. Kita tidak mengganggu niat pelanggan untuk membayar dan hasilnya lebih banyak transaksi berlaku 🙏.

 

Wah Dah Hilang 😱

Apabila pelanggan nak masuk, hanya klik link tersebut

Wah Dah ada !

Maka dengan ini, kami berharap lebih banyak conversion berlaku setelah tambah baik . Tiada A/B dilakukan, kerana CTO tak sempat nak buat 😂.

Apa pula selepas ini ? Penambahbaikan slip keluar

Sebenarnya apabila membangunkan perisian. Tiada istilah siap, sentiasa ada yang boleh ditambah baik. Setelah kami lancarkan halaman web baru untuk Wahdah  , sedikit demi sedikit UI/UX untuk pelanggan pula perlu ditambah baik.

Biasanya invois atau dalam kes kami (checkout slip) yang diberikan kepada pelanggan untuk setiap transaksi menjadi keutamaan rendah untuk pengatucara 😅. 

Dari maklum balas pihak operasi, kami nampak banyak masalah apabila dokumen ini digunakan apabila pelanggan yang ingin mengambil kereta. Kami rasa perlu untuk menambah baik dokumen ini.

Di bawah ini disertakan cakupan skrin untuk sebelum dan selepas. Anda rasa ?

Desain Sebelum

Desain selepas

Evolusi Content Management untuk Wahdah

Halaman web Wahdah.my telah berlaku beberapa evolusi sehingga terhasilnya #newWahdah sekarang . Kami menggunakan Drupal (versi 7) untuk kandungan website muka hadapan bagi pelanggan dan subdomain untuk aplikasi tempahan (menggunakan CakePHP) .

Versi pertama halaman web Wahdah

Pada versi pertama, kami menggunakan iframe untuk mengeluarkan form tempahan kereta. Cukup mudah tetapi banyak kelemahan dari segi SEO dan responsive mobile. Ini kami warisi dari pembangun terdahulu jadi kami rasa kami boleh tambah baik lagi versi asal ini.

Versi kedua halaman web Wahdah

Pada versi kedua, kami menggunakan Drupal dan module custom kami sendiri. Kami rasa ini adalah jalan yang terbaik kerana kami boleh mengawal apa yang dipaparkan di Drupal.  Beberapa kebaikan adalah Drupal banyak module yang boleh digunakan untuk penambah fungsi-fungsi tambahan halaman web kami.

Keburukan yang kami rasa adalah kesukaran untuk membangunkan module dalam Drupal (mungkin kelemahan sendiri) dan satu lagi kami aktif membangunkan aplikasi tempahan sehingga kadang-kadang kami terlupa update form tempahan di module Drupal.

Kami perlu mengawal ‘pengalaman’ untuk pelanggan kami apabila membuat tempahan dan kami rasa dengan Drupal ia menghalang apa yang kami ingin beri kepada pelanggan.

Ada beberapa pilihan yang ada.

  • Buat module CMS di CakePHP dan kawal segalanya di CakePHP

Cara ini bagus tetapi akan menambah beban pengaturcara kami untuk membangunkan modul yang tidak ada kena mengena dengan aplikasi utama. CMS dari segi teori nampak mudah, tetapi akan menjadi semakin sukar dengan feature yang bertambah. Ini adalah satu beban yang kami tidak mahu untuk tambah kepada pengaturcara kami. Jadi kami memilih cara kedua iaitu

  • Jadikan Drupal RESTful mengguna module Services dan tarik kandungan ke aplikasi CakePHP Wahdah

Cara ini menyebabkan beban pengaturcara lebih ringan kerana fokus untuk pemaparan kandungan di aplikasi dan semua kerja berat proses format kandungan masih dijalankan oleh Drupal.

Halaman web baharu Wahdah

Jadi apa yang anda lihat di https://www.wahdah.my sekarang adalah aplikasi CakePHP semata-mata dan semua content seperti

Blog – https://www.wahdah.my/blog
Berita – https://www.wahdah.my/news
Halaman statik – https://www.wahdah.my/the-team

Ini semua ditarik dari Drupal untuk halaman web baharu kami.  Kami gembira dengan keputusan yang dibuat. Segala ‘pengalaman’ yang diberikan kepada pelanggan lebih mudah dikawal kerana kami yang bangunkan ‘kedai’ ini  dari awal. Wahdah akan sentiasa berevolusi dan kami harap perkongsian ini memberikan menafaat kepada semua 💪 .

Sokongan Landing Page SEO

Pada zaman dahulu, Pagerank adalah penanda aras bagi halaman web. Sekarang dengan pelbagai ranking antaranya DA = Domain Authority & PA = Page Authority juga menjadi rujukan. Kebiasaanya untuk Adwords atau SEO kita hanya optimize halaman utama e.g www.wahdah.my dan jika ada keyword yang ingin di rank di Google, semua keyword akan diletakkan di halaman utama.

Cara ini dikenali sebagai keyword stuffing menyebabkan Google memandang serong perbuatan ini. Ada beberapa teknik yang saya gunakan di #newWahdah sebagai contoh jika saya ingin optimize keyword

  1. car rental kuala lumpur
  2. car rental kl
  3. kereta sewa kuala lumpur
  4. kereta sewa kl

saya boleh buat beberapa sub page

e.g

www.wahdah.my/car-rental-kuala-lumpur
www.wahdah.my/kereta-sewa-kuala-lumpur
www.wahdah.my/car-rental-kl
www.wahdah.my/kereta-sewa-kl

Proses ini adalah time consuming bagi marketer / SEO untuk membuat optimization bagi setiap halaman web.

Jika SEO / Digital Marketer ada skill programming atau bekerjasama dengan rapat dengan programmer, sebenarnya kebanyakan framework terbaharu menyokong localize landing page. Sebagai contoh di #newWahdah kami menggunakan ini untuk masalah di atas

  1. https://www.wahdah.my/en/cars/kuala-lumpur
  2. https://www.wahdah.my/ms/cars/kuala-lumpur

Kedua-dua web ini secara automatik akan menggunakan bahasa yang berlainan iaitu English & Bahasa Melayu dan keyword serta form akan terisi secara automatik lokasi Kuala Lumpur di dalam ruangan carian. Tajuk page seperti Page Heading,  Title & description boleh di customize kepada halaman web tersebut.

Car rental in Kuala Lumpur dalam Bahasa Melayu

Car Rental in Kuala Lumpur dalam Bahasa Inggeris

Kami masih lagi menyiapkan terjemahan bahasa Melayu, tetapi secara kasarnya, jika siap, halaman web Melayu akan menunjukkan keyword Melayu untuk kereta sewa Kuala Lumpur dan Inggeris menunjukan keyword Inggeris tentang Car Rental Kuala Lumpur.

Bukan sahaja teknik ini adalah ‘mesra enjin carian’ , ia juga adalah mesra pelanggan dengan menyebabkan halaman web ini lebih relevan dengan keyword yang mereka klik dari Adwords atau hasil carian Google.

 

 

Wahdah 3.0 : Transformasi antaramuka mobile

Wahdah sudah melalui beberapa transformasi sejak setahun lalu. Menjadi CTO dalam Wahdah seperti membetulkan kapal terbang yang sedang terbang. Ia satu tugas yang mendebarkan tetapi menyeronokkan.

Antara projek yang terbaharu adalah memfokuskan bahagian pelanggan kami. Ini adalah projek yang besar kerana ini adalah sumber pendapatan Wahdah, muka utama apabila pelanggan datang untuk mendapatkan perkhidmatan kereta sewa.

Dari Google Analytics pengunjung yang data dari mobile adalah dengan purata 60% mobile / 40% desktop, tetapi pendapatan dari mobile vs desktop  berbeza iaitu 32% pendapatan adalah dari mobile / 68% adalah dari desktop. Menarik bukan ? Jadi satu hipotesis sudah dibuat untuk memperbaiki conversion rate di mobile.

Selain dari mobile apps (Android / iOS ) , mobile web secara responsif  (di mana apabila sistem dapat kesan pengguna dari mobile, antaramuka web akan bertukar untuk pengguna mobile) adalah alternatif terbaik untuk pelanggan kami.

Muka hadapan

Menu atas di klik

Footer

Di atas adalah antaramuka mobile Wahdah.my sekarang. Agak baik mengikut standard, tetapi kami mahu lebih lagi kerana kami ada 60% pelanggan mengakses Wahdah melalui mobile dan hanya 32% jualan.

Eksperimen pertama adalah halaman produk limousine kami.

Muka hadapan limousine

Tiada apa yang berubah kerana muka hadapan sudah cukup mudah, tetapi apa yang kami cuba ubah adalah di ruangan menu dan footer.

Menu apabila diklik tidak seperti sebelum ini. Kami menggunakan UX yang biasa di mobile apps dengan side slide berbanding dengan sekarang top slide. Footer di bawah juga kami buang dan dipindahkan ke menu tepi ini. Ini nampak lebih kemas.

Juga kelihatan di sini ada beberapa features baharu seperti terjemahan ke Bahasa Malaysia / English  dan juga matawang USD / RM.

Jika sebelum ini, untuk telefon ke hotline Wahdah tidak secara auto apabila pelanggan klik ke nombor tersebut, beberapa penambah baikan yang mudah membolehkan pelanggan klik dan terus telefon ke hotline Wahdah di mobile.

Ini adalah antara perancangan Wahdah 3.0 , dengan penambah baikan antaramuka mobile. Dengan penambahan ini, diharapkan conversion di mobile juga meningkat selaras dengan peratusan pelanggan di mobile. Kami belum habis lagi bereksperimen, dan berharap dapat melancarkan versi baharu ini secepat yang mungkin.

Saya juga akan mencuba A/B testing atau Split testing untuk mengenal pasti, adakah antara muka baharu memudahkan atau tiada perubahan yang berlaku. Jika berubah, 😁, jika tidak 😥 , kita cuba lagi 💪.