Redesign Penambahan Fitur Top Up E-WALLET Pada Aplikasi Aladin

11 Mar 2026
Redesign Penambahan Fitur Top Up E-WALLET Pada Aplikasi Aladin

About me:

Hallo perkenalkan nama saya Muhammad Haikal, dari mahasiswa Universitas Pradita Jurusan Sistem Informasi. Di semester 3 ini saya mendapat tugas dari mata kuliah Interaksi Manusia dan Komputer (IMK) untuk membuat project redesain suatu aplikasi. Proses pengerjaannya selama 3 bulan dengan dibimbing oleh Ibu Afifah Trista Ayunda, S.Kom, M.Kom. selaku dosen mata kuliah IMK. Dan inilah portofolio saya dalam UI Designer dan UX Researcher. Dengan Case Study : Redesign Penambahan Fitur Top Up E-WALLET Pada Aplikasi Aladin.

Background

Aladin merupakan aplikasi Bank berupa layanan untuk melakukan transaksi perbankan yang dapat diunduh dan terpasang pada telepon selular milik Nasabah. Aladin juga memiliki beberapa fitur seperti pengisian pulsa,paket data, tagihan listrik, dan juga token listrik. Setelah melakukan penelitian melalui kuesioner Gform saya menemukan lumayan banyak orang ingin adanya penambahan fitur pada aplikasi Aladin ini, yang dimana mereka menginginkan fitur Top Up E-Wallet. Sehingga saya memunyai ide untuk Redesign penambahan fitur Top Up E-Wallet pada aplikasi Aladin, agar mempermudah masyarakat untuk top up E-Wallet melalui aplikasi Aladin.

Diharapkan dengan ditambahkannya fitur Top up E-Wallet dapat meningkatkan kepuasan pengguna aplikasi Aladin ini.

STAGE 1-Emphatize

Pada tahap ini, saya berempati kepada pengguna dengan menggali wawasan dari pengguna melalui kuesioner yang saya buat. Saya merencanakan penelitian ini mulai dari memikirkan tujuan penelitian, metode penelitian yang tepat, hingga menentukan target partisipan.

Rencana Penelitian

Objective- Business goal:

  1. Meningkatkan Kepuasan pengguna menggunakan aplikasi Aladin.
  2. dengan adanya penambahan fitur top up E-Wallet dapat meningkatkan jumlah pengguna aplikasi Aladin.

Research Goal:

  1. Memahami motivasi user dalam menggunakan fitur Top up E-Wallet pada aplikasi Aladin.
  2. Memahami user behavior ketika menggunakan fitur Top up E-Wallet pada aplikasi Aladin.

Method

  • Survey (Kuantitatif): untuk menyaring partisipan yang memenuhi kriteria.
  • Usability Testing: untuk mengevaluasi pengalaman pengguna dalam menggunakan fitur Top up E-Wallet melalui serangkaian tasks yang diberikan.

Target Participant

Kriteria Partisipan:

  1. Laki-laki dan perempuan
  2. Pengguna Aplikasi Aladin
  3. Usia: Kurang dari 18–35 tahun

Jumlah partisipan:

Total ada 30 partisipan dengan rincian:

  1. Pengguna Aplikasi Aladin= 30 Partisipan

Timeline

3 bulan (Oktober-Desember)

Tools

Figma, Google Form, Google Spreadsheet, Zoom, WhatsApp

Stage 2-Define

User Persona

User persona merupakan hasil pengelompokan yang akan dijadikan sebagai persona untuk lebih mengenal user, termasuk mengelompokkan perilaku, sikap, kebutuhan, tujuan, pain point dan touch point.

Customer Journey Map

Customer Journey Map merupakan metode UX populer yang memungkinkan menemukan banyak wawasan tentang pengguna. Dengan CJM dapat mengungkapkan lebih banyak detail seperti transformasi emosional pengguna, pain point, dan peluang UX. Berdasarkan hasil analisis, pengguna memiliki pain point dalam menggunakan aplikasi Aladin setelah fitur Top up E-Wallet dibuat.

Sebelum ditambahkan Fitur Top Up E-Wallet


Setelah ditambahkan Fitur Top Up E-Wallet

Stage 3 — Ideation

User Flow

User Flow digunakan untuk menggambarkan keseluruhan alur pengguna dalam menggunakan fitur Top Up E-Wallet. Berikut ini adalah alur aktivitas pengguna saat ingin Top up E-Wallet.

Sebelum ada fitur Top Up E-Wallet

Setelah ada fitur Top up E-Wallet

Information Architecture (IA)

Arsitektur Informasi adalah metode untuk mengatur semua aliran, konten, dan persyaratan desain dalam suatu aplikasi. AI ini saya buat berdasarkan informasi dan konten yang sudah ada di aplikasi Aladin, saya hanya menambahkan solusi pada aplikasi dengan ditandai warna merah.

Wireframe

Wireframe adalah kerangka atau blueprint dalam UX Design yang menjadi representasi visual dari struktur website atau aplikasi. Dengan membuat wireframe memudahkan saya untuk mengatur tata letak dan fungsionalitas halaman sebelum ditambahkan konten visual.

Design System

Desain sistem digunakan untuk membuat komponen seperti tipografi, warna, ikon dan lainnya yang akan diterapkan dalam mock up. Desain sistem membantu desain kita menjadi konsisten.

Mock-Up Mock-Up adalah visualisasi atau rancangan konsep desain yang akan diterapkan, di dalamnya terdapat elemen visual seperti warna, tipografi, ikon dan elemen lainnya.

Stage 4 — Prototype

Prototype

Prototype merupakan model UI interaktif yang digunakan untuk tujuan demonstrasi kepada pengguna saat usability testing untuk memastikan bahwa aplikasi yang di desain apakah sudah berjalan dengan semestinya.

Stage 5 — Testing

Usability Testing

Dalam tahap ini, prototype yang sudah dibuat diuji kepada pengguna untuk memastikan apakah terdapat suatu masalah dalam alurnya atau desainnya masih ada yang belum sesuai, sehingga memunculkan iterasi dalam desain.

Objective

  1. Untuk memastikan apakah terdapat suatu masalah dalam alur atau desainnya.
  2. Mendapatkan insight desain baru dari user.

Method

Metode usability testing yang digunakan yaitu observasi dan wawancara melalui zoom, user akan diminta untuk melakukan pengujian prototype dan menjawab pertanyaan wawancara mengenai tanggapannya setelah melakukan prototyping.

Participant Criteria

  1. Pengguna Aktif Aladin.
  2. Pernah menggunakan fitur Top Up E-Wallet diaplikasi lain.
  3. 3 partisipan.

Questions Usability Testing

  1. Bagaimana tanggapanmu terkait keseluruhan flow di apalikasi tersebut?
  2. Hal apa saja yang kamu rasa kurang nyaman ketika kamu jalani? Mengapa?
  3. Menurut anda Hal apa saja di dalam desain yang sudah baik?

Insights and Recommendation From User

Ini adalah beberapa masalah yang ditemukan selama usability testing:

  1. Pada bagian kotak nomor dan kotak pemilihan jumlah top up terlalu kaku, mungkin bisa dibuat agak bulet supaya lebih nyaman dilihat.
  2. Pada bagian warna masih terlalu biasa, mungkin perlu menambahkan warna agak lebih nyaman lagi untuk dilihat dari tampilan aplikasi tersebut.

Key Takeaways

  1. Semua user berhasil menyelesaikan tugasnya dengan sukses, meskipun ada sedikit masalah yang ditemukan seperti bagian kotak terlalu kaku dan juga pada warna.
  2. Secara keseluruhan menurut semua user, desain yang dibuat sudah bagus sesuai dengan aplikasi Aladin aslinya, penambahan fitur “Top Up E-Wallet” menjawab kebutuhan user, dan alurnya sudah sesuai sehingga mudah dipahami.

Iteration

Setelah melakukan usability testing, saya mendapatkan insight baru dari partisipan. Berikut improvement opportunities yang saya implementasikan.

Pada bagian kotak

  1. Kotak terlalu kaku yang dimana pengguna agak merasa kurang nyaman, sebaiknya digantikan dengan agak bulet agar pengguna merasa nyaman saat melihat pada aplikasi.

Pada bagian warna

  1. Pada bagian warna di bagian pemilihan top up E-Wallet terlalu polos,perlunya ditambah warna agar pengguna lebih merasa nyaman saat menggunakan fitur pada aplikasi tersebut.