ออกแบบ UX/UI ร้านค้าแฟชั่นและไลฟ์สไตล์ออนไลน์: ZettaFash
ออกแบบ UX/UI · อีคอมเมิร์ซ · แฟชั่นและไลฟ์สไตล์ · เว็บแอปพลิเคชัน
ภาพรวมโครงการ
ZettaFash คือโปรเจกต์ออกแบบ UX/UI ใหม่สำหรับแพลตฟอร์มช้อปปิ้งออนไลน์ที่คัดสรรสินค้าแฟชั่น เฟอร์นิเจอร์ ของตกแต่งบ้าน และอุปกรณ์ไลฟ์สไตล์ ทีมของเราออกแบบประสบการณ์ผู้ใช้ทั้งหมดใหม่ภายใต้สโลแกน “for curating your lifestyle”—ตั้งแต่หน้าอีเวนต์สไตล์แมกกาซีน คอลเลกชันตามฤดูกาล ขั้นตอนการดูรายละเอียดสินค้า ไปจนถึงเส้นทางการช้อปตั้งแต่ค้นหาจนถึงชำระเงิน
โจทย์การออกแบบ
ออกแบบประสบการณ์การช้อปปิ้งใหม่ทั้งหมดสำหรับสินค้ากว่า 6 หมวดหมู่—แฟชั่น เฟอร์นิเจอร์ดีไซน์ ของตกแต่งบ้าน อุปกรณ์ไลฟ์สไตล์ เครื่องประดับและนาฬิกา และสินค้าแฮนด์เมด—ให้เป็นอินเทอร์เฟซที่ดูดีและใช้งานง่าย
แนวทางของเรา
เราสร้างภาษาออกแบบที่อบอุ่นแบบแมกกาซีน ด้วยพื้นผิวหินอ่อน โทนสีธรรมชาติ และการจัดวางที่คัดสรร เพื่อยกระดับเอกลักษณ์แบรนด์พร้อมปรับปรุงความสะดวกในการใช้งาน
ไฮไลท์การออกแบบ UX/UI
ออกแบบหน้าแรกและระบบนำทางใหม่
ออกแบบหน้าแรกสไตล์แมกกาซีนพร้อมแบนเนอร์ฮีโร่ แถบด้านข้างแสดง About, หมวดหมู่, โซเชียลลิงก์ รวมถึงระบบหมวดหมู่แบบไอคอนสำหรับการเลือกดูที่ง่ายดาย
หน้าอีเวนต์สไตล์บรรณาธิการ
ออกแบบหน้าอีเวนต์ตามฤดูกาลอย่าง “The Autumn Harvest” พร้อมภาพสไตล์แมกกาซีน ตารางสินค้าคัดสรร และปุ่ม “Go to Event” ที่ชัดเจน
ประสบการณ์หน้ารายละเอียดสินค้า
ออกแบบหน้ารายละเอียดสินค้าที่สะอาดตาพร้อมภาพขนาดใหญ่ ตัวเลือกสีพาสเทล แท็บรายละเอียด/แท็ก ราคาพร้อมส่วนลด และสินค้าแนะนำ
เอกลักษณ์ภาพและระบบดีไซน์
สร้างระบบดีไซน์ด้วยโทนสีธรรมชาติอบอุ่น พื้นผิวหินอ่อน ฟอนต์เซริฟสำหรับหัวข้อ และระยะห่างที่สม่ำเสมอ สร้างความรู้สึกแบรนด์ระดับพรีเมียม
ออกแบบหน้าอีเวนต์ใหม่ — เลย์เอาต์สไตล์แมกกาซีนพร้อมคอลเลกชันตามฤดูกาลและตารางสินค้า
กระบวนการออกแบบ
แนวทางออกแบบ UX/UI อย่างเป็นระบบ ตั้งแต่วิจัยจนถึงส่งมอบ เพื่อให้ทุกการตัดสินใจด้านการออกแบบยึดผู้ใช้เป็นศูนย์กลาง
วิจัยและวิเคราะห์
วิเคราะห์ User Flow เดิม ระบุจุดที่ผู้ใช้ติดขัดในการนำทางและค้นหาสินค้า และเปรียบเทียบกับแพลตฟอร์มอีคอมเมิร์ซแฟชั่นชั้นนำเพื่อกำหนดทิศทางการออกแบบใหม่
Wireframe และ Prototype
สร้าง Wireframe และ Prototype แบบ Interactive สำหรับหน้าจอหลัก—หน้าแรก หน้าอีเวนต์ รายการสินค้า รายละเอียดสินค้า และตะกร้า—ปรับปรุงซ้ำจาก Feedback เพื่อเส้นทางผู้ใช้ที่ดีที่สุด
ออกแบบ Visual และส่งมอบ
ส่งมอบ High-Fidelity Mockup พร้อมระบบดีไซน์ คลังคอมโพเนนต์ และข้อมูลจำเพาะสำหรับนักพัฒนา
ข้อมูลเชิงเทคนิค
ออกแบบรองรับทุกหน้าจอ
ออกแบบสำหรับทุกขนาดหน้าจอ ทั้งเดสก์ท็อป แท็บเล็ต และมือถือ—ใช้งานได้สม่ำเสมอในทุกอุปกรณ์
รองรับหลายภาษา
UI ออกแบบรองรับทั้งภาษาไทยและอังกฤษ รวมถึงระยะห่างที่เหมาะสมกับตัวอักษรไทย และรูปแบบราคาเป็นเงินบาท (฿)
ระบบดีไซน์และคอมโพเนนต์
คลังคอมโพเนนต์ที่ใช้ซ้ำได้ พร้อมชุดสี ระดับตัวอักษร โทเคนระยะห่าง และรูปแบบ UI สำหรับความสม่ำเสมอในทุกหน้า
ออกแบบหน้ารายละเอียดสินค้าใหม่ — เลย์เอาต์สะอาดตาพร้อมตัวเลือกสี ราคา แท็บรายละเอียด และสินค้าแนะนำ
พร้อมแล้วหรือยัง