How to build a Design System on a budget — Design system ฉบับสามัญชน!
สำหรับบทความนี้จะเป็นสรุปใน Session : How to build a design system on a budget ทั้งนี้คุณมาร์ชได้มาเล่าถึงความพยายามในการทำ Design Systems ที่มีข้อจำกัดในด้านงบประมาณให้สามารถเกิดขึ้นได้ โดยที่ไม่มีทีม Design System 🔥🔥
เรามาเริ่มกันที่ Design system คืออะไร?
Design system คือของที่เราใช้ซ้ำ สามารถนำกลับมาใช้ใหม่ได้เรื่อยๆ เลยมาทำเก็บเป็นชุดเดียวกัน ยกตัวอย่างเช่น
- หากเป็น Designer ก็จะมี Figma Library, Design Principle, Design Tokens
- UX Writer ก็จะมี Content Library, Voice & Tone
- ในส่วนของทาง Dev ก็จะมี Code Library, Documentation
จะเห็นว่าของที่มีนั้นเยอะมาก หากจะทำทั้งหมดก็คงจะไม่ไหว หากอยากทำให้ Design System สมบูรณ์และใช้งานได้จริงก็ต้องอาศัยความร่วมมือจากหลากหลาย Role ที่กล่าวมา คุณมาร์ชจึงได้แนะนำ 5 สิ่งในการสร้าง Design system ฉบับสามัญชนขึ้นมา
1. ทำใจ
ตัดสิ่งที่(ยัง)ไม่ควรทำทิ้ง
เราต้องทำใจว่าเราสร้างทั้งหมดไม่ได้ เลือกทำอันที่แก้ปัญหาให้เราก่อน ตัดสิ่งที่ไม่คิดว่าจะทำตอนนี้ทิ้งไปก่อน พอถึงเวลาที่ควรเราจะรู้เองว่าสิ่งที่เราได้ตัดออกไปควรจะนำกลับมาทำในช่วงเวลาไหน
กล้าแก้ปัญหาที่ท้าทาย
ถ้าเราเจอปัญหาจริงๆแล้วถึงปัญหาจะยาก แต่ลองหาวิธีแก้ปัญหาไปก่อน อย่ากลัวที่จะแก้ปัญหาที่ดูยาก
ทำใจว่าเราสร้างหมกไม่ได้ เลือกทำอันที่แก้ปัญหาเรา เรารู้ปัญหาของเราดีที่สุด ไม่ต้องทำตามคนอื่น อย่ากลัวที่จะแก้ปัญหาที่ดูยาก
2.ทำเท่าที่ทำไหว
เราอาจจะเคยเห็นว่าหลากหลายที่ทำในรูปแบบที่ใหญ่โต สามารถแก้ไขได้ทุกอย่างและเราเองก็อยากได้แบบนั้นแต่ก็ไม่สามารถทำสำเร็จได้สักที ให้ลองย้อนกลับมามองว่าตัวเราเนี่ยมีแรงมากแค่ไหน แรงในที่นี้หมายถึงมวลรวม แรงสนับสนุนๆต่างๆ จากหลายๆส่วน
- ส่วนแรกคือดูจากตัวเราเองว่าเรามีความรู้ ทักษะและความสามารถแค่ไหน
- แรงจากคนรอบข้าง เช่นหัวหน้า เพื่อนร่วมงาน ทำงานคนเดียวสู้มีคนรอบข้างช่วยทำไม่ได้เพราะสิ่งที่เราขาดไม่แน่ว่าคนรอบข้างอาจจะช่วยซัพพอร์ตเรามากขึ้นได้
- แรงจากบริษัท เช่น ต้องดูว่าบริษัทให้ความสำคัญกับ Design system มากแค่ไหน
แรงทั้งหมดที่พูดมาข้างต้นจะสื่อว่า แรงที่เรามีมันมีหลายเลเวล แต่ละแรงไม่เท่ากัน ซึ่งงาน Design system เป็นงานที่ต้องการแรงจากเพื่อนร่วมทีม หากสุดท้ายแล้วแรงเราไม่ไหวจริงๆลองขอแรงเพิ่ม ถ้าอยากลองแก้ปัญหาที่เกิดขึ้นจริงๆ
“ ทำเท่าที่ไหว ฝันต้องสัมพันธ์กับแรง ถ้าปัญหาใหญ่ ให้หาแรงเพิ่ม ถ้าแรงไม่พอให้ลองลดขนาดของปัญหา ”
3.ทำแบบบ้านๆ
“Good enough is fine — Rework (Jason Friedmand & DHH)”
ลองจินตนาการว่าถ้าเราอยากรู้ว่านกบินแล้วมองเห็นโลกเป็นยังไง ถ้าเราอยากรู้ เราอาจจะลองขึ้นเครื่องบิน ขึ้นลิฟต์แก้วที่สูงๆ ขึ้นไปอยู่ตึกสูง ตามความจริงถ้าหากเรามีเงิน เราจะทำอะไรก็ได้ แต่ในทาง Design system เงินก็คือแรง ถ้ามีแรงเราจะทำอันไหนก็ได้ แต่ถ้าไม่มีแรง เราอาจจะต้องปรับลงมาหน่อย
“ศึกษา best practices + ทำที่เหมาะกับเรา”
ในภาพรวมของ Design system มีมาเพื่อแก้ปัญหา ทุกบริษัทที่ทำก็อยากให้ทำงานได้เร็วและมีประสิทธิภาพ ถ้าเราสามารถเรียนรู้จากคนที่ทำมาก่อนได้จะมีประโยชน์กับเรามาก คนที่ทำมาก่อนอาจจะมีแรงเยอะ แต่ถ้าเราไม่ได้แรงเยอะ เราก็เรียนรู้จากสิ่งที่เขาทำไว้แล้วมาปรับให้เหมาะกับเรา
ตัวอย่างสิ่งที่ได้ทำแล้วคิดว่าเวิร์ค
การทำ Foundation (ในมุมของ Designer)
การทำ Foundation ในมุมของ Design system ถ้าพื้นฐานแน่น คนที่เอาไปใช้ หรือเอาไปทำต่อจะสามารถเอาไปใช้ได้เลย ในทางกลับกัน ถ้าเราเริ่มทำที่ Components ก่อนโดยที่ Foundation ไม่แน่น เราจะต้องไปคอยซัพพอร์ตเขาอีก เพราะมันจะมี Components ที่ขาดอยู่
ตั้งชื่อสีแบบ Semantic
แทนที่จะเอาValueสีมาใช้เลย ก็ให้เราตั้งชื่อสีและสเกลขึ้นมาว่ามันจะมีอะไรบ้าง หลังจากนั้นลองมาตั้งชื่อให้เป็น Semantic ก็คือการใส่ความหมายให้สี เช่น NocNoc — 100 อาจจะไม่ได้มีความหมายอะไร แต่ลองมาตั้งเป็น primary-fg- low ก็คือเป็นสีหลักหรือสีแบรนด์ของเรา fg ก็คือ foreground ก็คือให้ใช้กับสิ่งที่อยู่ข้างหน้า ตัวหนังสือ ไอคอน เป็นต้น
การตั้งชื่อสีแบบนี้ ดีตรงที่เวลาDesignerจะเลือกสีไปใช้ ก็สามารถพิมพ์หาชื่อสีในLibratyไปใช้ได้เลย
ตั้งชื่อ Icon ด้วยรูปร่างพร้อมคำอธิบาย
โดยจะตั้งชื่อตามลักษณะและส่วนประกอบที่เห็นได้ชัด เวลาค้นหาIconก็สามารถพิมพ์คำที่เรานึกออกในช่องค้นหาได้เลย และใส่คำอธิบายว่าเหมาะสำหรับการนำไปใช้ในสถานการณ์แบบไหนบ้าง
การทำ Foundation (ในมุมของ Dev)
ในมุมองของ Dev จะมีการซับซ้อนมากกว่า Designer หากมี Code library ที่เป็น Foundation ก่อนก็จะสะดวกสามารถดึงไปใช้งานได้เลย และเมื่อไรที่มี Projext ขึ้นมาใหม่ก็สามารถดึงไปใช้ได้ทันที
นอกจากนี้สิ่งที่คุณมาร์ชแนะนำคืออยากให้ลองสร้างเองเพื่อความเข้าใจ การไปเอาของคนอื่นมาใช้ อาจจะมี Template หรือ Library ให้ใช้ แต่สิ่งที่นำมาใช้จะสามารถอยู่ให้เราใช้ได้เรื่อยๆไหม ถ้ามันไม่อยู่แล้วเราจะทำยังไง เราเข้าใจในสิ่งที่เราดึงมาใช้มากน้อยแค่ไหน เราสามารถปรับมันได้มากน้อยแค่ไหน การทำเองเลยเป็นสิ่งที่อาจจะดีกว่าถ้าเราทำไหว
“ไม่ตาม Best practices ศึกษา Best practices เพื่อเรียนรู้ สร้างแบบที่เหมาะกับเรา สร้างที่ใช้บ่อยๆจะได้คุ้มๆ”
4. ทำให้คนใช้
Design System จะไม่มีค่าเลยถ้าไม่มีคนใช้ บางครั้งเราอาจจะอยากทำให้ดีที่สุด จดจ่ออยู่กับมัน แต่การที่เราอยากให้มันออกมาดี ก็ต้องเอาไปให้คนใช้ด้วย เราจะได้รับฟีดแบคกลับมาว่าดีหรือไม่ดี เราควรปรับไปในทิศทางไหน
รีบให้ใช้เพื่อเอา Feedback
งานแต่ละสเต็ปถ้ามันไม่ซ้อนกันเราก็สามารถปล่อยให้คนไปลองใช้ก่อนได้เลย การทำแบบนี้จะทำให้เราได้รับฟีดแบคระหว่างทางและนำมาปรับปรุงได้
เดโมให้ดู / ให้ลองเล่น /เซ็ทอัพให้
ถ้าไม่มีคนใช้ เราก็ต้องพยายามให้มีคนใช้ ลองเพิ่มความแอคทีฟเข้าไป เช่น ทำเดโม่ออกมาให้ดู เซ็ทอัพในเครื่องเราแล้วเอาไปให้คนลองเล่น หรือ ไปเซ็ทอัพให้เลย
ชวนคุย+สังเกต
คอยชวนคุยถามไถ่ว่าใช้แล้วเป็นยังไงบ้าง และสังเกตว่าเขาใช้จริงไหม สิ่งที่เขาพูดกับสิ่งที่เขาทำจริงๆอาจจะไม่ตรงกันก็ได้ พยายามเก็บ feedback ไวๆและเก็บบ่อยๆหากได้อะไรดีๆก็เก็บไว้เป็นหลักฐานและนำกลับไปพัฒนา
“ ทำให้คนใช้ จะได้มี Feedback อำนวยความสะดวกให้ผู้ใช้ เก็บไวๆ เก็บบ่อยๆ บันทึกไว้เป็นหลักฐาน”
5. ทำให้โลกรู้
A Good Design (can’t) speak for it self
เราออกแบบอะไรที่ดี ไม่ต้องขายคนก็ซื้อ แต่การที่ทำอย่างเดียวไม่ขายกับทำไปด้วยขายไปด้วย ผลลัพธ์จะต่างกัน
การที่เราต้องขายเพราะเรามีจุดประสงค์ในการขาย ก็คือ เราต้องการเพิ่มแรงขึ้นไปเรื่อยๆ ถ้าเราออกไปเล่า ออกไปขาย สิ่งที่ได้กลับมาคือเราจะได้แรงที่มากขึ้นกลับมา แล้วเราก็จะสามารถแก้ปัญหาที่มันยากขึ้นได้
แล้วการที่เราจะไปเล่าให้เขาฟังเนี่ย เราจะเล่ายังไง?
- เนื้อหา — เราต้องมีเนื้อหาที่เราอยากจะเล่า เช่นเล่าว่าความคืบหน้าเป็นอย่างไรบ้าง ได้รับ feedback อะไรกลับมา และวางแผนจะทำอะไรต่อไป
- ช่องทาง — เราอาจจะนำไปคุยในตอนประชุหรือตอนนั่งคุยเล่นก็ได้
- คู่สนทนา — แล้วนำไปคุยกับใคร ก็ยกตัวอย่างเช่นเพื่อนร่วมงาน หัวหน้างาน
นอกจากนี้เพื่อทำให้สำเร็จเราอาจจะต้องเล่าหลายรอบ ในหลายเวที หรืออาจจะเปลี่ยนคนเล่าเพราะในสิ่งที่เราเล่าอาจจะเป็นเรื่องเดิมๆซ้ำๆ แต่มันอาจจะเป็นเรื่องใหม่ๆสำหรับผู้ที่ได้ฟัง และเล่าในสิ่งที่เราพลาดก็อาจจะทำให้มีผู้ที่สนใจจะมาช่วยเหลือในปัญหาที่เราพบเจอ
“ ทำให้โลกรู้ จะได้มีแรงเพิ่ม เล่าบ่อยๆในหลายๆเหตุการณ์ เล่าในสิ่งที่ผิดพลาดด้วย จะมีคนอยากช่วยเอง “
และข้อสุดท้ายจาก Session: How to build a Design System on a budget
ทำวนไป
