Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UI/UX workflow tại Thegioididong.com và một số ...

tungjacob
September 12, 2018

UI/UX workflow tại Thegioididong.com và một số kinh nghiệm khi theo nghề UI/UX/PM

Đường link download file PDF: http://bit.ly/workflow-tgdd . Bạn có thể tải file này về và có thể click được vào các đường link bên trong slide để xem thêm các nội dung liên quan.

tungjacob

September 12, 2018
Tweet

More Decks by tungjacob

Other Decks in Design

Transcript

  1. UI/UX WORKFLOW TẠI VÀ MỘT SỐ KINH NGHIỆM KHI THEO

    NGHỀ UI/UX/PM Tùng Jacob, E-Commerce Director Dienmayxanh.com Etown, HCM city, 11/9/2018
  2. Do SpeakerDeck không cho click vào xem các đường link

    trực tiếp trong slide này, bạn có thể: 1. Tải slide này về tại http://bit.ly/workflow-tgdd và mở file PDF, bạn có thể click vào các đường link trong file. 2. Trên SpeakerDeck, click vào nút download ngay góc phải dưới cùng bài viết này, tải về file PDF
  3. VÀi dòng về bản thÂn • Thanh Tùng (tungjacob), 33

    tuổi • Hiện tại dẫn dắt nhóm online của Dienmayxanh, gồm các team Product, Content, Bán hàng 2007 Tốt nghiệp ĐH Ngoại thương 2007 Baamboo MP3 (VCcorp) Product Exec. 2008 - 2010 anhso.net (Moore Corp) Product Manager 2010 - 2011 Wordpress freelancer 11/2011 - hiện tại thegioididong.com dienmayxanh.com UI/UX, PM
  4. 0 3000 6000 9000 12000 2014 2015 2016 2017 2018

    VÀi nét về tăng trưởng doanh thu online TGDD + DMX (ngàn tỉ) 1.800 3.300 6.000 Dự kiến 11.000 870 Theo VECOM, tốc độ tăng trưởng thương mại điện tử của Việt Nam 3 tháng đầu năm 2018 đạt trên 25%
  5. • UI (User Interface): Giao diện người dùng, là thứ

    mà bạn nhìn thấy và tương tác trên đó • UX (User eXperience): Trải nghiệm người dùng, là cách mà người dùng cảm nhận về một sản phẩm / dịch vụ nào đó. Mục tiêu tối thượng của việc thiết kế trải nghiệm người dùng (UX Design) đó là phải ĐÁP ỨNG ĐƯỢC NHU CẦU CỦA NGƯỜI DÙNG UI, UX LÀ GÌ
  6. Usability: Tính dễ dùng, là mức độ thuận tiện và

    hài lòng của người dùng khi sử dụng một sản phẩm/tính năng để đạt mục đích đã đề ra UI vs. Usability vs. UX Chiếc điều khiển như thế nào sẽ khiến bạn Wow?
  7. Ra lệnh, tìm kiếm bằng giọng nói "Wow, quÁ tiện"

    Xem ví dụ trên Dienmayxanh.com channel
  8. UX không phải một lĩnh vực "cao siêu" phải học

    mới lÀm được Người có khả năng Thấu cảm (Empathy) sẽ là người phù hợp với công việc về UX: đồng cảm sâu sắc với các khó khăn mà người dùng trải qua, muốn cải tiến mạnh mẽ quy trình, sản phẩm, dịch vụ để giải quyết những vấn đề người dùng gặp phải Good UXer = 8ấu cảm + Trải nghiệm phong phú FAQ : "Em muốn học UX có phải qua trường lớp không"
  9. 2 "chuyên gia" về UX không qua trường lớp Không

    rành công nghệ, không trendy với các xu hướng Hi Tech nhưng rất nhạy bén với các vấn đề ảnh hưởng đến người dùng trên web. Là một người thường xuyên mua hàng trên các website nội bộ, mỗi lần mua hàng đều có những góp ý mới mẻ Anh Tài, chủ tịch HĐQT TGDD Jack Ma, chủ tịch HĐQT Alibaba "Kì thực, chính vì tôi không hiểu về Tech, nên cty chúng tôi mới giỏi nhất về nó". Jack Ma yêu cầu giao diện của Alibaba phải dễ sử dụng đến mức mà người nông dân cũng phải dùng được để cả xã hội có thể đăng bán mọi thứ, ví dụ nông sản
  10. Product Workflow Yêu cầu Thiết kế Lập trình Test &

    Launch Đo lường, cải tiến t1 Communication is key to success
  11. Đưa yêu cầu - Nhận yêu cầu • Với người

    đưa ra yêu cầu: • Luôn phải xác định được rõ MỤC TIÊU mình muốn là gì • Không nói phần "ngọn" (What) của vấn đề mình muốn làm mà phải nói phần "Why". Học cách lôi cuốn người khác. Điều này thường bị xem nhẹ / bỏ qua • Nếu bạn là trung gian, Không truyền đạt yêu cầu từ sếp tới bộ phận nhận yêu cầu (VD Design) một khi chưa hiểu rõ Tại sao, Mục tiêu làm --> hãy tập "hoài nghi", phản biện. Một khi đã hiểu rõ tường tận, yêu cầu của sếp sẽ trở thành niềm tin của bạn và bạn mới có thể lôi cuốn người khác TIN làm theo • Một khi đã TIN, việc gì cũng có thể làm được và sẽ được ưu tiên làm • Với người nhận yêu cầu: đánh giá kỹ lưỡng yêu cầu, không vội vàng Say Yes, học cách "Say No" khi chưa đủ thông tin hoặc niềm tin Ai cũng nghĩ mình biết làm, nhưng không phải ai cũng làm đúng
  12. 5 days Họp PO (Product Owner) thứ 5, chỉ khoảng

    30p - 1h để chốt task đưa vào product backlog Daily Scrum meeting 4h chiều hàng ngày (PO & IT), 15 phút Sprint meeting sáng thứ 7: khoảng 2 tiếng, gồm 2 phần Retro và Sprint (Sprint Backlog) Tìm hiểu thêm: https://www.gocit.vn/bai-viet/scrum-cho-nguoi-moi-bat-dau-phan-1-tong-quan-ve-agile/ PhÁt triển phần mềm với mô hình Scrum Agile
  13. Mời bạn xem thêm clip Bí mật đằng sau 2000

    siêu thị Thế giới di động để có cái nhìn chi tiết hơn về công việc của thiết kế và IT. Xem các vị trí IT đang tuyển Một buổi Sprint meeting (click để xem video)
  14. Dùng để quản lý công việc vÀ tiến độ dự

    Án Team bán hàng (PTBH) Team Product Design (PD) Team IT - Tạo yêu cầu thiết kế / hỗ trợ dưới dạng một Task - Các Task này nằm trong Request backlog trong Project DMX PTBH - PO/PM review yêu cầu cần làm, phân loại và đẩy xuống cho Designer làm, hoặc PM tự làm - Xong cái nào thì đưa task đó vào trong mục Product Backlog - Thứ 7 họp Sprint, IT sẽ thống nhất nhặt các task nào từ Product Backlog qua Sprint Backlog
  15. Lý do chọn • Miễn phí • Thao tác nhanh,

    tiện, nhiều phím tắt • Giao diện kéo - thả trực quan, có 4 dạng xem tùy từng nhu cầu: List, Calendar, Timeline, Kanban board (tương tự Trello) • Sử dụng trong buổi họp Sprint, khi review công việc cũ và mới thấy rất nhanh và hiệu quả
  16. Quy trình thiết kế lúc trước... Viết mô tả hoặc

    vẽ tay (Optional) Wireframe App: Balsamiq Thiết kế App: Sketch hoặc PS Prototype, nhận feedback App: Marvel hoặc Invision Giao source cho IT: file PSD hoặc HTML hoặc app trung gian như Zeplin.io ... và bây giờ: chỉ cần app Figma Viết mô tả hoặc vẽ tay App Figma Link tải về
  17. Lý do chọn • Hỗ trợ cả Windows (Sketch chỉ

    hỗ trợ Mac) • Centralize Design files on the cloud: ko bị tình trạng mất file, nhân viên cũ nghỉ ko giữ lại được source • Tính năng Team Library: giúp build Design System, thống nhất style + UI/UX best practices trong cả team, đặc biệt có ích với các designer mới khi nhanh chóng nắm bắt đc các thiết kế cũ (Re-Usable Resource) • Gửi, phản hồi đánh giá về thiết kế dễ dàng. Designer nhận notify ngay trên công cụ thiết kế, ko cần qua một bên thứ 3 để xem. • Hand-off file source cho IT: design xong là đủ, ko cần làm gì cả. IT tự lên lấy source
  18. “You only need to test with 5 users” - Jakob

    Nielsen 80% usability problems can be found with 5 users https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
  19. Thiết kế demo với Sketch (Mac app) + invisionapp.com Focus

    group 1 -1 interview Hallway testing Dựng nhanh một wireframe hoặc thiết kế hoàn chỉnh (high fidelity prototype) và cho một số user dùng thử và bảo họ nói cảm nhận Hình thức mà Tùng ưa thích nhất là Hallway Testing (hỏi các câu nhanh, đơn giản) và 1-1 Interview. Riêng Focus group ít khi triển khai
  20. Khóa Skillshare miễn phí hướng dẫn bạn cách triển khai

    làm Usability testing đúng chuẩn https://www.skillshare.com/classes/Intro-to-UX-Fundamentals-of-Usability/538580770
  21. Làm sao để biết thiết kế tốt không? FAQ Làm

    thế nào để đo lường một sản phẩm có UX hiệu quả hay không?
  22. Khó để biết thiết kế có HIỆU QUẢ ngay từ

    đầu. Việc thiết kế cũng giống như việc Đưa yêu cầu, trước khi thiết kế đã phải xác định được Mục tiêu (vì sao làm) và Cách đo hiệu quả của thiết kế đó Đừng mất thời gian cho việc bạn và sếp/team cãi nhau cả tuần mà không đi đến việc chốt một phương án
  23. • Conversion rate - Quan trọng nhất • Tỉ lệ

    mua hàng: nhớ là tỉ lệ chứ ko phải số lượng đặt mua, vì số lượng biến thiên theo traffic, quảng cáo... • Tỉ lệ click nút CTA chính trong trang, tỉ lệ để lại thông tin liên lạc... • Engagement trên trang: • Time on site có tăng ko, Bounce rate có giảm không (hãy học cách sử dụng Google Analytics) • User có scroll down đến cuối trang không • User có sử dụng những tính năng (VD Bộ lọc), click vào những chỗ mà mình muốn họ click hay không Một số tiêu chí cÂn nhắc đo lường khi thiết kế: DATA BEATS EMOTION
  24. • Dùng sức mạnh tập thể để góp ý cho

    một thiết kế - "Pool Review". Đừng để thiết kế chỉ là câu chuyện 1-1 • "Cứ cho lên (web) đi" rồi đo lường hiệu quả bằng nhiều cách • Google Analytics • Crazyegg (Heatmap tracking) • A/B testing: version A vs. version B vs. version C.... Tạo ra một văn hóa Try fast, Fail fast, Learn fast
  25. Google Analytics là một công cụ "Best of the best"

    cho Product Manager và các bạn UI muốn learn UX. Hãy dành thời gian học cách đọc hiểu GA, bạn sẽ ngạc nhiên và thích thú với những gì mình biết.
  26. Tài khoản demo Google Analytics là tài khoản Google Analytics

    đầy đủ chức năng mà bất kỳ người dùng Google nào cũng đều có thể truy cập. Đó là cách tuyệt vời để xem xét dữ liệu doanh nghiệp thực tế và thử nghiệm với các tính năng Google Analytics. "Tôi là sinh viên, không có website, làm sao để học hỏi và xem dữ liệu Google Analytics của một trang TMĐT?" Xem tÀi khoản demo Google Analytics của Google. Click vÀo đÂy
  27. Bạn thấy hứng thú với những gì vừa được chia

    sẻ chứ? Làm thế nào để biến những điều vừa học trở thành trải nghiệm thực tế?
  28. Hãy tìm một công ty LÀM SẢN PHẨM, thay vì

    một công ty Outsource hay một Studio Công ty product & outsourcing: 3 điểm khác biệt Và quan trọng hơn cả cty, hãy đi tìm cho mình một MENTOR
  29. • Vì sao nên "lúa hóa" website bán hàng •

    7 chia sẻ về phát triển sp tại TGDD • Vén màn các thách thức khi phát triển sp TMĐT tại TGDD • UX Mobile E-Commerce, những điều chưa kể ở TGDD Một số nội dung đà chia sẻ (click để xem) • Amazing UX worskhop 1: Một số UX tips & tricks • Amazing UX workshop 2: How to Validate good UX • UX workshop for IT part 1: "Nhập môn" UI/UX tại TGDD • UX workshop for IT part 2: Thế nào là "Đẹp"
  30. “For me, trying to be a better designer means trying

    to be a better human being” The day I became a better designer was the day I started looking outside the design industry for inspiration. It was the day I started reading books about philosophy, psychology, art or science. Tobias Van Schneider - Spotify’s former Lead Product Designer Source: http://bit.ly/better-designer
  31. Chúng tôi LUÔN tìm kiếm • Các UI Designer trẻ,

    năng động • Các bạn trẻ "Can-do-attitude", UX mindset tốt, Data driven muốn theo đuổi nghề Product Manager • Các lập trình viên Web, app (React) • Các bạn trẻ máu lửa, có khả năng học hỏi nhanh cho các vị trí nhân viên Phát triển bán hàng online của các website Thương mại điện tử hàng đầu Việt Nam Gửi CV + Cover letter + Link Facebook về email [email protected]