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

Với tất cả những lý do trên, chúng em đã chọn thiết kế lại ứng dụng Triptourvớ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àngtiềm năng hơn... Ứng dụng

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

Hà Nội, 2021

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

B17DCPT004 Báo cáo, User flow, Wireframe 60%

5 Đỗ Đức Duy B17DCPT056 User flow, Wireframe, GUI, Prototype 100%

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ạinhiề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à giaothô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ườngngà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ũivớ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 àonơ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áckê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ụngInternet 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ựngnhiề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ácsả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 Triptourvớ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àngtiề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 tourkế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 Ứngdụ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óngvớ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 ứngdụ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ảnphẩ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ếnmãi, giảm giá Thông tin tour đầy đủ, kỹ lưỡng giúp người dùng lựa chọn tour đơngiả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úpbạ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

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ữngchứ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, đăngnhập

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

● Quá trình thanh toá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 dulị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ưalà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ếtthông điệp của ứng dụng du lịch

THIẾT KẾ LẠI ỨNG DỤNG TRIPTOUR

1 Các thay đổi sau khi thiết kế lại ứng dụ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 toán được rút ngắn, thuận tiện và nhanh chóng hơn

● Thêm phương thức thanh toá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âncấ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ằngnhau, 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

d Màu sắc

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

Không giống như màu đỏ mận chủ đạo ở phiên bản trước, màu đỏ cam nàymang 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áchhiệ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 4giao 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 theoquy 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àogiỏ hàng, thanh toá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ụngTriptour Khách hàng sẽ nhận được những thông báo dịch vụ, những ưu đãicủa các resort, hotel, hãng máy bay, hãng tàu, một cách liên tục Ngườidù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 đượcnhững vé có lợi

● 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 đếncậ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

4 Wireframe

19

5 Thiết kế UI

25

6 Kết luận

Về kiến thức : Sau thời gian thực hiện thiết kế lại ứng dụng Triptour, nhóm chúng

em đã đạt được nhiều tiến bộ cả về mặt tìm hiểu, nghiên cứu lý thuyết lẫn kỹ nănglàm việc Có thể nói, thông qua môn học này, chúng em đã đạt được :

● Hiểu biết nhiều hơn về các kỹ thuật trong thiết kế ứng dụng

● Phân tích thiết kế chặt chẽ hơn

● Hiểu hơn về cách xây dựng một Ấn phẩm Điện Tử

● Nâng cao tinh thần tự học, tự nghiên cứu

Về ứng dụng : Bài tập thực hiện được các yêu cầu đề ra Ứng dụng đã phần nàoxây dựng và đáp ứng được một số chức năng chính : Đặt vé máy bay, đặt vé tàu,đặt khách sạn, Combo

Hạn chế : Do thời gian thực hiện phân tích và thiết kế là tương đối hạn chế vớimột bài tập tương đối rộng và phong phú nên không tránh khỏi những thiếu sót nhấtđịnh Bên cạnh đó, ứng dụng còn có một số chức năng chưa hoàn thiện và chínhxác Đây là một ứng dụng với số lượng người dùng khá lớn Để đáp ứng được điềunày, ứng dụng cần tính một tính ổn định, nhưng xây dựng sự ổn định cũng là mộtkhó khăn lớn