เราสร้างเว็บไซต์ที่ Articulate Marketing อย่างไร

ก่อนอื่น เราสร้างเว็บไซต์ HubSpot CMS หากคุณไม่รู้ว่า HubSpot คืออะไร ไม่ต้องกังวล ไปที่นี่เพื่อแนะนำอย่างง่าย สำหรับผู้ที่ยังอยู่กับเรา วันนี้เรากำลังสรุปขั้นตอนการสร้างเว็บไซต์สำหรับลูกค้าของเรา

บทความนี้อิงจากการสัมมนาผ่านเว็บเรื่องหนึ่งของเรา ซึ่งจัดโดยฉันเอง Ioana Negulescu หัวหน้าสตูดิโอที่ Articulate Marketing คุณสามารถดูวิดีโอและดาวน์โหลดสไลด์ด้านล่าง:

ความท้าทายในการสร้างเว็บไซต์

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

เมื่อเราได้ยิน...

'เรากังวลเรื่องการสร้างเว็บไซต์ใหม่เพราะอันที่แล้วเจ็บปวดมาก'

เราทำแบบนี้...

เราเคยได้ยินเรื่องนี้มาหลายครั้งแล้ว ดังนั้นเราจึงพยายามทำให้ดีขึ้น

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

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

เมื่อเราได้ยิน...

'เราพยายามไล่ตามนักพัฒนามาหลายครั้งแล้ว พวกเขาไม่ยอมกลับมาหาเราเลย'

เราทำแบบนี้...

เพื่อทำเครื่องหมายความคืบหน้า เราใช้การโทร เพื่อจัดการโครงการ เป็นประจำ และเรามีสายเหล่านั้นในปฏิทินตั้งแต่วันแรก ในระหว่างการเรียกการจัดการโครงการ เรานำเสนองานใหม่และระบุตัวบล็อก

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

เมื่อเราได้ยิน...

'จะเกิดอะไรขึ้นถ้าเว็บไซต์ใหม่ไม่เป็นไปตามความคาดหวังของเรา'

เราทำแบบนี้...

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

จากนั้น เราไป ต่อที่สถาปัตยกรรมของแบรนด์ ที่นี่ เราจัดวางพื้นฐานของเว็บไซต์ สี รูปภาพหรือภาพประกอบ องค์ประกอบ UX/UI แบบอักษร - ความสวยงามโดยรวมของเว็บไซต์ นี่เป็นกระบวนการที่ร่วมมือกันอย่างมาก ลูกค้าของเรามีส่วนร่วมในทุกขั้นตอน ดังนั้นข้อมูลและข้อกำหนดของพวกเขาจึงถูกสร้างขึ้นในผลิตภัณฑ์ขั้นสุดท้าย

ตัวอย่าง: HTG

เราสร้างเว็บไซต์ที่ได้รับรางวัลสำหรับ HTG ดังนั้นเราจะใช้พวกเขาเป็นตัวอย่างตลอด

พวกเขาแสดงความกลัวและสรุปความท้าทายเมื่อเราพูดกับพวกเขาครั้งแรก นี่เป็นปัญหาทั่วไปในหมู่บริษัทเทคโนโลยี B2B:

• เป้าหมายการเติบโตของธุรกิจที่ทะเยอทะยาน
• เว็บไซต์ที่ล้าสมัย (และแบรนด์)
• โอกาสในการจับลูกค้าเป้าหมายน้อย
• การนำทาง Clunky
• ประสบการณ์ผู้ใช้แย่
• ประสิทธิภาพของเว็บไซต์แย่

หากฟังดูเหมือนคุณ ไปที่นี่เพื่อให้คะแนนเว็บไซต์ของคุณ

กระบวนการประกบ

นี่คือกระบวนการของเราโดยสรุป คลิกรูปภาพนี้เพื่อดูรายละเอียดเพิ่มเติม:

กลับไปที่ตัวอย่างของ HTG กับพวกเขา เราปฏิบัติตามกระบวนการเจ็ดขั้นตอนตามปกติของเรา:

1. คิกออฟ

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

2. Moodboards และโครงสร้างเว็บไซต์

ที่นี่เราเรียกใช้สองกระบวนการภายใน หนึ่งคือการรวมมู้ดบอร์ด คำแนะนำแบบอักษร คำแนะนำสี ภาพ และอื่นๆ

อีกประการหนึ่งคือ เราได้รวบรวมคำแนะนำเกี่ยวกับแผนที่เว็บไซต์ร่วมกับทีมนักเขียนคำโฆษณาทางการตลาด นี่คือโครงสร้างของการนำทางและเพจที่เราจะต้องสร้าง

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

3. การออกแบบเบื้องต้นและโครงลวด

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

ในขณะเดียวกัน เราวางกลยุทธ์รอบโครงสร้างหน้า นั่นคือเนื้อหาประเภทใดที่จะเข้าสู่หน้าใด? อิฐเลโก้ตัวไหนที่เราต้องการ

จากนั้นทีมของเราจะสร้างโครงลวด ซึ่งเหมือนกับภาพร่างคร่าวๆ ของหน้าเว็บไซต์ที่ไม่มีองค์ประกอบการออกแบบ

4. ออกแบบโมดูลทั้งหมดและเขียนร่างเว็บสำเนา

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

5. พัฒนาเว็บไซต์

เพื่อแสดงการออกแบบโมดูลในแหล่งกำเนิด เราพัฒนาและสร้างหน้าทั้งหมดด้วย lorem ipsum copy และ placeholder image เพื่อให้ลูกค้าของเราได้รับแนวคิดที่เหมาะสมเกี่ยวกับผลลัพธ์สุดท้าย

เมื่อทำงานกับนักพัฒนา คุณต้องการถามคำถามที่เกี่ยวข้องสองสามข้อกับพวกเขา:

• อะไรคือขั้นตอนหลักที่คุณทำเพื่อเขียนโค้ดเว็บไซต์ของเรา?
• คุณแน่ใจได้อย่างไรว่ารหัสนั้นเป็นระเบียบเรียบร้อย? (ปัญหาใหญ่กับเว็บไซต์เทมเพลต)
• คุณตรวจสอบความเร็วและประสิทธิภาพโดยรวมเมื่อใดและบ่อยเพียงใด
• การสร้างเพจเมื่อเว็บไซต์ได้รับการพัฒนาแล้วหน้าตาเป็นอย่างไร? มันเป็นประสบการณ์ผู้ใช้ที่เป็นมิตรสำหรับทุกคนที่สร้างเพจหรือไม่?

หรือถ้าคุณทำงานกับ Articulate 'เวลาที่เร็วที่สุดที่คุณแก้ลูกบาศก์รูบิกคือเท่าไร' เรายินดีต้อนรับคำถามดังกล่าว

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

เรานั่งร้านโมดูลทั้งหมดใน HTML จากนั้นเริ่มดูที่สไตล์ ลองนึกถึงอิฐ ปูนปลาสเตอร์ ทาสีและตกแต่ง

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

6. เติมหน้า

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

7. เปิดตัว!

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

ในที่สุดเราก็ฉลองกัน!

เคล็ดลับ 10 ข้อสำหรับการออกแบบเว็บไซต์ที่ยอดเยี่ยม

ต่อไปนี้คือกฎสองสามข้อที่เราได้เรียนรู้ในช่วงหลายปีที่ผ่านมา และการสร้างเว็บไซต์หลายสิบรายการ:

1. ให้ความสำคัญกับความชอบของคุณเป็นอันดับสอง และความเจ็บปวดของบุคลิกภาพของคุณเป็นอันดับแรก
2. มุ่งเน้นที่วิธีที่คุณช่วยเหลือลูกค้าของคุณ มากกว่าแค่การลงรายการบริการของคุณ
3. อย่าพยายามคิดค้นล้อใหม่ อะไรใช้ได้ผล ทำงานด้วยเหตุผล ตัวอย่างเช่น การเน้นเฉพาะพื้นที่ครึ่งหน้าบนเป็นตำนาน ทุกคนรู้วิธีการเลื่อน มีแม้กระทั่งเว็บไซต์เกี่ยวกับมัน: http://abovethefold.fyi/
4. ทำให้การนำทางสั้นและเรียบง่าย
5. ทำให้ปุ่มขับเคลื่อนด้วยมูลค่า หลีกเลี่ยงการทำสำเนาทั่วไปหากเป็นไปได้
6. เชื่อมโยงไปยังหน้าที่เกี่ยวข้องเสมอหากมีหน้าที่มีบริบทมากกว่านี้
7. ในหน้าสำคัญ หลีกเลี่ยงการมีลิงก์ภายนอกมากเกินไป (บล็อกของคุณเป็นเรื่องที่แตกต่าง)
8. จบหน้าด้วย CTA (คำกระตุ้นการตัดสินใจ) อย่างน้อยหนึ่งรายการเสมอ โดยนำผู้ใช้ไปยังขั้นตอนถัดไปในกระบวนการ
9. อย่าดูถูกพลังของหน้าติดต่อ - บ่อยครั้งมันเป็นจุดออก แต่คุณต้องการให้คนอื่นอยู่ในหน้านั้นจริงๆ
10. น้อยมาก!

โบนัส: อย่าปล่อยให้โลโก้กำหนดการออกแบบที่ไม่ดี

เมื่อเราออกแบบเว็บไซต์ของ HTG โลโก้ของพวกเขาล้าสมัยและไม่เหมาะกับแบรนด์ที่เราต้องการอีกต่อไป เราปรับปรุงให้ทันสมัยด้วยการเปลี่ยนแปลงง่ายๆ บางประการ:

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

จะเกิดอะไรขึ้นหลังจากการเปิดตัว?

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

ตั้งแต่การสร้างเนื้อหาใหม่ เช่น บล็อก หน้าหลัก ข้อเสนอ gated และหน้า 'squeeze' ไปจนถึงการเรียกใช้การติดตามพฤติกรรมและการทดสอบหลายตัวแปร เว็บไซต์ของคุณยังทำอะไรได้อีกมาก

แอบพีค: นิวเคลียส

คุณ จะรับเว็บไซต์ HubSpot ได้อย่างไร มีตัวเลือกสองสามอย่าง เช่น การสร้างเว็บไซต์ตามความต้องการ แต่วิธีหนึ่งคือการใช้ธีม HubSpot นิวเคลียสเป็นธีมดังกล่าวของ Articulate

ธีมเป็นเหมือนเทมเพลตเว็บไซต์ที่ซับซ้อนกว่ามาก เว็บไซต์ของเราสร้างขึ้นบน Nucleus และเราได้ใช้กับลูกค้าหลายรายที่มีสไตล์การออกแบบที่หลากหลาย เรากำลังเปิดตัวบน HubSpot Marketplace ในปี 2022 ด้วย Nucleus เราสามารถสร้างเว็บไซต์ที่ได้รับการปรับแต่งอย่างสูงในสัปดาห์ หรือหลายวัน สำหรับลูกค้าของเรา มันค่อนข้างน่าตื่นเต้น!

>> คลิกที่นี่เพื่อสำรวจนิวเคลียส <<