Revamp Landing Page Microsite Event Turnamen IESF Untuk Meningkatkan Fitur Pendaftaran

Afdan Rojabi
UX Afdan
Published in
7 min readMay 15, 2023
Gambar : Dok. Garudaku

Salam hangat, saya Muhammad Afdan Rojabi (Afdan Rojabi), sedang melamar pekerjaan sebagai UX UI Designer di Garudaku (PT. Garuda Produksi Kreatif). Semoga dapat menjadi bahan pertimbangan untuk bergabung menadi bagian dari Garudaku. Penelitian yang saya amati dan desain yang saya akan buat, menceritakan tentang bagaimana meningkatkan Fitur Pendaftaran Event Turnamen pada Landing Page Microsite Event pada target pengguna usia Remaja Awal (SMP) — Masa Dewasa Akhir (Pekerja Produktif) dengan rentang usia 12–45 tahun guna menghasilkan sebuah produk digital yang berupa desain User Interface.

Kategori umur atau kelompok usia menyajikan informasi mengenai distribusi usia penduduk berdasarkan kelompok kesejahteraannya. Indikator ini bertujuan untuk melihat apakah kelompok kesejahteraan tertentu didominasi oleh kelompok usia yang relatif produktif atau didominasi oleh kelompok usia non-produktif seperti anak-anak atau lanjut usia.

Sesuai ketentuan dari Departemen Kesehatan RI (2009) terkait pengelompokan usia. Setidaknya ada 9 (sembilan) kelompok umur yakni:

1. Masa balita (usia 0–5 tahun);

2. Masa kanak-kanak (usia 5–11 tahun);

3. Masa remaja awal (usia 12–16 tahun);

4. Masa remaja akhir (usia 17–25 tahun);

5. Masa dewasa awal (usia 26–35 tahun);

6. Masa dewasa akhir (usia 36–45 tahun);

7. Masa lansia awal (usia 46–55 tahun);

8. Masa lansia akhir (usia 56–65 tahun) dan

9. Masa manula (usia 65 tahun ke atas).

Berdasarkan kriterianya sendiri yang diambil adalah masa remaja awal sampai masa dewasa awal atau dari usia 12–35 tahun.

Brief

IESF adalah sebuah turnamen internasional yang dihadiri oleh lebih dari 110 negara, untuk game yang dipertandingkan adalah MLBB, PUBG Mobile, Free Fire.

Asumsikan conversion rate untuk user mendaftar turnamen kurang dari 30%. Kamu diharapkan dapat membuat sebuah Landing Page untuk Event IESF ini untuk meningkatkan conversion rate halaman ini yang berkaitan :

· Informasi utama mengenai IESF

· Persyaratan daftar turnamen

· Jadwal pendaftaran

· Total slot peserta/tim

Role

UI UX Designer

Timeline

5 Hari

Tools

Figma, Miro, Spreadsheets, dan Canva

Design Prosess

Studi kasus ini dilakukan dengan menggunakan kerangka Design Thinking dari langkah Empathize to Test.

Gambar : Design Thinking Process

Step 1 : Empathize

IESF adalah sebuah turnamen internasional yang dihadiri oleh lebih dari 110 negara, untuk game yang dipertandingkan adalah MLBB, PUBG Mobile, Free Fire. Hal pertama yang pertama setelah mendapatkan brief dari pihak Garudaku, saya melakukan user interview dengan tujuan menghasilkan user journey map dengan objective sebagai berikut:

Objective:

1. Dapat memahami interaksi pengguna dengan fitur pendaftaran

2. Mengindentifikasi opportunity untuk meningkatkan angka conversion rate pada pendaftaran.

User Interview

Dalam upaya untuk mencapai tujuan tersebut, pengguna kualitatif dalam tahap produktif adalah alat yang paling cocok untuk memahami bagaimana pengguna mempersepsikan produk.

Jadi pada posisi ini, metode penelitian kualitatif yang saya akan lakukan adalah wawancara / interview mendalam dengan 5 pengguna. Diperkirakan wawancara dengan lima pengguna akan mengungkap sekitar 85% masalah kegunaan yang terkait dengan fitur aplikasi sesuai, jumlah tersebut sesuai dengan kutipan pada Norman Nelsen Group “ And, while there is a statistical uncertainty about any number obtained from a quantitative study (how will the average obtained from my study compare with the average of the general population), there is absolutely no uncertainty in a qualitative study — any error identified is a legit problem that needs to be fixed. “

Kriteria User:

1. User sering mengkuti turnamen (Aktif)

2. User pertamakali mengikuti turnamen (Fist-Time Buyer)

3. User Musiman (Dorman)

4. Usia 12–35 tahun

Media Interview:

Tatap muka langsung

Identifikasi Interaksi:

Untuk dapat pendaftar melalui fitur pendaftaran event turnamen di PWA (Progressive Web App) garudaku, pengguna harus melaui beberapa halaman, seperti :

Note : Cara baca dari kiri atas -> Kanan Atas -> Kiri Bawah -> Kanan Baah
  1. Screening Question (Qualitative Process):
Tabel : Screening Question

2. Dept Interview (Getting Insight User):

a. User Aktif :

b. user musiman (Dorman)

c. user fist-time buyers

Gambar : Dokumentasi Interview

Note :

Lebih jelas dapat lihat pada link :

https://docs.google.com/spreadsheets/d/1QRBx4hqbZ0pMsSQuvFt41Ohd5kzB3uthPXdfm4TiINI/edit?usp=sharing

User Active Journey Map pada fitur pendaftaran event tournament di Garudaku :

Fist-Time Journey Map pada fitur pendaftaran event tournament di Garudaku :

Dorman Journey Map pada fitur pendaftaran event tournament di Garudaku :

Note :

Melihat lebih detil bisa ke :

https://www.figma.com/file/4exQquaZItpKrL2ZFzJhtr/Garudaku?type=whiteboard&node-id=0%3A1&t=CkhzvNtq0WNTg7jR-1

Step 2 : Define

Pada langkah kedua dari proses desain, saya akan membuat Problem Statement dan How Might We dari hasil steps 1 yang pada akhirnya menghasilkan pernyataan masalah.

Problem Statement

1. a. “Langsung diminta login dan daftar padahal belum tahu ini apa”

b. “OTP nya masuk ke whatsapp kirain ke SMS”

c. “Tidak praktis daftar atau loginnya”

2. a. “Masa langsung ke beranda dan gak tahu harus ngapain”

b. “Bingung karena langsung ke halaman beranda ini”

c. “Kaget, halamannya berbeda dan beda banget sama landing page”

3. a. “Lebih banyak yang sudah selesai turnamennya”

b. “Harganya mahal dan banyak yang sudah selesai serta filternya membingungkan”

c. “Banyak event turnamen yang blank atau tidak muncul apa-apa ”

4. a. “Hadiah dan persyaratannya gak terlalu keliatan mencolok”

b. “Kok ini masuk customer sevice ya”

c. “Info lebih lanjutnya malah dilempar dan disuruh menghubungi ke whatsapp”

5. a. “Anggota tim saya belum ada yang daftar di situs ini, masa harus invite orang lain yang tidak dikenal”

b. “Tidak bisa lsngsung skip, padahal anggota lainnya belum pada daftar”

c. “Anggota tim susah ditemukan dan malah wajib dimasukkin anggotanya meski tidak dikenal”

6. a. “Harusnya ini di sebelumnya dan terlihat gak penting”

b. “Steps nya tidak jelas”

c. “Kenapa tidak disatuin ya”

7. a. “Masa langsung disuruh kirim bukti pembayaran dan tidak ada metode pembayarannya”

b. “Masa langsung disuruh kirim bukti pembayaran dan tidak ada metode pembayarannya”

c. “Halaman tertap tidak pindah meski sudah kirim bukti”

How Might We

1. Bagaimana kalau kita memperbaiki landing page dengan menampilkan event turnamen yang akan datang/jadwal pendaftaran, filter sesuai game yang dimainkan dan menukar flow login/daftar setelah CTA Daftar.

2. Bagaimana kalau kita menukar detail turnamen dan memberikan informasi terkait promo yang tersedia

3. Bagaimana kalau kita memberikan informasi terkait alur pendaftarannya

4. Bagaimana kalau kita dapat memberikan opsi lewati terkait anggota tim

5. Bagaimana kalau kita menghapus bagian detail profil tim

6. Bagimana kalau kita membuat pilih metode pembayaran

7. Bagaimana kalau kita membuat celebrate page setelah berhasil melakukan pembayaran yang akan diarahkan ke beranda atau edit anggota tim

Step 3 : Ideate

Pada langkah paling kreatif dari proses desain, saya menemukan solusi dan membuat dengan Low-Fi, Hi-Fi, Usability testing, dan UI Kit.

User flow

Link detail :

https://www.figma.com/file/7aGOufQC4tRZ0ZGsbDhpkm/Garudaku?type=whiteboard&node-id=0%3A1&t=WHRPDN0NMNssd3cF-1

Low-Fi Wireframe

Link Low-Fi : https://www.figma.com/file/eRNVX6rrCnnTW1Iwi2HZjb/Garudaku?type=design&node-id=0%3A1&t=5OB4y5KoXpI8cOhS-1

UI KIT

Hi-Fi

Untuk melihat lebih detail bisa klik link ini : https://www.figma.com/file/eRNVX6rrCnnTW1Iwi2HZjb/Garudaku?type=design&node-id=18%3A56&t=sG0ziLOvqn603ZZv-1

Step 4 : Prototype

Prototype

Untuk melihat prototype : https://www.figma.com/proto/eRNVX6rrCnnTW1Iwi2HZjb/Garudaku?type=design&node-id=104-970&scaling=scale-down&page-id=18%3A56&starting-point-node-id=104%3A970

Step 5 : Test

Usability Testing

Karena waktu & screen yang terbatas, saya melakukan pengujian dengan Hi-Fi dengan 3 peserta melalui Google Meet, masing-masing berlangsung sekitar 30 menit pada tanggal 08 Mei 2023.

The objective of the test:

1. Amati apakah pengguna dapat menyelesaikan tugas yang ditentukan.

2. Identifikasi area aplikasi yang memerlukan perubahan untuk meningkatkan kinerja dan kepuasan pengguna.

Dari hasil usability testing hanya ditemukan minor seperti typo dan penamaan yang kurang tepat saja.

Penutup

Demikian solusi yang dapat dihasilkan guna meningkatkan conversion rate pada fitur pendaftaran. Semoga dapat menjadi bahan pertimbangan untuk bergabung dengan perusahaan bapak/ibu. Mohon maklum jika ada kekurangan dan kesalahan dari proses menjawab tantangan ini.

--

--

Afdan Rojabi
UX Afdan

User Experience | Product | Management & Business