Trong thời gian bắt đầu tự học UI/UX (giao diện người dùng và trải nghiệm người dùng), mình rất may mắn khi nhận được yêu cầu thiết kế một chiếc app về xây dựng thói quen “Habit Tracker”, mình coi như đây là cơ hội đáng giá để áp dụng những gì mình đã học được trong thời gian vừa rồi. Nhận được đề bài mình chợt nghĩ trên thị trường app store bây giờ có hàng tá ứng dụng về Habit Tracker, vậy thì điều gì sẽ khiến chiếc-app-mình-muốn-thiết-kế khác biệt?
Brief: Thiết kế ứng dụng Habit Tracker giúp người dùng vừa tạo được thói quen, vừa tạo được những đầu việc nhỏ nằm trong thói quen đó.
Chú ý: Trong bài viết mình sẽ đề cập đến một số thuật ngữ trong mảng UI/UX, vậy nên nếu ai đọc không hiểu thì mình có phần chú thích ở cuối bài nhé!

Vấn đề gặp phải trong những ứng dụng Habit Tracker hiện tại

     Đầu tiên, mình bắt đầu tiến hành nghiên cứu người dùng về cảm nhận của họ khi sử dụng những ứng dụng Habit tracker đã có trên thị trường. Với số mẫu thử là 28 người, mình thu được kết quả về vấn đề họ gặp phải như sau:

Mình sẽ giải quyết vấn đề của người dùng bằng cách nào?

Sau khi nghiên cứu một hồi các ứng dụng đầy lão làng đi trước cùng với kết quả thu thập được ở trên, mình quyết định đưa ra những giải pháp sau cho ứng dụng Habit Tracker sắp tới:
  • Giao diện trực quan giúp người dùng theo dõi được tất cả các thói quen và các đầu việc trong nhiều khoảng thời gian
  • Tối thiểu hóa thao tác khi thiết lập thói quen trong một giao diện
  • Thiết lập tính năng có thể đặt nhiều giờ nhắc nhở trong ngày cho 1 thói quen
  • Làm nổi bật tình trạng hoàn thành từng thói quen theo ngày, tuần, tháng để tăng động lực sử dụng ứng dụng mỗi ngày.

Quy trình thiết kế ứng dụng Habit Tracker

1. Xác định vấn đề và giải pháp
2. Vẽ User flow diagram* và Low fidelity wireframes*
3. Vẽ High fidelity wireframes* và xác nhận lại với dev (lập trình viên)
4. Prototype* sản phẩm (mình sẽ không đề cập phần này trong bài)
5. Code sản phẩm (đây là phần của bạn mình)
6. Chuẩn bị ra mắt (launching) sản phẩm: thiết kế logo app, bài giới thiệu,…
7. Nhận phản hồi (feedback) từ người dùng.

Thiết kế User flow diagram và Vẽ phác họa ứng dụng qua Low fidelity wireframes

*User flow diagram:

Mình xác định ứng dụng Habit Tracker thân yêu này sẽ có 3 màn hình chính:
  • Dashboard – màn hình thể hiện tất cả các thói quen
  • Màn hình thống kê theo tuần
  • Màn hình thống kê theo tháng
Mình lựa chọn 3 màn hình này vì muốn làm nổi bật quá trình các thói quen được duy trì và tiến triển theo trình tự thời gian: ngày, tuần, tháng. User khi sử dụng ứng dụng sẽ theo dõi các thói quen một cách trực quan nhất: “À hôm nay mình có những thói quen này”, “Tuần này, tháng này mình hoàn thành được bằng này mục tiêu”.
User Flow Diagram

*Low fidelity wireframes:

Điểm đặc biệt nhất của ứng dụng là việc thêm những đầu việc nhỏ trong các thói quen lớn (giống một dạng to-do list vậy) và sẽ được thể hiện hết ra ngoài màn hình Dashboard để user vừa ghi nhớ được những đầu mục cần làm, vừa đánh dấu những gì đã hoàn thành trong 1 ngày một cách nhanh nhất.
Các màn hình cơ bản sẽ có hình dạng như thế này:
Low fidelity wireframes

Thiết kế High fidelity wireframes

*Màn hình chính Dashboard:

*Màn hình tạo thói quen

*Màn hình thống kê thói quen theo tuần

*Màn hình thống kê thói quen theo tháng

Một bạn user mình từng phỏng vấn nói rằng: “Tui muốn khi nhìn vào màn hình tổng kết tháng, tui thấy bản thân duy trì được bằng này ngày rùi thì sẽ có động lực để duy trì tiếp, nếu tui không rõ tui duy trì được bao ngày rồi thì cũng chán…”. Vậy nên mục đích của màn hình tháng là: làm nổi bật được tiến trình hoàn thành thói quen của user, qua đó sẽ tạo động lực duy trì mục tiêu trong tháng tiếp theo.

Tiếp theo thì…launching sản phẩm thôi!!

Trong quá trình thiết kế app thì mình đã có ý tưởng logo (app icon) rùi, nên mình đã hoàn thiện nó trong vòng 10 phút, và đây là thành quả:
App icon Starbit
Nếu ai chưa biết thì kích thước cho app icon tiêu chuẩn cho lên Appstore là 180x180px, mình phát hiện ra là không cần bo góc cho icon vì khi lên Appstore, sản phẩm của apple sẽ tự động bo góc đó.
Tiếp theo là phần Screenshot design – đây là mục để các bạn gây ấn tượng với người dùng, phần lớn người dùng sẽ dựa vào đây để quyết định xem có nên tải app đó hay không (đây là suy nghĩ của mình thui nhé!).
Ở phần này thì chúng ta sẽ dùng những từ ngữ miêu tả đúng nhất về ứng dụng của mình và những giao diện chính, như ở đây mình dùng đúng 4 màn hình quan trọng nhất của app mình luôn. Về design thì mình tham khảo trên Pinterest.com và tải mock-up hình điện thoại iphone xịn xò ở Freepik.com.

Cuối cùng là…những bài học mình thu thập được qua dự án cá nhân này

Vì đây là lần đầu tiên mình thiết kế 1 sản phẩm từ đầu đến cuối, lại được cộng tác trực tiếp với 1 bạn dev nên mình thu lượm được khá nhiều bài học nhỏ:
  • Cần nắm rõ insight (sự thật ngầm hiểu), nhu cầu và mong muốn của user hoặc của client (người đặt ra đề bài cho tụi mình) trong từng chức năng trong giao diện. -> do không hỏi rõ ý muốn của client mà mình đã tự tung tự tác thêm bớt tính năng và điều này là một sai lầm lớn T_T
  • Cách nhóm và đặt tên từng component, lưu các thông số vào bộ assets (mình dùng Adobe XD) để sau này sửa lại dễ hơn. -> lúc đầu mình không biết cái này nên khi cần sửa phải sửa từng chi tiết nên rất mất thời gian.
  • Khi thiết kế từng tính năng, từng chi tiết trong giao diện phải nghĩ đến mọi trường hợp có thể xảy ra, VD như đoạn text này viết xuống dòng thì khoảng cách sẽ như thế nào? -> lúc đầu mình nghĩ là bạn dev sẽ linh hoạt các thứ khi code sản phẩm của mình nhưng KHÔNG, nhiệm vụ của họ là làm chính xác từng pixel trong thiết kế của bạn.
  • Cần biết cách thiết kế giao diện để đáp ứng mọi responsive size. Thiết kế đầu tiên của mình khi áp dụng cho kích thước iphone 5,6 trở xuống là “toang”, thế là mình phải nghĩ ra các phương án khác để thay thế.
  • Cuối cùng là việc học cách lắng nghe ý kiến và quan điểm của người khác, VD như việc tôn trọng góc nhìn của Dev -> có những lần mình gần như ngắt lời của bạn dev để bảo vệ quan điểm-cho-là-thẩm-mỹ của mình, và sau đó mình mới nhận ra chính quan điểm của mình mới có vấn đề.

Mình sẽ làm gì tiếp theo?

    Giai đoạn này mình sẽ tổng hợp các feedback của người dùng khi sử dụng ứng dụng trong 1 tuần (mình dự định sử dụng phương pháp nghiên cứu Diary study*) sau đó mình sẽ phân tích để đưa được giải pháp cải thiện ứng dụng ở phiên bản tiếp theo.
      Cảm ơn các bạn đã theo dõi bài viết, đừng ngại bình luận suy nghĩ của bạn về bài viết hoặc về ứng dụng Starbit cho mình biết nhé! Tải về ứng dụng tại đây (hiện tại ứng dụng chưa có trên Android): https://apps.apple.com/us/app/starbit/id1507936667?ls=1
Chú thích:
  • User flow là một đường dẫn mà một người dùng sẽ trải qua/đi qua trong một ứng dụng/website
  • Low fidelity wireframes là bản thiết kế màn hình khung xương, với độ trung thực thấp (low-fidelity) chưa bao gồm việc thiết kế giao diện (màu sắc, hình ảnh)
  • High fidelity wireframes là bản thiết kế có đầy đủ màu sắc và hình ảnh với độ trung thực cao nhất, giống nhất với sản phẩm sẽ tung ra ngoài.
  • Prototype là một dạng trình bày sản phẩm giống thật nhất, ta có thể click vào một button, có thể chuyển screens, có thể show dữ liệu giả,...
  • Diary Study là một phương pháp nghiên cứu được sử dụng để thu thập dữ liệu định tính về hành vi, hoạt động và kinh nghiệm của người dùng theo thời gian.
Những công cụ mình sử dụng để thiết kế những ấn phẩm trong bài: Adobe XD, Adobe Photoshop và Adobe Illustration.
Phần mềm