Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP
Hak cipta dan penggunaan kembali:
Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.
Copyright and reuse:
This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.
PERANCANGAN DESAIN ANTARMUKA UNTUK
SITUS PT TOKOPEDIA SEBAGAI USER INTERFACE
DESIGNER
LAPORAN KERJA MAGANG
Elisabeth
14110310073
PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNIK DAN INFORMATIKA
UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2017
Perancangan desain antarmuka..., Elisabeth, FTI UMN, 2017
i
PERNYATAAN
Dengan ini saya menyatakan bahwa telah melaksanakan praktik kerja magang di:
Nama Perusahaan : PT Tokopedia
Divisi : User Interface Designer
Alamat : Jl. Prof Dr. Satrio No. 11, Karet Kuningan,
Setiabudi, Jakarta Selatan
Periode Magang : 29 Mei 2017 – 3 September 2017
Pembimbing Lapangan : Septiari Tripurwangi
Laporan kerja magang ini merupakan karya tulis saya, bukan hasil karya
tulis milik pihak atau lembaga lainnya (plagiat). Seluruh kutipan yang disertakan
dalam laporan kerja magang ini juga telah disebutkan semua sumber kutipannya,
dan dicantumkan di dalam Daftar Pustaka.
Jika di kemudian hari terbukti ditemukan tindak kecurangan ataupun
penyimpangan, baik dalam hal pelaksanaan magang maupun dalam penulisan
laporan kerja magang, maka saya bersedia menerima konsekuensi dinyatakan
TIDAK LULUS untuk mata kuliah kerja magang yang telah saya tempuh dan status
kesarjanaan strata satu yang sudah diterima akan dicabut.
Tangerang, 30 September 2017
Elisabeth
Perancangan desain antarmuka..., Elisabeth, FTI UMN, 2017
ii
HALAMAN PENGESAHAN
Laporan Kerja Magang dengan judul “Perancangan Desain Antarmuka Untuk
Situs PT Tokopedia Sebagai User Interface Designer”
oleh
Elisabeth
telah diujikan pada hari Rabu, 15 November 2017,
pukul 10.00 s.d. 11.00 dan dinyatakan lulus
dengan susunan penguji sebagai berikut.
Dosen Pembimbing Penguji
Yustinus Eko Soelistio, S.Kom., M.M Enrico Siswanto, S.Kom., M.B.A
Disahkan oleh
Ketua Program Studi Sistem Informasi – UMN
Ririn Ikana Desanti, S.Kom., M.Kom.
Perancangan desain antarmuka..., Elisabeth, FTI UMN, 2017
iii
PENGEMBANGAN SITUS PERDAGANGAN ELEKTRONIK PADA
PT TOKOPEDIA SEBAGAI USER INTERFACE DESIGNER
ABSTRAK
Oleh: Elisabeth
Tokopedia, salah satu perusahaan e-commerce di Indonesia, kini menawarkan
beragam produk digital, disamping memfasilitasi transaksi yang terjadi antara
penjual dan pembeli. Dalam kurun waktu 1 tahun terakhir, Tokopedia belum
memiliki microsites khusus untuk pembelian event ticket, dan deals. Selain itu,
terdapat penambahan fitur pada situs dan aplikasi Tokopedia yang masih belum
memiliki desain antarmuka. Hal-hal tersebut dijadikan sebagai landasan utama
dilaksanakannya magang sebagai User Interface Designer.
Adapun tanggung jawab utama sebagai User Interface Designer yakni
merancang alur pengguna, interaksi hingga tampilan situs ataupun aplikasi
Tokopedia. Adapun tools yang digunakan yakni : Sketch untuk merancang desain
antarmuka, dan Zeplin untuk memudahkan proses development tampilan situs dan
aplikasi. Secara garis besar terdapat 7 tugas utama, diantaranya : perancangan
desain antarmuka untuk halaman voucher game, microsite event ticket, check
balance pada aplikasi Android, pending transaction, notification gas inquiry,
microsite deals, pulsa.tokopedia.com in partnership with Citibank.
Kata kunci: magang, alur pengguna, desain antarmuka, microsite
Perancangan desain antarmuka..., Elisabeth, FTI UMN, 2017
iv
KATA PENGANTAR
Puji syukur dihaturkan kepada Tuhan Yang Maha Esa yang telah memberikan
rahmat-Nya sehingga praktik kerja magang dapat terlaksana dengan baik dan
laporan magang yang berjudul "Pengembangan Situs Perdagangan Elektronik pada
PT Tokopedia sebagai User Interface Designer" diselesaikan tepat pada waktunya.
Ucapan terima kasih dihaturkan kepada Universitas Multimedia Nusantara
(UMN). Selain itu, ungkapan rasa terima kasih sedalam-dalamnya juga
disampaikan kepada :
Bapak Yustinus Eko Soelistio, S.Kom., M.M. selaku dosen tetap di
Universitas Multimedia Nusantara serta sebagai dosen pembimbing kerja magang
yang telah memberikan bimbingan, informasi, dan nasihat dalam penyusunan
laporan kerja magang,
Bapak Wira Munggana, S. Si., M.Sc. selaku Kepala Program Studi Sistem
Informasi periode sebelumnya Universitas Multimedia Nusantara,
Ibu Ririn Ikana Desanti, S.Kom., M.Kom. selaku Kepala Program Studi
Sistem Informasi Universitas Multimedia Nusantara,
Ibu Septiari Tripurwangi selaku Lead User Interface Designer PT Tokopedia
dan pembimbing lapangan yang telah meluangkan waktunya dalam berbagi
pengalaman, memberikan arahan, dukungan, dan saran selama pelaksanaan kerja
magang berlangsung,
Perancangan desain antarmuka..., Elisabeth, FTI UMN, 2017
v
Ibu Kamila Okta Saarah selaku User Experience Designer PT Tokopedia,
Bapak Denny Purnama Putro, Calvin Kurniawan, dan Lukman Triyadi selaku
Front-End Engineers PT Tokopedia yang telah memberikan dukungan, dan
masukan,
Orang tua, teman-teman yang telah memberikan motivasi, dan dorongan
utama dalam pelaksanaan praktik kerja magang hingga sampai pada penyusunan
laporan.
Semoga laporan magang ini dapat memberikan manfaat bagi pembaca dan
dapat dijadikan referensi untuk penulisan laporan magang terkait berikutnya.
Tangerang, 30 September 2017
Elisabeth
Perancangan desain antarmuka..., Elisabeth, FTI UMN, 2017
vi
DAFTAR ISI
PERNYATAAN ....................................................................................................... i
HALAMAN PENGESAHAN ................................................................................. ii
ABSTRAK ............................................................................................................. iii
KATA PENGANTAR ........................................................................................... iv
DAFTAR ISI .......................................................................................................... vi
DAFTAR GAMBAR ........................................................................................... viii
DAFTAR TABEL ................................................................................................. xii
BAB I - PENDAHULUAN ................................................................................... 13
1.1. Latar Belakang ...................................................................................... 13
1.2. Maksud dan Tujuan Pelaksanaan Kerja Magang ................................. 14
1.3. Waktu dan Prosedur Pelaksanaan Kerja Magang ................................. 14
1.3.1. Waktu Pelaksanaan Kerja Magang .......................................... 14
1.3.2. Prosedur Pelaksanaan Kerja Magang ...................................... 17
BAB II - GAMBARAN PERUSAHAAN ............................................................ 19
2.1. Tentang PT Tokopedia ......................................................................... 19
2.2. Visi Misi Perusahaan ............................................................................ 21
2.3. Struktur Organisasi Perusahaan ............................................................ 22
BAB III - PELAKSANAAN KERJA MAGANG ................................................ 23
3.1. Kedudukan dan Koordinasi .................................................................. 23
3.2. Tugas yang dilakukan ........................................................................... 24
3.2.1. Pengembangan desain antarmuka laman Pulsa Tokopedia pada
bagian voucher game (pulsa.tokopedia.com/voucher-game) ............... 26
Perancangan desain antarmuka..., Elisabeth, FTI UMN, 2017
vii
3.2.2. Perancangan desain antarmuka microsite baru khusus event ticket
36
3.2.3. Perancangan desain antarmuka halaman check balance pada
aplikasi Android Tokopedia ................................................................. 45
3.2.4. Pengembangan desain antarmuka pada halaman pending
transaction ............................................................................................. 49
3.2.5. Perancangan desain antarmuka pada fitur notifikasi Gas inquiry
52
3.2.6. Perancangan desain antarmuka microsite khusus deals ........... 55
3.2.7. Perancangan desain antarmuka pulsa.tokopedia.com in
partnership with Citibank ..................................................................... 72
3.3. Kendala yang Dihadapi ........................................................................ 76
3.4. Solusi atas Kendala ............................................................................... 76
BAB IV - KESIMPULAN DAN SARAN ............................................................ 77
4.1. Kesimpulan ........................................................................................... 77
4.2. Saran ..................................................................................................... 78
DAFTAR PUSTAKA ........................................................................................... 80
LAMPIRAN .......................................................................................................... 82
Perancangan desain antarmuka..., Elisabeth, FTI UMN, 2017
viii
DAFTAR GAMBAR
Gambar 2.1. Logo PT Tokopedia .......................................................................... 19
Gambar 2.2. Tampilan situs Tokopedia ................................................................ 19
Gambar 2.3. Struktur Organisasi PT Tokopedia ................................................... 22
Gambar 3.1. Tampilan Tokopedia Unify .............................................................. 25
Gambar 3.3. Alur pengguna pembelian voucher game ......................................... 28
Gambar 3.4. Tampilan voucher game versi desktop ............................................. 29
Gambar 3.5. Tampilan voucher game versi mobile .............................................. 29
Gambar 3.6. Tampilan voucher game yang aktif versi desktop ............................ 30
Gambar 3.7. Tampilan voucher game yang aktif versi mobile ............................. 30
Gambar 3.8. Tampilan promo voucher game versi desktop ................................. 31
Gambar 3.9. Tampilan promo voucher game versi mobile ................................... 31
Gambar 3.10. Perbandingan preferensi dan daftar permasalahan pada voucher game
versi desktop ......................................................................................................... 35
Gambar 3.11. Persepsi pengguna yang diperoleh dari permasalahan versi desktop
............................................................................................................................... 35
Gambar 3.12. Perbandingan preferensi dan daftar permasalahan pada voucher game
versi mobile ........................................................................................................... 35
Gambar 3.13. Persepsi pengguna yang diperoleh dari permasalahan versi mobile
............................................................................................................................... 36
Gambar 3.14. Kesimpulan testing halaman voucher game ................................... 36
Gambar 3.15. Alur pengguna dalam memesan tiket event ................................... 38
Gambar 3.16. Tampilan home microsite event ticket ........................................... 39
Perancangan desain antarmuka..., Elisabeth, FTI UMN, 2017
ix
Gambar 3.17. Tampilan card event pada microsite event ticket .......................... 40
Gambar 3.19. Tampilan summary event pada microsite event ticket ................... 42
Gambar 3.20. Tampilan transaksi berhasil pada micsrosite event tikcket ............ 43
Gambar 3.21. Tampilan search pada microsite event ticket ................................. 44
Gambar 3.22. Alur pengguna dalam mengecek nominal pulsa ............................ 46
Gambar 3.23. Tampilan penambahan fitur cek saldo pada kategori pulsa aplikasi
Android ................................................................................................................. 47
Gambar 3.24. Tampilan konfirmasi penggunaan USSD dalam mengecek pulsa 47
Gambar 3.25. Tampilan input salah satu nomor handphone jika terdapat 2 nomor
............................................................................................................................... 48
Gambar 3.26. Tampilan notifikasi gagalnya pengecekan pulsa ............................ 48
Gambar 3.27. Tampilan nominal pulsa yang berhasil diperiksa ........................... 49
Gambar 3.28. Alur pengguna dalam mengakses pending transaction .................. 50
Gambar 3.29. Tampilan pending transaction versi terdahulu .............................. 51
Gambar 3.30. Tampilan pending transaction versi mobile .................................. 51
Gambar 3.31. Tampilan pending transaction versi mobile ................................... 52
Gambar 3.32. Alur pengguna dalam melihat notifikasi gas inquiry .................... 53
Gambar 3.33. Tampilan konfirmasi pembayaran tagihan gas............................... 54
Gambar 3.34. Tampilan notifikasi penerimaan tagihan gas ................................. 54
Gambar 3.35. Alur pengguna dalam pembelian deals .......................................... 56
Gambar 3.36. Alur pengguna dalam menukarkan deals melalui daftar transaksi . 57
Gambar 3.37. Tampilan home microsite deals versi desktop .............................. 58
Gambar 3.38. Tampilan home microsite deals versi mobile ................................. 59
Perancangan desain antarmuka..., Elisabeth, FTI UMN, 2017
x
Gambar 3.39. Tampilan pencarian lokasi outlet deals pada halaman home versi
mobile .................................................................................................................... 59
Gambar 3.40. Tampilan desain antarmuka card deals pada versi desktop ............ 60
Gambar 3.41. Tampilan desain antarmuka card deals pada versi mobile ............. 61
Gambar 3.42. Tampilan detail deals microsite deals versi desktop ...................... 61
Gambar 3.43. Tampilan detail deals microsite deals pada versi mobile .............. 62
Gambar 3.44. Sekilas tampilan detail deals microsite deals versi mobile ........... 62
Gambar 3.45. Tampilan thumbnails gambar pada halaman detail deals versi
desktop .................................................................................................................. 63
Gambar 3.46. Tampilan carousel gambar pada halaman detail deals versi mobile
............................................................................................................................... 63
Gambar 3.46. Tampilan pilihan lokasi outlet dalam modal pada halaman detail deals
............................................................................................................................... 64
Gambar 3.47. Tampilan search deals microsite deals pada versi desktop ............ 64
Gambar 3.48. Tampilan search deals microsite deals pada versi mobile.............. 65
Gambar 3.49. Tampilan sort by pada halaman search deals versi mobile ............ 65
Gambar 3.50. Tampilan semua brands microsite deals pada versi desktop .......... 66
Gambar 3.51. Tampilan semua brands microsite deals pada versi mobile ........... 66
Gambar 3.53. Tampilan brand detail microsite dealspada versi desktop ............. 67
Gambar 3.54. Tampilan brand detail microsite deals pada versi mobile ............. 67
Gambar 3.55. Tampilan checkout microsite deals pada versi desktop ................ 68
Gambar 3.56. Tampilan checkout microsite deals pada versi mobile................... 68
Gambar 3.57. Tampilan transaksi berhasil microsite deals pada versi dekstop ... 69
Perancangan desain antarmuka..., Elisabeth, FTI UMN, 2017
xi
Gambar 3.58. Tampilan transaksi berhasil microsite deals pada versi mobile .... 69
Gambar 3.59. Tampilan daftar penukaran deals microsite deals pada versi desktop
............................................................................................................................... 70
Gambar 3.60. Tampilan daftar penukaran deals microsite deals pada versi mobile
............................................................................................................................... 70
Gambar 3.61. Tampilan penukaran deals microsite deals pada versi mobile ...... 71
Gambar 3.62. Tampilan alternatif penukaran deals microsite deals pada versi
mobile .................................................................................................................... 71
Gambar 3.63. Alur pengguna dalam membeli produk digital dalam
pulsa.tokopedia.com in partnership with Citibank ................................................ 73
Gambar 3.64. Tampilan produk pada pulsa.tokopedia.com in partnership with
Citibank ................................................................................................................. 74
Gambar 3.65. Tampilan pembayaran pada pulsa.tokopedia.com in partnership with
Citibank ................................................................................................................. 74
Gambar 3.66. Tampilan checkout pada pulsa.tokopedia.com in partnership with
Citibank ................................................................................................................. 74
Gambar 3.67. Tampilan transaksi berhasil pada pulsa.tokopedia.com in partnership
with Citibank ......................................................................................................... 75
Perancangan desain antarmuka..., Elisabeth, FTI UMN, 2017
xii
DAFTAR TABEL
Tabel 1.3. Timeline pengerjaan tugas magang...................................................... 16
Perancangan desain antarmuka..., Elisabeth, FTI UMN, 2017
Top Related