Mobile App Project Design Report

Project Overview
 Project Name: Ivivu Booking Tour App
 Project Team: - Trương Bá Vương
- Trịnh Thái Sơn
- Nguyễn Hữu Tuấn
- Lê Tuấn Anh
- Nguyễn Mạnh Trường Đạt
 Project Team Leader: Trương Bá Vương
 Date: 01/4/2024
Table of Contents

Project Overview.....................................................................................................1
Table of Contents.....................................................................................................2
1. Introduction.........................................................................................................3
2. Architecture Design.............................................................................................4
3. UI Design..............................................................................................................6
4. UX Design...........................................................................................................18
5. Conclusion..........................................................................................................25
1. Introduction
 Embark on your journey hassle-free with us, the innovative online tour booking
application designed to make your travel experience seamless and stress-free. With
ivivu, planning your dream getaway is as easy as snapping a photo!
 Our application will help you easily book travel tickets with services such as
airline tickets, bus tickets, hotel reservations...

3
2. Architecture Design
 MVVM Architecture: Model-View-ViewModel is a popular architecture pattern
for Flutter apps. It separates the user interface (View) from the business logic
(ViewModel) and the data (Model). This separation of concerns helps in making
the codebase more modular and easier to maintain.
 Presentation Layer:
 Views: Represent the UI components of the app. In Flutter, views are
typically implemented using widgets. Each screen in the app corresponds to
a view.
 ViewModels: Contains the business logic for each screen. ViewModels
interact with the Model layer to fetch data and update the UI accordingly.
Use packages like provider or riverpod for state management within
ViewModels.
 Data Layer:
 Model: Represents the data entities used in the app. This could include
classes to represent tours, bookings, users, etc.
 Repositories: Acts as an interface between the ViewModels and the data
sources (e.g., APIs, databases). Repositories are responsible for fetching
and storing data. Implement repository pattern to abstract data source
implementations and make them interchangeable.
 Service Layer:
 API Services: Handles communication with backend APIs for fetching and
sending data. Use packages like http or dio for making HTTP requests.
 Local Storage: Manages local data storage, such as storing user preferences,
caching data, etc. Utilize packages like shared_preferences or sqflite for
local storage.
 Dependency Injection (DI):
 Use dependency injection to provide instances of services and repositories
to ViewModels. This helps in making the codebase more testable and
decouples components.
 Popular DI frameworks for Flutter include get_it and provider.
 Navigation:
 Implement navigation between screens using Flutter's built-in navigation
system or use packages like navigator, get, or router.

4
- Localization and Internationalization: Support multiple languages and locales in
the app using Flutter's internationalization features. Organize localized strings and
assets efficiently.
 Testing: Write unit tests for business logic in ViewModels, integration tests for UI
components, and widget tests for individual widgets. Use testing libraries like
flutter_test and mockito for testing Flutter apps.
 UI/UX Design: Follow Flutter's design guidelines and best practices to create a
visually appealing and user-friendly interface. Utilize Flutter's rich set of UI
widgets and customizations to achieve the desired design.

5
3. UI Design
3.1 Welcome screen
a. Wireframes:

6
7
 b. Explain the rationale behind this design:
o At the top of the screen is the application name.
o In the middle is a slideshow can display multiple photos of tourist
destination
o At the bottom are buttons so users can click to inside application
o Besides, there are many views that can be viewed before we scroll through
to see interesting photos and content
3.2 Login
a. Wireframes:

8
9
b. Explain the rationale behind this design:
 There are two fields to enter email and password, below there is a register button
and a password reset button
 At the bottom are buttons so users can log in using many methods such as Email or
Google
 There is also a forgotten password function, which will send the password back
when we forget the email via text forgotten password. For those who do not have
an account, we can register an account via text register,
 We can also store accounts and passwords through remember pass word
 At the bottom there is a small photo corner so we can change the image and screen
interface whenever we find the screen boring

10
3.3 Register
a. Wireframes:

11
12
b. Explain the rationale behind this design:
 Similar to the login page, when entering this page, there is text for us to enter the
password, username, and gmail when we register, the password will be sent to our
email to register an account through it.
 In addition, we can also change the interface through the images in the corner of
the screen similar to the login page

13
3.4 Booking page
a. Wireframes:

14
15
16
 b. Explain the rationale behind this design:
 This page contains the tours you have booked
 The body will include parts such as image, some tours…
 In addition, when we click on the textbutton import booking, we will go to
another page including text and textformfiled for us to enter phone number
and pin code.
 When we click on ElevatedButton Managebooking, a code will be sent to
the number we sent, to rent a car.
 In addition, we can also look up other types of taxis in the text below
3.5 Favorites page
a. Wireframes:

17
18
19
b. Explain the rationale behind this design:
 Includes a list of favorites tours that user added
 When there are no favorite tours listed here, the page will appear blank as
shown in the image.
 In addition, the page also has 1 textbutton and 1 elevated button to create
lists to store or search for tours to enter.

20
3.6 Profile page
a. Wireframes:

21
22
 b. Explain the rationale behind this design:
 This page displaying the profile of user, they can edit profile or something
like rewards, vouchers, setting…
 In addition, we can also edit profile information through the elevated button
edit profile to edit photo, name or change email
 The text below includes being able to change accounts, log out, view
existing gift codes, review tours, and view wallet balances.
3.7 Reset password
a. Wireframes:

23
24
b. Explain the rationale behind this design:
This page contains the field, the user input email and OTP send to their email address

25
4. UX Design
4.1 Splash-Login

Splash: Displays animations when running the app. Clicking on the button will go to
home
Login: You can choose 3 methods: by email, created account or Facebook
Register: Register an account if you don't have an account, the password will be sent to
your email
4.2 Home

26
 Notification bell: click the notification icon at the top to redirect to the notification
screen.
 User profile: click on the user icon setting to the My Profile screen.
 Click on the community icon to quickly go to the community screen.
 Click on the text import booking to go to the tour book search page
 Click text create to create a list of favorites

27
5. Conclusion
- Aim and Objectives:
 The aim of our tour booking application is to provide users with a seamless
platform to discover, reserve, and share their travel experiences.
 Objectives include designing an intuitive user interface, integrating robust
search functionality, and facilitating efficient booking processes.
- Architecture and Technology:

 Our application employs a client-server architecture, with the mobile app

serving as the client and the backend server managing data storage and
processing.
 Technologies utilized include Flutter for mobile app development, Node.js
for backend development, and MongoDB for efficient data storage.
- User Experience (UX) Design:

 Our UX design prioritizes user-friendly interactions, intuitive navigation,

and essential features to enhance the overall booking experience.
 Focus is on simplifying search options, streamlining booking procedures,
and ensuring accessibility for all users.
 Our goal is to deliver a delightful and memorable user experience, making
it effortless for users to explore new destinations and share their travel
stories.
- Recommendations for the Future:
 Future enhancements may involve further refining the app's functionalities,
optimizing performance, and scalability to accommodate a growing user
base.
 Continuous user testing and feedback will be integral to iteratively improve
the application's user experience and address evolving user needs.
 By prioritizing user satisfaction and leveraging emerging technologies, we
aim to elevate the travel booking experience for all users.

28