Travel Apps
Group 4
Names : Eka Diah Parmesti
Salsabil
Class : 4SC2
CEP CCIT
FAKULTAS TEKNIK UNIVERSITAS INDONESIA
2021
PROJECT ON
<Title>
Developed by
1. Eka Diah Pramesti
2. Salsabil
2
Travel Apps
Batch Code : 4SC2
Start Date : 24 March, 2021
End Date : 4 April 2021
Name of Faculty : Riza Muhammad Nurman, S.Kom
Names of Developer :
1. Eka Diah Pramesti
2. Salsabil
Date of Submission: 7 April, 2021
3
CERTIFICATE
This is to certify that this report titled “Halo Travel” embodies the original work done by
Eka Diah Pramesti and Salsabil. Project in partial fulfillment of their course requirement at
NIIT.
Coordinator:
Riza Muhammad Nurman, S.Kom
4
ACKNOWLEDGEMENT
5
SYSTEM ANALYSIS
Background:
This project is made as a value assignment in Human computer Interactive. In this
project, we chose a topic about a travel application entitled Halo Travel. We chose this topic
because travel applications are very interesting to make and interesting to design. In addition,
we have previously created this travel application, and we want to improve the appearance of
the Halo Travel application.
Overview App:
Halo Travel is a mobile application that users use to book travel, such as ordering bus
tickets, train tickets, flights and hotels. users can log in then fill in data or register then can fill
in the booking form and can see the data that has been booked. In addition, users can view
accounts, users can see about the Halo Travel application, users can also find travel hotel
locations, and finally users can send comments and suggestions about our application at contact
us. The purpose of forming this Halo Travel is to make it easier for users to order a Travel.
Technology:
The technology we use to design interface designs is Adobe XD. There we design a
design that will be implemented in Android studio for the user interface.
6
SYSTEM ANALYSIS
Wireframing Process:
Screen Size:
5,7 inch (1440 x 2560) 560 dpi
Android App
7
SYSTEM ANALYSIS
Screen Flow:
Screen Splash Login Register Dashboard
Dashboard Flow:
Dashboard Home History Profile
Booking Bus Flow:
Home Book Bus Form Book Bus Thank You for
Booking Bus
Booking Flight Flow:
Home Book Flight Form Book Thank You for
Flight Booking Flight
Booking Train Flow:
Home Book Train Form Book Thank You for
Train Booking Train
Booking Hotel Flow:
Home Book Hotel Form Book Thank You for
Hotel Booking Hotel
History Data Flow:
History Delete History
Data
8
SYSTEM ANALYSIS
Profile Flow:
Profile Account Profile
Profile About Us Find Us
Profile Contact Us Submit Thank You for
Comment
Profile Logout Login
9
SYSTEM ANALYSIS
Layout:
• Pattern:
1. Persistent Primary Navigation Pattern using Tab Menu
2. Secondary Navigation Pattern
▪ Springboard at Home page
▪ List Menu at History and Profile
3. Up Button for back to previous screen
4. Form Pattern
▪ Login
▪ Register
▪ Form Booking
▪ Contact Us
5. Feedback
▪ Make Sure to Log Out
▪ Make Sure to Booking
▪ Make Sure to delete data
▪ Notifies the user to complete data input for booking
• Input
1. Input type text for input email, name, and comment.
2. Input type password for input password.
3. Input type number for input phone number
• Gestures
Use tap gestures and use time on components to move pages
10
DESIGN INTERFACE
1.Splash Screen 2. Login Page
sssssssssss
Splash Screen for waiting to Register page Login page for user that have an account, we
using input typr text for email and input type
password for password and we use button to
move the next page. But if the user doesn’t
have account, the user can choose sign up.
11
DESIGN INTERFACE
3. Register Page 4. Home Page
sssssssssss
Register page we using form for the user to This is a home page in our application we use
register account in our application. User must spring board in secondary navigation pattern
input the username, name, phone number and and we using tab menu for presistance primary
password. But if the user already have an navigation pattern. The user can choose what’s
account, they can choose login. they booking to do. Then the user can move to
hostory page.
12
DESIGN INTERFACE
5. Booking Bus 6. Thank You Bus
sssssssssss
This is form booking bus, the user must fill the This is thank you notifications for successfully
data to booking the bus. booking the bus. User can view full summary
in the history and if choose button done, the
user go to the home page.
13
DESIGN INTERFACE
7. Book Flight 8. Thank You Flight
sssssssssss
This is form booking flight. The user can fill the This is thank you notifications for successfully
data and users can choose class, departure and booking flight. User can view full summary in
arrivals. the history and if choose button done, the user
go to the home page.
14
DESIGN INTERFACE
9. Book Train 10. Thank You Train
sssssssssss
This is form booking train, users can fill the data This is thank you notifications for successfully
book train and can choose the button book to booking the train. User can view full summary in
booking the ticket. the history and if choose button done, the user
go to the home page.
15
DESIGN INTERFACE
11. Book Hotel 12. Thank You Hotel
This is form booking hotel, users can fil the data book This is thank you notifications for successfully
hotel and the users can choose button book to booking booking the Hotel. User can view full summary in the
the hotel. history and if choose button done, the user go to the
home page.
16
DESIGN INTERFACE
13. History 14. Account
This is a list menu from history booking. Users can This is a list menu from profile. The users can
see their history booking on history page. Then the choose account profile to see the user account, can
user can delete the data booking. choose about us page to knowing about aur
application, and can choose contact us, then the
users can logout.
17
DESIGN INTERFACE
15. Profile 16. About Us
This is a information about user account. In this This is a about us page, in this page measuring
page we using spring board or card view to display content about our application and the user can
this page. knowing about aur addrus usin find us.
18
DESIGN INTERFACE
17. Find Us 18. Contact Us
This is the find us page. This page inform about our This is form contact us. In this page the user can fill
location. the name, email and comment about our
application service. If the user completed fill that,
they can choose submit to submit their comment.
19
USER INTERFACE
1.Splash Screen 2. Login Page
Splash Screen for waiting to Register page Login page for user that have an account, we using
input typr text for email and input type password for
password and we use button to move the next page.
But if the user doesn’t have account, the user can
choose sign up.
20
USER INTERFACE
3. Register Page 4. Home Page
Register page we using form for the user to register This is a home page in our application we use
account in our application. User must input the spring board in secondary navigation pattern and
username, name, phone number and password. But we using tab menu for presistance primary
if the user already have an account, they can choose navigation pattern. The user can choose what’s
login. they booking to do. Then the user can move to
history page.
21
USER INTERFACE
5. Booking Bus 6. Thank You Bus
This is form booking bus, the user must fill the data to This is thank you notifications for successfully
booking the bus. booking the bus. User can view full summary in
the history and if choose button done, the user go
to the home page.
22
USER INTERFACE
7. Book Flight 8. Thank You Flight
This is form booking flight. The user can fill the data This is thank you notifications for successfully
and users can choose class, departure and arrivals. booking flight. User can view full summary in the
history and if choose button done, the user go to
the home page.
23
USER INTERFACE
9. Book Train 10. Thank You Train
This is form booking train, users can fill the data This is thank you notifications for successfully booking
book train and can choose the button book to the train. User can view full summary in the history and
booking the ticket. if choose button done, the user go to the home page.
24
USER INTERFACE
11. Book Hotel 12. Thank You Hotel
This is form booking hotel, users can fil the data This is thank you notifications for successfully
book hotel and the users can choose button book to booking the Hotel. User can view full summary in the
booking the hotel. history and if choose button done, the user go to the
home page.
25
USER INTERFACE
13. History 14. Account
This is a list menu from history booking. Users can This is a list menu from profile. The users can
see their history booking on history page. Then the choose account profile to see the user account, can
user can delete the data booking. choose about us page to knowing about aur
application, and can choose contact us, then the
users can logout.
26
USER INTERFACE
15. Profile 16. About Us
This is a information about user account. In this page This is a about us page, in this page measuring
we using spring board or card view to display this content about our application and the user can
page. knowing about aur addrus usin find us.
27
USER INTERFACE
17. Find Us 18. Contact Us
This is the find us page. This page inform about our This is form contact us. In this page the user can fill
location. the name, email and comment about our
application service. If the user completed fill that,
they can choose submit to submit their comment.
28
USER INTERFACE
19. Thank You Submit
This is thank you notifications for successfully submit the
comment.
29
PROJECT FILE DETAILS
S.No File Name Remarks
1. HaloTravel.zip This file is contains all source code
of program and user interface
2. Hello_Travel.xd This file is contains all design
\
interface
3. Paper HCI This file is paper of this project
4. HCI PPT This fiile to presentation this project
sssssssssss
30
