UI & UX Case Study Krealogi : Customer Relationship Management

Muhammad Najib Ramadhan Basri
6 min readNov 28, 2021

--

Latar Belakang

Skilvul Virtual Internship (SVI) merupakan salah satu program magang yang ada di Kampus Merdeka. SVI sendiri diadakan oleh PT. Impactbyte Teknologi Edukasi. Pada program SVI ini peserta akan mempelajari tentang UI & UX design selama 8 minggu, kemudian para peserta magang diminta mengerjakan challenge partner. Adapun challenge partner yang penulis dan tim ambil adalah membuat fitur Customer Relationship Management pada Krealogi.

Objektif

  • Membantu user dalam melakukan pencatatan usahanya
  • Memberikan user kenyamanan dalam menggunakan fitur Customer Relationship Management

Target User & Audience

Target user dan audience pada projek ini ada dua sebagai berikut :

  1. Berusia 17 tahun keatas
  2. Ditargetkan Pemilik usaha kecil, mikro, ultra mikro
  3. Semua Gender
  4. Warga Negara Indonesia
  5. Memiliki Gadget/Ponsel Pintar

Tools

Pada projek ini saya menggunakan tools yang biasa digunakan, antara lain :

  1. Figma — sebagai tools dalam pembuatan design thinking hingga UI design.
  2. Zoom — sebagai tools dalam melakukan rapat
  3. Discord — sebagai tools dalam melakukan koordinasi
  4. Whatsapp — sebagai tools komunikasi sehari-hari tim

Tim Project

Tim ini terdiri dari 3 orang UI/UX designer yaitu saya, azharadev dan Andreas Febri yang merupakan peserta magang di Skilvul.com. Kami mengambil challenge membuat fitur Customer Relationship Management pada partner Skilvul Krealogi. Pada project kali ini saya mendapat job untuk membuat userflow pembayaran untuk pembeli yang sudah lunas dan membuat UI dari fitur hutang dan profile.

Process

Design System

[Empathize]

Research Method

  1. In-Depth Interview
  2. Prototype Testing

Research Objective

  1. Mencari tahu kebutuhan user dalam melakukan pencatatan usahanya
  2. Mencari tahu bagaimana kenyamanan user dalam menggunakan fitur Customer Relationship Management
  3. Mencari tahu pendapat user mengenai solusi yang diberikan

Respondent Criteria

  1. Berusia 17 tahun keatas
  2. Ditargetkan Pemilik usaha kecil, mikro, ultra mikro
  3. Semua Gender
  4. Warga Negara Indonesia
  5. Memiliki Gadget/Ponsel Pintar

List of Questions

  1. Sebelum memulai, silahkan bapak/ibu/saudara dapat memperkenalkan diri terlebih dahulu
  2. Saat ini sedang memiliki usaha apa dan dibidang apa?
  3. Apakah saat ini usaha tersebut pemasarannya sudah dilakukan secara online?
  4. (Jika iya) Menggunakan Platform/aplikasi apa?
  5. (Jika Tidak) Apakah bapak/ibu/saudara selalu melakukan pencatatan untuk usahanya?
  6. Biasanya menggunakan media apa untuk pencatatannya?
  7. Apakah bapak/ibu/saudara pernah menggunakan aplikasi untuk pencatatan usaha?
  8. (Jika Iya) Biasanya menggunakan aplikasi apa?
  9. (Jika menggunakan aplikasi) apakah pernah kesulitan dalam memantau konsumen dan menghubunginya? (Jika iya) kenapa?

[Define Stage]

Pain Point

Pada tahap ini tim kami mendapatkan beberapa pain point kami amati ketika menggunakan aplikasi krealogi dan melihat kebutuhan user, antara lain sebagai berikut:

Pain Point

How Might We

Setelah mendapatkan pain point user kami melakukan brainstorming dan menyusun how might we berdasarkan pain point yang telah didapatkan.

How Might We

[Ideate Stage]

Solution Idea

Solution Idea

Affinity Diagram

Affinity Diagram

Prioritization Idea

Prioritization Idea

[Prototype]

User Flow

Pada pembuatan userflow ini kami mendiskusikan bersama mengenai userflow pesenan masuk atau catat pesanan. Kemudian kami membagi tugas untuk membuat userflow yang lainnya. Saya mendapat tugas membuat userflow pembayaran lunas

Userflow Pesanan Masuk / Catat Pesanan
Userflow Pembayaran Lunas
Userflow Pembayaran Belum Lunas
Userflow Pembayaran Hutang
Userflow Hutang

Wireframe

Pada pembuatan wireframe ini saya mendapat tugas membuat wireframe tampilan fitur hutang dan catat pesanan.

Wireframe fitur hutang
wireframe fitur catat pesanan
wireframe daftar pesanan

UI Styleguide

Pada UI styleguide saya membantu teman saya dalam membuat asset untuk kalender dan navigation bar.

color styleguide
typography
icongraphy
header styleguide
text field styleguide
button styleguide
tabbing styleguide
action list styleguide
calender styleguide
navigation bar styleguide
label produk styleguide

High-Fidelity Design

halaman transaksi
halaman detail pesanan
halaman catat pesanan
halaman stok produk
halaman hutang
halaman profil

Link Figma : https://www.figma.com/file/kMKPrACPopJtbzyygZu4ej/CRM-Krealogi-UI-Design?node-id=7%3A3

[Prototype]

prototype

Prototype figma : https://www.figma.com/proto/kMKPrACPopJtbzyygZu4ej/CRM-Krealogi-UI-Design?page-id=7%3A3&node-id=444%3A8295&viewport=277%2C48%2C0.08&scaling=scale-down&starting-point-node-id=444%3A8295&show-proto-sidebar=1

[Usability Testing]

Pada tahap usability testing ini kami menggunakan metode prototype testing dengan 2 orang user yang memiliki usaha kecil-kecilan. Kemudian kami meminta user untuk melakukan penilaian menggunakan metode SEQ(Single Ease Question) dengan memberi penilaian 1–7 berdasarkan kepuasan dan problem solve dalam masalah platform pencatatan usaha.

Video Conference usability testing dengan 2 user

[Iterasi Design]

Berdasarkan hasil usability testing, kami mendapat masukan mengenai design kami, sehingga kami melakukan brainstorming lagi dan mendapatkan beberapa pain point tambahan, antara lain seperti berikut :

Setelah mendapatkan pain point kami melanjutkan merevisi design

Disclaimer

This project is part of the UI/UX training program implemented by Skilvul, for Kampus Merdeka program held by Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Krealogi is the Challenge Partner. I am not working for nor contracted professionally by Krealogi

--

--