Skip to content
FPT Arena Multimedia
  • Giới thiệu
    • FPT Education
    • Về FPT Arena
      • Lịch sử FPT Arena
      • Báo chí nói về FPT Arena
      • Đối tác của FPT Arena
  • Chương trình học
    • Học kì 1
    • Học kì 2
    • Học kì 3
    • Học kì 4
  • Gương mặt
  • Tin tức
    • Sự kiện
    • Blog
    • Tuyển dụng
      • FPT
      • Đối tác
  • Gallery
    • Học Kỳ 1
    • Học Kỳ 2
    • Học Kỳ 3
    • Học Kỳ 4
  • Thông tin tuyển sinh
    • Quy chế tuyển sinh
    • Học Bổng
    • Câu hỏi thường gặp
    • Khảo sát
    • Đăng ký học
    • Liên thông
      • Anh
      • Canada
      • Malaysia
      • Việt Nam
  • Blog
    • Tin Multimedia
    • Đồ họa
    • Web Design
    • Digital Film Making
    • Game Design
    • 3D Animation
    • Brand Identity
    • Phần mềm

Home - Tin tức - Bàn về quy trình thiết kế UX UI qua một Project thực tế

Bàn về quy trình thiết kế UX UI qua một Project thực tế

03/08/2020 | 16799 views

Bài viết sau đây sẽ giới thiệu về quy trình thiết kế UX UI ứng dụng Began – ứng dụng dinh dưỡng và giao đồ ăn – một sản phẩm kết thúc kỳ II của nhóm sinh viên FPT Arena Multimedia.

Mục lục

  1. Sơ bộ về đặc điểm của sản phẩm BEGAN
  2. Phần nghiên cứu của BEGAN
    1. 1- Sử dụng mô hình User Center Design Canvas (xem thêm ở https://ucdc.therectangles.com/ )
    2. 2- Áp dụng mô hình 5 bước trong design thinking của Stanford.

Sơ bộ về đặc điểm của sản phẩm BEGAN

  • BEGAN là ứng dụng giao đồ ăn online – thuộc mảng logistic
  • Chức năng được nghiên cứu và tối ưu cho các sản phẩm dành cho người ăn chay, ăn kiêng, ăn theo chế độ dinh dưỡng đặc thù. 
  • BEGAN sẽ quản lý chất lượng và liên kết với các Merchants – là các nhà cung cấp đồ ăn tương ứng.

Phần nghiên cứu của BEGAN

Đầu tiên, cần nắm rõ: “Thiết kế UI UX là thiết kế để người dùng cảm thấy thoải mái”

  • Để làm được điều đó, bạn cần phải hiểu khách hàng muốn điều gì. 
  • Để hiểu được khách hàn muốn gì, nhóm áp dụng 2 phương pháp là sử dụng surey ( khảo sát nhanh ) và phỏng vấn trực tiếp.(interview)

Cách tiếp cận vấn đề trong thiết kế UI UX thì có nhiều phướng pháp, 2 phương pháp phổ biến hiện tại là:

1- Sử dụng mô hình User Center Design Canvas (xem thêm ở https://ucdc.therectangles.com/ )

2- Áp dụng mô hình 5 bước trong design thinking của Stanford.

Bước 1: EMPATHIZE – tìm hiểu khách hàng.

Ở bước Empathize (Tìm sự đồng cảm với khách hàng, thấu hiểu vấn đề ) nhóm thực hiện bằng cách khảo sát và phỏng vấn 15 khách hàng dựa trên những trả nghiệm có sẵn với các ứng dụng Foody, now, Grab.

Bạn dùng app nào, bạn thấy app sử dụng có khó không? Bạn mất bao lâu để hoàn thiện một đơn hàng? Bạn quan tâm điều gì nhất khi dùng ứng dụng này? 

Tổng kết cơ bản phần phần tích người dùng 

  1. 60% người dùng sử dụng NOW
  2. 34% người dùng cảm thấy mất tập trung khi dùng app
  3. 62% người dùng nghĩ là ứng dụng này khó dùng
  4. 42% người dùng mất đến 15 phút để đặt một đơn hàng 
  5. 80% người dung thích ứng dụng NOW vì nhiều Deal 
  6. 38% người dùng thấy phí thời gian khi mất 15 phút để đặt một đơn hàng

Tiếp theo nhóm tiến hành phỏng vấn những khách hàng này với 8 câu hỏi 

  1. Một ngày của bạn đặt đồ ăn thế nào 
  2. Bạn mất bao nhiêu thời gian dùng internet trong 1 ngày 
  3. Tại sao bạn dùng dịch vụ đặt đồ ăn 
  4. App nào bạn thích dùng nhất trong 3 app. ( Now, Grab, GoViet)
  5. Điều gì làm bạn quan tâm khi sử dụng ứng dụng đặt đồ ăn 
  6. Thói quen ăn uống của bạn là gì 
  7. Bạn có ăn kiêng không 
  8. Nếu bạn dùng sử dụng ứng dụng thì lý do chính là gì 
  9. Thay vì những ứng dụng đặt đồ ăn chung chung bạn có muốn đơn giản hóa lựa chọn ứng dụng đặt đồ ăn 

Vài kết quả thu được từ người dùng


Bước 2: DEFINE – Định nghĩa vấn đề . 

Bước thứ 2 sau khi hiểu được khách hàng thông qua khảo sát, phỏng vấn và thống kê kết quả thì ta tới bước DEFINE (định nghĩa vấn đề) 

  1. Insight (huyệt cảm xúc) của khách hàng : khó khăn trong việc tìm đồ ăn khớp với nhu cầu, các giao diện của ứng dụng chưa tối ưu cho các tùy chọn đồ ăn . 
  2. Người dùng tốn nhiều thời gian để sử dụng ứng dụng, nguyên nhân là do giao diện ứng dụng chứa nhiều thông tin khuyến mãi dư thừa làm sao lãng người dùng 
  3. Người dùng không thể quyết định sẽ ăn gì. Thiếu các chỉ dẫn về chức năng cho người dùng
  4. Người dùng thiếu thông tin về dinh dưỡng của các đồ ăn . 
  5. Với các thông tin có được, nhóm thiết kế đã tạo ra phiên bản giả lập người dùng ( Tên kĩ thuật : Persona ) .

Các chức năng cần xây dựng 

  1. Tập trung vào chức năng tìm kiếm nhanh, hướng dẫn người dùng vào mối quan tâm ăn uống của họ để họ có thể dễ dàng lựa chọn đồ ăn. 
  2. Sử dụng giao diện tinh giản, hiển thị 

Bước 3: Thiết kế Branding

Thiết kế Branding

UI UX là trải nghiệm toàn diện, Logo là một phần đầu tiên cần xây dựng . 

Phần Tính cách của logo: Hiện đại, xu thế, thân thiện, rõ ràng

Từ đó, hình dạng tương ứng sẽ là: dạng nét tinh giản, hình tự do, bo tròn để tạo thân thiện.

Bước 4 : chuẩn Hóa UI

Màu

Chữ

Icon

Các component

Bước 5 : Thiết kế chức năng 

Luồng hoạt động của người dùng 

Các giao diện chức năng

Bước 6: Kịch bản test và khảo sát người dùng 

Kịch bản test : Tiến hành test trên 3 khách hàng điển hình dựa trên personal

Sau khi kiểm thử sản phẩm dựa trên người dùng, kết quả không được khả quan khi phần lớn khách hàng đều cho ý kiến chưa tốt về mặt sử dụng của phần mềm. 

Quy trình thiết kế lại được làm lại và tối ưu. Sau khi thiết kế lại sẽ test.Test xong lại phân tích và chọn lọc những yếu tố chưa tốt của sản phẩm và lại thiết kế lại. 

UI/UX là một vòng tròn lặp lại quá trình thiết kế, test, phân tích, thiết kế, test, phân tích… Đó là lý do tại sao các ứng dụng muốn có một UI/UX tốt phải luôn luôn update thiết kế và tính năng. UI/UX là một sản phẩm sống, nó sống cùng với sự phát triển của người dùng. 

Tổng kết

Hi vọng qua bài viết này, các bạn sẽ có một cái nhìn tổng quan và nắm được quy trình thiết kế UX UI cơ bản. 

Bài viết sử dụng sản phẩm của nhóm thiết kế BEGAN, lớp A2.1904E, FPT Arena Multimedia. Gồm các sinh viên: Lưu Khánh Linh, Đinh Bảo Trung, Nguyễn Quỳnh Nhi, Hà Quang Huy, Trần Hoàng Long, Nguyễn Tùng Lâm. 

Theo DesignerVn

Khối Giáo dục FPT – fpt.edu.vn  

Trường Đào Tạo Mỹ Thuật Đa Phương Tiện –  arena.edu.vn

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Thông tin nổi bật
  • TOP 5 TRƯỜNG THIẾT KẾ ĐỒ HỌA TỐT NHẤT VIỆT NAM 14-04-2020 | 418 views
  • KHÓA HỌC THIẾT KẾ ĐỒ HỌA CƠ BẢN 14-04-2020 | 518 views
  • HỌC THIẾT KẾ ĐỒ HỌA Ở ĐÂU TỐT 14-04-2020 | 998 views
  • HỌC PHOTOSHOP CĂN BẢN CHO NGƯỜI MỚI BẮT ĐẦU 14-04-2020 | 878 views
  • HỌC ILLUSTRATOR CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU 14-04-2020 | 918 views

Các tin liên quan

  • SVXS Đức Hải – Chàng sinh viên đam mê kỹ thuật phá vỡ giới hạn bản thân để theo đuổi nghệ thuật 03/02/2023 | 78915 views
  • “Thó Bản”: thổi hồn nét đẹp Kinh Bắc vào trò chơi dân gian Phỗng đất Bắc Ninh 01/02/2023 | 115997 views
  • A1.2208A chinh phục học kỳ đầu tiên với 6 đồ án xuất sắc được lên sóng 01/02/2023 | 116346 views
  • Grump in the Night – Đồ án xuất sắc về 3D Animation của sinh viên nhà FPT Arena Multimedia 31/01/2023 | 126006 views
  • BỘ ĐỒ ÁN XUẤT SẮC TỪ NHỮNG MẢNH GHÉP ĐẶC BIỆT HỘI TỤ TẠI FPT ARENA 10/01/2023 | 499254 views


Nhận tài liệu miễn phí ngành multimedia

    • Trang chủ
    • Việc làm
    • Gallery
    • Hướng dẫn
    • Đăng ký
    • Liên hệ

    DMCA.com Protection Status

    Copyright © 2023 by arena.fpt.edu.vn | All rights reserved.
    Useful link: học thiết kế đồ họa - học thiết kế web - thiết kế đồ họa game - học làm phim - thiết kế đồ họa - Google New FPT ARENA

    • Trang chủ
    • Việc làm
    • Gallery
    • Hướng dẫn
    • Đăng ký
    • Liên hệ
    Copyright 2023 © Arena.fpt.edu.vn
    • Giới thiệu
      • FPT Education
      • Về FPT Arena
        • Lịch sử FPT Arena
        • Báo chí nói về FPT Arena
        • Đối tác của FPT Arena
    • Chương trình học
      • Học kì 1
      • Học kì 2
      • Học kì 3
      • Học kì 4
    • Gương mặt
    • Tin tức
      • Sự kiện
      • Blog
      • Tuyển dụng
        • FPT
        • Đối tác
    • Gallery
      • Học Kỳ 1
      • Học Kỳ 2
      • Học Kỳ 3
      • Học Kỳ 4
    • Thông tin tuyển sinh
      • Quy chế tuyển sinh
      • Học Bổng
      • Câu hỏi thường gặp
      • Khảo sát
      • Đăng ký học
      • Liên thông
        • Anh
        • Canada
        • Malaysia
        • Việt Nam
    • Blog
      • Tin Multimedia
      • Đồ họa
      • Web Design
      • Digital Film Making
      • Game Design
      • 3D Animation
      • Brand Identity
      • Phần mềm
    dangky

     

    30 học bổng toàn phần đang chờ đón bạn tại FPT ARENA MULTIMEDIA



      ( * Thông tin của học viên sẽ được bảo mật theo quy định của FPT ARENA MULTIMEDIA)

      Hotline

      024 7300 8855

      028 7300 8866