Sarawut “Nui” Chantasang
ผมเป็น UX/UI Designer ที่พัฒนา Frontend ได้ วาง Information Architecture และ workflow จากโจทย์ของผู้ใช้ ก่อนแปลงเป็น interface ที่ใช้งานได้จริง
9 case studies · ตั้งแต่ product blueprint และ functional prototype ถึงระบบที่เผยแพร่บน production
งานทั้งหมด 9 ชิ้น · Product Design · Frontend Development · Design System · Live Product
เครื่องมือที่ผมใช้งานได้
จุดแข็งหลักคือ UX/UI และ Information Architecture พร้อมทำงานต่อเนื่องถึง frontend implementation โดยแยกขอบเขตของแต่ละบทบาทให้ชัดเจนตามหลักฐานใน Portfolio
พัฒนาเว็บไซต์และ web application จากโครงสร้างเนื้อหาและ workflow ไปสู่หน้าที่เชื่อมกับระบบจริง โดยคำนึงถึงเส้นทาง public, staff และข้อจำกัดของ production
แปลง IA, flow และ design system เป็น responsive interface ที่คง visual hierarchy และความหมายของ component/state ได้ตั้งแต่ต้นแบบจนถึง visual QA
พัฒนา interaction และ state ของหน้าจอให้สอดคล้องกับ business rule พร้อมจัดการ validation, API contract และสถานะระหว่างทางที่ผู้ใช้พบจริง
ผมใช้การวิเคราะห์บทบาท ขั้นตอน และข้อมูลเพื่อกำหนดว่าแต่ละหน้าต้องช่วยใครตัดสินใจเรื่องอะไร แล้วส่งต่อเป็น IA, business rules และสถานะของระบบ ทักษะนี้อยู่ในงาน UX/UI และ Frontend ที่แสดงในพอร์ต
สี่เคสแรกแสดงงาน production และต้นแบบที่กดลองได้ จากนั้นเปิดดูงานระบบ งานวิจัย UX และ design system เพิ่มเติมตามความสนใจ
Role fit · Web Developer · Frontend Design · Frontend Developer
จัดประสบการณ์ตั้งแต่การค้นพบนิทรรศการ การลงทะเบียน ปฏิทินกิจกรรม Mind Reflection ไปจนถึงเครื่องมือหน้างาน ให้เป็นระบบเดียวที่อ่านง่ายทั้งฝั่งผู้ชมและทีมปฏิบัติการ
สถานะ: public experience หลักเผยแพร่บน production แล้ว ส่วน Back Office V2 ยังแยกตรวจสอบใน local
Role fit · Web Developer · Frontend Design · Frontend Developer
ออกแบบและพัฒนาเว็บไซต์สตูดิโอภาษาไทยแบบ single page ด้วย semantic HTML, responsive visual system และ WebGL motion ที่มี fallback, reduced-motion และ lifecycle handling
สถานะ: production release มีเอกสาร deploy และตรวจ byte match วันที่ 7 กันยายน 2026
Role fit · Web Developer · Frontend Design · Frontend Developer
เชื่อมเรื่องราวแคมเปญ การเลือกเสื้อ พรีออเดอร์ ส่งสลิป และติดตามสถานะ เข้ากับคิวตรวจสอบและ fulfilment ของทีมงาน โดยแยก payment กับ delivery state ให้ผู้ใช้เข้าใจตรงกัน
สถานะ: public experience และ operations workflow เผยแพร่บน production
Role fit · Frontend Design · Frontend Developer · Data & GIS Prototype
ออกแบบ kiosk สำหรับผู้เข้าชมสวนสัตว์ ตั้งแต่ค้นหาสัตว์ วางแผนเส้นทาง ดูกิจกรรม ไปจนถึง QR pass โดยเชื่อมข้อมูล POI และ route geometry เข้ากับ interaction ที่ใช้งานบนจอสัมผัส
สถานะ: interactive prototype · เส้นทางสร้างจาก prototype road mask ยังไม่ใช่ข้อมูลสำรวจภาคสนาม
Role fit · Frontend Design · Frontend Developer · React / TypeScript
โจทย์: ผู้ใช้หลายบทบาทต้องทำงานกับข้อมูลพนักงาน เวลา การลา เงินเดือน และรายงานโดยไม่หลงโมดูล จึงออกแบบ role-aware IA, task-first workflow, design system และ data contract เป็น functional full-stack prototype
สถานะ: prototype ที่ทำงานได้ ยังไม่ได้ pilot ในองค์กรจริง
Role fit · Frontend Design · Frontend Developer · Vanilla JS / PHP API
โจทย์: งานหน้าร้านต้องไหลต่อกันตั้งแต่เลือกโต๊ะ รับออเดอร์ ส่งครัว จนถึงชำระเงิน จึงวาง role-based IA, state design, business rules และ responsive UI เป็น functional prototype
สถานะ: ใช้ข้อมูลสาธิต ยังไม่ได้ pilot ในร้านจริง
ไฟล์อยู่ใน Figma Drafts · การเปิดดูขึ้นอยู่กับสิทธิ์แชร์ของไฟล์
Role fit · Frontend Design · Product Design Handoff
ออกแบบ two-sided platform สำหรับผู้ขายชุมชนและผู้ซื้อ ESG ตั้งแต่ BMC, personas, journey, IA และ prototype จนถึง design system พร้อมส่งต่อทีมพัฒนา
Role fit · Frontend Design · IA / Interaction Direction
วิเคราะห์ทัวร์เสมือนที่ผู้ใช้หลงทั้งเชิงพื้นที่และข้อมูลจากหลักฐาน think-aloud ที่จัดตาม 3 persona แล้วปรับ IA, user flow และชุดควบคุมให้คงอยู่บนจอ
Role fit · Frontend Design · Frontend Developer (Static Reference)
สร้างภาษาภาพกลางให้ระบบ POS ด้วย color, type, spacing, radius, component states และ CSS variables พร้อม role-based IA และ sitemap ที่ใช้ขยายหน้าจอต่อได้
แต่ละโปรเจกต์มีข้อจำกัดและหลักฐานไม่เท่ากัน ผมจึงเลือกกิจกรรมให้เหมาะกับโจทย์ และแยกสิ่งที่สร้างแล้วออกจากสิ่งที่ยังต้อง validate
ARTWELL ใช้ public experience ที่เบาและเล่าเรื่องได้ ขณะที่งานลงทะเบียน เช็กอิน และจัดการกิจกรรมต้องมีสถานะที่ทีมหน้างานอ่านได้เร็ว
CASE · ARTWELLHRMS และ GRP POS เริ่มจากว่าใครต้องตัดสินใจอะไรในแต่ละช่วง แล้วค่อยเชื่อมข้อมูลและ state ให้ผู้ใช้ไปต่อได้โดยไม่ย้อนหาโมดูล
CASES · HRMS / GRP POSVERDA และ KU Engineering 360° ทำให้เห็นว่าความน่าเชื่อถือและการไม่หลงทางเริ่มจากโครงสร้าง route, navigation และข้อมูลที่ถูกต้อง
CASES · VERDA / KU ENG 360°Design Thinking Framework
Double Diamond Framework
◇ Problem space
◇ Solution space
UX Design Process · Deliverables
ทำงานสายออกแบบและสื่อสารตั้งแต่ปี 2554 ครอบคลุม UX Research, Information Architecture, Prototype, Design System และ responsive frontend พร้อมส่งมอบ Spec/Handoff ที่ทีม Dev ใช้ทำงานต่อได้
Command N Design Center
Professional Summary
UX/UI Designer ที่ถนัด Information Architecture ดูแลงานตั้งแต่ทำความเข้าใจผู้ใช้และจัดโครงสร้างข้อมูล ไปจนถึง Design System, Prototype, responsive frontend และ Spec/Handoff ที่ทีมพัฒนาต่อได้ รวมถึงการอ่านข้อมูลเพื่อจัดลำดับปัญหา ออกแบบ dashboard และสื่อสารสถานะให้ตัดสินใจได้ง่าย
หน้าที่รับผิดชอบ
Skills
บริษัท สยามโกลบอลเฮ้าส์ จำกัด (มหาชน)
ช่วงที่ได้ออกแบบระบบที่มีคนใช้งานจริงในสายปฏิบัติการ ไม่ใช่แค่งานสื่อสาร
คณะสัตวแพทยศาสตร์ มหาวิทยาลัยเกษตรศาสตร์
ดูแลเว็บไซต์และช่องทางสื่อสารของคณะแบบครบวงจร เป็นทั้งคนออกแบบ คนลงข้อมูล และคนที่ตอบคำถามผู้ใช้เอง
การศึกษา
มหาวิทยาลัยมหาสารคาม · ปริญญาตรี
สาขาที่เรียนเรื่องการออกแบบสื่อและการสื่อสารเพื่อให้คนเข้าใจ เป็นพื้นฐานเดียวกับงาน IA ที่ทำอยู่ทุกวันนี้ คือการจัดข้อมูลให้คนหาเจอและเข้าใจได้
งานวิจัยระหว่างเรียน
โครงการและการฝึกอบรม
เข้าใจลูกค้า สร้างสินค้าและบริการที่ตรงใจด้วย Customer Experience
ปูพื้นฐานกลยุทธ์การรักษาฐานลูกค้าด้วย CRM
โครงการสุดยอดธุรกิจนวัตกรรมระดับภูมิภาค “นิลมังกร รุ่นที่ 4” · สำนักงานนวัตกรรมแห่งชาติ (NIA)
Genius Academy DIPROM Genius AGRO 360 · กรมส่งเสริมอุตสาหกรรม (ดีพร้อม)
สร้างฐานลูกค้าและบริหารการตลาดด้วย Email Marketing Automation
ทำ Line Marketing แบบครบวงจรสำหรับธุรกิจยุคใหม่
ยกระดับธุรกิจเพิ่มช่องทางการตลาดให้ปิดการขายได้ด้วย Sale Page
เริ่มจากศูนย์ ยังไม่มี baseline ต้องเข้าใจผู้ใช้จริง ๆ ก่อนออกแบบ เหมาะกับ product ใหม่หรืองาน innovation ที่ยังไม่เคยมีมาก่อน คำถามหลักคือ “ผู้ใช้จริง ๆ ต้องการอะไร”
ตัวอย่างในพอร์ตนี้: VERDA ที่ออกแบบ product ตั้งแต่ต้น สร้าง BMC และ personas ก่อนมีแม้แต่ wireframe
มีระบบหรือเว็บที่ทำงานอยู่แล้ว ต้องการตรวจว่ากำลังแก้ปัญหาที่ถูกต้องหรือเปล่า ก่อนลงทุน redesign เหมาะกับงาน audit และ redesign คำถามหลักคือ “เรากำลังแก้ปัญหาที่ถูกต้องไหม”
ตัวอย่างในพอร์ตนี้: KU Engineering 360° เป็นงาน audit และ redesign ระบบที่มีอยู่ โดยค้นหา root cause ก่อนเสนอทางแก้
เข้าใจปัญหาและทิศทางชัดเจนแล้ว ต้องการ roadmap ที่บอกว่าต้องทำอะไร ส่งมอบอะไรบ้าง ทำหน้าที่เป็น “ภาษากลาง” กับทีมและ stakeholder
ใช้ในทุกเคส เป็นโครงหลักของทุกโปรเจกต์ คือ Research → IA → Flow → Design → Validate
ผมใส่เฉพาะตัวเลขที่มีหลักฐานจากระบบจริงหรือแหล่งข้อมูลที่ตรวจสอบได้ งาน self-initiated ที่ไม่ได้เข้าถึง analytics จะไม่อ้างผลลัพธ์หลัง launch เพราะตัวเลขเหล่านั้นพิสูจน์ไม่ได้
สิ่งที่ให้แทนคือ วิธี validate ที่ชัดเจน บอกว่าจะวัดอะไร ด้วยวิธีไหน และกับใคร ส่วนงาน production จะแยกสถานะ live, protected และ staged scope ให้ตรงกับสิ่งที่เผยแพร่จริง
ARTWELL เป็น live product ที่ public experience หลักเผยแพร่บน production แล้ว ครอบคลุม exhibition discovery, registration, activity calendar, Mind Reflection และเครื่องมือหน้างาน
Satihimal เป็น live product สำหรับ charity made-to-order ที่เชื่อม campaign, preorder, private slip upload, token-based tracking และ staff operations โดยไม่เปิดเผยข้อมูลลูกค้าหรือสลิปใน public surface
Orenvis เป็น production marketing site ที่ใช้ Vite, HTML/CSS/JavaScript, Three.js, GSAP และ Lenis เพื่อเชื่อม responsive content กับ WebGL motion โดยมี fallback และ reduced-motion รองรับ
Orienteering HRMS เป็น functional full-stack prototype ที่มี role-aware navigation, dashboard, people, attendance, leave/approval patterns, payroll, reports, API routes และ PostgreSQL/Prisma schema พร้อม case study ที่แยกสิ่งที่สร้างแล้วออกจาก validation target ชัดเจน โดยยังไม่อ้างว่า pilot ในองค์กรจริงแล้ว
GRP Restaurant POS เป็น functional prototype ที่ผมออกแบบและพัฒนาครบตั้งแต่ผังโต๊ะ ออเดอร์ ครัว ชำระเงิน ไปจนถึงรายงาน พร้อม responsive UI และ design system โดยระบุชัดว่ายังไม่ผ่าน pilot ในร้านจริง และใช้ข้อมูลสาธิตทั้งหมด
VERDA เป็น product blueprint ที่ไล่ครบตั้งแต่ context, BMC, personas, journey, IA, prototype จนถึง design system เต็มรูปแบบ พร้อม handoff เปิดดูได้จากไฟล์ Design System โดยตรง
FRUT POS แสดง Design Tokens, role-based IA, Sitemap, component states และ CSS variables ที่ใช้เป็นมาตรฐานสำหรับพัฒนาหน้าจอต่อ ส่วน KU Engineering 360° มี user research, IA, user flow และ wireframe redesign อยู่ในรายงานฉบับเต็ม
จุดยืนหลักคือ UX/UI Designer ที่พัฒนา Frontend ได้ เหมาะกับงานที่ต้องจัดโครงสร้างข้อมูล ออกแบบ flow และลงมือสร้าง responsive interface โดยเคส production และ prototype แยกสถานะไว้ชัดเจน
สำหรับตำแหน่ง Web Developer, Frontend Design และ Frontend Developer สามารถเลือกเคสที่ตรงกับงานได้จากส่วนขอบเขตงาน ส่วน Business Analysis เป็นทักษะประกอบที่แสดงผ่าน workflow, business rules และการแยกบทบาทในเคสระบบ
รับทั้งงาน freelance และงานประจำ ครอบคลุม UX/UI, Web Developer, Frontend Design และ Frontend Developer โดยถนัดงานที่ต้องแกะปัญหาเชิงโครงสร้าง ออกแบบระบบใหม่ หรือพัฒนา interface ต่อจาก design ที่มีอยู่ ทำงานภาษาไทยและอังกฤษ
ส่งลิงก์เว็บหรือระบบที่อยากให้ดูมาทางอีเมลได้เลย ผมมักเริ่มด้วยการเดินระบบจริงก่อน แล้วส่งกลับเป็นภาพ IA ปัจจุบัน พร้อมจุดที่น่าจะเป็นปัญหา
ผมชื่อ Sarawut “Nui” Chantasang ทำงาน UX/UI และ Frontend Development โดยใช้ Information Architecture เป็นฐานในการออกแบบและพัฒนา
ส่งโจทย์ ลิงก์เว็บ หรือรายละเอียดตำแหน่งมาได้เลย