Web Crafting Tiket.com 2016
Halo Mas Bro dan Mbak Sis apa kabar? :) maaf lama tidak update medium. Sebelumnya saya mau mengucapkan Terimakasih kepada mas Dwinawan Hariwijaya yang telah menyebut saya sebagai bagian dari product team Tiket.com yang bisa kamu diikuti di artikel Insight ini. Very appreciated!
Terus terang sejak disebut di artikel tersebut, saya mendapatkan lumayan tambahan follower medium :). Karena itu, Saya jadi merasa bersalah kalau tidak update tulisan lagi. Kebetulan sudah ada draft tulisan ini yang bisa saya bagi meskipun agak terlambat, semoga bermanfaat.
Tepatnya pada tanggal 29 Desember 2016 Tiket.com me-release tampilan baru Web Tiket.com. Di tahap UI/UX kami memberinya nama projek Web Crafting. Di tahap development kami menyebutnya tahap C (versi 3.0), kami beri nama versi Cardamon. Melanjutkan versi sebelumnya yang bernama Beaver atau tahap B (versi 2.0).
Sebelum melihat beberapa tampilan hasil redesain, di atas ini saya tampilkan styleguide Tiket.com yang baru. Salah satu terlihat perubahannya adalah pemilihan font. Di versi Beaver kami menggunakan font Droid Sans dari Google Font. Di versi Cardamon kami menggunakan font Samsung Sans.
Cerita pemilihan font ini cukup menarik, waktu itu Rizka Febrian (UI/UX Tiket.com) melihat testing Tiket.com versi Android Apps di smartphone Samsung. Tidak sengaja font bawaan apps tidak ter-load, jadi yang tampil adalah font bawaan smartphone. Rizka langsung jatuh hati, kemudian mencari nama font tersebut, ternyata itu adalah font Samsung Sans.
Dalam Tahap UI/UX kami menggunakap metode product design sprint, sedangkan dalam tahap development projek ini, kami menggunakan metode scrum sprint planning meeting. Berikut beberapa tampilan desain Tiket.com versi Cardamon
Header putih dengan pemanis garis orange 4px. Logo Tiket.com satu baris dengan navigasi kanan atas, di bawahnya ada navigasi menu utama, dan navigasi kanan. Empat elemen ini tampak menyatu dibuat tanpa garis atau warna pembatas, hanya dibatasi dengan white space.
Form pencarian utama berbentuk horizontal, menggantikan versi sebelumnya yang dirasa terlalu konvensional dan kurang memudahkan user. Form ini memiliki background gelap tansparant satu area dengan slide banner utama.
Slide banner utama menjadi 100% full width, dengan tinggi 500px terlihat cukup menonjol menguasai layout.
Feature utama ditampilkan selanjutnya yaitu Tix Point cukup 4 item dengan thumbnail dan judul. Di bawahnya ada Last Minute Hotel, cukup dengan 1 thumbnail dan deskripsi singkat.
Area Download apps ditampilkan cukup besar untuk meningkatkan jumlah download baik di Google Play Store maupun di Apple App Store.
Logo-logo official partner dari Tiket.com kemudian logo-logo partner resmi pembayaran (Indonesia) ditampilkan berikutnya.
Area mengapa beli tiket di Tiket.com? ditampilkan lebih menonjol dengan background orange yang memiliki pattern khas Tiket.com.
Footer ditampilkan lebih simple daripada versi sebelumnya, ini mengubah orientasi tampilan dari orientasi SEO (mesin pencarian google) ke orientasi terhadap user (manusia).
Pola layout di halaman utama Tiket.com juga diterapkan di semua halaman produk Tiket.com: Pesawat, Hotel, Kereta Api, Event, & Car Rental.
Pola yang sama dengan urutan: header, form pencarian, slide banner, fitur utama, logo-logo partner resmi, infografis bagaimana cara pesan?, download apps, ditutup kemudian dengan footer.
Jika dibandingkan dengan versi Beaver, maka di versi Cardamon ini kami berusaha meminimalisai konten yang useless, dan memperbanyak white space.
Di versi web site saat ini mungkin tidak sama persis dengan tampilan di atas, sebab kami selalu dan terus melakukan perubahan secara bertahap.
Secara keseluruhan sebenarnya desain Web Tiket.com yang baru adalah 5 halaman utama di atas, sedangkan halaman lain masih menggunakan versi sebelumnya yang belum berubah 100%, hanya mengganti header — footer baru dan styleguide yang baru.
Secara bertahap kami akan melakukan perubahan-perubahan juga di halaman lainnya, dengan prioritas kemudahan dan kenyamanan user.
Sebelum kami merilis versi Cardamon, kami telah melakukan beta testing secara live, dengan mengganti header baru di web versi Beaver, Seperti tampilan di bawah ini.
Terlihat slide banner baru tapi menu utama masih menggunakan background biru gelap dan font masih menggunakan Droid Sans.
Semua screenshot ini diambil dari akun resmi Tiket.com di dribbble, jangan lupa follow yah :) Terimakasih.
Sampai jumpa di postingan selanjutnya :) cheers.
