Design

ถอดรหัส Design Workflow + แชร์ 4 Tools สุดเวิร์ก จากงาน Skooldio Live! x KBTG

ถอดรหัส Design Workflow + แชร์ 4 Tools สุดเวิร์ก จากงาน Skooldio Live! x KBTG | Skooldio Blog

เฉลยความลับวิธีทำงานให้ลื่นไหลของ Corporate ยักษ์ใหญ่ทีม KBTG และเทคนิคสร้างความเข้าใจให้ตรงกันโดย Startup ไฟแรงทีม Ko-fi กับบทความสรุปประเด็นที่น่าสนใจจากงาน Skooldio Live! x KBTG เมื่อวันที่ 24 มีนาคม 2020 เพื่อเรียนรู้การสร้าง Design Workflow ที่ดีว่าเป็นอย่างไร? โดย 2 ผู้เชี่ยวชาญ

  • คุณนน สรรพวิชญ์ ศิริผล Senior Designer, KBTG
  • คุณตั๊ง ธนนท์ วงษ์ประยูร Product Desginer ที่ Ko-fi สตาร์ทอัพ ไฟแรงจาก Cambridge, UK ที่ปัจจุบัน users แตะ 2 ล้านคนทั่วโลก

ทำ Design Workflow ให้ดี ควรเริ่มจากอะไร?

ต้องมี Empathy กับเพื่อนร่วมงาน เช่น ลองถามทีมอื่นๆ ว่ามีงานส่วนไหนบ้างที่เราจะช่วยแบ่งเบาภาระเขาได้มากขึ้น เพื่อสร้างมิตรภาพที่ดีไว้คอยช่วยเหลือกันในอนาคต 

นอกจากนี้ควรสร้าง Mindset ให้ทีมรู้สึกรัก User และรัก Product ของตัวเอง และอนุญาตให้ทุกคนเข้าถึงข้อมูลได้ ซึ่งวิธีวาง Design Workflow ต้องดูด้วยว่าทุกคนพร้อมที่จะทำ อย่าไป Force ให้ทีมทำโดยไม่สมัครใจ ต้องรู้จักการประนีประนอม


ปัจจัยสำคัญเมื่อเริ่มทำ Design Workflow

Measureable & Achevieable ต้องบอกได้ว่าจะวัดผลยังไง จะทำยังไงให้ Design Workflow สำเร็จ และจบงานในเวลาที่เหมาะสม ไม่ควรใช้เวลาเกิน 1-2 สัปดาห์ เช่น ลองเอาภาพคร่าวๆ ไปคุยกับ Dev ก่อน เพื่อมาต่อยอดเรื่อง Logic ต่างๆ ไม่ควรจมกับดีไซน์ตัวเองนานเกินไป หรือลองปรึกษาเพื่อขอมุมมองจากคนในทีมอื่นดู 

อีกปัจจัยสำคัญคือเราต้องรู้ว่าแต่ละคนในทีมถนัดเรื่องอะไรบ้าง ทำอะไรได้บ้าง หรือเขาสนใจเรื่องอะไรต่อไป เพราะเมื่อมีเวลาว่างเราจะได้จัดงานให้ถูกว่าจะให้เขาไปช่วยในงานส่วนไหนต่อได้อีก นอกจากนี้คนที่เป็นผู้นำควรรู้ว่า แต่ละทีมมีขั้นตอนทำงานยังไง แล้วเอามาสื่อสารให้ภายในทีมเข้าใจกันเยอะขึ้น


วิธี Convince ให้องค์กรมี Design Workflow

หัวหน้าควรรู้ตัวก่อนเลยว่า ถ้าไม่มี Design Workflow แล้ว เวลาไปคุยกับพาร์ทเนอร์จะเหนื่อยมาก เพราะต้องเล่านั่งเล่าเรื่องเดิมๆ ทุกครั้ง แต่ถ้ามี Design Workflow เราจะสะดวกมาก เช่น เวลา Onboard ดีไซน์เนอร์ใหม่เข้ามาในทีม สามารถคุยขอบเขตการทำงานได้ชัดเจนขึ้น 

แต่ถ้าหัวหน้ายังไม่ตื่นตัวกับเรื่องนี้จริงๆ เราควรผลักดัน หรือลองทำเองแล้วให้หัวหน้าช่วยดูอีกที 

อีกวิธีคือการ Collaborate กับทุกทีมให้เยอะที่สุด เช่น คุยกับทีม Business และพยายามชี้ให้เห็นถึงประโยชน์ในการทำ Design Workflow ว่าจะเวิร์คยังไง ช่วยได้แค่ไหน หรือเวลาคุยกับทีม Dev เอง เขาก็จะมีมุมมองคนละแบบ เราจะทำยังไงให้เข้าใจตรงกัน เช่น ต้องเอา  Data มาช่วยกันโยนไอเดีย เพื่อช่วยกันต่อยอดให้เกิดโปรเจคใหม่ๆ


ทำงานแบบ Remote ยังไงให้ราบรื่น

เคสของ KBTG จะเตรียม Process ต่างๆ ให้เรียบร้อย เช่น ทุกวันจันทร์ พุธ ศุกร์ ต้องมี Standup Meeting ทุก 10 โมงเช้า ด้วยการใช้ Zoom คุยกันว่าเมื่อวานทำอะไร วันนี้ทำอะไร เพื่อดูว่าติดขัดอะไร หรือต้องการความช่วยเหลืออะไรบ้าง และใช้แอป Discord  ไว้คุยเล่นกันบ้าง 

ส่วนฝั่ง Ko-fi จะเน้นการ Conference Call บ่อยๆ มีนัดไปเจอกันบ้าง เพื่อคุยเรื่องสัพเพเหระสบายๆ แต่สุดท้ายทุกคนต้องยึดมั่นในหลัก Northstar Metrics คืองานทุกชิ้นที่ทำออกมาต้องกลับไปตอบ Goal ของบริษัทได้ (ของ Ko-fi คือ Daily Active Creators)


ก่อนปล่อย Product ใหม่ มีขั้นตอนยังไงบ้าง

ถ้าเป็นโปรดักส์ใหม่ของ KBTG ต้องทำ User Research ก่อน เพื่อเช็คความถูกต้องของ Objective จาก Product Owner อีกที แต่ถ้าเป็น Feature ต้องเช็คขนาด Feature ก่อน ว่ามีความซับซ้อนขนาดไหน เสร็จแล้วก็ทำ UI เพื่อไป Validate กับ User ต่อไป

สำหรับ Ko-fi เริ่มจากดูข้อมูลที่ Submit เข้ามา เหมือนเป็น Survey เช่น ครั้งหนึ่งเคยอยาก Redesign Landing Page ใหม่ พอไปดูข้อมูลใน Survey นี้ ก็ไปเจอ Keyword ที่น่าสนใจ เช่น Fun, Friendly, Simple เลยดึงมาทำเป็น Visual หรือ Key Message เพื่อสื่อสารให้โดนใจ User ได้เป็นอย่างดี


Case study การใช้ Design Workflow แก้ปัญหาของ Ko-fi

แบรนด์เจอปัญหา Drop off ระหว่างทางถึง 40% ในขั้นตอนการลงทะเบียน จึงไป Research จนพบสาเหตุว่ามาจากหน้า Verify E-Mail ที่มีคน Drop off มากกว่าครึ่ง เนื่องจากคนต่างชาติเวลาเข้าเมลล์จะหลุดโฟกัสง่ายมาก มักจะเข้าไปสนใจอย่างอื่นก่อนที่จะ Verify E-Mail  สุดท้ายจึงแก้ปัญหาด้วย Web OTP เพื่อให้ User ยืนยันด้วย Device เดิม พร้อมระบุ Web OTP ลงไปใน Subject เมลเลย

ผลลัพธ์คืออัตรา Complete ในการลงทะเบียนเพิ่มขึ้น 36%


แนะนำ 4 Tools โดยกูรู Workflow

Zeroheight

ถอดรหัส Design Workflow + แชร์ 4 Tools สุดเวิร์ก จากงาน Skooldio Live! x KBTG | Skooldio Blog

การทำ Design System ของ KBTG หลังจากทำในไลบรารี่เสร็จ จะอัพเดตขึ้น Document Online ผ่าน Tool นี้ ข้อดีคือเชื่อมต่อกับ Sketch ได้เนียนมาก ทำใน Sketch เสร็จ กดอัปโหลดทีเดียวจะไปขึ้นที่ Zeroheight ที่เหลือเราแค่นั่งพิมพ์ใน Google Docs เพื่ออธิบายเพิ่มเติมว่าตัวนี้ใช้ในกรณีไหน เราก็จะได้ Document ของ Design System ที่สมบูรณ์แล้ว

Notion 

ถอดรหัส Design Workflow + แชร์ 4 Tools สุดเวิร์ก จากงาน Skooldio Live! x KBTG | Skooldio Blog

ทีม Ko-fi ใช้รวมข้อมูล Document ต่างๆ ซึ่งสามารถ Track Task Management ได้ และเซ็ต Objective ต่างๆ รวมถึง Track ได้ว่าคนไหนต้องมาตามงานยังไงบ้าง นอกจากนี้ยังเก็บ Asset เช่น E-Mail,  Banner, Header และอื่นๆ เพื่อเอาไว้ใช้ทำงานต่อได้อีกด้วย

Figma 

ถอดรหัส Design Workflow + แชร์ 4 Tools สุดเวิร์ก จากงาน Skooldio Live! x KBTG | Skooldio Blog

ไว้แชร์ไฟล์และ Asset ต่างๆ เช่น แชร์กับทีม Dev ซึ่งจะสามารถเข้ามาดู Flow คร่าวๆ ได้ หรือดึง Asset บางตัวไปใช้ได้

Donut  

ถอดรหัส Design Workflow + แชร์ 4 Tools สุดเวิร์ก จากงาน Skooldio Live! x KBTG | Skooldio Blog

เครื่องมือกระชับมิตร สร้างความสัมพันธ์ของคนในทีมให้ดีขึ้น โดยแอปจะจับคู่คนในบริษัทให้ไปกินข้าวและแฮงค์เอาท์กัน ซึ่งระบบจะหมุนไปจับคู่ได้ครบทุกคน ทุกแผนก


สำหรับใครที่ยังไม่ได้ฟัง Live แบบเต็ม สามารถฟังได้ที่ www.skooldio.com/courses/design-workflow-meetup

ถอดรหัส Design Workflow + แชร์ 4 Tools สุดเวิร์ก จากงาน Skooldio Live! x KBTG | Skooldio Blog

You may also like

UX Writing คืออะไร
Design

ไขข้อข้องใจ! UX Writing คืออะไร ทำไมสำคัญกับ Product พร้อมตัวอย่างน่าสนใจ

UX Writing คืออะไร? ทำไมต้องรู้จักคำนี้ด้วยนะ? คุณอาจจะเคยผ่านการใช้งาน Application มากหน้าหลายตาในแต่ละวัน ซึ่งแอปฯ บางตัวก็ทำให้คุณรู้สึกดีตลอดการใช้งาน เข้าแล้วไม่อยากออก เข้าแล้วอยากเข้ามาใช้บ่อยๆ ทุกวัน แต่กลับกันกับแอปฯ บางตัวที่ทำให้คุณหงุดหงิดใจตลอดการใช้งาน อยากออกแทบตาย ...
Web Design Font Pairing
Design

เทคนิคการจับคู่ฟอนต์ไม่ให้เละ ฉบับ Web Designer มือโปร

หนึ่งในปัญหาใหญ่ของคนเริ่มต้นออกแบบเว็บ คือเรื่องของการเลือกใช้ฟอนต์ที่ดูเหมือนง่ายแต่ยาก ยิ่งเป็นเรื่องของการจับคู่ฟอนต์ที่ต่างกันให้มาอยู่ด้วยกันอย่างลงตัวสวยงามยิ่งยากเข้าไปใหญ่ วันนี้เราเลยนำรวมเทคนิคดีๆ ในการจับคู่ฟอนต์ฉบับ Web Designer มือโปรมาเล่าสู่กันฟัง 1.ใช้ฟอนต์ที่ให้ระดับอารมณ์แตกต่างกัน หน้าตาของฟอนต์มีผลต่ออารมณ์ความรู้สึกของคนอ่าน การลองจับคู่ฟอนต์ที่ให้อารมณ์แตกต่างกันจะช่วยให้หน้าเว็บดูมีลูกเล่น น่าสนใจ ไม่ราบเรียบจนเกินไป ก่อนที่จะเลือกจับคู่ฟอนต์ ต้องพิจารณาก่อนว่าบุคลิกเว็บที่เรากำลังออกแบบเป็นอย่างไร ...

More in:Design

ui-design-Cover Design

ถอดองค์ประกอบการออกแบบ UI ที่ดี ด้วยหลัก ‘Component-based Design’

สิ่งหนึ่งที่สำคัญมากในการออกแบบ UI ที่นักออกแบบทุกคนควรรู้ นั่นคือเรื่องของ ‘Component-based Design’ คือการมองแยกส่วนประกอบต่างๆ ที่ร่วมกันเป็นหน้าเว็บไซต์หรือแอปฯ ที่เราออกแบบว่ามีส่วนประกอบมาจากอะไรบ้าง หากใครผ่านการเรียนการออกแบบมาก่อน อาจจะคุ้นเคยกับหลักองค์ประกอบการวาดรูปที่เริ่มตั้งแต่จุด จุดต่อกันกลายเป็นเส้น จากเส้นต่อกันเป็นระนาบ และระนาบประกบกันเป็นรูปทรง เช่นเดียวกันกับการออกแบบ ...
psychology ux ui blog cover Design

หลักจิตวิทยากับการช่วยออกแบบ UX UI ให้ชีวิต User ง่ายขึ้น

ใครที่กำลังทำงานหรือศึกษาเรื่อง UX UI น่าจะเคยผ่านตาเรื่องของหลักจิตวิทยาการออกแบบที่นำมาใช้กับ UX UI กันบ้างแล้ว แต่เอาเข้าจริงแล้วในฐานะคนที่เป็นหรืออยากเป็น UX/UI Designer ควรมีความรู้พื้นฐานด้านจิตวิทยามากน้อยแค่ไหน โดยหลักการแล้วหลักจิตวิทยาจะช่วยให้ User ใช้งานเว็บหรือแอปฯ ที่เราออกแบบได้อย่างมีประสบการณ์ที่ดีได้อย่างไร ...
Business

ทำความรู้จัก Design Thinking – สกิลมาแรงที่บริษัทชั้นนำทั่วโลกกำลังมองหา

Design Thinking ไม่ใช่แค่ชื่อวิชาในคลาสเรียนของเด็กออกแบบ แต่เป็นสกิลที่กำลังเป็นที่ต้องการของบริษัทชั้นนำในหลายประเทศทั่วโลก เช่น Apple, Google , Microsoft, Tesla หรือ Startup ไทยอย่าง Bitkub อีกด้วย ...
Business

วิธีสร้าง Pitch แบบโอมากาเสะ – ด้วย Storytelling Framework

การเล่าเรื่องที่ดี อย่าเป็นร้านซูชิบุฟเฟต์ 199 บาท ที่อิ่มจุก ๆ จนคนเอียนไม่อยากกินอีก แต่จงเล่าเรื่องแบบเชฟซูชิโอมากาเสะ ที่พิถีพิถันและปรับให้เหมาะสำหรับผู้ทานจริง ๆ จนคนได้ลิ้มรสแล้วติดใจ รู้สึกอยากกินต่อเรื่อย ๆ นี่คือคำแนะนำเพื่อให้คุณสามารถ Pitch ...

Comments are closed.