Thiết kế giao diện website bán mỹ phẩm costic

TRƯỜNG ĐẠI HỌC KINH TẾ KHOA THỐNG KÊ – TIN HỌC ––––––––––––––––––––––––––––––– BÁO CÁO THỰC TẬP NGHỀ NGHIỆP NGÀNH HỆ THỐNG THÔNG TIN QUẢN LÝ CHUYÊN NGÀNH TIN HỌC QUẢN LÝ THIẾT KẾ GIAO DIỆN WEBSITE BÁN MỸ PHẨM COSTIC Đơn vị thực tập : Công ty Cổ phần DS Solution Giảng viên hướng dẫn : TS Nguyễn Thị Uyên Nhi LỜI CẢM ƠN Trước tiên, em xin gửi đến quý thầy, cô giảng viên trường Đại học Kinh tế – Đại học Đà Nẵng lời cảm ơn chân thành đặc biệt thầy cô khoa Thống kê – Tin học Nhờ giúp đỡ, bảo tận tình thầy cơ, em hồn thành tốt báo cáo thực tập nghề nghiệp với đề tài “Thiết kế giao diện website bán mỹ phẩm Costic” Em xin gửi lời cảm ơn chân thành sâu sắc đến cô Nguyễn Thị Uyên Nhi – Giảng viên hướng dẫn, khoa Thống kê – Tin học; anh Đinh Hoàng Vũ – PM/Sales Excutive anh chị cán bộ, nhân viên phận Thiết kế nhiệt tình hướng dẫn, giúp đỡ tạo điều kiện thuận lợi cho em tìm hiểu thực tiễn để phục vụ cho báo cáo nghề nghiệp Vì kiến thức thân cịn hạn chế, nên q trình thực tập, hồn thiện báo cáo em khơng tránh khỏi sai sót xảy Em mong nhận ý kiến đóng góp từ quý thầy cô doanh nghiệp để rút kinh nghiệm ngày hoàn thiện Một lần em xin chân thành cảm ơn! i LỜI CAM ĐOAN Em xin cam đoan Báo cáo thực tập nghề nghiệp Thiết kế giao diện website bán mỹ phẩm Costic kết nghiên cứu độc lập cá nhân em dựa sở lý thuyết học, khảo sát thực tiễn hướng dẫn TS Nguyễn Thị Uyên Nhi Ngoài ra, báo cáo thực tập nghề nghiệp sử dụng số nhận xét, đánh số liệu tác giả, quan tổ chức khác có trích dẫn thích nguồn gốc rõ ràng Nếu phát có gian lận nào, em xin chịu trách nhiệm hoàn toàn nội dung báo cáo ii MỤC LỤC NHẬN XÉT CỦA ĐƠN VỊ THỰC TẬP i LỜI CẢM ƠN i LỜI CAM ĐOAN ii MỤC LỤC iii DANH MỤC HÌNH ẢNH v DANH MỤC BẢNG BIỂU .vii DANH MỤC CÁC TỪ VIẾT TẮT .viii LỜI MỞ ĐẦU CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI VÀ CƠ SỞ LÝ THUYẾT 1.1 Tổng quan doanh nghiệp thực tập .4 1.1.1 Giới thiệu chung doanh nghiệp thực tập 1.1.2 Tầm nhìn, sứ mệnh giá trị cốt lõi 1.2 Tổng quan thiết kế UI/UX 1.2.1 Giới thiệu chung UI/UX Designer 1.2.2 Những khái niệm thiết kế UI/UX 14 1.2.3 Các bên liên quan 24 1.2.4 Quy trình triển khai dự án 25 1.3 Công cụ hỗ trợ thiết kế giao diện UI/UX 27 CHƯƠNG NGHIÊN CỨU TRẢI NGHIỆM NGƯỜI DÙNG 33 2.1 Triển khai dự án .33 2.1.1 Giới thiệu chung dự án 33 2.1.2 Lên kế hoạch thiết kế giao diện 34 2.2 Thiết lập mục tiêu nghiên cứu nhân học đối tượng nghiên cứu 34 2.3 Khảo sát đối tượng nghiên cứu bảng câu hỏi 36 2.4 Thiết lập Bản đồ đồng cảm (Empathy Map) 38 iii 2.5 Xác định Nhóm người dùng (User group) thiết lập người dùng giả tưởng (User Persona) cho nhóm 41 2.6 Xây dựng Bản đồ hành trình người dùng (Customer journey map) .42 2.7 Xây dựng User Flow Sitemap 43 2.7.1 Lý tạo User Flow Đăng nhập 43 2.7.2 Lý tạo User Flow chức Thêm sản phẩm vào wishlist 45 2.7.3 Lý tạo User Flow chức xem chi tiết thành phần sản phẩm 47 2.8 Xây dựng cấu trúc thông tin (Information Architecture) .48 CHƯƠNG THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG CHO WEBSITE BÁN MỸ PHẨM COSTIC .49 3.1 Vẽ Wireframe cho người website (Dạng Low-fi) 49 3.2 Xây dựng Design system cho Website 50 3.3 Hoàn thiện UI chi tiết 53 3.4 Tạo prototype cho website .62 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 65 Kết đạt tập 65 Những vấn đề tồn 66 Hướng phát triển đề tài 66 TÀI LIỆU THAM KHẢO 67 CHECK LIST CỦA BÁO CÁO 68 iv DANH MỤC HÌNH ẢNH Hình 1-1 Mơi trường làm việc DSS Hình 1-2 Ba hướng phát triển UI/UX Designer 12 Hình 1-3 Mơ hình yếu tố thiết kế trải nghiệm người dùng 14 Hình 1-4 Minh hoạ cho vị trí nghề nghiệp UX Designer 18 Hình 1-5 Mơ tả UX Content tốt không tốt 20 Hình 1-6 Minh hoạ Design System 22 Hình 1-7 Figma .28 Hình 1-8 Một số Frame hỗ trợ Figma 28 Hình 1-9 Chức Figma Chat Figma 29 Hình 1-10 Chức trị chuyện online khơng gian làm việc Figma 29 Hình 1-11 Minh hoạ fluggin Figma 30 Hình 1-12 Ví dụ layout sản phẩm .30 Hình 1-13 Chức xuất file Figma 31 Hình 1-14 Minh hoạ cho lưu trữ đám mây Figma 31 Hình 2-1 Kế hoạch thiết kế giao diện 34 Hình 2-2 Các câu hỏi xây đựng để thực khảo sát 36 Hình 2-3 Các câu hỏi xây đựng để thực khảo sát 37 Hình 2-4 Các câu hỏi xây đựng để thực khảo sát 38 Hình 2-5 Một số kết bật khảo sát .39 Hình 2-6 Empathy Map 40 Hình 2-7 User Persona Nhóm người trẻ thời gian .41 Hình 2-8 Customer Journey Map 42 Hình 2-9 User Flow Đăng nhập 44 Hình 2-10 User Flow chức Thêm sản phẩm vào wishlist .46 Hình 2-11 User Flow chức xem chi tiết thành phần sản phẩm .47 Hình 2-12 Information Artchitecture .48 Hình 3-1 Hình ảnh Wireframe 49 Hình 3-2 Design System .51 v Hình 3-3 Chi tiết Typography System 52 Hình 3-4 Trang chủ cho website Costic 53 Hình 3-5 Giao diện Deal of The Week website Costic 54 Hình 3-6 Giao diện Category website Costic 55 Hình 3-7 Chức xem chi tiết thành phần sản phẩm 56 Hình 3-8 Giao diện chi tiết sản phẩm Costic 57 Hình 3-9 Giao diện chi tiết sản phẩm (Review) Costic 58 Hình 3-10 Giao diện chi tiết blog Costic .59 Hình 3-11 Giao diện chi tiết sản phẩm 60 Hình 3-12 Giao diện chi tiết sản phẩm (Ship & Return) Costic .61 Hình 3-13 Prototype Component 62 Hình 3-14 Prototype Component 63 Hình 3-15 Prototype hình 64 vi DANH MỤC BẢNG BIỂU Bảng 1-1 Mô tả công việc UI/UX Designer Bảng 1-2 Ba hướng phát triển UI/UX Designer 12 Bảng 1-3 Mơ hình yếu tố thiết kế trải nghiệm người dùng .15 Bảng 1-4 Các yếu tố quan trọng UX Research 19 Bảng 1-5 Các yếu tố Color System 23 Bảng 1-6 Mô tả vai trò bên liên quan .24 Bảng 1-7 Quy trình triển khai dự án 25 vii DANH MỤC CÁC TỪ VIẾT TẮT UI : User Interface UX : User Experience viii LỜI MỞ ĐẦU Lý chọn đề tài Dự án "Costic" khởi đầu với mục tiêu tạo trải nghiệm mua sắm mỹ phẩm trực tuyến tuyệt vời, giúp người dùng cách dễ dàng tìm kiếm thông tin sản phẩm hiểu rõ sản phẩm mà họ quan tâm Điều mang lại cho người dùng cảm nhận rõ ràng tự tin tương tác trang web, với việc tối ưu hóa q trình chuyển đổi khách hàng cho doanh nghiệp Lựa chọn đề tài không dựa đáp ứng yếu tố bản, mà dựa vấn đề quan trọng tình hình sau: - Thị trường mỹ phẩm online phát triển mạnh mẽ: Khả mua sắm mỹ phẩm qua trang web trực tuyến ngày phổ biến tiện lợi Việt Nam toàn cầu Tỷ lệ tăng trưởng ấn tượng thị trường mỹ phẩm trực tuyến tạo hội kịp thời để khai thác phát triển - Sự gia tăng xu hướng mua sắm trực tuyến: Người tiêu dùng ngày nhận thức tiện lợi đa dạng mua sắm mỹ phẩm trực tuyến Khả so sánh giá lựa chọn sản phẩm đa dạng đóng vai trị quan trọng ưa chuộng hình thức mua sắm - Tối ưu hóa trải nghiệm người dùng: Giao diện trang web thông minh tận dụng tối đa tính mang lại trải nghiệm mua sắm tốt cho người dùng Việc mang lại hiệu suất kinh doanh tốt cho doanh nghiệp - Xử lý thách thức chất lượng phù hợp: Khách hàng thường mua phải sản phẩm không đạt chất lượng không phù hợp với nhu cầu người dùng vấn đề thường gặp thị trường mỹ phẩm trực tuyến Tối ưu hóa giao diện giải pháp thiết kế trang web giúp giảm thiểu tình trạng tạo niềm tin cho khách hàng - Cạnh tranh cao môi trường trực tuyến: Trong bối cảnh cạnh tranh khốc liệt không gian mạng, việc đầu tư vào thiết kế giao diện trang web không giúp đảm bảo chất lượng sản phẩm mà tạo độc đáo hấp dẫn để thu hút khách hàng tiềm - Việc tập trung vào thiết kế giao diện trang web "Costic" không lựa chọn thơng minh, mà cịn hội để tạo giá trị đáng kể cho người dùng doanh ix