Project Bootcamp Sanbercode

This project is part of a bootcamp that I follow and is the last quiz to be completed in two days. This project is carried out by 4 people in 1 team. This project is to help people who want to book travel tickets with many options available.

(Indonesia) Proyek ini merupakan bagian dari bootcamp yang saya ikuti dan merupakan kuis terakhir yang harus diselesaikan dalam dua hari. Proyek ini dikerjakan oleh 4 orang dalam 1 tim. Proyek ini untuk membantu orang yang ingin memesan tiket perjalanan dengan banyak pilihan yang tersedia.

My Role

UI/UX Designer

Problem Definition

Persona named Meghan, in her early 30s, an administrative company manager and secretary needs to choose the latest and updated tour to travel abroad with her small family. He's not a planner type, but he doesn't want to be able to make the best use of his time to travel to important places when traveling abroad due to lack of planning, but he also wants to be able to choose what kind of holiday theme he wants the best for his family. He wants something like a system or application that offers tour plan info per city abroad, with several tour plan options. The hope is to find a thematic tour plan, such as a special tour plan for young families like his family, with a kid-friendly tour but not sacrificing a tour that is suitable for his parents as well.

(Indonesia) Persona bernama Meghan, berusia awal 30-an, seorang manajer dan sekretaris perusahaan administrasi harus memilih tur terbaru dan terupdate untuk bepergian ke luar negeri bersama keluarga kecilnya. Dia bukan tipe perencana, tapi dia tidak ingin bisa memanfaatkan waktunya sebaik mungkin untuk bepergian ke tempat-tempat penting ketika bepergian ke luar negeri karena kurangnya perencanaan, tetapi dia juga ingin bisa memilih liburan seperti apa. tema yang dia inginkan yang terbaik untuk keluarganya. Ia menginginkan sesuatu seperti sistem atau aplikasi yang menawarkan info rencana wisata per kota di luar negeri, dengan beberapa pilihan rencana wisata. Harapannya adalah menemukan rencana wisata tematik, seperti rencana wisata khusus untuk keluarga muda seperti keluarganya, dengan wisata yang ramah anak namun tidak mengorbankan wisata yang cocok untuk orang tuanya juga.

After receiving a brief persona, we continued the brainstorming process. In this brainstorming process, we try to dig deeper from the user's side by placing our position as the users themselves. In this process we also decided to create a design for the mobile because it is based on the persona of someone who has a lot of activity with his phone.

(Indonesia) Setelah menerima persona singkat, kami melanjutkan proses brainstorming. Dalam proses brainstorming ini, kami mencoba menggali lebih dalam dari sisi pengguna dengan menempatkan posisi kami sebagai pengguna itu sendiri. Dalam proses ini kami juga memutuskan untuk membuat desain untuk ponsel karena didasarkan pada kepribadian seseorang yang memiliki banyak aktivitas dengan ponselnya.

By drawing the user journey map, we can see one by one the steps that the user passes when doing something to reach their goal, in this case is to book travel tickets and planning trips. Here is the final user journey that we made.

(Indonesia) Dengan menggambar user journey pengguna, kita dapat melihat satu per satu langkah-langkah yang dilalui pengguna ketika melakukan sesuatu untuk mencapai tujuannya, dalam hal ini adalah memesan tiket perjalanan dan merencanakan perjalanan. Berikut adalah perjalanan pengguna terakhir yang kami buat.

In the process of creating a wireframe, we looked for some inspiration for booking website design and trip planning from Dribbble and Behance. The purpose of making this wireframe is to adjust the layout of the website display and its components. By creating these 5 pages, in our opinion, it is enough to make the user flow simpler and shorter in carrying out travel bookings and trip planning activities. Wireframe consists of 7 pages: home page, voucher page, theme category page, package category page, recommendation page, my order page, and payment page.

(Indonesia) Dalam proses pembuatan wireframe, kami mencari beberapa inspirasi untuk desain website pemesanan dan perencanaan perjalanan dari Dribbble dan Behance. Tujuan dari pembuatan wireframe ini adalah untuk mengatur tata letak tampilan website dan komponen-komponennya. Dengan dibuatnya 5 halaman ini, menurut kami sudah cukup untuk mempermudah dan mempersingkat alur pengguna dalam melakukan aktivitas pemesanan perjalanan dan perencanaan perjalanan. Wireframe terdiri dari 7 halaman: halaman beranda, halaman voucher, halaman kategori tema, halaman kategori paket, halaman rekomendasi, halaman pesanan saya, dan halaman pembayaran.

Using the font montserrat and lora

Make Logo

Using template colors

High-Fidelity Mockup

After I created the wireframe, the next step was to make a high-fidelity mockup based on the wireframe that had been created and the components that had been determined previously.

(Indonesia) Setelah saya membuat wireframe, langkah selanjutnya adalah membuat mockup high fidelity berdasarkan wireframe yang telah dibuat dan komponen-komponen yang telah ditentukan sebelumnya.