รับออกแบบ UX/UI
เว็บไซต์และแอป
ทีมงาน Smart Cyber Tech รับออกแบบ UX/UI โดยเริ่มจากการทำความเข้าใจผู้ใช้จริง ไม่ใช่ความเห็นในห้องประชุม ทดสอบต้นแบบก่อนเขียนโค้ด เพื่อลดงานแก้ทีหลังที่แพงกว่าหลายสิบเท่า และเพิ่มอัตราการใช้งานจริงของระบบที่คุณลงทุนไป
ภาพรวมบริการ
ออกแบบให้วัดผลได้
งานออกแบบของเราไม่ได้จบที่ความสวย แต่วัดกันที่ผู้ใช้ทำงานสำเร็จหรือไม่ ใช้เวลากี่ขั้นตอน และเกิดข้อผิดพลาดบ่อยแค่ไหน ทุกโปรเจกต์เราตั้งตัวชี้วัดด้านการใช้งานร่วมกับคุณตั้งแต่ต้น แล้วพิสูจน์ด้วยการทดสอบกับผู้ใช้จริงก่อนส่งต่อให้ทีมพัฒนา
ในบริบทผู้ใช้ไทย รายละเอียดเล็ก ๆ มีผลมาก เช่น ฟอนต์ไทยที่อ่านง่ายบนจอเล็ก ฟอร์มที่รองรับที่อยู่แบบไทย การกรอกเลขบัตรประชาชนและเบอร์โทรที่ไม่ต้องสลับแป้นพิมพ์ และปุ่มที่กดได้ด้วยนิ้วโป้งข้างเดียวขณะอยู่บนรถไฟฟ้า สิ่งเหล่านี้ไม่มีในเทมเพลตสำเร็จรูปจากต่างประเทศ แต่เป็นตัวตัดสินว่าผู้ใช้จะกรอกจนจบหรือปิดหน้าไป
- ทดสอบกับผู้ใช้จริง 5–8 คนเพียงเท่านี้ก็พบปัญหาการใช้งานหลักได้กว่า 80% ตามหลักการของ Nielsen Norman Group
- ส่งมอบไฟล์ที่ใช้งานต่อได้Figma ที่จัดระเบียบครบ พร้อม Design Token ที่นักพัฒนานำไปใช้ได้ทันที
- ออกแบบให้ทุกคนเข้าถึงได้ตรวจค่าความต่างของสีและขนาดตัวอักษรตามแนวทาง WCAG 2.1 ระดับ AA
เหมาะกับใคร
รับออกแบบ UX/UI
สำหรับงาน 6 รูปแบบ
โจทย์ด้านการออกแบบที่ทีมงานรับบ่อยที่สุด บางงานใช้เวลาไม่กี่สัปดาห์แต่เปลี่ยนผลลัพธ์ของระบบทั้งตัว
ระบบใหม่ที่ยังไม่มีหน้าจอ
เริ่มจากวิจัยผู้ใช้ วางโครงสร้างข้อมูล ทำต้นแบบให้กดลอง แล้วทดสอบก่อนส่งให้ทีมพัฒนา ลดการแก้หน้าจอหลังเขียนโค้ดซึ่งแพงที่สุด
ระบบเดิมที่ผู้ใช้บ่นว่ายาก
ตรวจประเมินการใช้งาน (UX Audit) หาจุดที่คนหลงทางหรือทำผิดบ่อย แล้วเสนอการแก้ทีละจุดที่ให้ผลมากที่สุด โดยไม่ต้องรื้อระบบ
เว็บไซต์ที่มีคนเข้าแต่ไม่ติดต่อ
ปรับเส้นทางจากหน้าแรกถึงฟอร์มติดต่อหรือสั่งซื้อ ทดสอบกับผู้ใช้จริง และวัดอัตราการทำสำเร็จก่อนและหลังปรับ
แอปมือถือที่ต้องใช้มือเดียว
ออกแบบสำหรับจอเล็กและการใช้งานระหว่างเดินทาง ตำแหน่งปุ่ม ขนาดตัวอักษร และขั้นตอนที่สั้นที่สุด ทดสอบบนเครื่องจริงหลายรุ่น
แดชบอร์ดและระบบภายในที่ข้อมูลเยอะ
จัดลำดับความสำคัญของข้อมูล ออกแบบตารางและกราฟให้อ่านเร็ว และลดจำนวนคลิกของงานที่พนักงานทำวันละหลายสิบครั้ง
องค์กรที่มีหลายระบบแต่หน้าตาไม่เหมือนกัน
สร้าง Design System กลาง ให้ทุกระบบใช้คอมโพเนนต์ชุดเดียว ทีมพัฒนาทำหน้าจอใหม่เร็วขึ้น และผู้ใช้ไม่ต้องเรียนรู้ใหม่ทุกระบบ
ขอบเขตงานออกแบบ
งานออกแบบตั้งแต่วิจัยจนส่งมอบ
เลือกเฉพาะบางส่วนได้ หรือให้เราดูแลตั้งแต่ต้นจนจบก็ได้เช่นกัน
User Research
สัมภาษณ์ผู้ใช้ ทำแบบสำรวจ วิเคราะห์คู่แข่ง และสร้าง Persona ที่สะท้อนผู้ใช้จริงของคุณ
Information Architecture
จัดโครงสร้างเนื้อหาและเมนูให้ผู้ใช้หาสิ่งที่ต้องการเจอโดยไม่ต้องเดา
Wireframe & Prototype
ร่างโครงหน้าจอและทำต้นแบบกดใช้ได้จริง เพื่อทดสอบก่อนลงทุนเขียนโค้ด
UI Design
ออกแบบหน้าจอที่สะท้อนแบรนด์ของคุณ พร้อมสถานะครบทุกกรณี ทั้งว่าง โหลด และผิดพลาด
Design System
ชุดคอมโพเนนต์และกฎการใช้งานที่ทำให้ทุกหน้าจอในอนาคตยังคงมาตรฐานเดียวกัน
Usability Testing
ทดสอบกับผู้ใช้จริงพร้อมรายงานปัญหาที่จัดลำดับความสำคัญและแนวทางแก้
สิ่งที่ส่งมอบ
จ้างออกแบบ UX/UI กับเรา
คุณได้อะไรกลับไปบ้าง
ส่งมอบเป็นไฟล์ที่ทีมพัฒนาของคุณหรือผู้พัฒนารายอื่นนำไปใช้ต่อได้ทันที ไม่ผูกกับเรา
- รายงานวิจัยผู้ใช้และเส้นทางการใช้งานสรุปจากการสัมภาษณ์และสังเกตผู้ใช้จริง กลุ่มผู้ใช้หลัก เป้าหมาย และจุดที่ติดขัดในปัจจุบัน พร้อมแผนที่เส้นทางการใช้งานที่ปรับใหม่
- Wireframe และต้นแบบที่กดลองได้ต้นแบบใน Figma ที่คลิกผ่านทุกขั้นตอนหลักได้จริงบนมือถือและเดสก์ท็อป ใช้ทดสอบกับผู้ใช้และใช้เป็นสเปกให้ทีมพัฒนา
- ผลทดสอบการใช้งานพร้อมข้อเสนอแก้บันทึกการทดสอบกับผู้ใช้ตัวแทน อัตราการทำสำเร็จ เวลาที่ใช้ และจุดที่ผิดพลาด พร้อมการแก้ที่ทำแล้วในรอบถัดไป
- ไฟล์ออกแบบ UI ครบทุกหน้าจอและสถานะหน้าจอทุกสถานะ ทั้งว่าง กำลังโหลด ผิดพลาด และสำเร็จ ในทุกขนาดหน้าจอ พร้อมสิทธิ์เต็มในไฟล์ Figma ของคุณ
- Design System พร้อม Design Tokenสี ตัวอักษร ระยะห่าง และคอมโพเนนต์ทุกตัว ระบุค่าชัดเจนและส่งออกเป็น Token ให้ทีมพัฒนาใช้ตรงกัน พร้อมเอกสารการใช้งาน
- การส่งต่อให้ทีมพัฒนาประชุมส่งต่องาน ตอบคำถามระหว่างพัฒนา และตรวจหน้าจอที่พัฒนาแล้วเทียบกับแบบก่อนเปิดใช้ (Design QA)
วิธีทำงาน
เริ่มจากผู้ใช้งานจริง
การเดาว่าผู้ใช้ต้องการอะไรคือต้นทุนที่แพงที่สุดในโปรเจกต์ซอฟต์แวร์ เราจึงใช้เวลาช่วงต้นไปกับการสัมภาษณ์ผู้ใช้จริงและสังเกตวิธีที่พวกเขาทำงานอยู่ทุกวัน หลายครั้งสิ่งที่ค้นพบทำให้ขอบเขตงานเล็กลงและตรงจุดขึ้น ซึ่งช่วยประหยัดงบให้ลูกค้าได้ตั้งแต่ยังไม่เริ่มพัฒนา
เราออกแบบตามแนวทางการเข้าถึง WCAG 2.1 ระดับ AA เป็นค่าเริ่มต้น เพราะสีที่คอนทราสต์พอ ตัวอักษรที่ขยายได้ และการใช้งานด้วยแป้นพิมพ์ ไม่ได้ช่วยเฉพาะผู้พิการ แต่ช่วยผู้สูงอายุที่เป็นลูกค้ากลุ่มใหญ่ขึ้นทุกปีของธุรกิจไทย และช่วยให้ระบบผ่านเกณฑ์ของหน่วยงานรัฐและองค์กรใหญ่ที่เริ่มกำหนดเรื่องนี้ในสัญญา
- สังเกตการทำงานจริงไปดูหน้างานจริงเมื่อเป็นระบบภายในองค์กร เพื่อเข้าใจข้อจำกัดที่ไม่มีในเอกสาร
- ทดสอบซ้ำหลายรอบปรับต้นแบบและทดสอบใหม่จนเส้นทางการใช้งานหลักผ่านอย่างราบรื่น
สิ่งที่ส่งมอบ
Design Systemที่ส่งมอบ
เมื่อจบโปรเจกต์ คุณจะได้มากกว่าไฟล์ภาพหน้าจอ — คุณได้ระบบดีไซน์ที่ระบุสี ตัวอักษร ระยะห่าง และคอมโพเนนต์ทุกตัวไว้ชัดเจน ทีมของคุณหรือผู้พัฒนารายอื่นจึงต่อยอดหน้าจอใหม่ได้เองโดยไม่หลุดมาตรฐาน
เครื่องมือออกแบบ
- Figma
- FigJam
- Maze
- Hotjar
ส่งมอบให้นักพัฒนา
- Design Token
- Storybook
- Tailwind Config
- WCAG 2.1 AA
ขอบเขตและระยะเวลา
ออกแบบ UX/UIใช้เวลานานแค่ไหน
ค่าประมาณจากโครงการที่ผ่านมา ระยะเวลาจริงขึ้นกับจำนวนหน้าจอ จำนวนกลุ่มผู้ใช้ที่ต้องวิจัย และรอบการทดสอบ
| รายการ | UX Audit ระบบเดิม | ออกแบบเว็บไซต์หรือแอป | ระบบใหญ่ + Design System |
|---|---|---|---|
| ตัวอย่างงานโจทย์ที่พบบ่อย | ตรวจประเมินและเสนอการแก้ระบบที่ใช้อยู่ | เว็บบริษัท, เว็บขายของ, แอปมือถือ 15–40 หน้าจอ | ระบบภายในหลายบทบาท, หลายระบบใช้ดีไซน์ร่วมกัน |
| วิจัยผู้ใช้ | สัมภาษณ์ 5–8 คน + วิเคราะห์ข้อมูลการใช้งาน | สัมภาษณ์ 8–12 คน + ทดสอบต้นแบบ 2 รอบ | หลายกลุ่มผู้ใช้ + ทดสอบทุกเฟส |
| สิ่งที่ได้ | รายงาน + ต้นแบบส่วนที่แก้ | ต้นแบบครบ + UI ทุกหน้าจอ + Design Token | + Design System เต็มรูปแบบ + เอกสาร |
| ระยะเวลาโดยประมาณ | 2–3 สัปดาห์ | 4–8 สัปดาห์ | 2–4 เดือน |
| เห็นต้นแบบครั้งแรก | สัปดาห์ที่ 2 | สัปดาห์ที่ 2 | สัปดาห์ที่ 3 |
| ทดสอบกับผู้ใช้จริง | ✓ 1 รอบ | ✓ 2 รอบ | ✓ ทุกเฟส |
| ไฟล์ Figma เป็นของลูกค้า | ✓ | ✓ | ✓ |
ปัจจัยที่กำหนดงบและระยะเวลามากที่สุดคือ จำนวนหน้าจอและบทบาทผู้ใช้, จำนวนกลุ่มผู้ใช้ที่ต้องวิจัย, จำนวนรอบทดสอบ และการมีหรือไม่มีแนวทางแบรนด์เดิม เราแยกรายการเหล่านี้ให้เห็นชัดในใบเสนอราคา ราคาแจ้งโดยเจ้าหน้าที่หลังประเมินขอบเขตร่วมกัน
ตัวอย่างงาน
งานออกแบบที่ทีมงานส่งมอบแล้ว
คัดจากผลงานที่เปิดเผยได้ ดูรายละเอียดทั้งหมดที่หน้า ผลงานพัฒนาระบบ เว็บ และแอป
แอปนัดหมายและติดตามสุขภาพ
ออกแบบให้ผู้ป่วยและแพทย์ใช้แอปเดียวกันโดยเห็นเฉพาะสิ่งที่ตัวเองต้องใช้ ทดสอบกับผู้ใช้สูงอายุจริง ได้คะแนนบนสโตร์ 4.8 ดาวจากผู้ใช้กว่า 120,000 คน
หลังบ้านร้านค้าที่ทีมแพ็กของใช้ได้ทันที
ออกแบบหน้าจอจัดการออร์เดอร์จากการนั่งดูทีมแพ็กของทำงานจริง ตัดขั้นตอนที่ไม่จำเป็น พนักงานใหม่เรียนรู้ระบบได้ภายในไม่กี่ชั่วโมง และงานคีย์ข้อมูลซ้ำลด 40%
คำถามพบบ่อย
ข้อมูลที่ควรทราบก่อนเริ่มงาน
ได้ครับ ลูกค้าหลายรายมีทีมพัฒนาภายในอยู่แล้วและต้องการเฉพาะงานออกแบบ เราส่งมอบไฟล์ Figma พร้อม Design System ที่ทีมของคุณนำไปพัฒนาต่อได้ทันที และยินดีเข้าร่วมประชุมกับทีมพัฒนาของคุณในช่วงส่งต่องาน
เว็บไซต์องค์กรทั่วไปใช้เวลา 2–3 สัปดาห์ ส่วนแอปหรือระบบที่มีหลายบทบาทผู้ใช้อยู่ที่ 4–8 สัปดาห์ ขึ้นกับจำนวนหน้าจอและรอบการทดสอบผู้ใช้ที่ต้องการ
UX คือการออกแบบว่าผู้ใช้จะทำงานสำเร็จได้อย่างไร มีขั้นตอนอะไรบ้าง ส่วน UI คือหน้าตาของแต่ละหน้าจอ สี ตัวอักษร และปุ่ม ระบบที่สวยแต่ใช้ยากคือมี UI แต่ขาด UX เราทำทั้งสองอย่างต่อเนื่องกัน แต่ถ้าคุณมีแบรนด์และหน้าตาที่พอใจแล้ว รับเฉพาะงาน UX เพื่อปรับเส้นทางการใช้งานก็ได้
มีจะดีที่สุด และส่วนใหญ่แค่ 5–8 คนก็เห็นปัญหาหลักครบแล้ว ถ้าระบบยังไม่มีผู้ใช้ เราหาผู้ทดสอบที่มีลักษณะใกล้เคียงกลุ่มเป้าหมายให้ได้ และใช้ข้อมูลอื่นประกอบ เช่น บันทึกคำถามที่ลูกค้าถามบ่อย และการสังเกตพนักงานที่ทำงานนั้นอยู่ทุกวัน
ได้ครับ เราเริ่มด้วย UX Audit เพื่อประเมินระบบเดิมตามหลัก Heuristic และข้อมูลการใช้งานจริง แล้วเสนอรายการปรับปรุงเรียงตามผลกระทบต่อธุรกิจ คุณเลือกทำเฉพาะข้อที่คุ้มที่สุดก่อนได้
ได้ เพราะเราส่งมอบใน Figma พร้อม Design Token ที่ระบุค่าสี ระยะ และตัวอักษรเป็นตัวเลขชัดเจน คอมโพเนนต์ตั้งชื่อตรงกับที่นักพัฒนาใช้ และมีทุกสถานะของหน้าจอ ไม่ต้องเดา เรายังเข้าร่วมประชุมส่งต่องานและตรวจหน้าจอที่พัฒนาแล้วเทียบกับแบบให้ด้วย
ทำเป็นค่าเริ่มต้นตามแนวทาง WCAG 2.1 ระดับ AA ทั้งคอนทราสต์สี ขนาดตัวอักษรที่ขยายได้ การใช้งานด้วยแป้นพิมพ์ และป้ายกำกับสำหรับโปรแกรมอ่านหน้าจอ ซึ่งช่วยผู้ใช้ทุกกลุ่ม และช่วยให้ระบบผ่านเกณฑ์ที่หน่วยงานรัฐและองค์กรใหญ่เริ่มกำหนดในสัญญา
สิ่งที่ช่วยได้มากคือ เป้าหมายของระบบและตัวชี้วัดที่อยากเห็น, โลโก้และแนวทางแบรนด์ถ้ามี, รายชื่อผู้ใช้หรือพนักงานที่ให้สัมภาษณ์ได้, ตัวอย่างระบบที่ชอบและไม่ชอบ และข้อจำกัดทางเทคนิคจากทีมพัฒนา ถ้ายังไม่มีอย่างใดอย่างหนึ่ง เราช่วยกำหนดร่วมกันในเวิร์กชอปแรก
บริการที่เกี่ยวข้อง
บริการอื่นที่ดำเนินการร่วมกันได้
ติดต่อเพื่อขอรับคำปรึกษาด้านการออกแบบ
ขอ UX Audit เบื้องต้นได้ฟรี เราจะชี้จุดที่ผู้ใช้มักสะดุดพร้อมแนวทางแก้ที่ทำได้จริง