Coach,Design,Requirement Gathering,Visualization

Design Sharing ด้วย Design Studio

สองวันที่ผ่านมาได้มีโอกาสได้ดู และมีส่วนร่วมในการทำ Product Discovery แบบจริง ๆ จัง ๆ ที่ Office เนื่องจากเริ่มมีแนวคิดที่จะเอาวิธีเก็บ Requirement วิธีคิดวิเคราะห์ Requirement รวมถึงวิธี Design ในแบบที่ทุกคนที่เกี่ยวข้องเข้ามามีส่วนร่วมกัน มาใช้ในการทำ Product จริง ๆ สักตัว ในส่วนของ Product Discovery ไว้จะมาสรุปให้ฟังอีกครั้งนึง แต่เนื่องจากวันนี้ (วันที่ 2 ของ Workshop Product Discovery) มี Session นึงที่ผมสนใจมาก เป็น Session ในส่วนของการทำ Design ร่วมกันระหว่างผู้ใช้งาน กับทีมพัฒนา ซึ่งปกติทีมที่ผมเคยทำมาก็พยายามทำเรื่องนี้ร่วมกันอยู่ แต่ส่วนมากถ้าไม่ทีมพัฒนาสร้างหน้าจอตัวอย่างมาให้ลูกค้าดู ก็จะเป็นลูกค้าออกแบบหน้าจอมาให้ทีมพัฒนาต้องทำตาม (ซึ่งเข้าใจว่าเป็นวิธีการที่ใช้กันอยู่ปกติ) ไม่ว่าจะเริ่มจากฝั่งไหนก็จบด้วยการ Reviews ร่วมกัน ซึ่งส่วนตัวมันก็สามารถตอบปัญหาได้ระดับนึง เพียงแต่ก็ยังมีบางส่วนที่ผลลัพท์ของการทำงานแบบสร้างจากฝั่งใดฝั่งหนึ่งเป็นหลัก ออกมาไม่ดีนัก พอได้เห็นวิธีการนี้จึงรู้สึกว่าน่าเอาไปลองทำดูบ้าง โค้ชหนุ่มซึ่งพาทำกิจกรรมนี้ เรียกกิจกรรมนี้ว่า Design Studio

OLYMPUS DIGITAL CAMERA

เกริ่น

เพื่อให้เข้าใจ Context ของการทำ Workshop การ Design ร่วมกันครั้งนี้ก่อน ขออนุญาตเล่าที่มาที่ไปก่อนนะครับ การทำ Workshop ครั้งนี้เริ่มจากการที่ ทีมพัฒนาเป็นทีมใหม่ ซึ่งไม่เคยทำงานร่วมกันอย่างจริงจังมาก่อน (ถูก Form Team ขึ้นมาเพื่อเตรียมรับ Project นี้โดยเฉพาะ) Tools และภาษาที่จะเอามาใช้ในการพัฒนาก็เป็น Tools ใหม่ ไม่เคยมีใครใน Office ได้ลองใช้งานแบบ Full Option มาก่อน จึงได้มีการคุยกันเพื่อให้ทีมพัฒนาได้เข้าไปลองเรียนรู้และศึกษาเครื่องมือดังกล่าวมาเป็นระยะเวลาสั้น ๆ และจากการที่ทีมพัฒนาได้เริ่มเข้าไปศึกษาเครื่องมือดังกล่าวมา จึงเริ่มเห็นถึงวิธีการทำงานกับ Tools ความสามารถต่าง ๆ ที่ Tools มีให้รวมไปถึง ข้อจำกัดต่าง ๆ ที่ยังอาจจะต้องหาวิธีเพื่อให้สามารถใช้ได้กับความต้องการ ในส่วนของทีมที่จะเอาระบบไปใช้งาน ก็เป็นทีมที่ไม่เคยทำงานร่วมกับทีมพัฒนาทีมนี้มาก่อน ไม่เคยใช้ระบบที่สร้างขึ้นมาบน Tools นี้ด้วย การทำ Workshop นี้จึงช่วยให้ลูกค้าและผู้พัฒนาระบบมองเห็นภาพเดียวกัน ก่อนที่จะเริ่มทำงานจริง ๆ

Split กลุ่มเพื่อทำ Design

Workshop : Design Studio ในแบบของพี่หนุ่มเริ่มจากการที่ทีมพัฒนา และทีมลูกค้ามีการพูดคุย Flow การทำงานมาได้ระดับนึงแล้ว มาถึงจุดที่จะต้อง Design ภาพหน้าจอการทำงานร่วมกัน เพื่อให้รู้ว่าความต้องการที่แท้จริงในเชิงที่ลึกลงกว่า Behavior ที่เป็น Flow การทำเริ่มจากแบ่งกลุ่มผู้เข้า Workshop ออกเป็น 2 กลุ่ม โดยในลุ่มแรกเป็นกลุ่มที่ประกอบด้วยทีมพัฒนา และกลุ่มที่ 2 เป็นกลุ่มผู้ใช้งาน โดยให้แต่ละกลุ่มเอา Flow การทำงานเดียวกัน มาออกแบบว่าตาม Behavior แล้วลูกค้าเข้ามาจะเจออะไร ต้องทำอะไร กรอกอะไร ทำ Action ที่ไหนแล้วจะเกิดอะไร โดยการวาดลงในกระดาษ A4 ธรรมดา ซึ่งสิ่งที่จะได้ออกมาในขั้นตอนนี้คือ Design Flow ที่เป็น Behavior การทำงานของลูกค้า ที่ออกแบบโดยทีมพัฒนา และที่ออกแบบโดยทีมลูกค้าเอง

Visualizing & Sharing Idea

หลังจากแต่ละกลุ่ม Design Flow การทำงาน หน้าจอ รวมถึง Action ต่าง ๆ ที่คิดว่าจะเกิดขึ้นกับ Flow นี้แล้ว ให้แต่ละทีมเอา Flow การทำงาน และหน้าจอที่วาดออกมา เอาไปติดที่ผนังคนละฝั่ง โดยแต่ละฝั่ง แต่ละทีมเรียงตามลำดับของเหตุการณ์ ต่าง ๆ ที่จะเกิดขึ้นในการเข้ามาใช้งานระบบ ในขั้นตอนนี้อย่าลืมกำหนด Timebox ของการทำเพื่อให้ทุก ๆ คน ได้ Focus กับงานที่จะต้องทำเป็น Priority แรก ๆ ก่อนเสมอ

Check UX โดยการสังเกต

เมื่อทั้ง 2 กลุ่มเอา Flow การทำงานและหน้าจอ Visualize ขึ้นไปยังฝนังเรียบร้อยแล้ว ก็เป็นตาที่แต่ละทีมจะต้องเยี่ยมชม ผลงานการ Design ของอีกทีมนึง โดยจุดนี้เรากำหนด Rule ของการ Reviews ให้ชัด ๆ เพื่อให้เข้าใจตรงกันดังนี้

  • แต่ละทีมจะสลับกัน Review Design ของอีกฝั่ง โดยกำหนดเป็นทีมเหย้า ทีมเยือน
  • ห้าม ทีมเหย้าและทีมเยือน อธิบายวิธีการใช้งานที่เกิดจากการ Design ของตน รวมถึงห้ามถามอีกฝั่งระหว่างการ Reviews Design
  • ทีมเยือนทำหน้าที่ Reviews และให้ Comment ด้วย Post-It 3 สี (จำสีไม่ได้แล้ว แต่ประมาณนี้แหละ) ดังนี้
    1. สีเขียว หมายถึงส่วนที่เราชอบ (Wow) ในแนวคิด หรือ Design ในส่วนนี้
    2. สีเหลือง หมายถึงส่วนที่ OK แต่อยากให้มีการปรับปรุงบ้าง ตามแนวทางบน Post-It
    3. สีแดง(ชมพู) หมายถึงส่วนที่ไม่ชอบเลย หรือไม่เข้าใจว่ามีส่วนนี้ไว้เพื่ออะไร
  • ทีมเหย้าทำหน้าที่สังเกตว่าทีมเยือน สามารถจำลองตัวเองเพื่อทำงานใน Flow การทำงานที่ออกแบบไว้ได้ไหม สังเกตดูว่าทีมเยือน Focus หรือให้ความสำคัญกับส่วนไหน พูดคุยกันในส่วนไหน รวมถึงมีคำถามหรือข้อสงสัยที่ถามกันเองใน Design ส่วนไหน

ซึ่งการที่ห้ามไม่ให้ 2 Team ได้มีโอกาสอธิบาย ก็เพื่อตรวจสอบว่า Design ที่ออกมา เข้าใจได้ง่าย สามารถนำไปใช้ได้โดยไม่ต้องทำความเข้าใจมันใหม่ใช่หรือไม่ ส่วนทีมเหย้าก็ให้สังเกตว่าอีกทีมให้ความสำคัญกับส่วนไหนเป็นพิเศษเพื่อเอา Feedback มาปรับปรุงการ Design ของเรา

Merge Design

หลังจากใช้เวลาจากการ Reviews Design ของทั้ง 2 ทีม ให้ทีมได้ Feedback Design ของกันและกัน สิ่งที่มักจะได้เป็น Feedback ที่ออกมาก็จะเป็น Design อันนี้น่าจะมีแบบนี้นะ Design ตรงนี้กดแล้วควรจะได้อะไร ซึ่งอาจจะมาจากฝั่งลูกค้า ส่วนถ้าจะมาจากฝั่งทีมพัฒนา ก็จะเป็นแนวดู Design ว่าสามารถทำได้ไหม มีข้อจำกัดอะไรไหม หลังจากเรา Reviews เราก็ทำการ Merge Design จากทั้ง 2 แหล่งให้เป็นภาพเดียวกัน พอถึงส่วนนี้ ทั้ง 2 ทีมก็จะเริ่มเอา Design ที่ตัวเองทำไว้ มาปรับเพื่อให้เข้ากับ Comment ที่ได้มา เกิดการทำงานร่วมกันระหว่างลูกค้าและทีมพัฒนาอย่างแท้จริง  โดยในส่วนของทำ Prototype นี้เพื่อให้ต้นทุนในการทำไม่เยอะมาก รวมถึงง่ายต่อการปรับเปลี่ยน เราจึงเขียน Design ทั้งหมดอยู่บนกระดาษ ซึ่งสามารถลบ เขียนใหม่ ตัดแปะส่วนต่าง ๆ ของ Design ที่เกิดจากทั้ง 2 ด้านแล้วเอามา Merge รวมเป็น Design ใหม่ ที่เกิดจากการร่วมมือของทีมลูกค้าและทีมพัฒนา ทำให้เกิดความเข้าใจร่วมกัน โดยวิธีการทำ Prototype แบบ Low Cost นี้เราเรียกว่า Paper Prototype

Feedback

หลังจากลองดูการรัน Workshop : Design Studio โดยพี่หนุ่มแล้ว Feedback ที่ได้คือ ทางฝั่งทีมพัฒนาสามารถเข้าใจ วิธีการทำงานของลูกค้ามากยิ่งขึ้น เข้าใจว่าแต่ละ Component บนหน้าจอเกิดขึ้นเพราะอะไร เขาจะใช้ยังไง รวมไปถึงมันมีความสำคัญกับผู้ใช้มาเพียงไร ทางฝั่งลูกค้าก็เเข้าใจวิธีการคิดแบบทีมพัฒนา เข้าใจข้อจำกัด และเงื่อนไขต่าง ๆ  เพื่อ Balanced ระหว่างความสะดวกที่จะได้ กับเงินลงทุนที่อาจจะเสียไปจากการทำ Feature เหล่านั้น โดยส่วนตัวผมคิดว่าการทำงานร่วมกันระหว่างลูกค้ากับทีมพัฒนาเป็นส่วนสำคัญมากที่จะทำให้การสร้าง Product นั้นออกสู่ตลาดได้อย่างถูกต้อง และถูกนำไปใช้งาน สำหรับคนที่จะลองนำ Technique นี้ไปลองใช้ ให้ระลึกเสมอว่า Workshop ที่เราทำนี้ใช้ต้นทุนสูงอยู่พอสมควร (เอาทุกคนที่เกี่ยวข้องมานั่งทำ Workshop ร่วมกัน) แปลว่าไม่จำเป็นต้องใช้กับทุก ๆ Feature อาจจะเลือกใช้เฉพาะ กับ Feature แรก ๆ ในช่วงที่ ทีมทั้งสองยังไม่สามารถเข้าใจ และทำงานร่วมกันได้อย่างดี

Advertisements

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s