Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/12593/44/Halaman Awal.pdf ·...

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


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.


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


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,


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


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


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


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


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


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


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


xii

DAFTAR TABEL

Tabel 1.3. Timeline pengerjaan tugas magang...................................................... 16


Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/12593/44/Halaman Awal.pdf ·...

Documents

Transcript of Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/12593/44/Halaman Awal.pdf ·...