Đồ án Phát triển và thiết kế ứng dụng cửa hàng thực phẩm cho foam market

Ờ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àytháng..năm Sinh viên thực hiện 1 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 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 4 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 5 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 6 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 7 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 8 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 9 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 10 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 11 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 12 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) 13 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. 14 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 15 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 16 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. 17 2.2 Thế nào là một UX tốt ? Đối với một sản phẩm được coi là một UX tốt cần phải đảm bảo được các yếu tố sau đây: • Findable: Người dùng tìm thấy gì ở sản phẩm ? Và sản phẩm đó có phải là thứ họ cần tìm hay không ? • 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 18 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