Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

40 ngàn nhân viên

Slide 5

Slide 5 text

CÁc bộ phận liên quan đến 8ương mại điện tử tại TGDD Hỗ trợ

Slide 6

Slide 6 text

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%

Slide 7

Slide 7 text

HÃY NÓI VỀ UX

Slide 8

Slide 8 text

• 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Ì

Slide 9

Slide 9 text

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?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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"

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Đư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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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)

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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ả

Slide 19

Slide 19 text

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ề

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

REVIEW UI/UX

Slide 22

Slide 22 text

“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/

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Đo mức độ hoÀn thÀnh task

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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?

Slide 27

Slide 27 text

Làm sao để biết thiết kế tốt hiệu quả không?

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

• 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

Slide 30

Slide 30 text

• 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

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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ế?

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

You know this band? Google search for "Paypal Mafia". Pick a mentor

Slide 36

Slide 36 text

• 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"

Slide 37

Slide 37 text

“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

Slide 38

Slide 38 text

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]

Slide 39

Slide 39 text

Have a break. Ask a question