Design System ฉบับสามัญชน!
จาก Session How to Build a Design System on a Budget ของคุณมาร์ช, Marach Treekunprapa at NOCNOC
โดยคุณมาร์ชได้เล่าว่าส่วนมากเราชอบไปฟังสิ่งที่เป็น Best practice หรือ Success case มา แต่ใน Session นี้คุณจะได้เห็นความพยายามในการทำ Design System ท่ามกลางทรัพยากรที่จำกัด แบบที่ไม่มีทีม design system และไม่ได้มีเวลาเยอะ
5 สิ่งที่เรา “ทำ”
00 รู้จักมันก่อนว่า Design System คืออะไร
- ของ Designer : Figma, Design guideline etc.
- ของ Ux Writing : Content guideline etc.
- ของ Dev : Code library etc.
ซึ่งทั้งหมดนี้มันเยอะและใหญ่มาก ถ้าเราอยากจะทำสิ่งนี้เป็น Design System เราต้องใช้คนทุก Role มาช่วยกันทำ เพื่อให้ Design System มันสมบูรณ์
“อย่างแรกเลยเราจะทำทั้งหมดนี้ไม่ได้ แล้วเราจะทำอะไรได้บ้าง คุณมาร์ชกล่าว”
01 ทำใจ
คือสิ่งที่เราจะทำเนี่ยมันใหญ่กว่าแรง ให้เราลองมองว่าอยากแก้ปัญหาอะไรกันแน่ และเลือกทำสิ่งที่มันสอดคล้องกับปัญหา
ยกตัวอย่างเช่น
“ปัญหา : ทีมขยาย กลัวออกแบบไม่ตรงกัน”
“แก้ปัญหาด้วย : Figma library”
เลือกทำอันที่แก้ปัญหาเรา
02 ทำเท่าที่ไหว
คือต้องสำรวจตัวเองก่อนว่าเรามีแรงในการทำแค่ไหน?
- เริ่มตัวเอง : ว่าเรามีทักษะ และหน้าที่อะไร
- คนรอบข้าง : เพื่อนร่วมงาน สามารถซัพพอร์ตได้ไหม และเขาอินกับเราแค่ไหน
- องค์กร : มี Direction หรือ KPI ที่ชัดเจนไหม
“แรงเราไม่เท่ากัน ยิ่งเรามีแรงสนับสนุนเยอะยิ่งมีพลังเยอะขึ้นเรื่อยๆ”
ฝัน ต้องสัมพันธ์กับแรง
ถ้าปัญหาใหญ่ >หาแรงเพิ่มขึ้น
ถ้าหาแรงไม่ได้ > ลดขนาดของปัญหาลง
03 ทำแบบบ้านๆ
คือเลือกจากการศึกษา Best practice ที่เขา Research, Testing ให้ลองนำของเหล่านี้มาทำ Secondary research ต่อจากเขา และนำมาปรับใช้ทำสิ่งที่เหมาะกับบริบทของเรา
เริ่มจากทำ Foundation ก่อน
- Figma library : เริ่มทำ Element ต่างๆ เช่น Typography, Color, Spacing, Shadow, Icon เพื่อเอาไปสร้าง Component เช่น Button, Form control ต่างๆ
- สีแบบ Semantic : การตั้งชื่อสีให้สื่อสาร ทำให้คนอื่นค้นหา และใช้งานได้ง่าย
- ชื่อ Icon : ตั้งให้สื่อด้วยรูปร่าง และอธิบายมันด้วย
- Code library : เริ่มจากทำ File font , File Color , Icons เพื่อให้ทีม Dev สามารถเอาไปใช้งานได้เลย
ถ้าเราเริ่มทำตั้งแต่ Foundation เพื่อให้คนอื่นเอาไปใช้งานต่อได้เอง ในการสร้าง Component หรือ Design อื่นๆ จากของที่เราตั้งต้นไว้ หากเราเริ่มจากการทำ Component ก่อน อาจจะให้ของที่เราทำไว้นั้นไม่พอสำหรับคนอื่น ซึ่งเราต้องลงแรงไปช่วยซับพอร์ตเขาอีก
“ทำสิ่งที่เราใช้บ่อยๆ และลองทำขึ้นมาเอง เพื่อให้เกิดความเข้าใจ”
ไม่ต้องตามทำ Best practices แต่ก็ต้องศึกษา และสร้างแบบที่เหมาะกับเรา ใช้มันบ่อยๆ จะได้คุ้มๆ
04 ทำให้คนใช้
คือเราต้องทำและรีบเอาไปให้คนใช้ เพื่อจะเอา Feedback จะได้รู้ว่ามันดีหรือไม่ดี เพื่อจะได้รู้ว่าควรนำมาปรับใช้ในทิศทางไหน ไม่ใช่รอให้เขาไปใช้เอง
“ถ้าหากทำแล้วคนไม่ใช้ทำไง ให้เราลองเดโม่ให้ดู หรือให้เขาลองเล่น หรือไปสอนเขาทำก่อน”
เคล็ดลับ : อาจจะลองชวนคุย ถามไถ่ว่าใช้อันนั้นแล้วเป็นไงบ้าง เจอปัญหาอะไรไหมและค่อยสังเกตุว่าทีมใช้มันจริงๆ ไหม เพื่อเช็คว่าสิ่งที่เขาพูดกับสิ่งที่ทำนั้นตรงกันหรือเปล่า
รับ Feedback และนำกลับมาทำให้มันสะดวกกับผู้ใช้ และบันทึกไว้เป็นหลักฐาน
05 ทำให้โลกรู้
เมื่อเราทำให้คนใช้แล้ว สิ่งต่อไปคือเราอยากขยายขอบเขตงาน เราต้องทำยังไงบ้าง แล้วเราจะเล่ายังไงคนเหล่านั้นสนใจ
- เนื้อหา : เราอยากจะบอกความคืบหน้าถึงไหนแล้ว, มีฟีคแบคยังไง, ขั้นตอนต่อไปจะทำอะไร, ความต้องการของเราเป็นแบบไหน
- ช่องทาง : หาช่องทางการพูดคุย เพื่อจะสื่อสาร เช่น คุยเล่น, นัดประชุมไหม
- คู่สนธนา : อาจจะเป็นหัวหน้า หรือเพื่อนร่วมงานก็ได้
เคล็ดลับ : อาจจะลองเล่าในช่วง Design weekly update ว่าปัจจุบันเราทำ component นั้นอยู่ มี Feedback ว่าตัวหนังสืออ่านยาก เราจะเอามาปรับ Font ใหม่ อีกสองวันอยากให้ช่วยลองหน่อย เพื่อแสดงให้เห็น progress ว่าเราทำอะไรอยู่แล้วคนอื่นๆ ก็จะรู้และเห็นสิ่งนี้ไปด้วยกัน
เมื่อมีคนได้รับรู้ เราจะได้มีแรงเพิ่ม และเมื่อนั้นเราจะได้พัฒนา Design system ของเราต่อไปเรื่อยๆ
สรุปจบ : คือ
“ทำวนไป”
