After finishing my 1st internship, I got more interested in working in tech which to proven my
skills and capability to real world case and work environment. On this 2nd internship, I became a
UI/UX
Designer Intern at Desty. Established on 2020, Desty have a mission to digitized commerce in
Indonesia. Proven by its product lines that have their own features to solve a specified business
problem and day-to-day business operation. From the start, I knew I was really really got my eyes
caught by one of its product that is Desty Menu. Desty menu is restaurant (F&B) tech product to make
operations more efficient by using QR ordering system. Desty Menu have integrated digital menu with
payment feature specifically designed for F&B businesses, hospitality, and digital ordering.
By using Desty Menu, businesses can create a new order experience for customers, which can increase
sales and income while minimizing operational costs.
Tentang Desty
Setelah menyelesaikan magang pertama saya, saya semakin tertarik untuk bekerja di bidang teknologi
untuk membuktikan kemampuan saya dengan kasus dan lingkungan kerja yang sebenarnya. Pada magang
ke-2 ini, saya menjadi UI/UX Designer di Desty. Didirikan pada tahun 2020, Desty memiliki
misi untuk mendigitalisasi e-commerce dan bisnis di Indonesia. Terbukti dari produk-produknya yang
memiliki fitur-fitur tersendiri untuk menyelesaikan
masalah bisnis tertentu dan operasi bisnis sehari-hari. Dari pertama kali tahu mengenai Desty, saya
benar-benar tertarik dengan tertarik dengan salah satu produknya yaitu Desty Menu. Desty Menu adalah
aplikasi
bisnis F&B untuk membuat operasional restoran menjadi lebih efisien dengan menggunakan sistem
pemesanan QR.
Desty Menu memiliki menu digital dengan yang dirancang khusus untuk bisnis F&B, perhotelan, dan
pemesanan digital.
Dengan menggunakan Desty Menu, pelaku usaha dapat menciptakan pengalaman pemesanan yang baru bagi
pelanggan yang dapat meningkatkan penjualan sekaligus meminimalisir biaya operasional.
My Role
As a designer, my responsibility is to transform business requirements and product research into usable,
good, and intuitive designs. I learn about the products and understand the business needs to help the
Desty team create new features and improve the overall product performance over time. In every project,
I get involved in the process by communicating with the PMs, creating design drafts, aligning with other
designers, presenting, and reviewing with stakeholders.
The Task
Desty Menu has 3 user sides, each with a unique design language. As a designer, I got chances and
trust for designing new features and improving the existing ones in terms of design, flow, copywriting,
and functionality.
However, the requirements, loads, and objectives for each project I work on is
varied as I will explain below.
Peran Saya
Sebagai seorang desainer, tanggung jawab saya adalah mengubah kebutuhan bisnis dan riset produk menjadi
desain yang dapat digunakan,menarik, dan desain yang intuitif. Saya mempelajari produk dan memahami
kebutuhan bisnis untuk membantu
tim Desty dalam membuat fitur baru dan meningkatkan kinerja produk secara keseluruhan dari waktu ke
waktu. Dalam setiap proyek, saya terlibat dalam proses dengan berkomunikasi dengan PM, pembuatan konsep
desain, alignment dengan
desainer lain, presentasi, dan review dengan para stakeholders.
Bentuk Pekerjaan
Kebutuhan, beban, dan tujuan pada setiap proyek yang saya kerjakan bervariasi seperti yang akan saya
jelaskan di bawah ini.
Project
Showcase
#1 The New QRIS Payment Method
With the variety of payment methods to choose from to pay for an order, most users is observed to pay
the order with their e-wallets like Gopay (#1 top method), ShopeePay (#3), or OVO (#4). However, those
e-wallets have their own transaction fees/MDRs that also vary. Compared
to
QRIS, the fee that merchants need to pay will be much lower if their customers use QRIS as their
payment
method. QRIS, or Quick Response Code Indonesian
Standard is a national QR code standard that facilitates QR code payments in Indonesia. It was launched
by Bank Indonesia and the Indonesian Payment System Association (ASPI) on August 17, 2019. As QRIS has
become the most popular payment method in Indonesia, we want to add QRIS as
a payment option for Desty Menu users. QRIS is available to be printed physically for scan-to-pay or
generated digitally (Dynamic QRIS) with the pay amount already set and the user only need to input their
PIN to confirm payment which is the method that we will use in the app.
#1 Metode Pembayaran QRIS Baru
Dengan berbagai metode pembayaran yang dapat dipilih untuk membayar pesanan, sebagian besar pengguna
didapatkan membayar pesanan dengan dompet e-wallet mereka seperti Gopay (metode teratas #1), ShopeePay
(#3), atau
OVO (#4). Namun, penggunaan e-wallet tersebut memiliki biaya transaksi/MDR sendiri yang bervariasi.
Dibandingkan dengan QRIS, biaya yang harus dibayarkan oleh penjual akan lebih rendah jika pelanggan
mereka menggunakan QRIS sebagai
alat pembayaran. QRIS, atau Quick Response Code
Indonesian Standard adalah standar kode QR nasional yang memfasilitasi pembayaran dengan kode QR di
Indonesia.
Standar ini diluncurkan oleh Bank Indonesia dan Asosiasi Sistem Pembayaran Indonesia (ASPI) pada tanggal
17 Agustus 2019.
Karena QRIS telah menjadi metode pembayaran yang populer di Indonesia, kami ingin
menambahkan QRIS sebagai
sebagai opsi pembayaran untuk pengguna Desty Menu. QRIS tersedia untuk dicetak secara fisik untuk
dipindai saat pembayaran atau
digital (QRIS Dinamis) dengan jumlah pembayaran yang telah ditentukan dan pengguna hanya perlu
memasukkan
PIN untuk mengkonfirmasi pembayaran di mana merupakan metode yang akan kami gunakan dalam aplikasi.
Defining Problem
Current MDR from E-wallet or Virtual Account payment methods is expensive for merchant.
Current fee:
E-wallet is 2-3%/transaction
Virtual account is around Rp2000-Rp2400/transaction
With QRIS, it's only 0.7%/transaction and is already widely used for payments in Indonesia. With that
reasoning, some merchants have also already requested this payment method feature to replace their
static/printed QRIS on the cashier that requires customers to come to the cashier to pay which is
counted as an offline payment method since it's not paid from the Desty Menu app.
Although many people are already familiar with QRIS, it’s not the same case with Dynamic QRIS.
As there were two ways to pay with QRIS:
Static QRIS: Scan > Pay
Dynamic QRIS: Download/Screenshot > Upload > Pay ← Not all user is familiar with this
method
Mendefinisikan Masalah
MDR saat ini dari metode pembayaran E-wallet atau Virtual Account mahal bagi penjual.
Biaya saat ini:
E-wallet 2-3%/transaksi
Virtual account sekitar Rp2000-Rp2400/transaksi
Sedangkan QRIS hanya 0,7%/transaksi dan sudah banyak digunakan untuk pembayaran di Indonesia. beberapa
penjual juga sudah meminta fitur metode pembayaran ini untuk menggantikan
metode pembayaran mereka
yaitu QRIS statis/cetak di kasir yang mengharuskan pelanggan datang ke kasir untuk membayar yang
dihitung sebagai metode pembayaran offline karena tidak dibayar dari aplikasi Desty Menu.
Meski banyak orang yang sudah familiar dengan QRIS, tidak demikian halnya dengan QRIS Dinamis.
Karena ada dua cara pembayaran dengan QRIS:
QRIS Statis: Scan > Bayar
QRIS Dinamis: Unduh/Tangkapan Layar > Unggah > Bayar ← Tidak semua orang mengetahui metode
ini
Challenge
With most people understand QRIS as scan to pay. The challenge I face is to introduce user to the
2nd method which required them to Download/Screenshot → Upload → Pay the QR Code from the app
as we
have technology constraint as a web base application that have limited capability within another apps
(E-wallet app) in the user phones.
Tantangan
Dengan mayoritas orang memahami QRIS sebagai scan to pay. Tantangan yang saya hadapi adalah
memperkenalkan pengguna pada
metode ke-2 yang membutuhkan mereka untuk Mengunduh/Tangkapan Layar → Unggah → Bayar Kode QR
dari
aplikasi
karena keterbatasan teknologi yang ada sebagai aplikasi berbasis web yang memiliki kemampuan terbatas
dengan aplikasi lain
(Aplikasi e-walet) di ponsel pengguna.
Approach
As we want to design QRIS payment method that easily to understand for first-timer user to use pay with
Dynamic QRIS method, we do concept testing to test and learn if user can understand the concept before
designing.
After that I do internal review and iteration where I created multiple designs with
emphasizing different parts of the layout to create the best attention grabber since payment process
flow is a crucial stage of the product.
To make the payment steps more clear, I added How to Pay With QRIS guide in the payment screen for user
to read the tutorial.
Pendekatan
Karena saya ingin merancang metode pembayaran QRIS yang mudah dipahami oleh pengguna pertama yang
menggunakan pembayaran metode QRIS dinamis, saya melakukan pengujian konsep untuk menguji dan mengetahui
apakah pengguna dapat
memahami konsep sebelum
merancang.
Setelah itu kami melakukan review internal dan iterasi dimana saya membuat beberapa desain
dengan mencoba membuat penekanan pada tata letak elemen untuk mengarahkan perhatian pengguna dikarenakan
proses pembayaran
adalah tahap terpenting pada produk ini.
Agar proses pembayaran lebih dipahami, saya menambahkan panduan Cara Membayar Dengan QRIS pada layar
halaman pembayaran agar pengguna dapat melihat tutorial pembayaran.
Testing
Concept Testing :
We conduct concept testing to see if users can understand with the new payment method concept. From the
test we learned:
From 15 people in the café, only 35-40% peoples that understand “download to pay” with QRIS. The rest
do
not understand. They only know QRIS only just to be “scan to pay”. The people who understand the
“download to pay” method because it's not their first time/their second experience using the payment
method and it’s mostly young people.
UAT Testing :
After designing and developing the feature, in UAT testing I found bug that QRIS take long time to
load. I report it to the developer to enhance the loading time and fix the issue
I also got feedback that some device can’t download the QRIS code to their phone. after a quick
discussion we decide to change interaction & guides from “Download” to “Screenshot” the QR Code
instruction because browser capability issue.
Pengujian
Pengujian Konsep :
Kami melakukan pengujian konsep untuk melihat apakah pengguna dapat memahami konsep metode pembayaran
baru. Dari
tes tersebut, didapatkan:
Dari 15 orang di kafe, hanya 35-40% orang yang memahami “download untuk membayar” dengan QRIS.
Sisanya
tidak paham. Mereka hanya mengetahui QRIS sebagai “scan to pay”. Orang-orang yang memahami
metode “unduh untuk membayar” karena ini bukan pengalaman pertama/kedua mereka menggunakan pembayaran
metode tersebut dan sebagian besar adalah anak muda.
Pengujian UAT :
Setelah merancang dan mengembangkan fitur tersebut, pada pengujian UAT saya menemukan bug yang
membutuhkan waktu lama bagi QRIS
memuat. saya melaporkannya kepada developer untuk meningkatkan waktu loading dan memperbaiki masalah.
Saya juga mendapat masukan bahwa beberapa perangkat tidak dapat mengunduh kode QRIS ke ponselnya.
setelah beberapa saat
berdiskusi kami memutuskan untuk mengubah interaksi & instruksi dari "Unduh" menjadi "Tangkapan
Layar/Screenshot" Kode QR karena masalah kemampuan browser.
Design Iterations
On the how-to-pay tutorial, I did a second iteration/exploration on the first design because on the
first design, I found out that it had too much interaction for people to do in a short time (in this
case, people wanted to get their food ordered ASAP, so the payment process needed to be as quick as
possible).
So, I shrink the tutorial to just a few steps and include the guide screenshots for every step.
Iterasi Desain
Pada tutorial cara membayar, saya melakukan iterasi/eksplorasi kedua pada desain pertama karena pada
desain pertama, saya menemukan bahwa ada terlalu banyak interaksi yang tidak dapat dilakukan orang dalam
waktu singkat (dalam hal ini, orang ingin memesan makanannya secepatnya, sehingga proses pembayaran
harus dilakukan
secepat mungkin).
Jadi, saya mempersingkat tutorialnya menjadi hanya beberapa langkah dan menyertakan tangkapan layar
panduan
untuk setiap langkah.
Outcome
The new QRIS Payment method feature giving the app obvious positive impact within the first 3 days
trial
of release. It is perfomed:
34% Users choose the new QRIS payment method as their payment method
85.3% Payment success rate
Become no #2 top used payment method after Cash
Activated in 214+ merchants after the trial end
Hasil Akhir
Fitur metode Pembayaran QRIS yang baru memberikan dampak positif yang jelas pada aplikasi dalam 3
hari pertama percobaan rilis. Data menunjukan:
34% Pengguna memilih metode pembayaran QRIS yang baru sebagai metode pembayaran mereka
Tingkat keberhasilan pembayaran berada pada 85,3%
Menjadi metode pembayaran nomor 2 yang paling banyak digunakan setelah Cash/Tunai
Diaktifkan di 214+ toko setelah uji coba berakhir
Key Takeaways
This is one of my biggest and complex project I've ever involved during my internship as this feature is
highly anticipated and related to the payment process, which in this app is the most crucial flow and
there must be no fatal errors that make the user fail to complete transactions which causes unwanted
problems and bad performance. Even I’m continuing the initial concepts and test that have already done
by the team, I’m getting a chance to 100% down and take the responsibility on the development process
that took about 1 full month
with back-to-back feedbacks and improvements.
I learned how to be thorough and seek for lots of references to solve a problem so can deliver the
solution that is seamless and add to the habits of the users.
The things that I thought was just a small
design features, turns out to be the most important thing and adds so much value to the product it
self.
Pelajaran yang Didapatkan
Ini adalah salah satu proyek terbesar dan kompleks yang pernah saya kerjakan selama magang karena fitur
ini
sangat dinantikan dan terkait dengan proses pembayaran, yang mana dalam aplikasi ini merupakan alur yang
paling krusial dan tidak boleh terdapat kesalahan fatal yang membuat pengguna gagal menyelesaikan
transaksi yang menyebabkan
hal yang tidak diinginkan dan kinerja aplikasi yang buruk. Walau saya melanjutkan konsep awal dan tes
yang sudah dilakukan
oleh tim, saya mendapat kesempatan 100% turut andil dan memegang tanggung jawab pada proses pengembangan
yang memakan waktu sekitar 1
bulan penuh dengan masukan dan perbaikan berturut-turut.
Saya belajar bagaimana menjadi teliti dan mencari banyak referensi untuk menyelesaikan suatu
permasalahan sehingga dapat menghadirkan solusi yang mulus dan membuat kebiasaan pengguna yang baru.
Hal-hal yang saya pikir hanyalah fitur kecil pada desain, ternyata menjadi hal yang paling penting
dan menambah banyak nilai pada produk tersebut.
Words From My Superteam
Thank you for your contribution to Desty for these exciting 9 months!
When you joined Desty, it was just the start of Desty Menu and also the start of your design
career. In these 9 months, I saw your growth with Desty Menu, from a junior intern growing
to a pro designer who can handle projects by yourself. In this time, I saw you solve
problems through design, user research and data insight, with your design, Desty Menu's user
experience became smoother and had an obvious data growth.
Your passion and intelligence in design helps you grow fast.
Boyang Desty UED Chief
I highly recommend Juan for UI/UX Designer position.
He demonstrated
exceptional talent, dedication, and a strong understanding of user-centered design
principles. Juan consistently delivered high-quality work, collaborated effectively with
cross-functional teams, and exhibited excellent communication skills. He is a valuable asset
to any UI/UX team.
Jalu Detya Senior UI/UX Designer
I think Juan is a very good and potential design beginner. He shows his
enthusiasm for design at work and is a very smart little boy. After he has a certain work
experience, I think he can make great progress in the future. Good job!
Martin Wang Senior UI/UX Designer
Thank you for your contribution to Desty! You’re very adaptive and helpful to our
development flow and keep up with the tight schedule time.
Keep being smart and keep explore many idea especially for the design and UX.
Siti Patimah Product Manager
Very good at execution, solving problems quickly when tasks and demands are needed. Good
comprehension skills, able to understand and recreate scenarios when describing requirements
and make the right design. Proactive in identifying problems, researching competitor's
design ideas and giving reference examples.
Zhixuan Lu Product Manager
You helped a lot when there is an urgent help needed about the design at Desty.
Always available when needed. Thanks and wish you the best in the future!
