กรณีศึกษา UI/UX: การออกแบบเว็บไซต์ของ Nuvyyo ใหม่

May 01 2023

ในบทความนี้ ผมจะอธิบายขั้นตอนการออกแบบเว็บไซต์ Nuvyyo ใหม่ เกี่ยวกับโครงการ What is Nuvyyo? Nuvyyo เป็นบริษัทในแคนาดาที่ให้บริการโซลูชั่นการแพร่ภาพโทรทัศน์ รวมถึงผลิตภัณฑ์ Tablo DVR ยอดนิยมของพวกเขา ซึ่งช่วยให้ผู้ใช้สามารถรับชมและบันทึกการถ่ายทอดสดทางโทรทัศน์แบบ over-the-air บนอุปกรณ์หลายเครื่อง

ในบทความนี้ ผมจะอธิบายขั้นตอนการออกแบบเว็บไซต์ Nuvyyo ใหม่

เกี่ยวกับโครงการ

Nuvyyo คืออะไร?

Nuvyyo เป็นบริษัทในแคนาดาที่ให้บริการโซลูชั่นการแพร่ภาพโทรทัศน์ รวมถึงผลิตภัณฑ์ Tablo DVR ยอดนิยมของพวกเขา ซึ่งช่วยให้ผู้ใช้สามารถรับชมและบันทึกการถ่ายทอดสดทางโทรทัศน์แบบ over-the-air บนอุปกรณ์หลายเครื่อง

ทำไมต้องออกแบบ Nuvyyo ใหม่?

วันหนึ่งขณะท่องอินเทอร์เน็ต ฉันพบบทความบน Verge.com ซึ่งกล่าวถึงการปฏิวัติในอุตสาหกรรมการแพร่ภาพโทรทัศน์ บทความดังกล่าวเน้นย้ำให้ Nuvyyo เป็นบริษัทชั้นนำในด้านนี้ ซึ่งมีความคิดสร้างสรรค์ ยิ่งไปกว่านั้น ฉันได้เรียนรู้ว่า SCRIPS เพิ่งถูกซื้อกิจการด้วยมูลค่า 14 ล้านเหรียญสหรัฐ สิ่งนี้กระตุ้นความสนใจของฉัน และฉันตัดสินใจไปที่เว็บไซต์ของ Nuvyyo เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับผลิตภัณฑ์ของพวกเขา

Verge.คอม

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

ปัญหาบางอย่างที่ฉันค้นพบ

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

เป้าหมายของโครงการ

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

ขั้นตอนการออกแบบ

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

วิเคราะห์เว็บไซต์ Nuvyyo

ในขั้นตอนที่สอง ผมมองหาแรงบันดาลใจและข้อมูลอ้างอิงโดยศึกษา UI, UX และ Information Architecture (IA) ของเว็บไซต์ต่างๆ รวมถึงคู่แข่งทั้งทางตรงและทางอ้อม สิ่งนี้ทำให้ฉันได้รับความเข้าใจที่ครอบคลุมเกี่ยวกับแนวโน้มการออกแบบในปัจจุบันของอุตสาหกรรมและแนวทางปฏิบัติที่ดีที่สุด

คอลเลกชันของแรงบันดาลใจเว็บไซต์

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

โครงลวดกระดาษ

ทีนี้มาดูส่วนที่สำคัญที่สุดของกรณีศึกษานี้กัน

การออกแบบขั้นสุดท้าย

แลนดิ้งเพจ

ตอนนี้ฉันจะแบ่งหน้า Landing Page ออกเป็นส่วนต่างๆ และหารือเกี่ยวกับแต่ละส่วน เริ่มต้นด้วย มาดูส่วนฮีโร่หลักกัน ก่อน

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

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

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

การทำซ้ำเล็กน้อยของส่วนฮีโร่

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

ส่วนผลิตภัณฑ์

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

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

ส่วนรับรอง

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

คำถามที่พบบ่อยและส่วนท้าย

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

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

เกี่ยวกับเพจ

ดังที่ฉันได้กล่าวไว้ในระหว่างการวิเคราะห์เว็บไซต์เก่า ฉันตัดสินใจย้าย ส่วน "เกี่ยวกับ"และ"การจัดการ"ซึ่งมีอยู่ในหน้า Landing Page ไปยังหน้า"เกี่ยวกับ" แยกต่างหาก