Đồ án phân tích và thiết kế ứng dụng cửa hàng thực phẩm cho FOAM MARKET

Quá trình thực hiện của đề tài được chia làm 2 phần: Phần 1: Phân tích, nghiên cứu các vấn đề, trải nghiệm người dùng của ứng dụng Foam Market.. Hình 1.6 Đặt khách hàng – người dùng lên

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC BÀ RỊA – VŨNG TÀU KHOA CÔNG NGHỆ KỸ THUẬT – NÔNG NGHIỆP CÔNG NGHỆ CAO

- -

ĐỒ ÁN TỐT NGHIỆP

PHÁT TRIỂN VÀ THIẾT KẾ ỨNG DỤNG CỬA HÀNG THỰC

PHẨM CHO FOAM MARKET

1

LỜI CÁM ƠN

Trước hết, em xin bày tỏ tình cảm và lòng biết ơn của em tới tất cả các giảng viên của mái trường Đại học Bà Rịa Vũng Tàu (BVU) đã tận tình, quan tâm, giúp đỡ, gửi gắm kiến thức từ những kinh nghiệm thực tế của người đi trước dành cho người đi sau cho thế hệ sinh viên DH16LT chúng em Đặc biệt là các thầy, các cô của khoa Công Nghệ Thông Tin – Điện – Điện Tử Nhờ có sự giúp đỡ của các thầy, các cô đã giúp em tìm thấy niềm đam mê và được trãi mình trong niềm đam mê về Công Nghệ Thông Tin của mình Và kết quả là là bài Bảo vệ luận văn – Đồ án tốt nghiệp lần này Đề tài với chủ đề:

“Phân tích – Thiết kế ứng dụng cửa hàng thực phẩm cho FOAM MARKET”

Em xin gửi lời cảm ơn chân thành đến Th.S Nguyễn Tấn Phương, giảng viên của khoa Công Nghệ Thông Tin – Điện – Điện tử, chuyên ngành Công Nghệ Thông Tin Người đã tận tình hướng dẫn, chỉ bảo em trong suốt quá trình làm khoá luận

Với điều kiện về thời gian cũng như kinh nghiệm còn hạn chế của một học viên, đề án này không thể tránh được những thiếu sót Rất mong nhận được sự chỉ bảo, đóng góp ý kiến của các thầy, các cô để em có điều kiện bổ sung, nâng cao ý thức của mình, phục vụ tốt hơn công tác thực tế sau này

Vũng Tàu, ngày………tháng…… năm……

Sinh viên thực hiện

2

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

3

NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

4

MỤC LỤC

LỜI CÁM ƠN 0

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN 2

NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN 3

MỤC LỤC 4

DANH MỤC HÌNH 7

MỞ ĐẦU 13

CHƯƠNG 1 TÌM HIỂU VỀ UX DESIGN VÀ UI DESIGN 14

1 Những hiểu biết cơ bản về UX và thiết kế UX 14

2 UX trong đời sống hàng ngày 16

2.1 UX trong đời sống hàng ngày 16

2.2 Thế nào là một UX tốt ? 18

2.3 Vai trò của UX tới các doanh nghiệp hiện nay 19

3 Khái niệm về UX Design và UI Design: 21

4 Công việc của UX Designer và UI Designer là gì ? 22

5 Giữa UX và UI cái nào quan trọng hơn ? 24

6 Quá trình thiết kế một dự án UX/UI 25

CHƯƠNG 2: TÌM HIỂU MỘT SỐ CÔNG CỤ THỰC HÀNH 26

1 Bút, tẩy và giấy 26

2 Miro – Công cụ hỗ trợ vẽ sơ đồ 27

3 Figma – Công cụ hỗ trợ việc thiết kế UI 28

CHƯƠNG 3: DISCOVER – GIAI ĐOẠN KHÁM PHÁ 29

1 Tìm hiểu về Disover – Giai đoạn tìm hiểu, khám phá 29

5

1.1 Hiểu người dùng của bạn: 30

1.2 Hiểu doanh nghiệp của bạn: 30

1.3 Nghiên cứu: 30

2 Project Promt – Background Research 31

3 User Survey – Khảo sát người dùng 36

3.1 User Serveys là gì? 36

3.2 Quá trình thực hiện khảo sát: 37

4 User Interview – Phỏng vấn trực tiếp người dùng 44

CHƯƠNG 4: DIFINE – GIAI ĐOẠN XÁC ĐỊNH CÁC VẤN ĐỀ 49

1 Affinity Mapping – Biểu đồ mối quan hệ 50

2 User Personas – Mô hình người dùng mẫu 53

2.1 User Personas là gì ? 53

2.2 Tầm quan trọng của User Personas ? 54

3 User Stories – Câu chuyện người dùng 56

3.1 User Stories là gì ? 56

3.2 Làm thế nào để bạn tạo một User Stories? 56

4 Paint Points & Solution – Các vấn đề được xác định và các giải pháp 60

CHƯƠNG 5: IDEATE – GIAI ĐOẠN HÌNH THÀNH Ý TƯỞNG CHO ỨNG DỤNG FOAM MARKET 61

1 Storyboard – Câu chuyện người dùng 63

1.1 Storyboard là gì? 63

1.2 Storyboard trong thiết kế UX là gì? 63

2 Cart Sorting – Sắp xếp thẻ 67

2.1 Cart Sorting là gì ? 67

6

2.2 Tại sao chúng ta lại sử dụng Cart Sorting ? 67

2.3 Thực hành Cart Sorting 68

3.1 Site map là gì ? 70

3.2 Tại sao ta nên sử dụng site map? 70

3.3 Thực hành Sitemap và kết quả thu được 71

3 User Flow – Sơ đồ luồng đi của người dùng 72

4.1 User Flow là gì ? 72

4.2 Các lợi ích mà User Flow đem lại 72

CHƯƠNG 6: DESIGN – THIẾT KẾ ỨNG DỤNG: 79

1 Design – Thiết kế ứng dụng 79

2 Wireframes là gì ? 80

2.1 Khái niệm về Wireframes ? 80

2.2 Mục đích của Wireframes là gì ? 81

2.3 Các loại wireframes thường thấy ? 82

3 Thực hành Low – fi wireframes 85

4 Thực hành High – fi wireframe 91

5 UI Guideline: 98

5.1 UI Guideline là gì ? 98

5.2 Phân loại UI Guideline 99

5.3 Thực hành thiết kế UI Guideline 100

CHƯƠNG 7: TỔNG KẾT VÀ HƯỚNG PHÁT TRIỂN 108

1 Tổng kết và hạn chế: 108

2 Hướng phát triển: 108

TÀI LIỆU THAM KHẢO 109

7

DANH MỤC HÌNH

Hình 1.1: Chân dung của Steve Jobs 14

Hình 1.2: Câu nói nổi tiếng của Steve Jobs 15

Hình 1.3: Ví dụ về một trải nghiệm UX xấu 16

Hình 1.4: Ví dụ về một trải nghiệm UX tốt 17

Hình 1.5: Mô hình bậc thang 6 bước 18

Hình 1.6: Vai trò của người dùng với sản phẩm và dịch vụ 19

Hình 1.7: Chân dung “cha đẻ” của ngành UX Design 21

Hình 1.8: Mối tương quan giữa UX và UI 22

Hình 1.9: Kỹ năng cần có ở một UX Designer và UI Desinger 23

Hình 1.10: Tầm quan trọng giữa UX Design và UI Design 24

Hình 1.11: Quy trình chung trong UX Process 25

Hình 1.12: Quy trình thiết kế UX/UI cho Goam Market 25

Hình 2.1: Giấy note – công cụ đắc lực cho mọi dự án 26

Hình 2.2: Logo của Miro - Ứng dụng vẽ sơ đồ 27

Hình 2.3: Logo của Figma – Công cụ thiết kế UI 28

Hình 3.1: Tương quan giữa User và Business 29

Hình 3.2: Một buổi phỏng vấn người dùng (User Interview 1 -1) 31

Hình 3.3: Bản mô tả dự án Foam Market 32

8

Hình 3.4: Một vài hình ảnh từ nông trại đến cửa hàng của Foam Market 33

Hình 3.5: Vision Statement và Business Goals 34

Hình 3.6: Sơ đồ tương quan về việc sử dụng smartphone tại Việt Nam 35

Hình 3.7: Sơ đồ thu thập giới tính của người dùng 39

Hình 3.8: Sơ đồ diễn tả độ tuổi của người dùng 39

Hình 3.9: Sơ đồ diễn tả nghề nghiệp của người dùng 40

Hình 3.10: Sơ đồ diễn tả tình trạn hôn nhân của người dùng 40

Hình 3.11: Sơ đồ diễn tả thói quen mua sắm tại các Cửa hàng thực phẩm 41

Hình 3.12: Sơ đồ diễn tả các mặt hàng thường được chọn mua 41

Hình 3.13: Sơ đồ diễn tả sự quan tâm của người dùng khi mua thực phẩm 42

Hình 3.14: Sơ đồ diễn tả mức độ khó khăn của người dùng khi chọn lựa thực đơn hàng ngày 42

Hình 3.15: Sơ đồ diễn tả mức độ quan tâm của người dùng tới chức năng gợi ý thực đơn 43

Hình 3.16: Sơ đồ diễn tả sự quan tâm của người dùng tới các ứng dụng Thương mai điện tử khác 43

Hình 3.17: Sơ đồ diễn tả các khó khăn của người dùng khi sử dụng các ứng dụng Thương mại điện tử 44

Hình 3.18: Kết quả thu nhận được qua quá trình phỏng vấn 48

Hình 4.1: Giai đoạn phân tích – xác định vấn đề 49

Hình 4.2: Biểu đồ mối quan hệ cho việc người dùng chọn mua tại các cửa hàng trực tuyến thay vì các cửa hàng, siêu thị 50

9

Hình 4.3: Biểu đồ mối quan hệ cho việc người dùng chọn mua tại cửa hàng,

siêu thị thay vì mua ở các cửa hàng trực tuyến 51

Hình 4.4: Biểu đồ mối quan hệ cho 2 quán trình Giao nhận hàng và Tìm kiếm sản phẩm 51

Hình 4.5: Biểu đồ mối quan hệ về thói quen nấu ăn của người dùng 52

Hình 4.6: Các thành phần trong mô hình User Personas 52

Hình 4.7: User Personas thứ nhất 53

Hình 4.8: User Personas thứ hai 55

Hình 4.9: User Stories về quá trình đăng ký/đăng nhập 55

Hình 4.10: User Stories về quá trình chọn sản phẩm cần mua 57

Hình 4.11: User Stories về quá trình mua sản phẩm 58

Hình 4.12: User Stories về quá trình chọn món ăn 59

Hình 4.13: User Stories về quá trình chọn xem thông tin tài khoản 59

Hình 4.14: Các vấn đề của người dùng và cách giải quyết 60

Hình 5.1: Giai đoạn Idate – Hình thành ý tưởng 62

Hình 5.2: Storyboard trong Ux Design 63

Hình 5.3: Storyboard thứ nhất 64

Hình 5.4: Storyboard thứ hai 65

Hình 5.5: Storyboard thứ ba 66

Hình 5.6: Giai đoạn thực hiện Cart Sorting 68

Hình 5.7: Kết quả của quá trình Cart Sorting 69

10

Hình 5.8: Sơ đồ Sitemap của Foam Market 70

Hình 5.9: Flow đăng nhập của người dùng 71

Hình 5.10: Flow Flash Test của người dùng 73

Hình 5.11: Flow tìm kiếm sản phẩm và mua sản phẩm của người dùng 74

Hình 5.12: Flow thanh toán sản phẩm của người dùng 75

Hình 5.13: Flow kiểm tra lịch sử mua hàng của người dùng 77

Hình 5.14: Flow thêm một sản phẩm vào danh sách yêu thích 78

Hình 6.1: Thiết kế Lading Page của một website 79

Hình 6.2: Một sơ đồ wireframes 80

Hình 6.3: Low fi wireframes 82

Hình 6.3: Mid fi wireframes 83

Hình 6.4: High fi wireframes 84

Hình 6.5: Bản low fi wireframes cho Màn hình chính và Chi tiết sản phẩm 85 Hình 6.6: Bản low fi wireframes cho Màn hình thực đơn và Chi tiết món ăn 86 Hình 6.7: Bản low fi wireframes cho Màn hình Tìm kiếm 87

Hình 6.8: Bản low fi wireframes cho Màn hình Yêu thích 88

Hình 6.9: Bản low fi wireframes cho Màn hình Giỏ hàng 89

Hình 6.10: Bản low fi wireframes cho Màn hình Thanh toán và Chọn ngày giờ giao hàng 90

Hình 6.11: Bản low fi wireframes cho Màn hình Thanh toán và Địa chỉ giao hàng 90

11

Hình 6.12: Một số màn hình Hi fi wireframes được khỏi tạo 91

Hình 6.13: Thông số Grid Grows 92

Hình 6.14: Thông số Grid Columms 92

Hình 6.15: Grid Layout của Foam Market 93

Hình 6.16: Wireframes của các màn hình Đăng nhập và Flash Test 93

Hình 6.17: Wireframes của các màn hình Trang chủ và Chi tiết sản phẩm 94

Hình 6.18: Wireframes của các màn hình Yêu thích 94

Hình 6.19: Wireframes của các màn hình sản phẩm 95

Hình 6.20: Wireframes của các màn hình Tìm kiếm 95

Hình 6.21: Wireframes của các màn hình Thanh toán và Giỏ hàng 96

Hình 6.22: Wireframes của các màn hình Địa chỉ giao hàng 96

Hình 6.23: Wireframes của các màn hình thanh toán 97

Hình 6.24: Wireframes của các màn hình Chọn ngày giờ giao hàng 97

Hình 6.25: Một bộ UI Guideline thường thấy 98

Hình 6.26: Hai màu sắc chủ đạo của Foam Market 100

Hình 6.27: Nguồn cảm hứng màu sắc từ chính thương hiệu Foam Market 100 Hình 6.28: Các màu sắc bổ trợ của Foam Market 101

Hình 6.29: SF Pro Display và các định dạng của nó được sử dụng trong ứng dụng Foam Market 102

Hình 6.30: Thành phẩn và thông số của Button 103

Hình 6.31: Thành phần và thông số của Input field và Dropdown menu 104

12

Hình 6.32: Thành phần và thông số của Navigation Bar 105 Hình 6.33: Một số thành phần cơ bản khác 1 107 Hình 6.34: Một số thành phần cơ bản khác 2 107

13

MỞ ĐẦU

Trong cuộc cách mạng công nghệ 4.0 ngày nay, Việt Nam đang dần cố gắng nắm bắt các cơ hội để dần chuyển mình thành một nước phát triển Phát triển mạnh trên nhiều lĩnh vực, tập trung chủ yếu vào các lĩnh vực về Công Nghệ Thông Tin, ,Bưu Chính - Viễn Thông,…Dựa vào đó, sự cạnh tranh tại các doanh nghiệp không chỉ nằm trên lĩnh vực, thị trường mà doanh nghiệp đó đang hoạt động Giờ đây,

nó còn là sự cạnh tranh trên nền tảng số, nền tảng Công Nghệ Thông Tin

Mọi các doanh nghiệp hiện nay đều cần có một website, một ứng dụng điện thoại nhằm giới thiệu riêng cho doanh nghiệp mình, đó là nơi thể hiện được cá tính và bản sắc riêng của một doanh nghiệp Với đặc thù riêng của các doanh nghiệp trong lĩnh vực Kinh doanh, đó là còn là nơi bày bán, giới thiệu các sản phẩm của doanh nghiệp tới các khách hàng của mình, đồng thời thu hút thêm nhiều khách hàng hơn Việc bày bàn các sản phẩm không chỉ diễn ra tại các cửa hàng truyền thống mà giờ đây còn là trên website, trên ứng dụng điện thoại

Foam Market – Một doanh nghiệp cung ứng các sản phẩm về nông thực phẩm

do chính doanh nghiệp họ sản xuất Không đứng ngoài cuộc chơi đó, Foam cần có một ứng dụng để kết nối với khách hàng và mở rộng được thị phần của mình Quá trình thực hiện của đề tài được chia làm 2 phần:

Phần 1: Phân tích, nghiên cứu các vấn đề, trải nghiệm người dùng của ứng dụng Foam Market (UX Design)

Phần 2: Thiết kế giao diện cho ứng dụng Foam Market (UI Design)

14

CHƯƠNG 1 TÌM HIỂU VỀ UX DESIGN VÀ UI DESIGN

1 Những hiểu biết cơ bản về UX và thiết kế UX

UX: Được viết đầy đủ là User Experience (Trải nghiệm người dùng) Là trải

nghiệm của người dùng khi người dùng sử dụng một sản phẩm hay một dịch vụ nào đó

Steve Jobs – một nhà thiết kế, doanh nhân người Mỹ, người đồng sáng lập, Cựu Chủ tịch và giám đốc điều hành tại Apple Inc Một nhân vật rất nổi tiếng trong việc luôn muốn đưa những trải nghiệm tốt nhất cho người dùng của mình

Hình 1.1 Chân dung của Steve Jobs

Ông là một nhân chứng hoàn hảo cho việc áp dụng UX trong ứng dụng phát phát triển sản phẩm Tìm hiểu qua một vài câu nói của ông:

“ You have to start with the customer experience and work backwards to the technology – Bạn hãy bắt đầu với trải nghiệm người dùng sau đó mới đến các yếu tố công nghệ ” – Steve Jobs

15

Vào thời điểm ông nói câu này, việc phát triển một sản phẩm thì yếu tố công nghệ là một yếu tố kiên quyết Còn với sự phát triển công nghệ mạnh mẽ ngày nay, nhiều plaform ra đời nhằm giúp việc phát triển sản phẩm sẽ trở nên dễ dàng hơn Và vai trò của UX càng ngày hiện hữu một cách rõ ràng hơn Từ trên ta dễ dàng nhận ra được tầm nhìn đi trước thời đại của ông

Với tầm nhìn đi trước thời đại của ông, ông là người đã tiên phong trong công cuộc cách mạng thay đổi máy vi tính và điện thoại di động thông minh, đóng góp không nhỏ vào thành công của Apple hôm nay Hiện nay, Apple đã trở thành

1 công ty tỷ đô, với nền móng là những di sản do Steve Jobs xây dựng

“ Design is not just what it looks and feels like Design is how it works Thiết kế không chỉ là những gì nó trông giống như và cảm thấy như thế nào Thiết kế là cách nó hoạt động.” -Steve Jobs

-Steve Jobs luôn đặt tính năng, giá trị của sản phẩm đem lại cho người dùng

là điều quan trọng nhất, tiếp theo đó là giao diện, bao bì, tính thẩm mỹ của sản phẩm

Một người có ảnh hưởng lớn như Steve Jobs luôn luôn đề cao tính trải nghiệm của sản phẩm (UX) thì chắc hẵn nó đóng một vai trò quan trọng như thế nào trong quá trình phát triển sản phẩm

Hình 1.2 Câu nói nổi tiếng của Steve Jobs

16

2 UX trong đời sống hàng ngày

2.1 UX trong đời sống hàng ngày

Con người chúng ta thường xuyên có các trải nghiệm với các đối tượng mà

ta tiếp xúc mỗi ngày (Có thể là 1 sản phẩm, 1 dịch vụ hoặc 1 người bấy kỳ) Đó

có thể là một trải nghiệm tốt, đó có thể là một trải nghiệm xấu Và ta thường xuyên tìm kiếm một trải nghiệm tốt thay vì một trải nghiệm xấu

Trải nghiệm chính là 1 thứ thúc đẩy người dùng chi tiêu hoặc sử dụng 1 sản phẩm, dịch vụ nào đó Đôi khi vì một trải nghiệm lạ mà người dùng sẽ làm 1 đều

gì đó điên rồ Tuy nhiên có những trải nghiệm thì người ta muốn trải nghiệm mãi,

có những trải nghiệm vì hiếu kỳ thì chỉ 1 lần trong đời Có những trải nghiệm họ

sẽ ko bao giờ muốn lặp lại trải nghiệm đó 1 lần nữa

Hình 1.3 Ví dụ về một trải nghiệm UX xấu

Ví dụ 1: Hẳn ai cũng đã có một trải nghiệm khó khăn tại một bãi gửi xe Khi

việc ghi số, đánh dấu xe bằng những viên phấn được ghi trực tiếp trên yên xe, khiến cho ta có cái nhìn không được thiện cảm với những vết phấn còn xót lại khi

17

ta rời bãi đỗ xe Phải mất khoảng vài ngày, thậm chí một tuần những vết phấn ấy mới mờ đi và dần biến mất => Một trải nghiệm UX xấu

Hình 1.4 Ví dụ về một trải nghiệm UX tốt

Ví dụ 2: Nhưng ở nhiều bãi đỗ xe, họ đã cải thiện bằng cách áp dụng công

nghệ, sử dụng thẻ từ để ghi số, đánh dấu xe Khiến cho việc gửi xe dễ dàng hơn, khách hàng không còn gặp tình trạng “vết phấn”, doanh nghiệp cũng giảm tải được

sự ùn tắc trong quá trình ghi số => Một trải nghiệm UX tốt

• Acessible: Người dùng có đủ điều kiện để sử dụng sản phẩm hay không ?

• Usable: Sản phẩm có dễ dàng sử dụng hay không ?

• Desirable: Sự lôi cuốn, thúc đẩy của sản phẩm ?

• Credible: Độ tin cậy của sản phẩm đối với người dùng ?

• Usefull: Độ hữu dụng của sản phẩm ?

Hình 1.5 Mô hình bậc thang 6 bước

19

2.3 Vai trò của UX tới các doanh nghiệp hiện nay

Ngày nay thì ngày càng có nhiều công ty - hiểu ra vấn đề cốt lõi trong quá trình phát triển sản phẩm Đó là: Thời kỳ của việc sản xuất đại trà đã qua và thời

kỳ cạnh tranh bằng chất lượng sản phẩm cũng đã qua Thực tế thì tại thời đại này, người dùng có quá nhiều lựa chọn về sản phẩm Bất cứ sản phẩm nào vừa đc phát minh ra, dù có tinh vi, phức tạp đến đâu, sau một thời gian ngắn vẫn có thể bắt chước để tạo ra 1 sản phẩm tương đương Nhưng trải nghiệm mà sản phẩm tạo ra cho khách hàng Các nhận dạng từ hình ảnh, ngôn từ, cách tương tác, cảm xúc được sáng tạo trên sản phẩm riêng của doanh nghiệp đó thì người khác sẽ khó lòng

có thể copy được Do đó có thể nói UX càng ngày càng thể hiện rõ vai trò là yếu

tố cạnh tranh quyết định đối với doanh nghiệp

Hình 1.6 Đặt khách hàng – người dùng lên hàng đầu

Khách hàng là thượng đế, nếu ta muốn đáp ứng được khách hàng, hãy học cách thiết kế UX, UX sẽ giúp giải quyết các vấn đề của người dùng khi sử dụng sản phẩm Từ đó, người dùng sẽ có được niềm tin vào doanh nghiệp của mình Nếu doanh nghiệp nào đứng ngoài cuộc chơi thì doanh nghiệp đó sẽ mất đi sự cạnh tranh và bị vượt mặt bởi các doanh nghiệp khác

20

Sau đây là 4 lợi ích của UX đối với 1 doanh nghiệp mà đã được công nhận rộng rãi:

• Giảm chi phí tạo ra sản phẩm: Rất nhiều các công ty, doanh nghiệp gặp

phải 1 vấn đề là khi họ bắt phát triển 1 sản phẩm, họ hoàn toàn dựa trên

dự đoán mà thiếu đi sự tìm hiểu và nghiên cứu Và khi sản phẩm xây dựng gần xong mới đưa cho người dùng trải nghiệm, lúc đó họ mới nhận thấy sai lầm Và cái giá cho sai lầm đó, đơn giản thì là thay đổi, cập nhật còn

phức tạp hơn thì là đập đi làm lại từ đầu

• Giảm rủi ro khi nâng cấp, thay đổi sản phẩm: Thực tế thì số các công ty

đầu tư vào thiết kế UX trong việc tạo ra sản phẩm đã là ít ỏi Nhưng ngay

cả khi tạo ra được 1 sản phẩm được thiết kế tốt từ ban đầu, ta vẫn phải thường xuyên nâng cấp và thay đổi sản phẩm Và đó lại là nơi tiềm ẩn nhiều rủi ro nhất vì đó là thời kỳ thiết kế UX trên sản phẩm đã không còn được coi trọng đầy đủ Thêm 1 vài chức năng mới, thay đổi một số cập nhật về quy trình vv có thể khiến khách hàng nổi giận và rời bỏ sản

phẩm

• Có được doanh thu cao hơn: Điều này cũng dễ hiểu, khi sản phẩm của

công ty, doanh nghiệp được người dùng sử dụng nhiều, thì cơ hội kiếm

tiền của càng trở nên rõ nét

• Sản phẩm trở nên dễ bán: Như đã đề cập từ trước, thời kỳ mà khách

hàng chỉ quan tâm đến chất lượng của sản phẩm đã qua Sản phẩm không chỉ cần có 1 chất lượng đạt chuẩn và mà còn là 1 trải nghiệm người dùng tốt, đó sẽ là 1 sản phẩm dễ bán và khiến khách hàng phải sử dụng sản

phẩm

21

3 Khái niệm về UX Design và UI Design:

- UX Design hay UXD: Được viết đầy đủ là User Experience Design, nghĩa

là Thiết kế tối ưu trải nghiệm người dùng Đặt người dùng làm trọng tâm của sản phẩm (User Centered Design) UX là những đánh giá của người dùng khi sử dụng sản phẩm như: Website hay App có dễ sử dụng hay không? Có thân việc bố trí sắp xếp bố cục như vậy đã được hay chưa? Sản phẩm đó có đạt được mục đích đề ra không

Thuật ngữ UX được đặt ra bởi Don Norman, cựu phó chủ tịch của Tập

đoàn Advanced Technology Group, ông đã nói :

“Tôi đã phát minh ra thuật ngữ này vì tôi nghĩ giao diện của con người và

khả năng sử dụng quá hẹp Tôi muốn bao gồm tất cả các khía cạnh của

trải nghiệm của người đó với hệ thống bao gồm thiết kế công nghiệp, đồ

họa, giao diện, tương tác vật lý và hướng dẫn sử dụng.” -Don Norman

Hình 1.7 Chân dung “cha đẻ” của ngành UX Design

- UI Design: Được viết đầy đủ là User Interface Design, nghĩa là Thiết kế

giao diện người dùng UI bao gồm tất cả những gì người dùng có thể nhìn

22

thấy như: màu sắc web, bố cục sắp xếp như thế nào, web/app sử dụng fonts

chữ gì, hình ảnh trên web có hấp dẫn hay không, UI đóng vai trò truyền tải

thông diệp từ người thiết kế, nhà cung cấp dịch vụ, sản phẩm tới người

dùng

Hình 1.8 Mối tương quan giữa UX và UI

4 Công việc của UX Designer và UI Designer là gì ?

Công việc của một UX Designer: UX Designer sẽ tìm nhiều cách để tiếp

cận sản phẩm để phát hiện một cách đầy đủ những lỗi hay các bất tiện mà người

dùng có thể gặp phải, phân tích nguyên nhân và tìm cách giải quyết để gửi ý tưởng

về cho UI Design thực hiện UX sẽ đảm bảo sao cho tính logic của sản phẩm sẽ

“mềm mượt” từ bước này sang bước tiếp theo, tức là đảm bảo chất lượng đầu ra

sản phẩm

Một số công việc một UX Desinger cần phải thực hiện như:

• Phân tích đối thủ cạnh tranh

• Phân tích khách hàng

• Thực hiện các cuộc phỏng vấn

23

• Phát triển nội dung

• Xây dựng dụng cụ trực quan và sản phẩm mẫu

• Kiểm tra / Lặp lại

Công việc của một UI Designer: UI sẽ tiến hành nghiên cứu và tiếp nhận

các thông tin từ UX Designer, từ đó đưa ra thiết kế giao diện đồ họa cho phần mềm, các ứng dụng trên điện thoại và máy tính, các website gồm các yếu tố như màu sắc, hình ảnh, ngôn ngữ, phương thức sử dụng các tính năng, cách trình bày

bố cục, sắp xếp layout của sản phẩm kỹ thuật số,… Ngoài ra, UI Designer cũng phụ trách các Digital Product Nói một cách khác, UI Designer đã tạo ra quá trình hướng dẫn người dùng một cách trực quan thông qua giao diện của sản phẩm

Một số công việc một UI Designer cần phải thực hiện như:

• Nghiên cứu thiết kế

• Xây dựng thương hiệu và phát triển đồ họa

• Xây dựng hướng dẫn sử dụng (style guide)

• Xây dựng sản phẩm mẫu

• Sự tương tác và hoạt hình

Hình 1.9 Kỹ năng cần phải có đối với một UI Designer và UX Designer

24

Thế nhưng trong thực tế UI & UX vẫn sẽ rất thường xuyên song hành cùng nhau, vì bất kỳ một thiết kế website hay trải nghiệm ứng dụng nào vẫn cần sự có mặt của cả hai lĩnh vực UI và UX Thông thường một UI designer sẽ tập trung phần lớn vào UI, nhưng vẫn có một ít kiến thức phía bên UX Và ngược lại UX designer chủ yếu làm về UX, cũng sẽ đi kèm với một số kĩ năng cơ bản về hình ảnh bên UI Trường hợp có một số ít người nằm ở vùng giữa, cân bằng được cả hai thứ nên họ được gọi là UI/UX designer

5 Giữa UX và UI cái nào quan trọng hơn ?

Chính vì sự liên quan chặt chẽ về UX và UI mà mọi người thường khó phân biệt tầm quan trọng giữa UX và UI Có không ít cuộc tranh luận rằng UX quan trọng hơn UI hoặc ngược lại UI quan trọng hơn UX

Tuy nhiên khi bạn đã hiểu rõ ràng về hai khái niệm này bạn có thể dễ dàng nhận điểm chung đó là cả UI và UX đều mang một mục đích đó là tạo sự thoải mái cho người dùng, từ đó ta có thể thấy chúng có vai trò quan trọng như nhau

Hình 1.10 Tầm quan trọng của UX và UI Design

25

6 Quá trình thiết kế một dự án UX/UI

Không có bất kỳ quy tắc hay quy trình bắt buộc cụ thể nào cho UX/UI Design Tùy vào mỗi dự án, quy mô, tổ chức, tùy vào mỗi người Designer mà sẽ

có mỗi quy trình thực diện cho từng dự án khác nhau

Cụ thể hơn, quy trình thiết kế UX/UI sẽ gồm nhiều bước lớn, trong mỗi bước lớn sẽ gồm nhiều bước nhỏ hơn (công cụ) Có tổng cộng khoảng 70 công cụ các loại để thực hiện UX Design Mỗi mô hình và phương pháp sẽ có quy trình khác nhau và đầu ra kết quả khác nhau Điều quan trọng là tìm ra vấn đề chính xác mà

ta đang làm cho dư án này là gì

Một số phương pháp phổ biến như: User Personas, User Flow, Usability Testing,…

Hình 1.11 Quy trình chung trong UX Proces

Với quá trình phát triển UX/UI cho ứng dụng Foam Market cũng không

nằm ngoại lệ Với quy mô và điều kiện cần mà Foam Market muốn hướng tới,

em sẽ thực hiện theo quy trình như sau:

Hình 1.12 Quy trình thiết kế UX/UI cho Foam Market

26

CHƯƠNG 2: TÌM HIỂU MỘT SỐ CÔNG CỤ THỰC HÀNH

Quá trình thiết kế và phát triển phần mềm, website và ứng dụng là một quá trình xuyên suốt, gồm nhiều chặng Mỗi một chặng đều phải có các công cụ để

hỗ trợ, mỗi công cụ đều có vai trò đóng góp cho quá trình phát triển sản phẩm

ấy Sau đây là một vài công cụ được sử dụng trong đề tài lần này:

1 Bút, tẩy và giấy

Ba công cụ trên là 3 công cụ hiển nhiên phải có trong bấy kỳ dự án nào, dù

dự án có đơn giản đến đâu hay phức tạp, to lớn đến mức nào đi nữa thì đều cần

sử dụng đến bộ 3 này Từ việc ghi chú kết quả, lưu trú thông tin phỏng vấn, phác thảo sơ đồ thì đều cần dùng đến Bút, Tẩy và Giấy

Giấy có thể là giấy A4, A3, A0, bất kỳ loại giấy nào mà ta có thể viết và thuận tiện cho việc lưu trữ và ghi chú Ngoài ra, giấy Note cũng là một loại giấy quan trọng, hỗ trợ ta rất nhiều trong việc phân tích, sắp xếp, đánh giá Chúng thường được sử dụng trong các công đoạn như: Affinity Mapping, User

Stories,…

Hình 2.1 Giấy Note công cụ đắc lực cho dự án

27

2 Miro – Công cụ hỗ trợ vẽ sơ đồ

Miro là một công cụ hỗ trợ việc phân tích, vẽ sơ đồ Ta có thể dễ dàng truy cập thông qua đường link https://miro.com/

Mọi sơ đồ mà ta có thể tìm thấy cho việc phân tích, đánh giá trong nhiều các lĩnh vực như UX, Marketing,… đều có trên Miro Miro xuất hiện trên mọi nền tảng từ Desktop: MAC OS, Window cho đến Android, IOS Miro hỗ trợ miễn phí chỉ với 3 project được khỏi tạo Để mở rộng giới hạn hơn thì ta có thể nâng cấp theo nhiều gói khác nhau từ 8$ cho đến 12$

Với dự án này, ta sẽ sử dụng miro đễ hỗ trợ chuyển các thông tin, phân tích được trong quá trình khảo sát thành các thông tin số để hiện thị trên màn hình

Hình 2.2 Logo của Miro – Công cụ vẽ sơ đồ

28

3 Figma – Công cụ hỗ trợ việc thiết kế UI

Figma cùng với Sketch, Adobe XD là một công cụ hỗ trợ việc thiết kế UI phổ biến và được nhiều nhà thiết kế sử dụng trong quá trình phát triển sản phẩm

Ta có thể thiết kế với Figma ngay trên nền tảng Website, để cần sự ổn định hơn trong quá trình làm việc ta dễ dàng cài đặt Figma trên 2 nền tảng Mac và Window

Các điểm mạnh của Figma cần được kể đến như:

• Mọi người trong team đều có thể dễ dàng làm việc cùng nhau trên Figma Với chức năng mô tả đặc tính của một Component thông qua các dòng Code từ CSS, Android cho đến iOS Thuận lợi cho việc kết nối giữa Designer với Developer

• Với chức năng Master Component dễ dàng quản lý các Component trong

dự án

• Thực hiện được các hiệu ứng chuyển cảnh giữa các màn hình và thiết lập được một số Interaction (Thiết kế tương tác) đơn giản

• Nhẹ, dễ dàng sử dụng và làm quen

• Lưu trữ file trên điện toán đám mây

Hình 2.3 Logo của Figma – Công cụ thiết kế UI

29

CHƯƠNG 3: DISCOVER – GIAI ĐOẠN KHÁM PHÁ

1 Tìm hiểu về Disover – Giai đoạn tìm hiểu, khám phá

Người xưa có câu: “ Nếu bạn có bốn giờ để chặt cây, hãy dành ba giờ đầu

để mài rìu ”

Thiết kế cũng vậy Trước khi ta bắt đầu với bất kỳ dự án nào, ta cần phải có những điều cơ bản trước Ta phải hiểu được vấn đề của 2 yếu tố cơ bản:

• Hiểu người dùng của bạn

• Hiểu doanh nghiệp của bạn

Hình 3.1 Tương quan giữa User (Người dùng) và Business (Doanh nghiệp)

30

1.1 Hiểu người dùng của bạn:

Vì thiết kế trải nghiệm người dùng là giải quyết các vấn đề khó khăn người dùng Ta cần phải trả lời được các câu hỏi sau:

• What is their problem? - Vấn đề của họ là gì ?

• What problem are you trying to solve? - Bạn đang cố gắng giải quyết

vấn dề gì cho người dùng của bạn ?

• Why are you the one with the answers? – Tại sao bạn tìm ra câu trả

lời ?

1.2 Hiểu doanh nghiệp của bạn:

Điều quan trong thứ 2, ta cần phải biết dự án này có phù hợp với sứ mệnh và mục tiêu mà doanh nghiệp hướng dến Các câu hỏi ta cần trả lời như sau:

• What are your company’s values and mission? - Giá trị và sứ mệnh

của doanh nghiệp là gì ?

• How does this project contribute to that goal? – Làm thế nào để dự

án này đóng góp cho mục tiêu đó ?

• Is this the right time for your company to be pursuing this project?

– Đây có phải là thời điểm thích hợp để thực hiện dự án này ?

1.3 Nghiên cứu:

Sau khi biết rằng dự án này phù hợp với nhiệm vụ cốt lõi của doanh nghiệp

Ta cần xác thực thực tế dự án thông qua việc nghiên cứu

Nghiên cứu chính là xương sống, nòng cốt cho dự án Những điều ta khám phá, tìm tòi được trong giai đoạn này sẽ là nền tảng phát triển cho toàn bộ dự án

31

Một số phương pháp được thực hiện trong giai đoạn này bao gồm:

• Background Research: Tìm hiểu về dự án của doanh nghiệp

• Context Inquiry: Bối cảnh thực hiện dự án

• User Survey: Khảo sát người dùng

• User Interview: Phỏng vấn người dùng

• Usability Test: Kiểm tra khả năng sử dụng

Hình 3.2 Một buổi phỏng vấn người dùng (User Interview 1:1)

2 Project Promt – Background Research

Lặp lại câu nói ở trên,“Nếu bạn có bốn giờ để chặt cây, hãy dành ba giờ đầu

để chặt rìu” Đúng vậy, việc hiểu được nhu cầu cơ bản trước thì mới tạo ra tiền

đề để phát triển cho những bước về sau.Việc thực hiện Project Promt (Mô tả dự án) Chính là một phương pháp giúp ta hiểu được dự án mà doanh nghiệp đem lại

là gì Phần mô tả dự án chính là phần yêu cầu mà doanh nghiệp muốn hướng tới,

32

mục đích của ứng dụng ra đời với các thông tin chức năng mà ứng dụng đem lại cho người dùng Ta cần phải suy ngẫm hoặc trực tiếp bắt gặp đại diện của doanh nghiệp để tìm hiểu các nguồn dữ liệu trên

Sau đây là bản mô tả tóm tắt từ dự án Foam Market:

Hình 3.3 Bản mô tả dự án Foam Market

33

Hình 3.4 Một vài hình ảnh từ nông trại đến cửa hàng của Foam Market

Rút ra vấn đề từ đoạn mô tả trên ta nhận thấy:

Foam Market là một doanh nghiệp đã đi vào hoạt động lâu năm, họ đã phần nào định hình được thương hiệu trong mắt người tiêu dùng Tại sao lại là “Định hình thương hiệu ?” - Một thương hiệu đã được định hình, sẽ cung cấp cho ta về cái nhìn, phong cách của thương hiệu đó Từ một vài hình ảnh thăm dò được trên

=> Foam Market là một thương hiệu hiện đại, trẻ trung, năng động Sự hiện đại đến từ quá trình sản xuất các nguôn vật liệu thực phẩm Sự năng đông trẻ trung từ phong cách bố trí, bày bán tại cửa hàng

Họ nắm bắt được xu hướng của thời đại rất nhanh, họ không chỉ muốn việc mua – bán chỉ diễn ra tại các cửa hàng Foam Market, mà còn muốn hướng đến là thị trường thương mại điện tử Tạo sự cãnh tranh với các cửa hàng thực phẩm khác Giúp phục vụ được nhiều đối tượng khách hàng hơn, giúp nhiều khách hàng hơn được trải nghiệm sản phẩm từ chính Foam Phương châm của họ và cũng

Từ trên, đã rút ra được 2 điều quan trọng từ doanh nghiệp:

• Vision Statemanet: Tầm nhìn chiến lược của doanh nghiệp cho

ứng dụng

• Business Goals: Lợi ích kinh doanh mà doanh nghiệp hướng tới

khi xây dựng, phát triển ứng dụng

Hình 3.4 Vision statement và Business Goals

Bối cảnh ra đời của Foam Market:

Smartphone đóng một phần thiết yếu trong cuộc sống hàng ngày của người Việt Một lượng lớn người Việt kiểm tra điện thoại di động của họ ngay sau khi thức dậy và dành hơn 2 giờ mỗi ngày cho điện thoại của họ:

• 46% người Việt sử dụng điện thoại của họ trong vòng 5 phút sau khi thức dậy

Thương mại điện tử di động đang đạt mức tăng trưởng cao nhất và nhiều người bắt đầu tìm kiếm một sản phẩm thông qua smartphone của họ Dần việc mua sắm trên smartphone vượt trội hơn dẵn so với trên các thiết bị khác như PC/tablet

Dù việc thanh toán trực tuyến là bước đi mới trong thời đại Thế nhưng, tại Việt Nam người tiêu dùng sợ bị lừa đảo, vì vậy họ thích giao hàng bằng tiền mặt hơn bất kỳ phương thức mua hàng nào khác

Hình 3.5 Sơ đồ tương quan về việc sử dụng Smartphone tại Việt Nam

36

Kết luận: Người dùng đã dần quen với việc mua sắm trực tuyến, các đơn vị

doanh nghiệp cũng cần có một ứng dụng/website của riêng mình để mở rộng thì phần, thu hút được nhiều khách hàng hơn

Foam Market bắt đầu quan tâm tới thị trường trực tuyến và cho phát triển ứng dụng vào thời điểm này là hoàn toàn khả thi Tiền đề là từ việc rút kinh nghiệm

từ các đối thủ khác, đồng thời cộng hưởng các yếu tốt đặc trưng sẽ giúp Foam Market đạt được mục tiêu (Business Goals) của mình

3 User Survey – Khảo sát người dùng

3.1 User Serveys là gì?

User Surveys việc thực hiện các câu hỏi để gửi cho người dùng mục tiêu của mình Nó là một cuộc nghiên cứu có hệ thống về mục tiêu, nhu cầu và khả năng của người dùng để chỉ định thiết kế, xây dựng hoặc cải tiến các công cụ nhằm mang lại lợi ích cho cách người dùng làm việc User Surveys là cách nhanh chóng và tương đối dễ dàng để lấy dữ liệu về người dùng và xác định được tập người dùng tiềm năng

Các khảo sát bao gồm chủ yếu hai loại câu hỏi:

• Câu hỏi đóng: Những câu hỏi này nhận được dữ liệu tương đối từ

người dùng Nó không cho chúng ta biết về bối cảnh, động lực, nguyên nhân của phản ứng Những câu hỏi này thường được sử dụng với checkbox, radio button Dữ liệu thu được có thể dễ dàng được

mô tả thông qua sơ đồ

• Câu hỏi mở: Câu hỏi mở là dữ liệu định tính về hành vi, hành động

của người dùng Nó cho chúng ta biết người dùng nghĩ về một vấn

đề như thế nào Những câu hỏi này yêu cầu một hộp văn bản để giải thích nguyên nhân Các câu hỏi mở có xu hướng mất nhiều thời gian hơn để phân tích

37

3.2 Quá trình thực hiện khảo sát:

B1: Xác định được mục tiêu khảo sát

Các câu hỏi đều được chia thành 2 phần: Phần 1 và Phần 2 Với mỗi phần tương ứng thì sẽ thu được kết quả với mục đích khác nhau

• Phần 1: Để hiểu rõ và phân nhóm các khách hàng tiềm năng sử dụng

sản phẩm Là tiền đề để xây dựng User Personas (Người dùng nguyên mẫu) Tiếp là xác định được người dùng thực sự cho cuộc phỏng vấn trực tiếp (User Interview)

• Phần 2: Nhằm xác định nhu cầu - sự quan tâm của người dùng với

các ứng dụng mua sắm trực tuyến Đồng thời, nhận biết các khó khăn

mà người dùng gặp phải khi sử dụng các ứng dụng mua hàng trực tuyến tương tự

B2: Chọn phương thức khảo sát là trực tiếp (Survey) với các câu hỏi được chuẩn

bị thông qua Google Forms

B3: Lên danh sách gồm các câu hỏi:

Chào anh (chị), Em tên Phạm Huy Phong, sinh viên năm 4 của trường đại học Bà Rịa Vũng Tàu (BVU) Hiện tại em đang thực hiện một dự án nhỏ cho bài tập của mình Một dự án thiết kế về một ứng dụng cho một Cửa hàng tiện lợi online Một dự án giúp cho người dùng dễ dàng thuận tiện mua sắm các nhu yếu phẩm hàng ngày trực tuyến, giúp việc mua sắm các nhu yếu phẩm hàng ngày trở nên nhanh hơn, an toàn hơn, thuận tiện hơn Dưới đây là câu hỏi Các câu hỏi đều mang tính khách quan, không làm rõ thông tin của bất kỳ cá nhân nào, nên anh (chị) có thể yên tâm về tính bảo mật của mình Kính mong anh (chị) có thể đóng góp câu trả lời để em có thể hoàn thành được bài tập của mình Cảm ơn rất nhiều

38

Phần 1: Để hiểu rõ và phân nhóm các khách hàng tiềm năng

• Giới tính của mình là gì ?

• Độ tuổi của anh (chị) là bao nhiêu ?

• Công việc của anh (chị) là gì ?

• Tình trạng công việc của anh (chị) ?

• Tình trạng hôn nhân của anh (chị) ?

Phần 2: Xác định nhu cầu - sự quan tâm của người dùng với các ứng dụng

mua sắm trực tuyến:

• Anh (chị) có thường xuyên mua hàng tại các CỬA HÀNG THỰC PHẨM hay không ?

• Các mặt hàng anh (chị) thường chọn mua là gì ?

• Điều gì khiến anh (chị) quan tâm nhất khi chọn mua thực phẩm cho mình (hoặc cho gia đình mình) ?

• Anh (chị) có thường xuyên nấu ăn để phục vụ bữa ăn hàng ngày cho gia đình ( hoặc cho chính bản thân mình) hay không ?

• Đánh giá cảm xúc của bản thân anh (chị) khi tham gia nấu ăn ?

• Anh (chị) có khó khăn trong việc chọn lựa thực đơn mỗi ngày ? Anh (chị) nghĩ sao về việc có một ứng dụng giúp anh (chị) lên thực đơn hàng ngày, hàng tuần ?

• Có bao nhiêu ứng dụng Mua sắm trực tuyến - Thương mại điện tử trên điện thoại của anh (chị) ?

• Ứng dụng Mua sắm trực tuyến - Thương mại điện tử nào khiến anh chị cảm thấy hài lòng nhất khi sử dụng ?

• Điều gì khiến anh (chị) cảm thấy hài lòng khi sử dụng ứng dụng kể trên ?

• Thời gian trung bình (phút) của anh chị khi lựa chọn mua một sản phẩm ? (bao gồm cả thời gian tìm kiếm, chọn lựa, so sánh và thanh toán)

39

Sau khi thực hiện khảo sát trực tiếp với sự giúp sức của hơn 20 người tham

gia, đã thu về được các số liệu thống kê như sau:

Hình 3.6 Sơ đồ diễn tả giới tính

Hình 3.7 Sơ đồ diễn tả độ tuổi