58
V. ULASAN KARYA PERANCANGAN
A. Proses Perancangan Desain Logo
Konsep perancangan dimulai dengan perancangan logo aplikasi mobile “Komuter Tracker” sesuai dengan pernyataan, "Logos play an increasingly important role in the identification and personalization of product, services, and organizations (8)". Pencarian dan pengumpulan
beberapa kata kunci yang berhubungan dengan aplikasi ini melalui brain mapping dan pembuatan sketsa kasar pada logo aplikasi mulai dilakukan yang tetap mengacu kepada tujuan dari aplikasi tersebut. Nantinya logo yang dikembangkan haruslah dapat menyampaikan bahwa aplikasi ini merupakan sebuah aplikasi untuk membantu masyarakat khususnya pengguna Commuter Line agar dapat melacak posisi pasti commuter yang ingin digunakan dengan sistem pada aplikasi mobile ini.
Gambar 9 Brainmapping dan sketsa kasar aplikasi mobile “Komuter Tracker”
59 Beberapa hasil sketsa kasar dipilih dan divisualisasikan dalam bentuk digital menggunakan software pembuat vektor Adobe Illustrator. Hasil visualisasi digital ini meliputi bentuk dan pemilihan font yang digunakan pada logo tersebut. Pemilihan warna belum ditentukan untuk memperkuat terlebih dahulu bentuk dari logo tersebut, dan juga agar logo tersebut tetap dapat diaplikasikan walau hanya dalam warna hitam putih, seperti pada pernyataan, "Ultimately, the logo will have to work without the aid of color, but equally important, the designer can more effectively observe such things as balance, composition, positive and negative space and general legibility if color is not yet introduced. Once the icon works effectively in black and white, color should only enhance it, provided it's sensibily introduced (9)". Hasil visualisasi logo dari sketsa kasar yang ada, adalah sebagai berikut.
Gambar 10 Hasil visual alternatif logo
60 1. Konsep Visual Logo
Aplikasi mobile “Komuter Tracker” merupakan aplikasi dengan fitur pelacakan posisi commuter. Berdasarkan tujuan tersebut, maka visualisasi untuk logo aplikasinya Perancang menggunakan visual ikon pin point pada peta-peta digital yang mewakili pengertian sebuah “posisi yang ditunjuk”. Beberapa alternatif logo juga menggunakan visual ikon commuter atau kereta yang dijadikan bentuk vektor, untuk memvisualkan sasaran aplikasi ini yang akan digunakan untuk melacak posisi commuter. 2. Konsep Tipografi pada Logo
Penggunaan jenis font yang sama pada setiap alternatif logo menggunakan font bawaan dari logo asli PT KAI Commuter Line Jabodetabek, dengan mengkreasikan huruf-huruf yang belum ada pada logo asli tersebut. Font yang dikreasikan adalah jenis font yang dipakai pada huruf “Commuter” pada logo di bawah ini.
Gambar 11 ….
Penambahan huruf yang ada pada logo aplikasi adalah huruf-huruf yang ada pada kata “Komuter Tracker”.
61 Berdasarkan hasil penjabaran konsep visual dan konsep tipografi di atas. Pada akhirnya logo yang dipilih adalah logo alternatif 2. Dengan bentuk logo yang terkesan solid dan kuat dengan tampilan visual blok-blok warna untuk space penulisan nama aplikasi. Penambahan ikon pin point dalam lingkaran pada logo juga menguatkan fungsi yang ingin ditawarkan aplikasi mobile “Komuter Tracker” yaitu melacak posisi commuter yang aktif beroperasi area wilayah tertentu, Jabodetabek.
Gambar 13 Logo pilihan
Selanjutnya, logo pilihan aplikasi mobile “Komuter Tracker” dipadukan dengan warna pada branding PT KAI Commuter Line Jabodetabek. Menggunakan warna merah pada logo PT KAI Commuter Line dengan komposisi RGB dan kode hexadesimal sebagai berikut.
62 Hasil logo pilihan dipadukan dengan kombinasi warna-warna yang telah dipilih adalah.
Gambar 15 Visual akhir logo aplikasi “Komuter Tracker”
63 B. Proses Perancangan Desain Layout Graphic User Interfaces
Pada perancangan desain layout aplikasi “Komuter Tracker”, sketsa penyusunan wireframe digunakan sebagai gambaran dan acuan untuk programmer, bagaimana nantinya aplikasi tersebut berwujud dalam tampilan hasil akhirnya. Penyusunan sketsa wireframe juga memperlihatkan tahap-tahap dari halaman awal, menuju halaman menu utama berlanjut ke halaman lainnya. Pada tahapan proses perancangan ini kita juga mulai melayout tampilan dari Graphic User Interfaces aplikasi “Komuter tracker”.
64
Gambar 18 Sketsa kasar wireframe aplikasi “Komuter Tracker” (2)
65 Berdasarkan hasil penyusunan sketsa wireframe di atas, maka pembagian halaman-halaman yang ada pada aplikasi “Komuter Tracker” terbagi menjadi seperti bagan di bawah ini.
Gambar 20 Bagan wireframe/ User Interfaces Flowchart aplikasi
“Komuter Tracker”
1. Halaman Splash Screen
Pada halaman “Splash Screen” menampilkan logo aplikasi mobile “Komuter Tracker”, PT KAI Commuter Line, dan logo KAI. Dengan latar belakang warna gradasi hitam ke abu-abu gelap dipadukan dengan kolase gambar commuter yang sedang melintas dan diberi efek blur. Halaman ini hanya tampil dalam beberapa detik saja dan dilanjutkan dengan tampilan halaman “Menu Utama”.
S p l a s h S c r e e n M E N U T a r i f K e r e ta Halaman Perhitungan Tarif Halaman Hasil Perhitungan M E N U P o s i s i K e r e ta
Jalur Commuter 1 Tampilan Tracking 1
Jalur Commuter 2 Tampilan Tracking 2
Jalur Commuter 3 Tampilan Tracking 3
Jalur Commuter 4 Tampilan Tracking 4
Jalur Commuter 5 Tampilan Tracking 5
Jalur Commuter 6 Tampilan Tracking 6
M E N U S ta s i u n te r d e k a t
Halaman yang menampilkan petunjuk stasiun terdekat user (dalam bentuk peta dan daftar)
66
Gambar 21 Tampilan halaman Splash Screen
2. Halaman Menu Utama / Home
Halaman “Home” menampilkan 3 menu utama untuk mengakses keseluruhan halaman-halaman informasi pada aplikasi “Komuter Tracker”. Dengan layout center, di bagian atas pada halaman “Home” ini dihiasi dengan logo aplikasi “Komuter Tracker” dan logo KAI Commuter Line sebagai bentuk pengulangan agar tersimpan di benak user branding aplikasi “Komuter Tracker” dan juga
67 KAI Commuter Line sebagai penyedia aplikasi. Tampilan menu-menu utama nya menggunakan efek slider ke kiri dan ke kanan, yang menampilkan menu apa saja yang aktif dan tidak aktif dengan indikator posisi di tengah layar.
68
Gambar 23 Tampilan halaman “Home” (2)
69 3. Halaman Menu Tarif Kereta
Pada halaman “Tarif Kereta”, user dapat melakukan perhitungan tarif yang dibutuhkan jika ingin berpergian dari stasiun awal sampai dengan stasiun akhir yang dipilih oleh user. Pada halaman ini menampilkan 2 tombol dropdown untuk meng-input pilihan stasiun awal dan stasiun akhir. Jika user sudah melakukan pilihan stasiun awal dan akhir yang diinginkan, user selanjutnya menekan tombol “Hitung”, yang kemudian aplikasi akan melakukan perhitungan secara otomatis mengenai perhitungan tarif, estimasi jarak dan waktu stasiun yang sebelumnya sudah di-input oleh user.
70
Gambar 26 Tampilan halaman “Tarif Kereta” (2)
4. Halaman Menu Posisi Kereta
Pada halaman “Posisi Kereta”, Menampilkan rute perjalanan dari semua kereta Commuter Line, berikut dengan estimasi waktu kedatangan kereta Commuter Line yang ingin ditumpangi dan
71 estimasi sisa jarak tempuh ke stasiun terdekatnya. Pada halaman “Posisi Kereta”, user dapat memilih satu di antara 6 rute perjalanan commuter yang disediakan oleh KAI Commuter Line. Ketika user memilih salah satu rute tersebut, selanjutnya user dapat melihat semua pergerakan posisi commuter-commuter pada pilihan rutenya tersebut.
Gambar 27 Tampilan halaman “Posisi Kereta” (1) – Enam pilihan rute
72
Gambar 28 Ikonografi pada halaman “Posisi Kereta” – Ikonografi 6 pilihan rute
perjalanan KAI Commuter Line Jabodetabek
Pergerakan posisi commuter yang telah dipilih user, dapat ditekan setiap ikon commuter yang sedang bergerak yang mana akan menampilkan informasi yang lebih detail.
Gambar 29 Tampilan halaman “Posisi Kereta” (2) – Rute perjalanan Stasiun
73 Jika pilihan rute perjalanan commuter melewati jumlah stasiun yang banyak, tampilan pergerakan posisi commuter dapat di-scroll secara vertikal untuk melihat keseluruhan rute perjalanan dari stasiun awal sampai stasiun akhir.
Gambar 30 Tampilan halaman “Posisi Kereta” (3) – Rute perjalanan Stasiun
Bekasi-Jatinegara-Manggarai-Kakarta Kota (PP)
5. Halaman Menu Stasiun Terdekat Anda
Pada halaman “Stasiun Terdekat Anda”, user dapat mengetahui posisi Stasiun Commuter Line yang terdekat dengan
74 posisi user pada saat itu. Aplikasi ini akan sangat membantu para turis domestik dan mancanegara yang ingin menggunakan jasa kereta Commuter Line ketika berwisata di wilayah Jabodetabek. Tampilan pada halaman “Stasiun Terdekat Anda” dibuat menjadi 2 tampilan, tampilan dalam bentuk peta dan tampilan dalam bentuk daftar.
75
Gambar 32 Tampilan halaman “Stasiun Terdekat Anda” (2)
C. Pasca Produksi
Rencana pasca produksi setelah aplikasi mobile “Komuter Tracker” selesai dirancang hingga tahap peng-instalan dan uji coba produk adalah apakah aplikasi ini akan ditawarkan kepada PT KAI Commuter Line atau di-publish secara pribadi ke Apps Store baik itu milik Google ataupun Apple. Jika aplikasi ini ditawarkan kepada pihak KAI Commuter Line maka akan menggunakan sistem beli putus. Sedangkan
76 jika di-publish secara pribadi ke Apps Store, maka aplikasi tersebut dapat dipasangkan space untuk menempatkan iklan-iklan promosi.
D. Perancangan Media Pendukung
Aplikasi mobile “Komuter Tracker” yang telah dirancang tentunya memerlukan media pendukung lain yang dapat mengenalkan aplikasi mobile ini kepada khalayak ramai, masyarakat luas pada umumnya dan pengguna Commuter Line pada khususnya. KAI Commuter Line, memiliki media promosi yang sampai saat ini sudah mereka gunakan untuk iklan atau promosi bagi perusahaan pribadi dan juga untuk disewakan kepada pengiklan lainnya.
Media promosi yang dimiliki oleh PT KAI Commuter Line, yaitu website perusahaan PT KAI Commuter Line, akun Twitter @CommuterLine yang sampai saat ini memiliki jumlah follower di atas 100.000 orang, bagian body commuter yang dapat ditempel stiker juga sering menjadi media beriklan oleh PT KAI Commuter Line, begitu juga dengan bagian dalam commuter.
Media pendukung yang dirancang untuk mendukung promosi aplikasi mobile “Komuter Tracker”, memfokuskan pada pengenalan fitur utama aplikasi, yaitu dengan aplikasi ini user dapat menemukan lokasi commuter yang ingin user gunakan. Informasi untuk mendapatkan aplikasi ini di Google Play dan Apple Apps Store juga menjadi perhatian utama pada media pendukung yang telah dirancang. Tampilan media pendukung aplikasi “Komuter Tracker” sebagai berikut beserta pengaplikasiannya ke berbagai media yang dapat digunakan langsung di commuter.
77
Gambar 33 Tampilan media pendukung aplikasi “Komuter Tracker” (1)
78
79
