Bài tập lớn môn thiết kế ấn phẩm điện tử (1)

Học viện Cơng nghệ Bưu chính Viễn thơng

BÁO CÁO CUỐI KÌ MƠN
THIẾT KẾ ẤN PHẨM ĐIỆN TỬ
Đề tài:

THIẾT KẾ LẠI ỨNG DỤNG TRIPTOUR
Giáo viên hướng dẫn: Nguyễn Lê Mai
Sinh viên thực hiện:
Lê Thị Lam Thương

B17DCPT200

Vũ Đức Thành

B17DCPT192

Đào Việt Dũng

B17DCPT048

Đặng Đức Anh

B17DCPT004

Đỗ Đức Duy

B17DCPT056

Nguyễn Hồng Quân

B17DCPT164

Nguyễn Vũ Tiến Hoàng

B17DCPT084

Vũ Khắc Tưởng

B17DCPT228

Hà Nội, 2021


BẢNG PHÂN CƠNG CƠNG VIỆC

STT

Họ tên

MSV

Phân cơng

Phần
trăm

1

Lê Thị Lam
Thương

B17DCPT200

Slide, Báo cáo, User flow, Wireframe,
GUI, Prototype

100%

2

Vũ Đức
Thành

B17DCPT192

User flow, Wireframe, GUI, Prototype

100%

3

Đào Việt
Dũng

B17DCPT048

User flow, Wireframe, GUI, Prototype

100%

4

Đặng Đức
Anh

B17DCPT004

Báo cáo, User flow, Wireframe

60%

5

Đỗ Đức Duy

B17DCPT056

User flow, Wireframe, GUI, Prototype

100%

6

Nguyễn
Hồng Quân

B17DCPT164

Báo cáo, User flow, Wireframe

60%

7

Nguyễn Vũ
Tiến Hoàng

B17DCPT084

Slide,User flow, Wireframe, Animation

80%

8

Vũ Khắc
Tưởng

B17DCPT228

Slide,Báo cáo, User flow, Wireframe

50%

1


MỤC LỤC
LỜI MỞ ĐẦU

2

TỔNG QUAN ỨNG DỤNG TRIPTOUR
Ứng dụng Triptour
Phân tích ứng dụng Triptour gốc
Màu sắc và hình ảnh trong app Triptour
Chức năng
Kiểu chữ và kích thước văn bản
Logo

3
3
3
3
4
5
5

THIẾT KẾ LẠI ỨNG DỤNG TRIPTOUR
Các thay đổi sau khi thiết kế lại ứng dụng
Chức năng
Typography
Lưới
Màu sắc
Logo
Sơ đồ kiến trúc thông tin
User Flow
Wireframe
Thiết kế UI
Kết luận

6
6
6
7
7
9
10
11
13
18
22
29

2


LỜI MỞ ĐẦU

Với tình hình kinh tế thị trường đang ngày trên đà phát triển như hiện nay, thì du lịch là
một hiện tượng kinh tế - xã hội đang được ưa chuộng và vô cùng “hot” hiện nay về cả số
lượng và chất lượng. Cùng với đó, xu hướng đặt tour trực tuyến được lên ngôi đem lại
nhiều thuận lợi và tiết kiệm được thời gian cho chính người đặt tour khi mà Internet đang là
một ngành công nghiệp khơng khói đang vơ cùng phát triển. Thực tế, chúng ta có thể thấy rõ
được rằng, đời sống của người dân mỗi ngày đều được nâng cao, cơ sở hạ tầng và giao
thông lại được cải thiện và hiện đại hơn, nhưng kéo theo đó chính là sự ơ nhiễm mơi trường
ngày một nặng nề, vì thế, con người thường có xu hướng muốn tìm đến những nơi gần gũi
với thiên nhiên để nghỉ dưỡng và thư giãn thoải mái hơn, bỏ lại tất cả những khói bụi, ồn ào
nơi thành phố.
Việc đặt tour trực tuyến hiện nay là một xu hướng đã khơng cịn mới nhưng lại vơ

vùng phát triển và ngày càng hiện đại hơn nhờ có những phần mềm đặt tour trực tuyến,
giúp khách hàng dễ dàng thực hiện thành công ngay trên website của công ty hoặc qua các
kênh OTAs. Bởi vậy, khi bán tour du lịch cần lưu ý về vấn đề này, do xu hướng sử dụng
Internet trên các thiết bị di động cầm tay vơ cùng phổ biến rộng rãi. Chỉ cần có 3G, 4G là có
thể đăng kí ở bất kì nơi đâu hoặc ở thời điểm nào.
Trong bất kỳ lĩnh vực nào cũng vậy, các sản phẩm cần có sự đa dạng để khách hàng
có nhiều sự lựa chọn hơn. Vì thế, để nâng cao tính cạnh tranh cần phải thiết kế và xây dựng
nhiều chương trình tour khác nhau mới tạo được sự hấp dẫn tốt nhất. Kèm theo là đưa các
sản phẩm mang đậm nét văn hóa dân tộc cùng các sản phẩm dịch vụ đi kèm để có được sự
hoàn hảo nhất. Với tất cả những lý do trên, chúng em đã chọn thiết kế lại ứng dụng Triptour
với mong muốn cải thiện chất lượng sản phẩm và dịch vụ du lịch đến với các khách hàng
tiềm năng hơn.

3


TỔNG QUAN ỨNG DỤNG TRIPTOUR
1.

Ứng dụng Triptour
Triptour là ứng dụng đặt tour du lịch cho phép người mua và đơn vị tổ chức tour

kết nối và giao dịch an toàn, dễ dàng trong một môi trường tiện lợi và rõ ràng. Ứng
dụng hỗ trợ tìm kiếm các tour thích hợp với nhu cầu về kinh phí, địa điểm nhanh chóng
với giá thấp hơn mức niêm yết thị trường của tất cả đơn vị tổ chức. Khi sử dụng ứng
dụng Triptour, người dùng có thể đặt tour ở mức độ tiện dụng, phong phú, đa dạng và
độc đáo bậc nhất. Thỏa sức cuồng chân-vi vu với ứng dụng Triptour. Tìm ngay sản
phẩm tour ưng ý chất lượng, giá hợp lý bằng các thao tác đơn giản, thanh toán tiện lợi.
Liên tục cập nhật chương trình tour, giá bán nhanh chóng với nhiều ưu đãi, khuyến
mãi, giảm giá. Thông tin tour đầy đủ, kỹ lưỡng giúp người dùng lựa chọn tour đơn

giản, phù hợp hơn tại Triptour. Đánh dấu những đề xuất thuận tiện. Lưu tìm kiếm giúp
bạn chọn tour tiện lợi dễ dàng.
2.

Phân tích ứng dụng Triptour gốc

a.

Màu sắc và hình ảnh trong app Triptour

Gam màu đỏ chủ đạo trong ứng dụng thường dễ lấn át các gam màu và hình
ảnh khác gây nên sự mất tập trung. Tuy có tạo cảm giác thu hút, hấp dẫn sự chú ý
người dùng tuy nhiên nhưng màu đỏ này hơi rực, tạo cảm giác không được mát mẻ
theo chủ đề của app là du lịch.

4


Hình ảnh ở trong app trong các mục tour du lịch là hình ảnh thật tuy nhiên chưa được
đẹp chưa thu hút được người dùng sử dụng

b.

Chức năng

5


Hình 1. Sơ đồ App gốc
●

Các chức năng hiện tại của app đang dừng ở mức đơn giản chỉ bao gồm những
chức năng cơ bản của 1 tour du lịch như : Đặt khách sạn, đặt vé, tài khoản, đăng
nhập.

●

Chưa tạo được tính mới mẻ và thu hút được người dùng.

●

Q trình thanh tốn cịn cổ điển và chưa được tối ưu.

●

Phân cấp thông tin chưa rõ ràng và đảm bảo tiện ích cho người sử dụng

c.

Kiểu chữ và kích thước văn bản
●

Kiểu chữ đơn giản chưa thể hiển được tính thẩm mỹ và nội dung trong app du
lịch.

●

Tiêu đề chưa chọn được kiểu chữ phù hợp để thu hút được người dùng.

●

Typo chưa thể hiện rõ rệt được sự phân cấp thông tin rõ ràng dẫn đến chưa
làm nổi bật được nội dung của các tour trong app hoặc nội dung muốn truyền tải.

d.

Logo

Logo được thiết kế khá sơ sài và khơng có điểm nhấn, chưa mang được hết
thơng điệp của ứng dụng du lịch.

6


THIẾT KẾ LẠI ỨNG DỤNG TRIPTOUR
1. Các thay đổi sau khi thiết kế lại ứng dụng
a. Chức năng
Các chức năng mới:
●

Đặt khách sạn

●

Đặt vé máy bay

●

Đặt combo: Bao gồm những lịch trình vé máy bay và khách sạn có sẵn nhưng du
khách sẽ được tự do hơn về lịch trình khi đến địa điểm

●

Đặt tour: Bao gồm những tour với lịch trình cụ thể, phù hợp với du lịch nhóm hoặc du
lịch tập thể, bao gồm các tour trong ngày và tour nhiều ngày.

●

Quản lý đơn hàng

●

Thông báo: Cập nhật thơng tin nhanh chóng để tận hưởng các ưu đãi và thông tin
mới từ hệ thống.

●

Quản lý thông tin cá nhân

●

Ưu đãi: Bao gồm tất cả những thông tin về ưu đãi và nhận mã ưu đãi.

●

Bài viết: Bao gồm các tin tức, sự kiện, cẩm nang về du lịch.

●

Hỗ trợ khách hàng

Các chức năng được sửa đổi:

●

Quá trình thanh tốn được rút ngắn, thuận tiện và nhanh chóng hơn

●

Thêm phương thức thanh tốn qua ví điện tử

●

Phân lại tour du lịch thành hai loại: Trong ngày và nhiều ngày

7


Hình 2. Sơ đồ app sau khi được thay đổi
b. Typography

Typography sẽ được thay đổi sao phù hợp và thu hút người dùng.
●

Sử dụng font chữ: San Francisco

●

Các cỡ chữ: 20, 16, 12

●

Định dạng: Regular, Bold, Medium, Semibold

●

Size chữ và định dạng: được sử dụng để điều hướng mắt người dùng, tạo
điểm nhấn với những thông tin tiêu đề đáng chú ý, qua đó tạo hệ thống phân
cấp thơng tin dễ dàng, đơn giản.

c. Lưới
●

Sử dụng lưới mô đun ( modular grid ) 4 cột,12 hàng

●

Giúp xác định vị trí trục x,trục y một cách dễ dàng, chia các ô kích thước bằng

nhau, nhằm dễ dàng hơn trong việc sáng tạo, có được sự nhất quán và quen thuộc.
Điều này sẽ rất hữu ích khi muốn có được sự đồng bộ, thống nhất trong thiết kế, phá
vỡ các quy tắc nhằm sử dụng các không gian theo nhiều cách khác nhau

8


9


d. Màu sắc

Màu chính được lựa chọn cho ứng dụng là màu cam đỏ (FF684B)

10


Không giống như màu đỏ mận chủ đạo ở phiên bản trước, màu đỏ cam này
mang lại cảm giác năng động, tươi trẻ hơn, sống động hơn, phù hợp hơn với những
đối tượng người dùng là những người trẻ.
Các mã màu đi kèm như :

Đen, xám : Dùng cho text, Background
Xanh lá cây : Dùng cho đánh dấu đã hoàn thành, đúng
Đỏ : Dùng cho báo lỗi, không thành công
Vàng : Dùng cho báo hệ thống đang xử lí
e. Logo

Với thiết kế mới, logo của ứng dụng mang một màu sắc bắt mắt, phong cách
hiện đại hợp trend, năng động hơn.
11


2. Sơ đồ kiến trúc thơng tin

Hình 3. Sơ đồ kiến trúc thông tin của Triptour khi thiết kế lại
Sau khi được thiết kế lại, kiến trúc thông tin của ứng dụng Triptour sẽ bao gồm 4
giao diện chính là : Trang chủ, đơn hàng, thông báo và tài khoản. Điều này tuân theo
quy tắc 1- 5 khi thiết kế UI, dễ nhớ cho người dùng.
●

Với giao diện trang chủ, chúng em để các chức năng chính của ứng dụng là :

Đặt vé máy bay, đặt khách sạn, combo, đặt vé tàu nhằm làm cho người dùng
có thể truy cập ứng dụng và đặt vé một cách nhanh nhất. Và việc thêm vào
giỏ hàng, thanh tốn bằng ví điện tử, ngân hàng cũng được trình bày lúc này.

●

Với tab Giỏ hàng, nơi đây sẽ để những chức năng liên quan đến việc đặt vé
của người dùng như : Những vé đã được đặt thành công, những thông tin
đang chờ được xác nhận và những vé đã được hủy. Điều này mang lại sự rõ
ràng cho yêu cầu người dùng.

●

Thông báo cũng là một chức năng quan trọng khi phát triển ứng dụng
Triptour. Khách hàng sẽ nhận được những thông báo dịch vụ, những ưu đãi
của các resort, hotel, hãng máy bay, hãng tàu,... một cách liên tục. Người
dùng có thể tìm kiếm lại những thơng báo khi cần thiết. Thơng báo cũng có
thể là tab mà người dùng hay vào nhất để nhận thông tin ưu đãi và săn được
những vé có lợi.

12


●

1 tab thiết yếu với người dùng đó là tài khoản.Ởđây, các cài đặt liên quan đến
cập nhật thông tin cá nhân, các ưu đãi của người dùng, các cài đặt liên quan
đến đăng nhập, mật khẩu, thêm phương thức thanh toán,.... sẽ được đặt ở
tab này.

13


3. User Flow

14


15


16


17


18


4. Wireframe

19


20


21

22


23


24