magnetolabs-website-redesign
74
SHARE

[กรณีศึกษา] ที่มาที่ไปของการทำเว็บไซต์ Magnetolabs ฉบับรีดีไซน์

“การทำเว็บไซต์” เป็นหนึ่งในบริการของพวกเรา Magnetolabs แน่นอนว่ามันคือสิ่งที่พวกเราถนัดมาก แต่เมื่อถึงเวลาที่เราต้องทำเว็บไซต์ให้กับบริษัทตัวเอง มันกลับไม่ราบรื่นอย่างเวลาที่เราทำเว็บไซต์ให้ลูกค้าของเราสักเท่าไหร่

บทความนี้เปรียบเสมือนบันทึกอีกบทที่สำคัญของชาว Magnetolabs ที่เขียนขึ้นเพื่อแบ่งปันเรื่องราว ประสบการณ์ และสิ่งที่พวกเราได้เรียนรู้ ตลอด 4-5 เดือน จากการทำโปรเจกต์ Redesign Website Magnetolabs

เมื่อเป้าหมายนั้นท้าทายมากขึ้น พาหนะที่จะนำไปก็ต้องอัปเกรด

เว็บไซต์ Magnetolabs.com นั้นทำหน้าที่ตัวเองได้เป็นอย่างดี อยากจะบอกว่าเราทำเว็บไซต์นี้กันอย่างเต็มที่มากๆ เพราะมันคือโปรเจกต์เดียวที่เรามีในตอนที่เพิ่งเปิดบริษัทกันใหม่ๆ ตอนที่เรายังไม่มีลูกค้าซักราย 555

เว็บไซต์ Magnetolabs เวอร์ชั่น 2017
Magnetolabs Website 2017

แม้เราจะรู้ว่า เว็บไซต์ที่ดี เว็บไซต์ที่พร้อมสำหรับการทำธุรกิจ นั้นควรมีหน้าตาแบบไหน ต้องมีเนื้อหาอะไรบ้าง แต่ด้วยสถานะของธุรกิจที่เพิ่งเริ่มต้น ทำให้เราต้องเลือกทำเฉพาะสิ่งที่จำเป็น เพื่อให้สามารถ Launch เว็บไซต์ออกไปให้เร็วที่สุด ถ้าคุณเคยเข้าเว็บไซต์แรกของเรา คุณน่าจะทราบว่าเว็บเรานั้นมีจำนวนหน้าเว็บ (ที่ไม่นับหน้าบทความ) รวมทั้งหมดไม่ถึง 10 หน้าด้วยซ้ำ

ผ่านมา 2 ปี บริษัทเราไม่ใช่บริษัทขนาด 2-3 คนแล้ว ภาพบนเว็บไซต์ที่มีพวกเราเหล่า Founders ไม่กี่คนเป็นตัวประกอบนั้นไม่สามารถแสดงตัวตนของบริษัทที่โตขึ้นได้อีกต่อไป 

เรามีบริการที่หลากหลายมากขึ้น ไม่ใช่เฉพาะแค่ออกแบบเว็บไซต์และทำ Inbound Marketing แต่คือบริการที่ครบถ้วนหลากหลายที่พร้อมจะตอบโจทย์ทางธุรกิจให้กับลูกค้าของเราในหลายอุตสาหกรรม

(ดูบริการของ Magnetolabs ทั้งหมดได้ ที่นี่)

เราจึงคิดว่ามันถึงเวลาแล้วที่เราจะต้องมาปัดฝุ่นและ Redesign เว็บไซต์บริษัทเรากันใหม่เพื่อให้ภาพลักษณ์ Vision และ Mission ของบริษัทกับเว็บไซต์ของเรานั้นไปในทิศทางเดียวกัน

เบื้องหลังโจทย์การทำเว็บไซต์

เนื่องจากเหล่า Founders ไม่ได้เป็นคนลงมือทำเว็บไซต์ด้วยตัวเองเหมือนเมื่อตอนทำเว็บเดิม คำถามแรกที่เราต้องตอบให้ได้และทำให้สำเร็จก็คือ 

“เราจะทำให้ทีมงานที่รับผิดชอบเข้าใจถึงผลลัพธ์ที่เราต้องการ โดยมีข้อสงสัย หรือสิ่งที่คาดเดาให้น้อยที่สุดได้อย่างไร?”

คำตอบก็คือ เราต้องตั้งโจทย์ให้ชัดเจน คืออธิบายได้เว่าเป้าหมายของเว็บไซต์นี้คืออะไร? ใครคือกลุ่มเป้าหมาย หรือคนที่เราอยากให้เขาเข้ามายังเว็บไซต์นี้? เข้ามาแล้วเราต้องการให้เขาทำอะไร?

ถ้าเปรียบ Magnetolabs เป็นคน จะเป็นคนแบบไหน?

เราชอบเปรียบเทียบคาแรกเตอร์ของงานออกมาเป็น “คน” เพราะเราจะอธิบายถึงภาพลักษณ์สิ่งที่ต้องการได้เห็นภาพชัดเจน และยังทำให้เรา Discuss กันต่อไปได้ลงลึกถึงรายละเอียดของคนคนนี้ต่อไปได้ด้วย

เพราะฉะนั้น ในการประชุมครั้งแรกๆ เรายังไม่ได้มีการพูดกันเรื่องของเนื้อหา หรือหา Reference การออกแบบอะไรทั้งสิ้น แต่เป็นการประชุมที่เรามาคุยกันว่า “ถ้า Magnetolabs นั้นเป็นคน เราจะเป็นคนที่มีคาแรกเตอร์อย่างไรนะ?”

ซึ่งทำให้เราสรุปคาแรกเตอร์ของ Magnetolabs ออกมาได้ดังนี้

  • เป็นคนที่มีบุคลิกดี ไม่ติดหรูแต่ดูมีรสนิยม เข้าใจเลือก ใส่ใจในรายละเอียด (จะสะท้อนออกมาจากการออกแบบ)
  • เป็นคนมีเสน่ห์ มีคารมณ์คมคาย ยิ่งพูดยิ่งสวย ยิ่งหล่อ (จะสะท้อนออกมาจากเนื้อหาบนเว็บไซต์)
  • เป็นคนที่มี Logic ที่ดี รู้ว่าควรทำอะไร ทำเมื่อไหร่ ทำกับใครจึงจะเหมาะสม ฯลฯ (จะสะท้อนออกมาจากการวางระบบการเข้าถึงข้อมูลบนเว็บไซต์ รวมถึงระบบ Marketing Automation)
  • เป็นคนฉลาด คล่องตัว รวดเร็ว (จะสะท้อนออกมาจาก Performance ของเว็บไซต์)

สำหรับเว็บไซต์ธุรกิจ กลุ่มเป้าหมายไม่ได้มีเพียงกลุ่มเดียวเสมอไป

เราชัดเจนในเรื่องของกลุ่มเป้าหมายของคนที่จะเข้าเว็บไซต์ของเรามาตั้งแต่ในเว็บไซต์เก่าแล้ว ว่ามีทั้งกลุ่มลูกค้า และกลุ่มคนที่จะมาร่วมทีม (ผู้สมัครงาน) จากการเขียนบล็อกแชร์เรื่อง Culture ของบริษัท ควบคู่ไปกับการให้ความรู้ให้กับลูกค้าเรื่องการทำการตลาดออนไลน์ผ่าน Magnetolabs Blog 

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

บอกเล่าเรื่องราวของเราให้กับทีมงานในอนาคตได้รับรู้

เรื่องคน เรื่อง Culture คือสิ่งที่เราคิดว่าสำคัญไม่แพ้กับลูกค้า เพราะเราเชื่อว่า การมีทีมงานที่ดี ที่เก่ง ที่เข้าใจลูกค้า คือสิ่งที่สำคัญที่จะทำให้บริษัทเติบโตได้ในระยะยาว

ความเชื่อนี้เอง ทำให้ Magnetolabs มีนโยบาย และกิจกรรมต่างๆ เกิดขึ้นเพื่อสนับสนุนพนักงาน  ไม่ว่าจะเป็นการจัด Training Budget ให้กับพนักงานแต่ละคน การจัด MagnetoTalk ให้ทีมงานทุกคนได้มาแชร์ความรู้และต่อยอด พูดคุยกันในหัวข้อต่างๆ ในทุกสัปดาห์

ซึ่งหน้าที่ของเว็บไซต์ใหม่นี้ก็คือการทำให้คนภายนอกรับรู้ถึงสิ่งที่เรามีนี้ให้มากที่สุด

  • สื่อให้เห็นภาพว่าสังคมในที่ทำงานเป็นอย่างไร—สิ่งที่พนักงานมองหานอกจากการทำงานที่ท้าทายแล้ว ก็คือ “สังคม” ที่เขาอาจจะได้เข้าไปอยู่นั้นมีหน้าตาเป็นอย่างไร เราจึงมีส่วนที่ใส่รูปภาพกิจกรรมที่เกิดขึ้นภายในบริษัท เพื่อให้เห็นภาพบรรยากาศการทำงานและการใช้ชีวิตที่ Magnetolabs มากขึ้น (ดูรูปน่ารักๆ ของพวกเราได้ที่หน้า Career ค่ะ ^^)
  • เล่าเรื่องเกี่ยวกับบริษัทผ่านการเขียน Culture blog—หลายคนรู้สึกอินกับบริษัท และอยากร่วมงานก็จากการได้อ่าน Blog ของบริษัท ในเว็บไซต์ใหม่นี้เราจึงแยกหมวดหมู่เรื่องของ Culture blog ให้โดดเด่นออกมาจาก Knowledge blog เลย และหมายมั่นปั้นมือว่าจะเขียนบทความที่เกี่ยวกับ Culture blog ให้เยอะขึ้น
  • ภาพลักษณ์และการออกแบบให้ดูทันสมัยและเป็นกันเอง—พนักงานรับรู้ภาพลักษณ์ของบริษัทจากเว็บไซต์ก่อน หากเว็บไซต์ดูดี หากเว็บไซต์ดีไซน์ดูดีสวยงาม มีเนื้อหาที่ดี ก็สะท้อนให้เห็นว่าบริษัทให้ความสำคัญในเรื่องของการออกแบบและการตลาด

แสดงให้ลูกค้าเห็นว่า Inbound Marketing คืออะไร

“We Practice What We Preach”

เราเป็นบริษัท Inbound Marketing Agency ที่ทำ Inbound Marketing ให้กับบริษัทตัวเองเหมือนที่เราทำให้ลูกค้า ฉะนั้นการเขียนบทความเพื่อถ่ายทอดความรู้ผ่าน Knowledge Blog คือสิ่งที่เราต้องการทำให้มากขึ้น และเราก็เชื่อว่านี่คือวิถีการตลาดแบบ Inbound ที่ทรงประสิทธิภาพ

นอกจากการเขียนบทความ เรายังพบว่า Pain Points หลักๆ ของกลุ่มลูกค้าก็คือ เวลาที่เขามองหาผู้ให้บริการทำการตลาด (Digital Marketing Service) ก็ย่อมจะอยากรู้ว่าบริการที่ว่าจะตอบโจทย์ หรือตรงกับที่เขาต้องการหรือเปล่า? เราแก้ปัญหาในส่วนนี้โดยการทำหน้า Industries ขึ้นมาเล่าว่าอะไรคือสิ่งที่คุณต้องทำหากอยู่ใน Industry นั้นๆ และ Magnetolabs จะช่วยเหลือคุณได้อย่างไรบ้าง อะไรคือ Key Success ของธุรกิจในอุตสาหกรรมนั้นๆ

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

สรุปเป้าหมายในการทำเว็บ Magnetolabs ใหม่ของเราก็คือ: 

“Magnetolabs.com คือที่เว็บที่ขายของเก่งแต่ไม่ Hard Sell ที่มีดีไซน์เรียบง่ายเน้นส่งเสริมเนื้อหาบนเว็บ ให้ดึงดูดลูกค้าให้เข้ามาและอยากร่วมงานด้วย นอกจากนั้นยังต้องสามารถดึงดูดคนเก่งๆ ที่มี Value และ Attitude ตรงกับบริษัทให้อยากสมัครงานเข้ามาเป็น Magnetolabs Team”

โครงสร้างออกแบบเว็บไซต์ใหม่ Magnetolabs 2019
Magnetolabs Website 2019 Site Structure

4 องค์ประกอบสำคัญ กว่าจะมาเป็นเว็บไซต์ที่คุณอ่าน ณ ตอนนี้

การทำเว็บไซต์เว็บไซต์หนึ่ง ไม่ได้มีแค่เรื่องดีไซน์และ Web Development เท่านั้น กว่าที่จะปลูกปั้นเว็บไซต์ใหม่จนสมบูรณ์ ตอบโจทย์ที่ตั้งไว้ ยังต้องมีองค์ประกอบสำคัญอื่นๆ อีก ซึ่งกว่าจะสำเร็จ ก็ต้องเรียก “ระดมพล” กันมาทั้งบริษัทเลยทีเดียว ทั้ง Digital Content Writer, UX/UI Designer, Developer และ Inbound Marketer 

นอกจากนี้ เรายังมี PM ที่คอยบริหารงานและตามงานทุกขั้นตอน เพื่อให้ความสำคัญกับ Internal Project (ที่มักจะผัดผ่อนไปก่อนได้เสมอ 55) ครั้งนี้จริงๆ ไม่ต่างจากงานของลูกค้า …และทุกองค์ประกอบของเว็บไซต์ต่างก็มีเบื้องหลังที่ “คิดมาแล้ว” 

Content

Content คือส่วนที่เราเริ่มทำก่อนเป็นอันดับแรก ด้วยความที่เนื้อหาใหม่บนเว็บที่ค่อนข้างเยอะ แถมยังมีทั้งภาษาไทยและภาษาอังกฤษ จึงทำให้ทีม Content ต้องเผื่อเวลาเอาไว้เพิ่มเป็นพิเศษ โดยเฉพาะเรื่องของความเข้ากันได้ของภาษาไทยและภาษาอังกฤษที่ต้องออกมาให้ได้เนื้อหาและอารมณ์ไปในทิศทางเดียวกัน โดยการทำงานจริง เราจะเริ่มจากภาษาอังกฤษก่อน เพื่อให้เนื้อหานิ่ง แล้วจึงค่อยเขียนภาษาไทยตามมา

นอกจากเนื้อหาหลักบนเว็บแล้ว เรายังมีเนื้อหาใหม่ที่เราอยากได้ก็คือส่วนที่เป็น Testimonial ของลูกค้า โดยมีการแบ่งงานกันว่าจะ Outreach ลูกค้าเจ้าไหนบ้าง? ต้องการข้อมูลอะไรบ้าง? โดยส่วนนี้ต้องเริ่มตั้งแต่เนิ่นๆ เพื่อเผื่อเวลาให้ลูกค้าได้มีเวลาเตรียมข้อมูลให้กับเรา

แผน Web content การทำเว็บไซต์ Magnetolabs

Design

สิ่งที่ถือเป็นอีกหนึ่งความท้าทายในการทำเว็บนี้ก็คือ ส่วนของงานออกแบบ

เราไม่ได้เริ่มจากการออกเว็บไซต์ แต่เราย้อนกลับไปเริ่มที่ Corporate Identity ของบริษัท (CI) ที่ทีม Design ของเราได้ทำการปัดฝุ่น และสร้าง CI Guideline ของ Magnetolabs ขึ้นมา เพื่อให้ต่อไปนี้ Magnetolabs จะมีแนวทางการออกแบบที่เป็นไปในรูปแบบเดียวกันทั้งบนเว็บไซต์ และบนสื่อต่างๆ ในอนาคต

Feedback, Comments คือสิ่งที่อยู่คู่กับการออกแบบ เราจึงต้องมีเครื่องมือที่จะมาสนับสนุนให้การทำงานเป็นเรื่องง่าย โดยเครื่องมือที่เราใช้ก็คือ InvisionApp ที่เข้ามาช่วยทำให้การ Comment งานเป็นไปได้อย่างง่ายดายและรวดเร็ว

Invision เครื่องมือคอมเมนต์เว็บไซต์

และเมื่อออกแบบเสร็จแล้ว เราก็ยังสามารถ InvisionApp ใช้เป็นตัวส่งต่องานจาก Designer ไปยัง Developer ได้ในตัว ด้วย Inspector Element ที่ดีไซน์มาได้เลย โดยไม่ต้องเปิดโปรแกรม Sketch ขึ้นมาดูเอง ทุกคนในทีมสามารถเข้าถึงข้อมูลส่วนนี้ได้แม้ไม่ได้เป็น Designer

invision-inspect สำหรับการทำเว็บไซต์

นอกจากนั้นเรามีแผนที่จะทำ A/B Testing รวมถึงนำเครื่องมือสำหรับใช้ในการ Track User Experience ต่างๆ มาใช้ อย่างเช่น Hotjar เพื่อเก็บข้อมูล Heatmap และเก็บ Feedback การใช้งานเว็บไซต์จากผู้เข้าชม (ที่คุณเห็นทางด้านซ้ายล่าง) อีกด้วย

Tech Stack 

เราใช้ WordPress เป็น Backend สำหรับการพัฒนาเว็บไซต์ เนื่องจากเรื่องของความรวดเร็ว และที่สำคัญที่สุดคือเรื่องของการ Intergrate กับ Tools อื่นๆ โดยเฉพาะที่เกี่ยวกับเรื่องของ Marketing และความสามารถในการพัฒนาต่อยอดที่สามารถทำได้ง่ายและรวดเร็ว

แต่สิ่งที่ต่างไปก็คือ เราทดลองนำเอา Elementor Pro มาใช้เป็นส่วนหนึ่งของการพัฒนา เพราะอยากลองความสามารถของ Page Builder ว่าจะไปได้ไกลสักแค่ไหน ซึ่งก็นับว่าได้ผลลัพธ์ออกมาได้อย่างน่าพึงพอใจ

Elementor Pro page builder สำหรับทำเว็บไซต์

ในโปรเจกต์นี้เรายังได้ทดลองนำเอา Visual feedback tool มาใช้ในการ Comment งานให้กับฝั่ง Dev ซึ่งถือว่าเป็นอีกเครื่องมือที่ช่วยให้เราตามเก็บ Bug เก็บดีเทลของงานได้อย่างรวดเร็ว

โปรแกรม visual feedback เครื่องมือคอมเมนต์ฟีดแบก

Marketing 

ในส่วนของ Marketing Automation นับเป็นสิ่งที่สำคัญ แม้ว่าเราจะเป็นเว็บบริษัทที่ไม่ได้ซับซ้อน User Journey ค่อนข้างง่าย แต่สิ่งที่ทำให้ Automation นั้นทำยากนั้นก็คือ “คอนเทนต์” นี่คือที่มาว่าทำไมเราถึงให้ความสำคัญกับการทำคอนเทนต์บนเว็บไซต์ (ที่ไม่ใช่บล็อก) ก็เพราะว่าเราจะได้มีอะไรมาเล่นใน Automation ของเรานั่นอง

สำหรับระบบที่เราใช้ในการทำ Marketing Automation ในขณะนี้ก็คือ SharpSpring เพราะมีฟีเจอร์ที่ค่อนข้างครบสำหรับความต้องการของเรา อีกทั้งราคาก็ยังอยู่ในระดับที่ไม่แพงจนเกินไปนัก 

สรุป

ขณะที่คุณอ่านบทความนี้ คุณน่าจะได้สัมผัสกับเว็บไซต์ใหม่ของ Magnetolabs เว็บไซต์นี้แล้ว หากคุณจะช่วยให้ Feedback เกี่ยวกับการทำเว็บไซต์ใหม่เว็บนี้ สามารถกรอกเข้ามาได้โดยคลิกปุ่ม Feedback ที่เด้งอยู่ด้านซ้ายล่างของหน้านี้ได้เลย พวกเราขอขอบคุณ และสัญญาว่าจะนำ Feedback ที่ได้ไปปรับปรุงต่อไปค่ะ 🙂

สุดท้าย หากคุณสนใจรายละเอียดบริการใหม่ของเราก็สามารถเข้าไปได้ที่หน้า Services ได้เลย หรือสนใจอยากร่วมทีมกับ Magnetolabs ขณะนี้เราก็กำลังเปิดรับสมัครทีมงานอยู่หลายตำแหน่ง คลิกเพื่ออ่านรายละเอียดได้ที่หน้า Career เลยค่ะ

New call-to-action

Author

Linda Kraivanich

อดีต Managing Partner ของ Magnetolabs
อดีต Managing Partner ของ Magnetolabs

Related Blog

Leave Your Comment