Loading...
IT Business Analyst sử dụng AI Artificial Intelligence) - Hoàng Phan Blog

Tiếp tục phần một “Ứng dụng AI trong công việc IT Business Analyst

Lời giới thiệu

Dưới đây là các task vụ trong BA/PO/PM mình đã áp dụng AI để thực hiện. Nhưng trước khi đọc phần này, bạn nhớ đọc phần 1 nhé, phần 1 là những nhận định cá nhân chung về các công cụ AI.

Viết user story và Acceptance Criteria

Role của mình cũng hay viết User Story, và việc xử dụng AI để viết và để viết hiệu quả mình thường sử dụng ChatGPT để thực hiện task vụ này.

Bạn có thể xem video dưới đây để hiểu cách viết nhé.

Link video: https://youtu.be/LY0DsQr3YSg

Và hướng dẫn viết Acceptance Criteria

Link video: https://youtu.be/ywGnz9i3ztw

Dĩ nhiên là với AC, bạn có thể viết theo syntax “GWT” Given When Then


Scenario 1: Successful Admin Login

Given an administrator is on the Shared Login Page for Teachers and Admins,
And the administrator has a valid Email and Password,
When the administrator enters the correct Email and Password,
And clicks the “Login” button,
Then the system should authenticate the administrator,
And redirect the administrator to the Admin Dashboard,
And display the Admin Dashboard interface.

Và từ đó suy ra Decision Table

Tip từ bản thân mình cho phần viết này là bạn hãy input thật rõ chi tiết về User story bạn muốn, hoặc add những idea bạn đã nghĩ ra cho phần User story và bảo AI bổ sung hoặc viết chỉnh chu hơn cho User Story.

Các bạn có thể đọc đoạn này cho phần ví dụ nhé: https://poe.com/s/QdDjRA6gk2rq5MX9S37m

Ngoài ra bạn hãy thử sử dụng: https://userstorygenerator.ai/ để viết nha.

Phụ viết rõ hơn về yêu cầu

Thường thì mình có idea về tasks, và cũng hơi hơi làm biết để làm chi tiết, hoặc cụ thể hoá theo 1 cách đầy đủ => Đây là cơ hội để nhờ AI hỗ trợ =))

Mình đưa ví dụ, bạn có thể tự áp dụng thêm nha.

Như ví dụ dưới đây mình có idea về làm tròn số và có nhiều trường hợp khác nhau, mình cứ mô tả theo cách mình hiểu.

Cuối cùng với những dòng mình viết kiểu khá dài dòng, AI có thể đọc hiểu và viết gọn lại cho mình => Thậm chí mình biết ae Dev đang dùng ngôn ngữ lập trình nào, mình copy mẫu luôn cho họ.

AI hỗ trợ viết lại yêu cầu rõ ràng và gọn hơn
AI hỗ trợ viết lại yêu cầu rõ ràng và gọn hơn

Hay ví dụ như viết checklist, testcase mình cũng mô tả rồi nhờ AI hỗ trợ làm rõ và viết ra các cases

AI hỗ trợ viết testcase/checklist
AI hỗ trợ viết testcase/checklist

Với trường hợp viết testcase như này, bạn cần input thật rõ business rule cho AI để nó viết cho đầy đủ, thậm chí bạn cũng phải suy luận, đọc và kiểm tra lại xem AI đã viết đủ và đúng chưa nữa.

Vẽ Diagram

Mình sử dụng kết hợp ChatGPT + Mermaid hoặc ChatGPT + Draw.io

Các loại biểu đồ mà ChatGPT có thể hỗ trợ gồm:

  • Flowchart => Tận dụng làm Activity Diagram luôn cũng được
  • State diagram
  • Grantt chart
  • Sequence Diagram (Mình hay sài nhất)
  • Class diagram
  • ERD
  • User Journey
  • Object Diagram

Mình thì hay sài Flow chart và sequence nhất, mấy loại khác thì mình hay sài kiểu khác hơn. Các bạn cứ thử mò và tìm cách sử dụng nhé, nhớ là tự mày mò => tìm được “AI Prompting” và sử dụng nó nhiều lần để thuần thục nhé.

Bước 1: Cứ nói chuyện với AI (Prompting), sau đó khi AI đã hiểu được bài toán => Bảo tạo ra diagram (với loại Mermaid), ví dụ: “Tạo sequence diagram cho tính năng đăng nhập của giáo viên, các actor trong hệ thống gồm: Teacher, UI, BE, AuthService, sử dụng syntax Mermaid”

Bước 2: Copy đoạn code được tạo ra từ AI, bỏ vào một trong những công cụ hỗ trợ view từ Code sang Diagram.

Sử dụng ChatGPT vẽ sequence diagram - Hoàng Phan Blog
Sử dụng ChatGPT vẽ sequence diagram – Hoàng Phan Blog
  • Mermaid Live Editor: https://mermaid.live/ => Cứ copy code và bỏ vào bình thường theo loại bạn muốn
Sử dụng Mermaid tạo diagram - Hoàng Phan Blog
Sử dụng Mermaid tạo diagram – Hoàng Phan Blog
  • Dùng Markdown, có thể sài trên github, visual studio code, thì trước đoạn code bạn bổ sung “`mermaid
  • Hiển thị trên draw.io thì bạn làm theo như hình dưới đây, sau đó paste code vào và nhấn lưu để hiển thị.
Sử dụng Draw.io và ChatGPT tạo diagram - Hoàng Phan Blog
Sử dụng Draw.io và ChatGPT tạo diagram – Hoàng Phan Blog

Mình hay sài Mermaid/Draw.io nên dùng cách này, các bạn cũng có thể sài những format khác như PlanUML, StartUML nhé.

Vẽ wireframe/mockup

Nói thật với các bạn là có nhiều người nhắn tin hỏi mình về AI để vẽ mấy wireframe/mockup, mà thực sự mình rất ít khi sài :D. Kiểu giống như là cả team mình sài Figma, xong rồi mình đi sài những công cụ khác để vẽ rồi copy qua, khi cần edit nó cũng bất tiện ấy.

Một phần là khi vẽ wireframe, rõ là bước này chính là bước Elicitation của mình luôn, hay đặt câu hỏi, phân tích tới đâu vẽ tới đó, vừa visualize ý tưởng lên cho dễ hình dùng khi phân tích

Chưa kể là mình vẽ wireframe khá là nhanh :v không tốn mấy thời gian, tốn là tốn thời gian ngồi suy nghĩ luồng nghiệp vụ sao cho hợp lý ấy.

=> nên mình hay sài công cụ https://excalidraw.com/, và figma bạn đọc bài viết này nhé.

Đọc thêm  Công cụ vẽ wireframe và diagram tuyệt vời mình tìm được cho Business Analyst.
Đọc thêm  Figma Professional miễn phí: Công Cụ Đắc Lực Cho Business Analyst

Còn cho những bạn tò mò và muốn thử nghiệm xem thử sài AI thì thử những công cụ mình liệt kê dưới đây nha.

  • Visily.ai (thiệt là mình chưa sài =)) mà thấy group nào cũng đề cập => Mình đưa vào list)
  • Miro: Có hỗ trợ AI vẽ diagram
  • Jeda.ai: https://www.youtube.com/shorts/ekdmMBXSP0Q?feature=share
  • Relume Library (on Figma): https://youtu.be/8eNnr6GPClU
  • UIZard.io:
  • Plugin Figma: https://www.figma.com/community/plugin/1355208994639626356/codia-ai-designgen-prompt-to-ui-for-website-landing-page-blog
  • https://uxpilot.ai/
  • https://creatie.ai/

Mình chỉ gợi ý, các bạn tự xem video mà mày mò thêm nhé, mình ít sài,… nên mình sẽ không quá nói chi tiết 😀

Mình có 1 mẹo cho các bạn đó là “Sử dụng ChatGPT để tạo prompting và dùng những đoạn mô tả đó bỏ vào trong các công cụ Generate ra Wireframe”

Link video: https://youtu.be/BdRD_cSdL44

Điểm mình quan tâm ở công cụ này đó là làm sao để mình sài, và khi có kết quả được tạo ra => Khi mình bàn giao dự án cho người khác, họ vẫn tiếp tục sử dụng được resource mình đã tạo ra trước đó và họ điều chỉnh, chỉnh sửa. => Các bạn nhớ chọn công cụ phù hợp nhé. Mình thì mình vẫn trung thành với Figma 😀

Ngoài việc sử dụng AI để vẽ, mình còn dùng Pinterest, Behance để tham khảo các ideas để vẽ Wireframe sao cho hợp lí.

Viết lệnh SQL

Mình cũng hay sài để kiểu query, hoặc thậm chí các vấn đề hơi thiên về code tíu là mình sài AI để hỗ trợ.

Dĩ nhiên là yêu cầu người viết cũng cần có kiến thức sẵn về SQL để thực hiện đọc hiểu và xác thực tính chính xác của câu lệnh cho AI tạo ra.

Phần này khá phổ biến nên có rất nhiều AI hỗ trợ, mình thì sài Poe có sẵn ChatGPT, Claude, thì mình sẵn sài những con này luôn.

Bạn có thể xem video dưới đây biết biết cách sài nha.

TÓM TẮT cách sử dụng

Some best practices:

1) Set the context

2) Give ChatGPT a role to play (ex: SQL expert)

3) Describe your table(s)

4) Tell the AI what you want a query to do

 

Link video: https://youtu.be/RVYtfKZNYNM

Nghiên cứu domain knowledge

Mình làm ở mảng blockchain, và dự án đi khá nhanh. Như một bài mình từng đề cập trước đây là khi làm các dự án Blockchain, tỉ lệ cao là hay đi copy lẫn nhau rất nhiều, ví dụ ứng dụng A có trên blockchain Ethereum, nhưng loại ứng dụng A lại chưa có trên một mạng mới, ví dụ Sei blockchain, thì mình sẽ tham khảo các dự án đã build sẵn đó (dự án A), đọc code, đọc tài liệu, cách nó hoạt động.

Các bạn có thể tham khảo các tip sau để nghiên cứu các Domain Knowledge mà các bạn chưa hiểu, hoặc chưa làm qua để học thêm cái mới, hoặc là dự án bắt buộc làm nhưng mình có kiến thức chưa đủ nhiều.

Mình sài Poe, và sài lõi Claude.AI (Claude-3.5-Sonnet) để thực hiện

Mình có những tips sau cho bạn để thực hiện.

Tip 1: Yêu cầu tóm tắt.

Thường thì các dự án blockchain hay có whitepaper, hoặc docs cho Developer, Users.

Thì mình sẽ tải file về, hoặc gửi link docs cho AI, bảo nó tóm tắt nhanh để mình hiểu.

Bước này chính là bước để mình hiểu tổng quan về cách dự án nó hoạt động.

Thậm chí có thể kêu AI vẽ lưu đồ để hiểu cách mà hệ thống đang chạy.

Tóm tắt docs với Claude - Hoàng Phan Blog
Tóm tắt docs với Claude – Hoàng Phan Blog

Trong quá trình tóm tắt, có thể bạn chưa hiểu hết thì có thể hỏi lại kỹ hơn để nó giải thích

Tip 2: Hỏi lại những gì AI trả lời/giải thích, để nó trả lời rõ hơn.

Ở bước này bạn có thể đặt lại câu hỏi với ý rõ hơn cho từng phần nhỏ, vì AI cũng không phải thần thánh do đó đôi lúc trả lời thiếu ý, hoặc chưa hiểu rõ kiến thức đó => Hỏi lại

Khi chưa hiểu bạn có thể hỏi lại AI để giải thích rõ hơn
Khi chưa hiểu bạn có thể hỏi lại AI để giải thích rõ hơn

Tip 3: Giải thích như một trẻ em

Thật ra nhiều lúc AI trả lời cũng hơi hơi khó hiểu, do đó bạn hãy bảo nó giải thích như một đứa trẻ em (độ tuổi cỡ 10 hoặc nhỏ hơn), thì nó sẽ giải thích và ví dụ đơn giản để bạn dễ hiểu.

AI giải thích như trẻ em sẽ giúp bạn dễ hiểu hơn
AI giải thích như trẻ em sẽ giúp bạn dễ hiểu hơn

Tip 4: Đặt Q/A, hoặc kiểu câu hỏi giả định

Thường thì trong quá trình giải thích, bạn cần hỏi ngược lại AI khá là nhiều, một trong những câu hỏi mình hay đặt ra là câu hỏi “Giả định”

Ví dụ ở bài toán này mình sẽ hỏi lại là “Có khi nào tiền người dùng bỏ vào Vault thì sẽ bị giảm lợi nhuận (tiền bị âm) không?”

Câu hỏi giả định sử dụng AI
Câu hỏi giả định sử dụng AI

Tip 5: Bảo AI cung cấp thêm keyword để nghiên cứu 

Khi bạn nghiên cứu, thường có nhiều từ khoá để bạn học thêm kiến thức liên quan đến dự án, do đó việc hỏi thêm keyword để tự nghiên cứu đi details hơn sẽ giúp bạn hiểu dự án hơn.

Hỏi AI thêm về Keyword
Hỏi AI thêm về Keyword

Sau khi có danh sách => Bạn bảo nó tiếp tục giải thích các keyword đó.

Tip 6: Sử dụng thêm nhiều nguồn tài liệu khác nhau

Ngoài ra bạn nên cung cấp nhiều nguồn tài liệu khác nhau để AI học và cùng trao đổi => Từ đó nắm rõ kiến thức hơn.

Đọc code và giải thích cách code hoạt động

Như bài toán ở trên, lúc mình tìm hiểu thì cần đụng tới code, hoặc như bài toán subscription mình từng viết trước đây thì cần đọc hiểu API.

Do đó mình luôn nhờ ChatGPT/Claude hỗ trợ trong việc giải thích code, mình thì hay tải code về + attach code vào trong AI để nó đọc và giải thích cách hoạt động.

Nhờ AI giải thích code - Hoàng Phan Blog
Nhờ AI giải thích code – Hoàng Phan Blog

Và từ đó sẽ hiểu nghiệp vụ của dự án chi tiết hơn => Mà hiểu rồi thì lúc thực hiện checklist, viết các case test cụ thể hơn

Hỗ trợ phần UX Writing

AI có 1 lợi thế rất tốt về ngôn ngữ, do đó mình luôn tận dụng để AI hỗ trợ mình trong việc viết các UX writing khi làm UI cho các dự án.

Ví dụ như 1 tooltip mình không biết phải nên hiển thị gì cho gọn mà đọc dễ hiểu, mình viết những ý của mình ra, rồi bảo AI nó viết lại một số câu phù hợp, và mình đọc cũng như chọn lựa cái nào phù hợp nhất.

UX Writing - Hoàng Phan Blog
UX Writing – Hoàng Phan Blog

 

Viết docs cho user (User Guide)

Mình hay sài AI để viết docs, đặc biệt là docs viết tiếng Anh.

Input đầu vào là mình hay bảo nó re-write lại nhưng viết hay hơn, dùng từ vựng của level B1 trở xuống (thường mình bảo nó viết theo trình độ A2-B1)

Ở phần này bạn chat và cung cấp ngữ cảnh đầy đủ, ideas từ bạn nó sẽ viết lại khá hay.

Bạn có thể đọc docs này của seitrace.com, mình dùng AI hỗ trợ rất nhiều.

https://docs.seitrace.com/

User docs được viết bằng AI
User docs được viết bằng AI

Tạo idea dự án

Này chắc các bạn cứ search google là ra nhiều video hướng dẫn lắm. Mình thường nghĩ ra 1 ideas, và trong đầu mình đã phân tích sẵn những cái mình muốn, nhưng nằm ở mức chưa quá rõ ràng details, nhưng về mặt tổng quan đã có.

Lúc này mình sẽ xem AI là một người bạn chuyên gia trong mảng đó, và mình sẽ hỏi đáp, rồi chia sẻ + hỏi cảm nghĩ của con AI về cái ý tưởng đó, rồi bảo nó cho những ý tưởng tương tự 😀

Cái này hơi mơ hồ, với lại mình không thể chia sẻ mấy cái đoạn chat mình đã nói chuyện với AI, các bạn tự nghiên cứu thêm nhé, mình chỉ share ideas thôi.

Tóm tắt nội dung cuộc họp

Otter.ai => Công cụ này các bạn search và sài đi 😀 hịn đó.

Kiểu như vào google meet hoặc một công cụ họp khác như Team, Zoom => sẽ bật con AI lên để sử dụng, nó sẽ hỗ trợ việc ghi lại nội dung cuộc họp, rồi tóm tắt.

Với việc sử dụng cả tháng nay mình thấy nó ghi nhận và tóm tắt khá chính xác nha.

Nó còn tạo sẵn luôn các action cần phải thực hiện luôn (kiểu như tasks – đầu việc)

Theo công cụ này bảo thì nó hiện tại đang hỗ trợ English (US, UK), Spanish, French.

We currently only support transcribing in English, Spanish, and French; however, we hope to support more languages in the future. Stay tuned!

Hỗ trợ viết mail, report, viết nội dung tuyển dụng,…

Thiệt là mình sài AI hỗ trợ phần viết khá nhiều, đặc biệt là viết tiếng Anh, xưa môn ngữ văn, viết văn có 5/10 điểm à => Tiếng Anh viết cũng dỡ.

Mình cứ viết ý, bảo AI nó re-write lại, hoặc thậm chí là copy từ nguồn khác :v chả lẽ viết lại y chang => Bỏ qua AI nó đổi lại cho :)))

Mà nó viết format khá ok á nha, ae cứ thử nhé.

Mình đã áp dụng cho:

  • Viết email
  • Viết nội dung tuyển dụng
  • Viết Report
  • Chỉnh sửa proposal

Học tiếng Anh

Đối với mình, để làm BA mà sử dụng tiếng Anh giao tiếp được thì trình độ khoảng rơi vào C1 (theo chuẩn IELTs, một số chuẩn khác C1 đôi lúc cũng hơi ảo, kiểu dễ)… 

Thì việc mình nâng cao trình độ tiếng Anh lên việc dùng AI cũng là một lựa chọn tốt.

Mình có sài Elsa AI (premium) để luyện phát âm.

Ngoài ra thì có luyện nói với giáo viên tiếng Anh của mình, chắc các bạn thường xuyên đọc blog mình cũng biết mình có tự mở một trung tâm tiếng Anh có thuê giáo viên Philippines dạy 1 kèm 1.

Hoặc sài con ChatGPT 4o á, cũng đang hỗ trợ khá tốt, mình đã test rồi, nhưng bạn nào đã có kỹ năng nói rồi thì luyện với nó sẽ tốt hơn với việc các bạn mới. => Này các bạn cứ search youtube là có mấy video test á.

Viết code/build app

Mình thì lai lai giữa BA, PM, QC, UI Design, rồi cả Dev nữa… không quá giỏi dev nhưng hiểu logic và có thể tự build 1 sản phẩm từ A->Z dạng như CRM, mini app, các app không quá nặng về hạ tầng.

Do đó việc dùng AI hỗ trợ việc code là 1 lợi thế rất lớn với mình 😀

Mình có dùng con Claude Sonnet và Cursor AI. Ae có thể search hoặc nt hỏi mình để sharing thêm nha.

Kết bài

Ở trên là những công cụ AI mình đã sử dụng để phục vụ cho việc làm IT Business Analyst, hi vọng các bạn có nguồn tham khảo cũng như trải nghiệm và có thể áp dụng vào công việc thực tế.

Anh T chuyển việc sang làm UI Designer, lương 2000$

Giới thiệu

Ây yahhh, lâu quá rồi bận xây dựng dự án Trung tâm Tiếng Anh mới, nên mình cũng ít có thời gian viết blog lại.

Nay một ngày dậy sớm hơn mọi ngày, mình dành ít thời gian chia sẻ về việc một ông Anh chuyển việc từ mechanical (cơ khí) hơi thiên về làm khuôn nhựa và thiết kế in ấn trên ly, vật phẩm physical trở thành một UI Designer (ảnh nói ảnh chỉ biết ít về UX à, nên mình gọi là UI Designer nha) với mức lương tăng từ 12 triệu/tháng lên 2000$ sau 2 năm.

Câu chuyện này nhằm mục đích truyền cảm hứng cho nhiều bạn với mong muốn cố gắng để đạt được những thành tựu tốt hơn về lương bổng, chứ không có ý khoe gì nha (à có 1 tíu khoe 😀 =)) )

Và qua câu chuyện mình cũng chia sẻ tips và các khoá học mà anh đó đã dùng.


Kể về ông Anh và cơ duyên gặp

Ông Anh mình kể tên là “T” sinh năm 1991 hiện đang ở Đà Nẵng.

Khoảng hơn 2 năm trước, ảnh làm mechanical (cơ khí) thiên về làm khuôn nhựa và thiết kế kiểu bao bì, rồi mấy cái in lên ly, đồ vật phẩm.

Sau đó ảnh nghiên cứu và quyết định chuyển hướng sang làm liên quan đến IT => Chọn ngành UI Design

Riêng vợ ảnh làm giáo viên dạy tiếng Anh được 10 năm và cũng chuyển hướng làm BA => Và giờ đang thấy phù hợp với hướng QC hơn nên chuyển qua làm QC (mình mới advise hôm rồi))

Thời điểm 2023, ảnh quen mình vì vợ ảnh có đọc blog + kết bạn fb, mình đăng tin tuyển dụng tuyển UI Design cho team, thì ảnh liên hệ để apply làm việc với bên mình => Từ đó dẫn tới việc anh em làm việc chung.

Chuyển việc sang UI Designer, lương từ 12 triệu lên 2000$
Chuyển việc sang UI Designer, lương từ 12 triệu lên 2000$
Chuyển việc sang UI Designer, lương từ 12 triệu lên 2000$
Chuyển việc sang UI Designer, lương từ 12 triệu lên 2000$
Chuyển việc sang UI Designer, lương từ 12 triệu lên 2000$
Chuyển việc sang UI Designer, lương từ 12 triệu lên 2000$

 

Hiện tại thời điểm mình viết bài này, ảnh đã nhận công việc 2000$ và đang làm việc remotely tại nhà.

 

Tips và các khoá học

Từng bước anh đó chỉ mình (để mình share lại cho cháu mình đang làm BA và học thêm về UI Designer, định hướng chuyển làm Product Designer)

 

Đa số mình copy từ trong tin nhắn của ảnh qua.

Bước 1:

Học figma hì, khoá học bất kỳ, utube free cho tiện, chú ý mấy cái sau nè:

  • autolayout
  • responsive
  • color & typo: style, variable

Bước 2: là đăng ký patreon anh Trí Tâm xem hết các video ảnh làm project – siêu hữu ích lun mà k hiểu sao view hiện tại cực kỳ thấp

  • Hiện giờ a Tâm k có bài mới, nhưng mình vẫn đăng ký vào xem đc
  • Ảnh quay video lúc làm việc á, xưa anh coi 1 video 3-4 lần, ngáp cũng coi, ớn cũng coi, coi để để ý detail nhỏ nhất của ảnh lun
  • Học đc siêu nhiều thứ hay ho, từ process làm việc, tạo component, naming, layout bố cục tất tần tật
  • Bước ni nếu cần thì bợ 1 bộ UI kit của ảnh về phân tích và chép theo lại UI để hiểu là ok
  • Hoặc khoá bên Telos, học cỡ 1,5 tháng (học giỏi nhất đc free học phí) => Ảnh được free.

Bước 3: học 1 khoá ux foundation – anh Nguyễn Vương Chung

Bước 4: mua mobbin, vẽ theo cỡ 10 flows, làm chỉnh chu để bỏ zô porfolio

Sau đó chiến project thực tế để nạp thêm kinh nghiệm thui

 

Nhận xét của mình

Câu chuyện thật nên chia sẻ để mọi người học hỏi

Thật ra anh này lúc mới gặp mình, thì chưa có kn làm product nhiều nha, vẫn chú tâm làm UI.

Anh e chia sẻ kinh nghiệm với nhau, thật lòng mà nói anh này trong 2 năm cố gắng liên tục, nên thấy skills ảnh grow nhanh, mình từng tuyển nhiều Designer tầm cỡ 5 năm kn hoặc hơn, mà về cách build UI chưa bằng ảnh về tốc độ & độ chính xác.

Mình chưa nói đến vấn đề về branding/visuallize nha.

Mình nghĩ mới 2 năm kn, lên đc lead UI Design là khá là nhanh, trong khi trước đó chưa có kn làm UI & product.

Và mình cũng nhận thấy luôn là giờ ảnh đang làm Design cho bên mình, về việc tối ưu chi phí thì ảnh là lựa chọn hàng đầu luôn. 😄 (Tại team mình có 1 người làm visual, bổ sung qua lại thì sẽ tạo nên 1 bộ hoàn hảo mà tối ưu chi phí)

Mình được ảnh chỉ làm UI tầm cỡ 16 tiếng, mình đã vẽ và dùng được khá nhiều công cụ/tip hay luôn. (Ảnh chỉ mình về UI Design, mình chỉ ảnh về tư duy product, cách overview hệ thống & research tính năng)

Còn lý do vì sao ảnh grow nhanh thì đọc đoạn chat nha 😀

Chuyển việc sang UI Designer, lương từ 12 triệu lên 2000$
Chuyển việc sang UI Designer, lương từ 12 triệu lên 2000$

Và cũng có nhận xét thêm từ một bạn trong group BA của mình

Nhận xét của bạn trong group BA
Nhận xét của bạn trong group BA

 

Kết luận

Mình thấy, việc chuyển hướng và thay đổi công việc hiện tại quan trọng nhất và là định hướng, và sự quyết tâm. Mình đã được chia sẻ, tâm sự cũng như tư vấn cho những bạn có xu hướng chuyển việc và làm nghề IT, những người chuyển việc thành công, đạt được mức lương HƠN mong đợi đa số là họ cố gắng từng ngày, rèn luyện và học tập thường xuyên để nâng cao trình độ.

Hiện tại mức lương của bạn có thể thấp, nhưng nếu cố gắng và có định hướng tốt, có thể sau 1 năm, 2 năm bạn sẽ có sự thay đổi nhanh chóng và đạt được mục tiêu của mình.

Bản thân mình cũng từ làm việc kiếm lương đủ sống, mơ việc có thể mua chung cư trả góp thôi đã khó, nhưng sau sự cố gắng đã đạt được một mức lương tốt hơn rất nhiều, vừa có thể lo cho gia đình, vừa có thể có khoảng dư để đạt được mục đích khác nhau, nhất là việc chuyển về Nha Trang sống, làm việc remotely.

 

Bạn nào cần thông tin của anh “T” và cần ảnh hỗ trợ hay chỉ đơn giản là nói chuyện và chia sẻ, liên hệ mình => Mình sẽ hỏi ý ảnh và chia sẻ thông tin để anh em nói chuyện nha.

Xây dựng landing page trong vòng 1 tiếng với Unicorn Platform và Github Page

Vừa rồi mình có tính xây dựng vài trang landing page cho các dự án cá nhân của mình, do đó được @khoanguyen là CEO Nocode VietNam giới thiệu cho công cụ Unicorn Platform để tạo ra các trang static pages.

Kết hợp với thêm kiến thức trước đó về việc tự host 1 static page lên Github Page và gắn domain vào thì mình có thể xây dựng được 1 trang okela.

Vậy từng bước như thế nào?

 

Từng bước xây dựng Landing Page với Unicorn Platform

Bước 1: Truy cập https://unicornplatform.com/ và đăng ký một tài khoản

Bước 2: Tạo page => Chọn template và kéo thả (thêm, xoá, sửa) các sections + cập nhật nội dung

Bước 3: Kết nối các form (nếu có) với database/nơi dữ liệu xuất ra (Như google sheet, mailchimp,…)

Bước 4: Cập nhật thông tin SEO, Feature image, Title, Description cho trang web

Bạn xem tất cả các bước từ đăng ký đến khi tạo ra website và tự host lên github page qua video sau nhé:

Tải source về và xoá branding

Bước 1: Nhấn setting -> Export HTML => Và download file Assets và name.html về

Để tải về được thì bạn phải đăng ký tài khoản https://unicornplatform.com/pricing/ với giá 9$/tháng

Bước 2: Giải nén file assets và copy file name.html vào trong thư mục vừa giải nén

Bước 3: Đổi tên file name.html thành index.html

Bước 4: mở file index.html trên trình duyệt và xem thử nó đã hiển thị như mình đã thiết kế trên UnicornPlatform hay chưa?

Bước 5: Mở file index.html với trình chỉnh sửa code như Visual Studio Code, Notepad, Hoặc Sublime Text để xoá đi branding UnicornPlatform

Host lên trên Github Page

Bước 1: Bạn tạo tài khoản Github nếu chưa có và tạo 1 repository để làm nơi lưu trữ code của static page

Bước 2: Sử dụng phần mềm Github Desktop clone code từ repository bạn mới tạo về local (máy tính của bạn)

Bước 3: Copy code từ thư mục lúc nãy bạn download vào trong thư mục bạn vừa clone từ Github về.

Bước 4: Bạn commit và push dữ liệu lên ngược lại trên github

Bước 5: Cấu hình Github page (bạn xem kỹ video của mình có hướng dẫn rồi nhé)

Gắn Domain

Bạn thực hiện gắn domain theo như hướng dẫn.
Mình dùng cloudflare để làm DNS cho domain của mình, bạn xem kỹ video để làm theo nhé.

 

Sau khi gắn xong bạn có thể có 1 trang web như mình 😀 https://blockchainba.hoangphan.blog/

Có gì chưa ok thì bạn có thể comment trên bài đăng youtube của mình, mình sẽ làm video hướng dẫn cụ thể hơn cho những bước bạn chưa hiểu nha.

Giới thiệu chung

Mình bắt đầu sử dụng công cụ Figma đã được gần 2 năm, trước đây rất lâu được nhiều bạn giới thiệu nhưng vì những công ty mình làm việc qua đều không sử dụng công cụ này.

Nhưng khi có cơ hội được vào một môi trường startup, nơi mà tất cả mọi thứ chưa được định hình, tự công cụ quản lý, process – quy trình, vận hành, đội ngũ, và cả những công cụ sử dụng để vẽ wireframe/mockup/design/prototype.

Do đó mà tại thời điểm đó mình mạnh dạng đề xuất quy trình vận hành, và tất cả công cụ cho đội ngũ công ty sử dụng (và đặc biệt là team Tech), những công cụ mình đề xuất gồm có:

  • Công cụ quản lý task/process: Sử dụng Jira hoặc Larksuite hoặc Notion
  • Công cụ viết tài liệu: Notion hoặc Confluence
  • Công cụ vẽ thiên về wireframe/mockup/prototype: Figma
  • Công cụ brainstorming: Figma & Miro
  • Công cụ vẽ diagram: Figma Jam và Draw.io
  • Kênh chat trao đổi: Sài mặc định công ty đang sài Telegram
  • Meeting: Google Meet/GG Calendar
  • Một số công cụ riêng cho team Dev như Github/Gitlab, CI/CD, DB: MongoDB, Postgre,… thì do ae chuyên về Dev tự đề xuất cho phù hợp mình follow theo.

Công cụ Figma

Giới thiệu xong rồi thì vào phần nói về Figma thôi.

Thực ra công cụ này được giới làm UX/UI biết tới nhiều hơn dùng để vẽ UI (User Interface) và làm về UX (User Experience), nhưng dĩ nhiên khi làm những công việc BA vẫn có thể sử dụng nó, vì dùng Figma ta có thể vẽ Wireframe, Sketch, Mockup,… rồi dùng để brainstorming, và vẽ cả diagram (thường mình vẽ activity diagram ở đây)

Vì sao mà mình lại đề xuất sử dụng Figma như vậy?

Thực tế là mình đã sử dụng qua rất nhiều công cụ dùng để vẽ wireframe/sketch/mockup, làm prototype và trao đổi với đồng nghiệp như là: Axure RP, Balsamiq Mockup, Adobe XD, Sketch, thậm chí từng làm việc với Photoshop để view wireframe/mockup khi đi làm cho các dự án/công ty. Và dùng thử qua các công cụ kiểu như FluidUI, Mockflow,… nhưng chưa áp dụng vào công việc thực tế.

Nhưng vì có những ưu điểm mà mình thấy nó đã hội tụ đủ mọi yêu cầu về công việc của mình:

  1. Miễn phí/paid: nếu mình áp dụng cho công ty thì sẽ dùng bản trả phí, còn nếu mình làm freelancer mình sài phiên bản miễn phí, tối đa là 3 figma files và 3 figjams. Nếu bạn dùng phiên bản Education (free 2 năm) thì sẽ không giới hạn số file, số pages và có thể cùng với những người khác edit chung 1 files, cuối bài viết mình sẽ hướng dẫn đăng ký.
  2. Vẽ wireframe và mockup: Dĩ nhiên công cụ này để vẽ UI/UX nên việc dùng để vẽ được wireframe và mockup là điều hiển nhiên được 😀
  3. Thiết kế prototype: Mình thường hay present design cho đối tác và anh em trong team, hoặc present trực tiếp với ae đội ngũ C-level, nên việc có tính năng prototype sẽ rất tiện để trực quan hoá một design/wireframe/idea hay luồng trong khi build một ứng dụng.
  4. Vẽ diagram, brainstorming: ở Figma có tính năng Figjam giúp vẽ diagram rất tiện, còn có hỗ trợ các widget như đếm giờ hay note trực tiếp trên canvas => dùng thảo luận brainstorming rất đã.
    Nhưng thực tế là mình sài draw.io cho việc vẽ diagram nhiều hơn :D, draw.io nó được tích hợp trong confluence nữa.
  5. Comment xuyên lục địa, cộng tác đa người dùng: yeah, tính năng này mình cực kì thích khi mà phải làm việc với nhiều stakeholders khác nhau, nên việc có thể cho nhiều người vào xem, phân quyền view only hoặc cho edit, và có thể comment góp ý trực tiếp trên chính xác vị trí đề xuất, tính năng này tuyệt vời hơn trên XD Cloud và Axure, Balsamiq cloud khi mà comment nó đôi lúc bị trật chỗ, chưa kể trên XD nó cho webview tách từng frame nằm trên 1 page rất khó để review, chưa biết nay đã update lại chưa :D. Yeah, cái này mình thích nhất á =)). Đã đã.
  6. Chia sẻ dễ dàng, nhiều người cùng vào xem mà không cần gì cả: Như mục 5 có nhắc, thì chỉ cần chuyển qua view with the link by anyone, thì ai có link đều có thể xem design mà không cần tài khoản, nên khi đó ai hỏi mà họ được quyền xem design => Đưa họ cái link là họ xem được rồi. Xưa mình sài Balsamiq desktop, nên việc share này cực kì mệt, chưa kể phần góp ý cứ screenshot rồi edit trên screenshot rất là mệt.
  7. Các thiết kế cùng nằm trên 1 canvas/project, zoom nhỏ ra để xem tổng quan và zoom to vào để xem chi tiết: Này thì mình nghĩ giờ nhiều công cụ đã hỗ trợ, nhưng bên figma có hỗ trợ mấy tính năng ở mục 5, 6 thành ra thấy tính năng này khá tiện.
  8. Tài nguyên phong phú (free & trả phí), mình có thể lên Figma Community và tải về các thiết kế có sẵn hoặc mẫu wireframe, nên khi mà thiết kế wireframe, mình hay dùng các component mình clone sẵn và gọi ra để sử dụng, nên vẽ rất tiện luôn. Ví dụ mình thường có các component sẵn như Popup thông báo (với nhiều style như 1 button, có nút close, hoặc popup có 2 button, …), Buttons, Tables, …
    Ngoài ra có các widget và plugin nơi mà mình dùng icon miễn phí (đôi lúc là trả phí), và nhiều thứ hay ho khác, bạn nên sài và thử nghiệm 😀
  9. Sử dụng component: Như mình chia sẻ ở trên, thì có component nên khi mình vẽ wireframe rất tiện luôn, đầu tiên là clone component qua 1 project mới, rồi sau đó khi vẽ sẽ gọi ra sử dụng và sửa content, thay vì phải vẽ từ đầu từng elements rất chi là cực. Nên rất là speed up thời gian mình hoàn thành tasks. 
  10. Dễ dàng học và sử dụng: Theo mình thì nếu bạn đã quen sử dụng 1 công cụ design thì việc sử dụng Figma rất chi là dễ, thậm chí là có thể bạn chưa sài nhiều thì tiếp cận nó rất dễ, trong cty mình nhiều bạn chưa sài bao giờ, mình chỉ làm 1 buổi seminar chia sẻ thôi thì về các bạn sài được hết mà gần như không có Q/A gì thêm, vì các bạn đó chỉ sài tính năng basic nên sẽ ít hỏi lắm 😀 còn ông nào làm chuyên design thì không kể tới nhá, mấy cái như variants, effects, auto layout, different states,…
  11. Kết hợp với team design, review design/luồng: Này thì như mục 5, 6 khi mà mình vẽ wireframe xong, cùng trên 1 project đó design sẽ mở page riêng và vẽ design trên đó, dữ liệu thiết kế được tổng hợp tại một nơi, rồi từ đó mình cũng review design trực tiếp bằng comment luôn, nghĩa là team BA/PO và UX/UI Design sài chung 1 project trên figma.
  12. Dùng như một công cụ để mình thiết kế banner/standee/…: Mình hay sài như này để thiết kế banner/standee/ rồi mấy hình cần thiết, mình xem nó như 1 công cụ giống Adobe Illustration (AI), bao gồm cả việc thiết kế logo luôn nha khi mà mình có thể export file vector hay export png, pdf,…
  13. Đôi lúc export ra được html để xem trước trên webview như một website thực sự: Này thì sau khi thiết kế ra xong, mình hay export ra html rồi mớ view trên các screen khác nhau, lý do là khi view trên canvas đôi lúc nó bị sai size và mình không nhận ra được sự khác thường, mình từng bị trường hợp này rồi khi thiết kế nhìn trên canvas nhìn rất ok, nhưng khi dev ra sản phẩm, layout nhìn rất là chán vì các element bị bự ra so với cách mình nhìn trên canvas,… màn hình bự cỡ 27, 32 inch thì không sao, chứ khi trên màn hình cỡ 14 inch là nhìn nó chán lắm. Nên tính năng này cũng là thứ cần thiết (dĩ nhiên là có thể làm kiểu prototype để view cũng đc, nhưng html giúp mình xem nó real hơn 1 tíu).

Còn mấy lý do khác thì giờ mình chưa nghĩ ra,… khi nào thấy có thêm thì mình bổ sung vào bài.

So sánh Figma với các công cụ khác

Thực ra tính không viết phần này, vì đa số các công cụ mình sài chưa hết tính năng đâu, chỉ sài 1 phần các tính năng, nên khi so sánh sẽ bị thiếu sót gì đó,.. nhưng mình cứ chia sẻ theo quan điểm và cách mình sử dụng để mọi người có thể thấy 1 cách nhìn nhận nào đó hé.

Chắc nói mấy cái hơn của Figma đi ha, tại giờ mình mê Figma quá nên …. à…

  1. So với Adobe XD:
    • Dễ comment, review hơn, trên XD lúc comment nó hay bị sai vị trí sao đó
    • Dễ sharing hơn, trên XD nó bị 1 lỗi là nó tự động zoom hơi bị to so với size mình thiết kế, chưa kể zoom in, zoom out không được mượt lắm
    • Mình thấy XD hỗ trợ phần component không được xịn như trên Figma lắm, sài Figma sướng hơn nhiều, chưa kể trên Figma có nhiều thư viện bao đã.
    • Thật ra mình thích cách dùng XD để thiết kế banner/standee, logo nha, xưa là sài XD làm việc đó không á
    • Trước khi sài Figma, thì công cụ chính mình sài là XD, nhưng khi sài Figma nhiều rồi thì lại sài Figma nhiều hơn.
    • XD giờ không có bản free nữa, xưa có giờ thì không còn.
    • XD thì mình chưa thử nghiệm làm việc với member khác kiểu nhiều người edit 1 file, nên k review chỗ này.
  2. So với Axure:
    • Axure xưa mình phải sài crack rất cực luôn, phải trả phí để sài (không biết giờ có bản free chưa), nhưng có bản cho students/teachers dùng free 1 năm.
    • Khúc làm prototype bên Axure hơi bị cực
    • Lúc vẽ wireframe mình cũng thấy cực nốt, cực hơn khi vẽ bên Figma rất nhiều, kiểu vẽ từng elements, rồi đổ dữ liệu vào, với lúc ra element nhìn như thời window hay kiểu UI của element nó cũ cũ sao đó.
    • Được cái nó hỗ trợ kiểu như Git để mà làm việc với team, nhưng mình lại thấy hơi phức tạp để sài.
    • Mình thấy công cụ này mà kiểu công ty bự bự sài sướng, crack để sài nên cũng giảm bớt chi phí sử dụng cũng ok.
    • Axure cũng có các thư viện khá là okela như Figma.
  3. So với Balsamiq:
    • Balsamiq mình sài ver 3, có key free, còn ver 4 thì phải trả tiền.
    • Sài ver desktop nên khi làm việc với members khác sẽ khó, phải export rồi gửi file xong import, quản lý version rất cực
    • Bản cloud thì buộc phải trả phí => cũng phần làm việc với team khá ok chỗ này, cũng ok chỗ quản lý version luôn.
    • Được cái Balsamiq mình thấy còn dễ sài hơn cả Figma, nhưng mà cũng bị giới hạn phần components và elements có sẵn, muốn sài xịn phải tự define ra khá là cực.
    • Balsamiq vẽ wireframe cũng nhanh, nhất là mấy cái liên quan đến table thì balsamiq là nhanh lắm (so với các công cụ khác)
    • Mình cũng có quay khoá hướng dẫn sử dụng Balsamiq, ae thử xem qua nhé.
Đọc thêm  Khoá học nghiệp vụ Blockchain cho Business Analyst

Cách đăng ký miễn phí Figma sài trong 2 năm (Education).

Bước 1: Truy cập Figma Education

Bước 2: Nhấn vào Get verify

Bước 3: Đăng ký tài khoản 

Với việc bạn có tài khoản thì bỏ qua bước đăng ký mà đi trực tiếp vào link apply student program nhé.

Bước 4: Điền thông tin sau khi đăng ký

  • Điền tên, Làm vị trí gì
  • Và cái số 3 phải chọn là “For teaching or taking a class

=> Sau khi tạo xong, check email các kiểu thì mở lại link: https://www.figma.com/education/apply 

Bước 5: Điền thông tin Get free Figma for Education

Nhớ là bạn đang đăng ký với Figma bạn là 1 sinh viên => bạn cần phải xác nhận bạn là sinh viên

Bằng cách điền các thông tin như sau:

  • Are you a student or an educator? chọn Student
  • What type of institution do you attend or work for? => Chọn K12 => Rồi 2 câu dưới chọn Agree, Agree
  • Why are applying for a free Figma Education plan: Bạn nên gõ tiếng Việt, ghi gì cũng được, đại loại là tui cần acc figma để làm bài tập, mình thì hay ghi bằng tiếng Anh “For doing assignment from teachers where I can design User Interface and Wireframe for application”
  • School name: School not listed
  • Full school name: nhập tên tiếng Anh của 1 trường đại học bất kỳ => Như mình học UIT thì mình điền đúng University of Information Technology – VNU HCM.
  • Nhâp địa chỉ Website của trường bạn đã khai báo ở trên: nhập đúng website chính của trường
  • Why is your primary field of study: Chọn bất kỳ theo ngành trường đó dạy, ví dụ mình chọn Information Technology hay kiểu kiểu vậy.
  • Expected graduation date: chọn tháng nào cũng được, năm 2024 trở đi, nên chọn từ năm hiện tại + 2 năm nữa là ok nhất.
  • Có 1 bước là upload lịch học, thì bạn cứ lên web chọn đại 1 lịch học nào đó điền, mình thì vào trực tiếp lịch kế hoạch năm file png của trường mình upload lên.Mình thấy là khi đăng ký tuỳ lúc nó ra form thông tin khác nhau, bạn điền sao cho hợp lý nhất là được nhé, lúc thì chỉ show có vài trường, lúc thì show 1 mớ thông tin. => Tuỳ cơ ứng biến thêm nhé.

Bước 6: Tạo team

Bạn chỉ cần điền tên Team rồi tạo thôi.

Sẽ có bước mời thành viên team => bạn có thể mời hoặc skip nhé, tuỳ mục đích.

Bước 7: Chọn gói dịch vụ và thanh toán (Free)

Lúc này bạn nhấn vào team => Sẽ có popup show ra và chọn Next cho team đó.

Sau đó chọn thanh toán (upgrade)

Vậy là giờ bạn đã có tài khoản Figma Edu được dùng như bản Professional trong 2 năm.

Kết bài

Như vậy là mình đã chia sẻ công cụ Figma, một công cụ tuyệt vời cho anh em Business Analyst, không chỉ là một công cụ để thiết kế mà còn có một công cụ để tư duy, trình bày và thực hiện ý tưởng của mình một cách chuyên nghiệp và hiệu quả, dù bạn làm trong team nhỏ hay lớn.

Và cũng đã chia sẻ luôn cách đăng ký tài khoản Figma Edu (free 2 năm).

Hi vọng giúp cho anh em nào chưa từng sử dụng tìm được công cụ mới hữu ích khi làm công việc Business Analyst nhé.

Giới thiệu

Mới gần đây thôi,… cỡ đâu 14-15 tháng trước, có một anh giới thiệu công cụ kiểu vẽ để present và phát khảo nhanh ý tưởng mà dân Defi (Decentralized Finance – ý nói những người hay nghiên cứu, chơi và build sản phầm tài chính phi tập trung) hay sử dụng.

excalidraw
excalidraw

Từ ngày mình biết tới nó mình sài hơi bị nhiều, vì kiểu nhìn nó như bản vẻ tay, vô cùng thân thiện.

Một số ưu điểm mà mình nghĩ nó over hợp với BA.

À mà đâu phải hợp mỗi BA, mình thấy hợp với nhiều người á chứ, cứ liên quan đến phát khảo idea, present đồ các kiểu là over hợp hết.
Dưới là một số ưu điểm mà mình thấy

  1. Phác Thảo Ý Tưởng Nhanh Chóng: Excalidraw cho phép bạn nhanh chóng phác thảo ý tưởng, tạo wireframe và sketch với giao diện đơn giản, trực quan. Có sẵn một số mẫu để kéo ra sử dụng từ library, giúp phát khảo ý tưởng rất nhanh.
  2. Present Dễ Dàng: Với Excalidraw, việc chia sẻ và trình bày ý tưởng cho team của bạn trở nên dễ dàng hơn bao giờ hết. Bạn có thể vẽ, chỉnh sửa và cùng làm việc với đồng nghiệp chỉ qua một link mà không cần phải tạo tài khoản.
  3. Lưu trữ local/lưu cloud linh hoạt: Khi tạo xong wireframe, có thể lưu lại file vào local sau đó có thể mở ra sử dụng sau đó, hoặc thay vì lưu local, mình có thể lưu trên cloud và sẽ có 1 link để mình truy cập và sử dụng sau này, khi mở link thì những gì mình đã vẽ sẽ còn lưu lại.
    Có hỗ trợ export ra hình ảnh png, sgv, copy phần đã chọn để paste (dạng image) vào nơi khác.
  4. Free, không cần tài khoản: Sử dụng hoàn toàn miễn phí, cứ mở link https://excalidraw.com/ lên là sử dụng thôi, và có thế bật lên chế độ cùng chỉnh sửa, nhiều người cùng tham gia edit và phát hoạ ý tưởng trên cùng 1 Canvas.
  5. Thư viện wireframe: Hiện có nhiều thư viện wireframe có thể bạn thêm vào, và kéo thả từ khung thư viện, nào là icons, khung frame web, mobile, wireframe mẫu sẵn, …
  6. Text to diagram (AI): Hiện tại có hỗ trợ text to diagram để lên diagram, flow chart, sequence, class nhanh chóng (bạn xem hình mình để mẫu nhé). => mình có thấy tính năng wireframe to code,… ae có thể sài ChatGPT thử nghiệm thử nhé.
  7. Các công cụ (tools) cơ bản mà một ứng dụng vẽ wireframe cần có như: Thêm hình vuông, hình tròn, ellipse, hình thoi, mũi tên, đường thẳng, đường cong, vẽ pen, thêm text, thêm image, xoá, hỗ trợ group layers, add frame, đổi màu, …
  8. Hỗ trợ tính năng present: Laser pointer, import video, web embed, …

Mình nghĩ là sẽ còn nhiều tính năng hay ho khác bạn có thể xem tại đây: https://plus.excalidraw.com/excalidraw-plus-vs-excalidraw, nếu mà bạn thử nghiệm trực tiếp thì sẽ có cảm nhận thực tế hơn qua cách mình trình bày 😀

 

Ngoài ra hình như có hỗ trợ embed/integrate Excalidraw vào trong ứng dụng (app/webapp) của bạn, tìm hiểu kỹ hơn tại đây https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration

Nhược điểm mình thấy

Nhưng vẫn có 1 nhượt điểm đó là thực sự so sánh với những công cụ chuyên cho công việc của chính công cụ đó thì Excalidraw sẽ không bằng.

Ví dụ như vẽ diagram để trình bày trong tài liệu, thì sẽ không thể ngon bằng các công cụ Visio, Draw.io, LucidChart
Hay vẽ wireframe, mockup thì không thể ngon bằng sketch, xd, hay figma được.

Nhưng nếu chỉ xét khía cạnh present và thực hiện nhanh khi đang present, thì công cụ này tuyệt vời với những tính năng và ưu điểm mình nói ở trên.

Thực tế đối với mình khi xử dụng, mình vẽ phát hoạ nhanh bằng Excalidraw lúc đang call với mọi người khi trình bày ý tưởng, hoặc thảo luận về luồng, cách thức hoạt động, cấu trúc hệ thống.
Rồi khi document details lại thì sẽ screenshot màn hình của Excalidraw rồi copy bỏ vào Figma nếu liên quan đến wireframe/mockup => Rồi vẽ lại = figma cho đầy đủ, chỉnh chu. Còn nếu là diagram thì sẽ bỏ vào draw.io rồi vẽ lại để có sản phẩm cuối cùng.

Dưới đây là một số hình minh hoạ, bạn có thể xem qua nhé.

Vẽ sketch/wireframe với Excalidraw.com

Image 1 of 5

Kết bài

Mình hi vọng với bài chia sẻ này, bạn có thể thấy công cụ này hữu ích với công việc của bạn, và giúp bạn tối ưu công việc của mình bởi việc sử dụng nó :D.

Khi mình làm việc với nhiều anh em Business Analyst, mình thấy nhiều bạn dùng các từ Sketch, Wireframe, Mockup và Prototype đôi lúc sai ngữ cảnh, ý nghĩa. Nên mình viết lại bài này, hi vọng sẽ giúp bạn hiểu hơn về các khái niệm, dùng khi nào và cách dùng cho hợp lý nhé.

1. Sketch

  • Là bản phác thảo một cái gì đó trên giấy hoặc trên bản vẽ ở máy tính.
  • Nó cung cấp cho mình những thông tin cơ bản.
Sketch
Sketch

DÙNG KHI NÀO?

  • Thường là giai đoạn đầu của việc phân tích, mình hình thành ra ý tưởng, luồng, màn hình cơ bản.
  • Mình hay vẽ đại ra trên giấy để có cái nhìn vô một cách trực quan để dễ hình dung và phân tích.

CÁCH DÙNG:

Vẽ đơn giản, dễ hình dung,  tiết kiệm thời gian, vẽ miễn sao dễ hiểu và nhanh, dễ truyền đạt ý tưởng chứ không cần vẽ cho đẹp.

Dùng giấy, hoặc phần mềm Excalidraw, Balsamiq, Figma

 

2. Wireframe

  • Là kiểu thiết kế có các thông tin cơ bản, giao diện cơ bản đủ thành phần (ví dụ phải đủ các trường, dữ liệu, nút button…)
  • Và bản thiết kế này thì không cần màu mè gì nhiều, không cần quá đẹp, nhìn vô là hiểu trên màn hình sẽ có nội dung ra sao, nút đặt chỗ nào, …
Wireframe
Wireframe
Đọc thêm  Công cụ vẽ wireframe và diagram tuyệt vời mình tìm được cho Business Analyst.

DÙNG KHI NÀO?

  • Trong khi phân tích chi tiết, viết tài liệu nghiệp vụ, business rule, trước khi làm UI, khi làm các bước về luồng màn hình.
  • Giúp cho thấy được sự luân chuyển giữa các màn hình (điều hướng), cách các màn hình làm việc với nhau.

CÁCH DÙNG:

  • Vẽ đơn giản, đầy đủ thông tin trên màn hình,  dễ hình dung,  tiết kiệm thời gian.
  • Đừng thêm màu mè quá nhiều, chỉ dùng các màu đơn giản để đánh dấu tạo điểm nhấn, nút quan trọng,…
  • Thông tin trên màn hình nên đầy đủ về trường, nút, …
  • Đi kèm với mô tả Business Rule hoặc viết tài liệu hoặc comment/chú thích.
  • Vẽ đường mũi tên để chỉ sự điều hướng giữa các màn hình, hoặc đôi lúc gắn nút điều hướng trên ứng dụng design để có thể thể hiện sự tương tác giữa các màn hình => giúp cho việc trình bày với KH, stakeholders khác dễ hình dung hơn.
  • Mình hay dùng Balsamiq, Figma, Excalidraw, Adobe XD, Giấy, hoặc Ipad (với bút) để tạo wireframe.

3. Mockup (UI)

  • Là kiểu thiết kế trực quan, khá giống với phiên bản thực tế khi xây dựng web/ứng dụng. Có màu đầy đủ, có mấy yếu tố như đổ bóng, viền, animation kèm theo,…
  •  Vẽ kỹ tới mức mà Front-end designer có thể nhấn vào và xem kích thước chính xác, có các thành phần CSS, responsive.
  • Mình làm công ty thì thấy mọi người hay gọi là UI, Bảng design, File design
Mockup
Mockup
Đọc thêm  Figma Professional miễn phí: Công Cụ Đắc Lực Cho Business Analyst

DÙNG KHI NÀO?

  • Thường thì BA chả đụng gì trong phần thiết kế UI mà chỉ làm phần review luồng, nút có đủ chưa, phù hợp với tính năng nghiệp vụ đang làm hay không?
  • Thường được làm sau bước đã xong tài liệu nghiệp vụ/hoặc làm song song dạng cuốn chiếu với tài liệu nghiệp vụ.
  • Được dùng khi thiết kế trực quan, cụ thể để từ đó dựng nên giao diện web/ứng dụng.
  • Khi mà cần đánh giá yếu tố màu, phong cách, thương hiện, phối giữa các đối tượng giao diện, hình ảnh, sự chuyển động.

CÁCH DÙNG:

  • Thường BA ít/không làm phần này, mà là Designer sẽ lo, do đó BA có thể đi sâu vào mục review đánh giá, góp ý cũng như bổ sung thêm các thông tin còn thiếu trên giao diện, hay sự tương tác giữa các màn hình sao cho khớp với yêu cầu nghiệp vụ.
  • Nếu bạn có kỹ năng về phần giao diện này thì bạn có thể góp ý cũng như đưa ý kiến cá nhân nếu thấy sản phẩm mockup chưa được phù hợp.
Đọc thêm  Khoá học nghiệp vụ Blockchain cho Business Analyst

Prototype

  • Là một bản như Mockup mà nó có thể hoạt động được khi mình gắn sự liên kết giữa các màn hình và user có thể thao tác được. Mục tiêu chính là để mô phỏng sự tương tác giữa người dùng và giao diện.

DÙNG KHI NÀO?

  • Phần này thường bên BA dùng để đi trình bày với khách hàng, stakeholders, mô phỏng ứng dụng thực tế 
  • Hoặc có thể xem và đánh giá trước khi code để chắc chắn rằng bản giao diện phù hợp, luồng tính năng hợp lý, hoặc làm cả việc nhờ người dùng đánh giá,…

CÁCH DÙNG:

  • Cũng là phần Design lo là chính, BA thường phụ phần gắn tương tác giữa các màn hình.
  • Lưu ý khi bật prototype thì chọn màn hình cho phù hợp, mà mở ở mức 100% để cảm nhận nó giống thật, không bị phóng to, hay thu nhỏ mà đánh giá sai về giao diện.
  • Với mình thì mình đánh giá cả độ tương phản, rồi test WCAG.
  • Ngoài ra Prototype còn hay được dùng cho các ứng dụng xây tạm thời, mô phỏng giao diện và build ra app/web để đưa ra cho người dùng thấy (có thể viết một vài tính năng cơ bản mà chưa xây dựng đủ, dùng dữ liệu giả,…)

Các khái niệm khác

Lo-fi design

Là một loại hình thiết kế với mức độ chi tiết thấp, thường mang tính chất phác thảo và đơn giản, nhằm tập trung vào việc truyền đạt ý tưởng hoặc cấu trúc tổng thể hơn là chi tiết thẩm mỹ.

Thì cũng khá giống với wireframe hoặc tuỳ mức độ mà nó sẽ giống với sketch

Mà Prototype cũng có thể chạy trên Lo-fi design để xem sự tương tác giữa các màn hình, element dưới dạng wireframe. Và thường được gọi là Lo-fi prototype.

Hi-fi design

Là bản thiết kế chi tiết và trực quan, gần giống với sản phẩm cuối cùng, có đầy đủ màu sắc, bố cục, và các yếu tố giao diện. => Khá giống với mockup, hoặc có thể nói là 1 tên gọi khác của mockup.
Do đó mà Hi-fi prototype: Là một phiên bản hoạt động của HiFi Design, cho phép người dùng tương tác và trải nghiệm trước khi sản phẩm thực sự được phát triển.

Kết bài.

Cảm ơn bạn đã đọc bài viết của mình, nếu có gì sai sót hoặc chưa đúng thì để lại comment cho mình nhé.

Team mình đã dành giải nhất 10K$ trong cuộc thi SOLANA CODING CAMP VIỆT NAM và

6 bước mình thực hiện trong quá trình Business Analysis với vai trò lại một BA như thế nào?

1. Tiếp cận dự án & trao đổi business & idea (Elicit)

  • Anh em ngồi lại thảo luận ý tưởng và chọn 1 ý tưởng thấy phù hợp để tham gia Coding camp. Các ý tưởng là tự bộ những tính năng team mình dự kiến build cho công ty để xây dựng sản phẩm hoàn hảo.
  • Thảo luận về ý nghĩa thực sự của tính năng, giúp cho user làm gì? Tương lai phát triển tính năng ra sao (Ở đây là thảo luận để thực hiểu về Business, cách business vận hành, problem và solutions)

2. Phân tích & nghiên cứu giải pháp

  • Mình dùng các kỹ thuật khơi gợi (trong chính mình) để phân tích các tính năng, vẽ ra user flow, các trường hợp có thể xảy ra.
  • Vẽ sketch, mình dùng phần mềm excalidraw để vẽ ra những trường hợp xảy ra, lên phát hoạ ý tưởng, hình dung tính năng nó như thế nào, sẽ có những nút nào, những màn hình như thế nào,… chọn lọc và đưa ra những phân tích sơ khởi để đi đến bước tiếp theo…
Đọc thêm  Công cụ vẽ wireframe và diagram tuyệt vời mình tìm được cho Business Analyst.
Sketch
Sketch
  • Vẽ wireframe, mình cũng tiếp tục dùng excalidraw để vẽ wireframe, nhưng vẽ lộn xộn từ luồng màn hình, các thành phần trên  màn hình, vị trí tính năng, một số diagram, vẽ tất cả những gì mà sản phẩm có thể xây dựng được.
  • Ở bước này vì khơi gợi và chưa chốt cụ thể tính năng nào sẽ build, scope ra sao nên mình ghi ra tất cả những gì mình phân tích và các trường hợp/ tính năng có thể build
Wireframe
Wireframe

3. Trình bày giải pháp

  • Call với anh em trong đội ngũ phát triển dự án để trao đổi về giải pháp, thảo luận và chọn ra những tính năng cần xây dựng trong thời gian ngắn là 5 tuần.
  • Chốt scope và chốt giải pháp từ nghiệp vụ đến technical.
  • Phân chia công việc
Đọc thêm  Khoá học nghiệp vụ Blockchain cho Business Analyst

4. UI & Business rule

  • Scope wireframe về Figma & vẽ rõ luồng hơn để nhiều người nhìn vô dễ hiểu, sẽ khác với wireframe ở mục 2, phần wireframe này sẽ gọn gàng, ngăn nắp, vẽ các mũi tên điều hướng chỉ sự tương tác giữa các màn hình rõ ràng hơn để anh em phát triển dự án theo dõi dễ hơn.
Arranged Wireframe
Arranged Wireframe
  • UI vẽ cuốn chiếu, vẽ màn hình nào thì sẽ review và chỉnh sửa đến đó, cùng thời điểm đó Dev FE cũng sẽ theo dõi và làm dần.
  • Mình viết Business Rule & review UI/flow/cases xảy ra(không viết tài liệu cụ thể)
Business Rule
Business Rule
  • Tester viết checklist (vì thời gian quá ngắn)

5. Dev & Test

  • BE/Smart Contract Dev viết code theo Wireframe & Business Rule mình đã định nghĩa ở mục Wireframe đã chốt scope (ở mục 4)
  • FE dev theo UI, và code cuốn chiếu cùng lúc với thời điểm vẽ và review UI.
  • Review checklist & test UI cùng với tester để tìm ra lỗi UI, từ đó kịp thời sửa chữa lỗi ngay thời điểm làm UI.
  • Lắp ráp FE & BE, SC để thấy sự tương tác giữa các tính năng, giữa BE và FE, cả về Smart Contract.
  • Test functional để tìm ra lỗi hoạt động của tính năng, cũng như tích hợp tính năng.
  • Luôn cập nhật Business rule & Review UI cùng với anh em để có thông tin mới, chính xác nhất.

6. UAT

  • Test sau khi sản phẩm hoàn thiện xem có đáp ứng yêu cầu không, nếu chưa đáp ứng thì feedback và chỉnh sửa bổ sung cho phù hợp, còn nếu đã hoạt động ok rồi thì anh em mang đi nộp bài và nhận giải thôi.

 

Kết bài.

Từ 6 bước của mình, bạn có thể áp dụng cho các dự án mà các bạn đang thực hiện, đây cũng là quy trình mà mình thực hiện khi tham gia các dự án thông thường khác, chỉ khác là mình thực hiện chi tiết, cẩn thận và viết tài liệu đầy đủ hơn.
Hi vọng bài viết sẽ giúp ích cho quá trình làm Business Analysis của các bạn.

 

Bạn có thể tìm đọc bài viết về giải ở đây:

https://nhipcaudautu.vn/cong-nghe/solana-vietnam-coding-camp-mua-2-cong-bo-doi-doat-giai-3349752/

https://vnreview.vn/thread/cuoc-thi-lap-trinh-solana-vietnam-coding-camp-mua-2-da-tim-ra-nhung-team-danh-chien-thang-trao-thuong-gan-2-4-ty-dong.492581209480721

 

Blockchain Business Analyst

Dưới đây là một số thuật ngữ mà mình hay sài cũng như nói chuyện với các bên khi xây dựng một token launchpad.

Launchpad

Thường được đi kèm với hình ảnh tên lửa được phóng lên bầu trời, với ý nghĩa là một nơi bệ phóng Token giúp cho các dự án dễ tiếp cận với nhà đầu tư, hay còn gọi là gọi vốn đầu tư dựa theo lượng users của công cụ launchpad đó hoặc ngược lại.

Vì là bệ phóng nên Launchpad có nhiều loại như ICO – Initial Coin Offering (Lần đầu phát hành token/coin), IDO – Initial Dex Offering – (Lần đầu phát hành token trên sàn DEX), IEO – Initial Exchange Offering (Lần đầu chào bán token trên sàn giao dịch crypto), IGO – Initial Gaming Offering (Lần đầu chào bán/phát hành NFTs/Mystery Boxes/Token liên quan đến GameFi), INO – Initial NFT Offering (Lần đầu phát hành NFT)

Token & Coin

Bạn tham khảo thêm nhiều bài viết để hiểu rõ hơn nhé. Để tránh mình mô tả ngắn gây hiểu sai lệch về 2 khái niệm này. Các từ khoá liên quan: Tiền điện tử, Crypto, Tiền mã hoá, …

White paper

Là một tài liệu để trình bày ý tưởng, kế hoạch phát triển dự án, kiến trúc hệ thống, phân chia token, dự báo tăng trưởng, … Nhằm mục đích chia sẻ minh bạch thông tin về dự án đến nhà đầu tư.

DYOR

Do your own research – bạn tự nghiên cứu về dự án để biết rằng dự án đó tốt không? Những người đi shill dự án chỉ là chia sẻ thông tin – họ không chịu trách nhiệm gì về việc đầu tư của bạn

ROI

Return On Investment – tỷ suất hoàn vốn, là chỉ số đo lường những khoản thu được so với chi phí bỏ ra (thường ở đây là tiền và thời gian).

Ví dụ bạn đầu tư 100$ và sau 1 năm bạn bán ra 500$ ⇒ ROI = ((500$-100$)/100$)*100% = 400%

KYC

Know your customer = quy trình xác minh danh tính của người dùng hoặc chủ dự án. Nhằm biết được người chủ dự án hoặc người tham gia là người thật.

Staking

Staking được hiểu là việc mang một lượng coins/tokens nhất định khoá lại để nhận được một lượng phần thưởng nhất định.

Ngoài ra bạn có thể tìm hiểu thêm Proof of Stake để rõ thêm nhé.

Smart Contract

Là bộ giao thức tự động thực hiện những điều khoản/thoả thuận giữa các bên dựa trên công nghệ blockchain.

Thường là smart contract sẽ được viết code và xử lý các logic mà được ví như những điều khoản trong hợp đồng.

Nhưng vì hợp đồng thường cũng có lỗ hỗng → có thể điều chỉnh hợp đồng cho phù hợp, nên smart contract cũng có upgradable.

Blockchain

Blockchain thì đóng vai trò như một bộ database phi tập trung, lưu trữ thông tin theo từng khối (block) và được liên kết với nhau bằng mã hoá, cứ theo thời gian thì các block này càng dài tạo thành một chuỗi (chain)

Vì là phi tập trung nên dữ liệu được nằm phân tán ở nhiều máy tính khác nhau, và các thông tin được liên kết với nhau và không thể phá vỡ nên thông tin cũng không thể bị thay đổi dưới bất cứ hình thức nào.

Đọc thêm  Khoá học nghiệp vụ Blockchain cho Business Analyst

Chain

Từ này mình hay sài để chỉ các công nghệ blockchain/nền tảng khác nhau.

Ví dụ như Binance Chain, Etherium Chain, Solana Chain ⇒ Multi chain là đa chuỗi/đa nền tảng khác nhau.

Off-chain

Là các giao dịch xử lý và lưu trữ nằm ngoài blockchain

On-chain

Là các giao dịch xử lý và lưu trữ nằm trên blockchain

Audit

Là hành động kiểm tra code trên smart contract xem đã code tốt/có đảm bảo được bảo mật hay chưa? Nếu có lỗ hỗng bảo mật thì báo lại đội ngũ phát triển dự án điều chỉnh để tránh rủi ro về lỗi và hackers.

Một cái hay nữa là thường Audit giúp cho dự án uy tín hơn nhiều, và thu hút thêm nhà đầu tư.

Thường các dự án blockchain liên quan khá nhiều tới tài sản (coin/token) nên cần được audit cẩn thận bởi những đội ngũ có trình độ cao.

Nhưng không phải dự án nào audit rồi cũng an toàn 100% nha 😀

Pool

Mình định nghĩa từ này trong các launchpad mình tham gia, cũng như build.

Pool ở đây nghĩa là một nơi/một cái hồ/một contract address được sinh ra để chưa tokens/coins/NFTs/… từ đó dựa vào cơ chế xây dựng trên smart contract mà phân phối tokens sao cho phù hợp theo logic đã được định nghĩa.

Đôi lúc lại hiểu nó như một dự án launchpad.

Social task

Là các nhiệm vụ nhà đầu tư phải làm như chia sẻ lên facebook, theo dõi một bài viết, nhấn like, bình luận một bài viết, truy cập trang web,…

Mục đích tuỳ thuộc vào cơ chế hoạt động của dự án, có thể là để có quyền được tham gia launchpad của pool, hoặc có cơ hội, hoặc được quyền nhận miễn phí tokens,…

Whitelist

Kiểu như một danh sách các wallet hoặc một định danh nào đó đã được chọn lọc để có quyền tham gia một chương trình đặc biệt nào đó. Cụ thể ở đây là được quyền tham gia pool.

Tokenomics

= Token + economics: Thường là mô tả về cách token hoạt động trong nền kinh tế như: Tổng số lượng tung ra là bao nhiêu? vốn hoá như thế nào? phân bổ tokens ra sao? Các tiện ích gồm những gì?

FCFS

First Come First Served – ai đến trước thì được tham gia trước, thường là dành cho các pool được tham gia rộng rãi tới mọi người, và ai nhanh tay thì được tham gia trước.

Allocation

Sự phân bổ tokens, nhưng còn được hiểu là phần tokens được dành riêng cho một nhà đầu tư, một tổ chức đầu tư.

Ví dụ như cái bánh 10 phần chia cho 5 người, mỗi người 2 phần.

Thì 2 phần này là allocation của 1 người nào đó được chia.

Raffle

Là kiểu xổ số – quay ngẫu nhiên để chọn những người chiến thắng.

Vesting

Một nhà đầu tư nào đó tham gia để mua tokens, nhưng mà không phải được lấy toàn bộ token và ưng bán đi lúc nào thì bán. Mà phải được dự án giữ lại hoặc khoá lượng tokens đó lại, và chỉ được mở ra theo lộ trình nhất định. Quá trình này gọi là vesting → Nhằm tránh nhà đầu tư xả hàng hàng loạt hoặc thao túng thị trường → giúp cho dự án an toàn hơn, có thời gian để phát triển dự án.

DEX

Decentralized Exchange – là loại sàn giao dịch crypto phi tập trung. Thường mấy IDO Launchpad pool xong sẽ list trên DEX.

Lưu ý

Sẽ có những khái niệm trong blockchain mà bài viết này không thể mô tả hết được, bạn vui lòng tìm kiếm thêm trên google nhé.

Lúc mình làm BA tại công ty, có rất nhiều bạn Business Analyst mới dùng Balsamiq hay hỏi mình tải ở đâu, rồi cách crack công cụ này :D, sẵn dịp mới mở lại vụ viết blog, nên chia sẻ anh em Balsamiq Mockup miễn phí (key) nha.

Nhưng trước hết mình phải biết được Balsamiq Mockup là công cụ gì cho anh em nào chưa biết nhé.

Balsamiq wireframe là gì?

Đây là một công cụ mà giúp xây dựng nên những giao diện web/app dưới dạng wireframe bằng cách kéo thả những widget đã được tạo sẵn. Giao diện thì bao dễ sài, dùng vài lần là sài dễ như ăn chơi. Anh em có thể tìm thêm khóa học của mình về Balsamiq để học nhé, hướng dẫn chi tiết từ A tới Z luôn.

Đọc thêm  Khóa học làm quen với Balsamiq Mockup 3 - Miễn phí

Trước kia khi mình dùng và hay kiểm tra trang web của Balsamiq thì tên của công cụ này là Balsamiq Mockup, nhưng hiện nay đã đổi qua tên mới là Balsamiq Wireframe.

Để hiểu hơn về Wireframe, mockup, sketch, prototype thì anh em đọc thêm bài này nhé:

Đây là giao diện của em Balsamiq

 

Balsamiq có 2 phiên bản, phiên bản desktop và cloud – và 2 phiên bản đều có trả phí. Nhưng trên các diễn đàn chia sẻ cách crack rất nhiều, riêng mình thì tìm được một số key từ một số diễn đàn và dùng thử, mình thấy rất tốt nên chia sẻ lại cho anh em sài phiên bản Desktop – Version Balsamiq Mockup 3.

Tải và cài đặt

Để sử dụng thì bạn tải balsamiq mockup 3 tại đây: https://balsamiq.com/wireframes/mockups3fordesktop/

 

 

Sau khi tải và cài đặt, bạn nhập key sau nhé:

1) Name: Flash
Serial: eNrzzU/OLi0odswsqnHLSSzOqDGoca7JKCkpsNLXLy8v1ytJTczVLUotKNFLzs8FAJHYETc=

2) Name: SoftVnn
eJzzzU/OLi0odswsqgnOTysJy8ursUQCNc41hjV+7q5+AClADYE=

3) Name: tuan.cse06 – SoftVnn
eJzzzU/OLi0odswsqikpTczTSy5ONTBT0FUIzk8rCc..q7FEAjXONYY1f u6ufgD21RF1

Cảm ơn anh em đã đọc bài viết của mình nhé, hi vọng bài viết này sẽ giúp cho anh em sài được Balsamiq miễn phí nha. Nếu yêu thích bài viết của mình thì lâu lâu ghé thăm blog của mình nhé. Cảm ơn ae 😀

Đọc thêm về cách chia sẻ wireframe/mockup đến khách hàng khi làm Business Analyst nhé

Đọc thêm  Balsamiq Wireframe miễn phí - công cụ cho Business Analyst
Review wireframe/mockup dễ hơn với tool Axure Cloud.”]