Proses UI/UX Design 2 – Customer Journey & User Flow

-

 

Dalam dunia UI/UX design, proses adalah kunci. Mendesain bukan hanya soal keindahan, tapi bagaimana produk benar-benar nyambung dengan pengguna. Karena itu, sebelum masuk ke wireframe atau tampilan visual, kita harus memahami apa yang sebenarnya dialami user.
Dua alat penting di tahap awal ini adalah Customer Journey dan User Flow. Mari kita kupas satu per satu secara sederhana tapi tetap profesional.


Apa itu Customer Journey?

Customer Journey adalah perjalanan lengkap yang dilalui pengguna saat berinteraksi dengan produk atau layanan kita. Ini bukan cuma saat mereka memakai aplikasi, tapi juga sejak mereka menyadari kebutuhan, mencari solusi, memilih produk, menggunakan produk, hingga setelahnya.

🧠 Contohnya:

Bayangkan kamu membuat aplikasi pemesanan laundry. Customer journey-nya bisa seperti ini:

  1. User sadar baju menumpuk → butuh laundry.

  2. Mencari aplikasi laund Play Store.ry di

  3. Instal aplikasi → daftar akun.

  4. Pilih layanan → jadwal antar jemput.

  5. Bayar → tunggu pickup → laundry selesai → baju diantar kembali.

Semua langkah ini masuk ke dalam customer journey.


Cara Membuat Customer Journey

Untuk membuatnya, kamu bisa ikuti langkah berikut:

  1. Tentukan Persona 

    di artikel sebelumnya kita sudah membahas persona Siapa penggunamu? Misal: Ibu rumah tangga, mahasiswa, pekerja kantoran.

  2. Identifikasi Tahapan Perjalanan
    Biasanya dibagi menjadi:

    • Awareness(sadar kebutuhan)

    • Consideration(membandingkan opsi)

    • Purchase(melakukan aksi/pembelian)

    • Service(menggunakan layanan)

    • Loyalty(kesan, loyalitas)

  3. Catat Perasaan & Masalah Pengguna di Tiap Tahapan
    Contoh:

    • Awareness → bingung pilih aplikasi

    • Purchase → ragu metode pembayaran

  4. Temukan Opportunity untuk Desain
    Di mana kamu bisa bantu lewat fitur atau UX?


Tools Rekomendasi: MindMeister

Kalau kamu suka visual, coba pakai MindMeister.
Ini tool mind mapping yang bisa kamu gunakan untuk menggambarkan customer journey secara visual dan interaktif.


Apa itu User Flow?

Setelah tahu apa saja yang dialami pengguna, kini kita buat alur dalam aplikasi yang mengalir logis dan nyaman.
Inilah yang disebut User Flow.

User Flow adalah diagram yang menunjukkan langkah demi langkah yang dilakukan pengguna di dalam aplikasi atau website untuk mencapai tujuan tertentu.

📌 Contoh User Flow:

Untuk aplikasi laundry tadi, user flow-nya bisa:

  • Login → Pilih layanan → Atur jadwal → Bayar → Konfirmasi



Cara Membuat User Flow

  1. Tentukan tujuan pengguna
    Misal: Memesan laundry express.

  2. Buat langkah-langkah yang diperlukan untuk mencapai tujuan itu
    Gunakan diagram berbentuk kotak dan panah.

  3. Pastikan alurnya simpel, tidak membingungkan
    Satu aksi → satu respon → lanjut ke langkah berikutnya.

Kamu bisa buat user flow di tools seperti Figma, Whimsical, atau Lucidchart.


Untuk menjelaskan lebih rinci alur sistem, kamu juga bisa menambahkan:

 

Use Case Diagram

Use Case Diagram adalah bagian dari UML (Unified Modeling Language) yang membantu menjelaskan siapa (aktor) yang berinteraksi dengan sistem, dan aksi apa saja yang bisa mereka lakukan.

🧱Elemen:

  • Aktor: siapa yang menggunakan sistem (misal: user, admin)

  • System: sistem/aplikasi yang kamu desain

  • Use Case: aksi atau fitur yang tersedia (misal: login, pesan layanan, lihat riwayat)

     

    contoh:

    Aktor: User
    System: Aplikasi Laundry
    Use Case:
    - Login
    - Pesan Layanan
    - Lihat Status
    - Lakukan Pembayaran
     

 

 Activity Diagram

Kalau User Flow lebih ke arah pengguna, Activity Diagram menggambarkan alur logika aktivitas dalam sistem, termasuk decision point (percabangan), loops, dan proses paralel.

Contoh:

Start → Login  
→ [apakah sudah punya akun?] → (Ya: masuk) / (Tidak: daftar)  
→ Pilih layanan → Input alamat → Bayar → Selesai
 


 
 
 
Jadi, di tahap awal proses UI/UX Design:


  • 

    Customer Journey membantumu paham keseluruhan pengalaman pengguna.
    

  • 

    User Flow menunjukkan alur dalam aplikasi yang efisien dan ramah.
    

  • 

    Use Case Diagram menjelaskan interaksi antara aktor dan sistem.
    

  • 

    Activity Diagram memberi pandangan logis alur kerja sistem.
    



Kalau kamu serius membangun produk yang user-centric, jangan skip tahap ini.


Semoga artikel ini bermanfaat dan bisa jadi referensi desain kamu ke depannya.


 


Komentar

Posting Komentar

Postingan populer dari blog ini

ethical hacking part 14 membuat malware Trojan

-
Gambar
ethical hacking part 14 membuat malware Trojan Di tutorial Kali ini Kita akan belajar membuat virus Trojan , apa itu Trojan ,Trojan ini adalah sebuah malicious software (malware) Yang merupakan file exe Yang berbahaya Yang dimana didalam file exe tersebut Kita memasukan payloads Yang Kita gunakan untuk memperoleh akses pada target mesin Untuk menggunakan Trojan ini Kita harus memasukan sendiri Trojan kedalam target mesin ,caranya bisa saja Kita gunakan USB,kirim melalui email apapun caranya Yang penting Trojan ini bisa masuk kedalam target  mesin Dan user dari target mesin nya harus menjalankan Trojan tersebut ,Cara nya bisa saja Kita masukan Trojan nya kedalam sebuah program Dan ketika user mendownload,menginstall Dan menjalan program tersebut Trojan nya akan memberi Kita akses ataupun Kita sisipkan kedalam sebuah gambar (image) Dan ketika usernya membuka gambarnya maka Kita Akan memperoleh akses ,membutuhkan skill sosial engineering tinggi untuk melakukan exploit i...
Baca selengkapnya

ethical hacking part 3 reconnaissance & information gethering

-
Gambar
  ethical hacking part 3 reconnaissance &    information gethering Saya sudah sampaikan tentang reconnaissance Dan information gethering ini sebelum nya Dan sekarang Kita akan mempraktekan nya Ada 2 Cara untuk melakukan information gethering ini Yang ke satu active information gethering Dan Yang kedua passive information gethering Active information gethering ini adalah Kita mengumpulkan informasi dengan Cara berinteraksi langsung dengan si target. Passive information gethering ini adalah Kita mengumpulkan informasi tentang si target dengan melalui pihak ketiga atau melalui middle source  misal nya Kita browser di internet dengan Google untuk mencari informasi tentang si target. Apapun Cara nya tujuan nya Sama yaitu mencari informasi tentang target Tools tools Yang bisa Kita pakai untuk melakukan information gethering ini ada banyak yaitu ping,whois,nslookup,whatweb,theHarvester, Hunter.io Dan Sherlock. Kita akan mulai dengan melakukan active...
Baca selengkapnya

membuat Desain Grafis dari HP dan Cara menjual Karya Desainmu

-
Gambar
membuat Desain Grafis dari HP dan Cara menjual Karya Desainmu Desain grafis kini bukan lagi keterampilan eksklusif yang hanya bisa dikuasai oleh orang yang memiliki laptop mahal atau perangkat canggih. Dengan perkembangan teknologi dan aplikasi mobile, siapa pun bisa mulai belajar desain grafis hanya dengan bermodalkan smartphone. Artikel ini akan membantu kamu memahami apa itu desain grafis, tools apa saja yang bisa kamu gunakan langsung dari HP, dan bagaimana cara menjadikan skill ini sebagai sumber penghasilan. Apa Itu Desain Grafis? Desain grafis adalah proses menyusun elemen visual seperti teks, warna, gambar, bentuk, dan ilustrasi untuk menyampaikan pesan secara efektif. Tujuan utama dari desain grafis adalah komunikasi visual membuat informasi menjadi lebih menarik, mudah dipahami, dan menggugah emosi. Contoh paling dekat dari hasil desain grafis bisa kamu temukan dalam kehidupan sehari-hari, seperti: 1.Poster di Instagram 2.Logo brand atau produk 3.Kartu undan...
Baca selengkapnya