Tampilan Baru Web Tiket.com 2018

Dalam 1 tahun terakhir ini tiket.com terus melakukan perubahan, dari mengganti logo baru, branding baru, sampai merapikan UI/ UX banyak halaman web (desktop dan mobile) & Apps.

Bulan Oktober kemarin tiket.com telah merilis tampilan baru halaman website-nya. Tampilan baru yang terlihat adalah halaman beranda (home), beranda halaman pesawat, dan beranda halaman hotel. Tentu saja beserta halaman turunan hasil pencariannya.

Project sprint revamp halaman hasil pencarian sudah dikerjakan beberapa bulan sebelumnya, sedangkan project sprint revamp halaman home (pesawat) ini cukup hectic, dimana berjalan cuma sekitar 1 bulan, dari mockup UI/UX (awal Oktober), developing, testing, sampai rilis resmi live di web (akhir Oktober).

team product tiket.com (foto dari instagram)

Berikut adalah beberapa perbandingan tampilan baru web tiket.com dengan tampilan versi sebelumnya:

Font Open Sans

• Font menggunakan Open Sans, salah satu font populer di Google Fonts. Sebelumnya menggunakan fonts Samsung Sans. Dengan pergantian font ini diharapkan performa web jadi lebih cepat dan ringan.

tampilan header sebelumnya

• Ukuran container, menggunakan ukuran lebar 1024 px. Sebelumnya menggunakan ukuran lebar 970 px.

tampilan header sekarang

• Menambahkan icon di navigasi utama tanpa vertical border di antara navigasi, sebelumnya hanya menggunakan text (Flight | Hotel | Train | Car Rental | Entertainment)

tampilan banner sekarang

• Banner promo slide carousel di header, ukuran tinggi 360 px, tanpa gradasi gelap di kanan-kiri. Sebelumnya ukuran tinggi 500 px, dengan gradasi bayangan di kanan-kiri yang menyatu dengan form pencarian.

tampilan banner & form pencarian sebelumnya

• Form pencarian tiket, diberi judul “Hey kamu Mau ke mana?”, menggunakan tab menu, dua baris + dua kolom form mirip seperti model awal tiket.com dulu, dan kini terpisah dengan banner promo. Sebelumnya mengunakan form pencarian horizontal 1 baris (masih bisa dilihat di halaman kereta, sewa mobil, dan Entertainment) dan tanpa judul yang menyatu dengan banner.

tampilan tab pilihan di form pencarian sekarang

• Tab menu di pencarian form menggunakan icon dengan karakter lebih kartun untuk menguatkan karakter fun, sesuai dengan filosofi tiket.com

tampilan form pencarian sekarang

• 4 fitur smart (Smart Reschedule, Smart Roundtrip, Smart Refund, Smart Traveler) dengan icon dan deskripsi singkat tanpa tombol, ditampilkan dalam 2 kolom + 2 baris, tanpa foto. Sebelumnya hanya menampilkan 1 fitur smart (smart roundtrip) diperkuat dengan foto dan tombol selengkapnya.

tampilan 4 fitur smart sekarang

tampilan fitur sebelumnya

• Mau ke mana lagi? (where’s next?) menampilkan 6 item foto menarik, destinasi wisata dibagi dalam 3 kolom + 2 baris, kalau di-klik mengarah ke halaman blog.tiket.com. Ini adalah elemen baru, di versi sebelumnya tidak ditampilkan.

kalau di-klik mengarah ke halaman blog, kalau di hover ada efek zoom in dan shadow

• Tix Spot, 4 mini banner Tix Point ditampilkan dalam 4 kolom + 1 baris, TIX point adalah fasilitas untuk member tiket.com, yang dapat ditukarkan jadi potongan harga atau barang, pada TIX Merchant yang bekerjasama dengan tiket.com.

tampilan TIX point sebelumnya

tampilan TIX spot kini

• Kenapa memesan di tiket.com? sepertinya ini bagian yang paling menarik perhatian (eye catching) di bagian tengah halaman, karena pada bagian ini menampilkan ilustrasi vektor. Sebelumnya bagian ini hanya menggunakan background biru dengan icon dan pola pattern, tanpa ilustrasi.

tampilan “Kenapa memesan di tiket.com?” sekarang

tampilan “Mengapa Beli di tiket.com?” sebelumnya

• Partner. Bagian ini juga cukup terasa perubahannya. Menampilkan logo-logo partner secara random dengan background warna yang tidak putih, menyatu dengan ilustrasi sebelumnya, ditambahkan text deskripsi singkat. Sebelumnya hanya menampilkan logo secara horizontal, tanpa deskripsi yang terkesan kaku.

Tampilan partner sebelumnya

Tampilan partner sekarang

• Footer. Di bagian ini silahkan lihat sendiri dan rasakan perbedaannya, bagi yang memiliki cita rasa visual mungkin bisa menilainya, antara versi sekarang dan versi sebelumnya :)

tampilan footer sekarang

Tampilan footer sebelumnya

Setelah saya coba bandingkan bagian per bagian, berikut ini saya tampilkan keseluruhan halaman baru web tiket.com versi sekarang. Ini versi mockup yang tidak sama 100% dengan versi live.

Tampilan Baru tiket.com di zeplin.io (16 Oktober 2018) diunggah oleh Samad

Samad (foto dari facebook)

Konsepnya lebih ke ‘FUN’ sih Pak, sesuai dengan filosofi tiket juga.. biar orang yg beli di tiket itu ngerasa fun dan mudah.. gak bertele2.. konsep besarnya gitu.. makanya icon2 juga dibuat lebih cartoon.. hehhe fun tapi profesional juga

~ Samad, UI Designer

tiket.com akan terus melakukan perubahan tampilan di web dan apps secara bertahap, seiring dengan perpindahan pengembangan pola arsitektur dari monolithic ke microservices.

Baiklah, sampai di sini ulasan singkatnya. Kalau ada saran atau masukan, silahkan tulis di kolom komentar.

Sampai jumpa di postingan selanjutnya.

Terimakasih :)