Báo cáo cuối môn lab 5 1 hiết kế mô phỏng giao diện Ứng dụng di Động

Hình 1: Trang Welcome trên App của Một Nắng FoodTrang đăng nhập và đăng ký: Giúp khách hàng Đăng kí hoặc đăng nhập toàn khoản với mục tiêu nhằm đảm bảo trải nghiệm người dùng và quản lý

TRƯỜNG CAO ĐANG FPT POLYTECHNIC

BO MON: MARKETING NOI DUNG CHUYEN NGANH: DIGITAL MARKETING

BAO CAO CUOI MON: LAB 5.1 HIET KE MO PHO"NG GIAO DIEN ƯNG

DUNG DI ĐONG

Giả%ng viê*n hướ.ng dả0n: THA1Y NGUYE2N HUYNH ĐUA

Lớ.p: DM19301

Mô*n: DOM1071

Sinh viê*n thưc hiê*n: Nguyê0n Bì?nh Dướng

THANH PHO QUY NHỜN, THANG 9 NABM 2024

Bả?i 1: ThiêEt kêE mô* phô%ng giảô diê*n ư.ng dung di đô*ng

Thiết kế mô phỏng giao diện ứng dụng sử dụng công cụ Figma:

❖ Mô phỏng giao diện mobile

App Thiết bị: Iphone 13

Kích thước: Iphone 13 Mini với kích thước, W = 375 và W = 812

Mục tiêu: Ứng dụng của Một Nắng Food được tạo ra như một nền tảng di động

chuyên cung cấp và quảng bá các sản phẩm đặc sản từ vùng Tây Nguyên Được thiết

kế đặc biệt để kết nối giữa người tiêu dùng và những sản phẩm ẩm thực độc đáo từ Tây Nguyên, App Một Nắng Food hứa hẹn sẽ mang đến nhiều tiện ích và trải nghiệm thú vị cho người cho người dùng

Thiết kế giao diện:

• Trang Welcome: Giúp khách hàng nhận diện thương hiệu và giá trị của

việc Một Nắng Food xây dựng App trên Mobile Bên cạnh đó, Một Nắng Food đã thiết kế giao diện này với chủ đề Tết 2024 và gửi đến khách hàng những lời chúc tốt đẹp ngay khi vào App

Hình 1: Trang Welcome trên App của Một Nắng Food

Trang đăng nhập và đăng ký: Giúp khách hàng Đăng kí hoặc đăng nhập toàn khoản

với mục tiêu nhằm đảm bảo trải nghiệm người dùng và quản lý thông tin thành viên, giúp khách hàng có những trải nghiệm tốt hơn trên ứng dụng

Hình 2 : Trang Đăng nhập và Đăng kí trên App của Một Nắng Food

Trang chủ: Sau khi đăng nhập, tại giao diện trang chủ của Một Nắng Food sẽ hiện

liên những thông tin cơ bản về sản phẩm, và những sản phẩm đang ưu đãi, và ở phần đầu trang có nút tìm kiếm giúp khách hàng dễ dàng tìm kiếm các sản phẩm, hoặc những thông tin cơ bản dưới phần footer có những thanh như: Trang chủ, Trang sản phẩm yêu thích, Trang Ưu Đãi và Trang Thành Viên

Hình 3 : Trang Chủ trên App của Một Nắng Food

Trang sản phẩm yêu thích: Trang này cho phép người dùng lưu giữ và theo dõi các

sản phẩm mà họ quan tâm mà không cần mua ngay lập tức Người dùng có thể thêm sản phẩm vào danh sách yêu thích từ trang chi tiết sản phẩm hoặc từ trang danh sách sản phẩm, và tạo cơ hội cho người dùng chia sẻ danh sách sản phẩm yêu thích của họ

và nhận gợi ý từ hệ thống App Một Nắng Food

Trang ưu đãi: Trang ưu đãi thường xuyên được cập nhật để cung cấp thông tin mới

nhất về các chương trình giảm giá, quà tặng, hoặc các sự kiện đặc biệt như Flash Sale Người dùng có thể tận dụng các ưu đãi này để tiết kiệm chi phí và mua sắm thông

minh hơn Vì thế Một Nắng Food đã lên chiến dịch ưu đãi cụ thể là Tết đong đầy –

Sale 30% cho những khách hàng đặc biệt tải và sử dụng App của Một Nắng Food để

đặt hàng.

Hình 4 : Trang sản phẩm yêu thích trên App của Một Nắng Food

Trang Sản phẩm: Tại đây, trang cung cấp những thông tin đầy đủ và chi tiết về sản

phẩm, Hiển thị mô tả sản phẩm, Hình ảnh, chất lượng, kích thước và cân nặng, và hiển thị giá cả chi tiết, các thông tin về các chương trình giảm giá của App

Hình 5 : Trang Sản phẩm trên App của Một Nắng Food

Trang giỏ hàng: Hiển thị tất cả các sản phẩm mà người mua đã thêm vào giỏ hàng,

hiển thị các thông tin về các sản phẩm mà người mua đã chọn, giúp họ xem lại và quản lý các mục trong giỏ hàng của mình, và trang này có thể lưu lại những sản phẩm

sẽ mua để mua sau

Hình 6: Trang giỏ hàng của App Một Nắng Food

Trang thanh toán: Sau khi chọn sản phẩm, bạn chỉ cần chọn "Thanh toán" và điền

thông tin thanh toán như địa chỉ, phương thức thanh toán Một Nắng Food có hỗ trợ nhiều phương thức thanh toán như thẻ ngân hàng, ví điện tử, và thậm chí là thanh toán khi nhận hàng Quá trình này an toàn và thuận tiện, giúp khách hoàn tất mua sắm mà không cần phải rời khỏi ứng dụng Và sau khi thanh toán thành công, sẽ hiện lên trang

Thanh toán thành công, và khách hàng có thể bấm nút Theo dõi đơn hàng giúp khách

hàng yên tâm về dơn hàng của mình

Hình 7: Trang thanh toán của App Một Nắng Food

Trang hồ sơ: Hồ sơ trên App Một Nắng Food là nơi lưu trữ thông tin cá nhân và lịch

sử mua sắm của khách hàng Khách hàng có thể truy cập hồ sơ bằng cách nhấp vào biểu tượng người dùng trên ứng dụng Tại đây, người dùng có thể cập nhật và quản lý thông tin như địa chỉ giao hàng, số điện thoại, và đổi mật khẩu

Trang Tích điểm: Ngoài ra, tại trang hồ sơ, có một mục chọn đó là Điểm danh hàng

ngày Trang tích điểm hàng ngày của Một Nắng Food là nơi mà người dùng có thể kiếm và tích lũy điểm thưởng bằng cách thực hiện đăng nhập điểm danh hàng ngày Người dùng có cơ hội tích điểm bằng cách tham gia vào các nhiệm vụ đơn giản như đăng nhập vào tài khoản hàng ngày, xem các sản phẩm mới, hoặc xác thực tài khoản của mình Trang này tạo ra một trải nghiệm tích điểm và mua sắm tích hợp, khuyến khích người dùng duy trì sự tương tác với ứng dụng và nền tảng mua sắm trực tuyến của Một Nắng Food

Trang cài đặt: Trang cài đặt của Một Nắng Food là nơi mà người dùng có thể cá nhân

hóa và quản lý các tùy chọn của tài khoản và ứng dụng Trang này cho phép người

dùng thiết lập lại những tính năng như: Thông báo của ứng dụng, liên hệ trung tâm trợ giúp hoặc thiết lập lại tài khoản, mật khẩu hoặc gmail,

Hình 8: Trang hồ sơ, Trang tích điểm và trang cài đặt của App Một Nắng Food

Tạo prototype cho giao diện ứng dụng di động đã có sẵn bằng công cụ Figma

Sử dụng các công cụ trong Figma để thêm các màn hình hoặc khung cho các màn hình của Mobile App Mỗi màn hình nền tương ứng với một phần của ứng dụng.Như chuyển trang: từ Trang chủ sang các trang Sản phẩm hoặc trang ưu đãi,

Hình 9 : Prototype chuyển động và hiệu ứng trên App Mobile

Sau khi thiết lập xong, s chuyển đổi giữa các màn hình bằng cách sử dụng công

cụ “Prototype” của Figma để tạo ra các kết nối, tạo các liên kết giữa các khung (frames) khác nhau trong bản thiết kế Khi người xem bấm vào một phần được liên kết, họ sẽ chuyển đến khung được liên kết đó

Hình 9: Tổng quan các liên kết prototype của App

Cuối cùng, kiểm tra prototype bằng cách sử dụng công cụ “Present” để kiểm tra Prototype và App của mình có tương thích trên thiết bị di động hay không

Hình 9: Kiểm tra prototype trên thiết bị tương thích với ứng dụng