UI/UX Case Study — Redesigning Niagahoster’s Checkout Page
Disclaimer
Proyek ini merupakan tugas akhir dari “Niagahoster UI/UX Designer Virtual Internship Program” yang diselenggarakan oleh Rakamin. Semua analisis dilakukan berdasarkan analisis pribadi dan tidak secara langsung mewakili perusahaan Niagahoster.
Latar Belakang
Niagahoster merupakan sebuah perusahaan penyedia layanan web hosting yang berdiri sejak tahun 2013. Niagahoster memiliki misi untuk membantu jutaan orang memanfaatkan potensi yang ada di internet untuk membangun kesuksesan online melalui layanan web hosting yang stabil, cepat dan mudah. Niagahoster memiliki target jumlah pelanggan yang belum terpenuhi. Hal ini dipengaruhi oleh halaman checkout yang cukup membingungkan terutama untuk pelanggan baru. Pelanggan tidak memahami beberapa produk dan fitur yang disajikan. Untuk meningkatkan persentase pelanggan yang menyelesaikan transaksi, Saya memutuskan untuk mengerjakan tugas akhir dari program “Niagahoster UI/UX Designer Virtual Internship” yang diadakan oleh Rakamin. Saya menganalisis dan mendesain ulang halaman checkout untuk memberikan pengalaman yang lebih baik bagi pengguna.
Objektif
Tujuan dari tugas ini adalah untuk menganalisis dan mendesain ulang halaman checkout Niagahoster untuk memberikan pengalaman yang lebih baik bagi pengguna sehingga dapat dengan mudah menyelesaikan transaksi.
Proses Desain
Proses desain menggunakan design thinking. Berikut adalah setiap tahapan yang dilakukan dan hasil yang didapatkan.
1️⃣Empathize
Challenge Brief
Disclaimer: UX Challenge brief disediakan oleh Niagahoster. Saya melakukan analisis tambahan dan melanjutkan tahap Emphatize (Secondary Research), Define, Ideate, Prototype, dan Testing
2️⃣Define
Pada tahap ini, Saya mengumpulkan informasi yang telah diperoleh pada tahap Empathize. Kemudian, melakukan observasi untuk mengetahui kebutuhan pengguna.
Pain Points
Saya merumuskan hasil dari tahap sebelumnya ke dalam pain points. Berdasarkan hasil diskusi dengan Pengguna, terdapat beberapa pain points yang dihasilkan.
How-Might We
Dari masalah tersebut, Saya membuat How-Might We untuk mengubah masalah tersebut menjadi pertanyaan.
3️⃣Ideate
Pada tahap ini, Saya melakukan brainstorming untuk menemukan solusi berdasarkan How-Might We.
Solution Idea
Berdasarkan How-Might We, terdapat beberapa ide solusi yang dihasilkan.
Prioritization Area
Ide-ide tersebut ditentukan skala prioritasnya berdasarkan parameter user value dan effort untuk dikembangkan pada tahap selanjutnya.
4️⃣Prototype
User Flow
User flow merupakan diagram alur mengenai langkah-langkah yang harus dilakukan pengguna untuk menyelesaikan task.
Wireframe
Wireframe merupakan tata letak dalam versi Low-Fidelity untuk membantu desainer menyajikan informasi dan membentuk outline struktur serta layout interface dengan cepat.
Design System
Design system merupakan kumpulan komponen yang memudahkan desainer dalam pengerjaan user interface.
High-Fidelity
Setelah menyelesaikan tahap user flow, wireframe, dan design system, langkah selanjutnya adalah membuat High-Fidelity dengan menggunakan design system yang telah dibuat sebelumnya.
Halaman Order Hosting
Pada saat ingin melakukan pembelian hosting, Pengguna akan dihadapkan dengan halaman order hosting. Pada halaman ini, Saya melakukan perubahan pada grid, letak detail pembayaran, detail mengenai fitur, dan highlight paling laris untuk mempermudah Pengguna dalam memilih paket hosting.
Pilih Paket Hosting
Langkah selanjutnya, Pengguna memilih paket hosting dengan mengklik card paket hosting yang tersedia antara lain paket Bayi, paket Pelajar, dan paket Personal. Saya melakukan perubahan pada selection card dengan mengubahnya menjadi stroke yang berwarna biru sesuai dengan warna brand.
Pilih Durasi Hosting
Langkah selanjutnya, Pengguna memilih durasi hosting dengan mengklik card durasi hosting yang tersedia antara lain 1 tahun dan 3 tahun. Saya melakukan perubahan pada selection card dengan mengubahnya menjadi stroke yang berwarna biru sesuai dengan warna brand dan highlight diskon sehingga memudahkan Pengguna untuk memilih durasi paket.
Tambah Domain
Langkah selanjutnya, Pengguna menambah domain dengan memilih domain baru dan mengetik nama domain yang diinginkan. Setelah itu, pilih domain yang masih tersedia. Kemudian, klik button “Tambah ke Cart”. Saya melakukan perubahan pada menu aktif “domain baru” dan “Sudah Punya Domain” dengan memberikan stroke berwarna biru sesuai dengan warna brand.
Pilih Fitur Pendukung (Opsional)
Langkah selanjutnya, Pengguna memilih fitur pendukung yang bersifat opsional seperti “Auto Install Website WordPress” dan “Premium Commodo SSL” sebagai pelengkap website Pengguna.
Pilih Metode Pembayaran
Langkah selanjutnya, Pengguna memilih metode pembayaran sebagai langkah akhir dalam proses pembelian hosting. Saya melakukan perubahan pada grid peletakan detail pembayaran, selection card dengan mengubahnya menjadi stroke yang berwarna biru sesuai dengan warna brand, button yang berwarna biru sesuai dengan warna brand dan logo payment sementara.
Pembayaran Berhasil
Langkah terakhir, setelah Pengguna melakukan pembayaran dan pembayaran berhasil, maka akan muncul pop up yang menyatakan “Pembayaran Berhasil!”.
Prototype
Setelah proses desain untuk seluruh halaman selesai, langkah selanjutnya adalah membuat prototype. Desain High-Fidelity diurutkan berdasarkan user flow. Berikut adalah prototype untuk hasil re-design aplikasi Niagahoster.
5️⃣Test
Setelah membuat prototype, Saya melakukan Usability Testing bersama target pengguna dengan kriteria yang dilakukan secara daring. Narasumber memberikan saran dan masukan untuk hasil re-design aplikasi Niagahoster. Setelah menyelesaikan prototype, tahap terakhir adalah pengujian. Sebelum melakukan pengujian, Saya melakukan beberapa persiapan seperti membuat dokumen stimulus user research dan record data user research yang digunakan untuk sesi wawancara dengan target pengguna. Dalam pengujian ini, Saya menggunakan SEQ (Single Ease Question) untuk mengukur tingkat kemudahan penggunaan aplikasi dengan 6 skenario.
- Mengakses halaman order hosting
- Memilih paket hosting
- Memilih durasi hosting
- Menambah domain
- Memilih fitur pendukung (opsional)
- Memilih metode pembayaran
Dari penilaian dengan menggunakan SEQ, hasilnya adalah Pengguna 1 memberikan nilai 7 dari 7 yang berarti setiap tugas yang dilakukan mudah dimengerti. Sedangkan Pengguna 2 memberikan nilai 6.5 dari 7 yang berarti tugas yang dilakukan sudah cukup dimengerti. Selain itu, usability testing dilakukan untuk mendapatkan feedback secara detail dari Pengguna. Narasumber memberikan beberapa hal yang perlu diperhatikan untuk evaluasi hasil re-design aplikasi Niagahoster sebagai berikut.
Berdasarkan feedback dari pengguna, berikut adalah hasil evaluasi untuk hasil re-design aplikasi Niagahoster.
1 — Memperbesar ukuran font pada pilihan paket hosting
Kesimpulan
Saya merasa senang dan bangga untuk menyelesaikan UX case study re-design Aplikasi Niagahoster untuk halaman order hosting. Ini adalah sebuah pengalaman baru bagi saya untuk mengerjakan studi kasus yang berkaitan dengan hosting. Dengan studi kasus tersebut, saya belajar banyak mengenai bagaimana membuat flow yang baik, mencari motivasi untuk lebih giat mengerjakan kursus, dan situasi dimana saya harus mendalami peran sebagai pengguna. Hal tersebut tentu saja diperlukan terutama pada saat membuat prototype sehingga menarik dan mudah dipahami oleh pengguna.
Apa yang saya pelajari dari Proyek ini ?
Mendesain suatu aplikasi menjadi hal yang seru ketika kita melakukannya dengan niat yang baik serta dapat berkomunikasi baik dengan tim. Ketika sudah ditetapkan apa saja tugas dan batas waktu pengerjaan, maka dengan jelas harus dilaksanakan dengan baik. Banyak hal yang harus diperhatikan dalam mendesain sebuah aplikasi. Tidak hanya tentang keindahan, pengalaman pengguna pun harus diperhatikan.
Menurut saya, aplikasi yang baik adalah aplikasi dengan tampilan menarik sehingga pengguna tidak bosan pada saat menggunakannya serta flow atau alur proses yang mudah dimengerti pengguna sehingga tidak menimbulkan kesalahpahaman antara desainer, developer, dan pengguna.
Terimakasih sudah membaca sampai selesai !
Let’s get connected with LinkedIn here 😊
