case study ฉบับเต็ม · ผลงานที่เปิดใช้งานจริง

HabitQuest ทำให้การมาทำสิ่งเดิมทุกวันรู้สึกเหมือนเกมที่น่าเล่น

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

เล่นแอปจริง กลับไป Case Studies
HabitQuest landing screen: pixel-art warrior hero facing the Lazy Slime monster under a battle HP bar.
ประเภทโปรเจกต์ เว็บแอปที่เปิดใช้งานจริง — แอปสร้างนิสัยแนว RPG พิกเซล
กลุ่มเป้าหมาย คนที่เลิกใช้แอปสร้างนิสัยแบบทั่วไปกลางคัน
โฟกัส วงจรแรงจูงใจ เริ่มใช้งานได้ทันทีไม่มีขั้นตอนยุ่งยาก ความรู้สึกแบบเกม
เทคโนโลยี React + Vite · deploy บน Vercel · ออฟไลน์ก่อนเป็นหลัก
โจทย์

แอปสร้างนิสัยตายเพราะติ๊กช่องแล้วไม่ได้อะไรกลับมา

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

เป้าหมาย

ทำให้การรักษาความสม่ำเสมอเป็นส่วนที่สนุก

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

การตัดสินใจด้านดีไซน์

3 ทางเลือกที่เปลี่ยนเช็กลิสต์ให้เป็นเกม

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

  1. 01

    นิสัยสร้างความเสียหาย

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

  2. 02

    เริ่มเล่นได้ทันที ไม่บังคับสมัครสมาชิก

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

  3. 03

    ภาพพิกเซลอาร์ตน่ารัก แทนกลไกกดดัน

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

สิ่งที่ผมฝึกฝน

วงจรผลิตภัณฑ์จริง สร้างและเปิดใช้งานครบวงจร

HabitQuest เป็นแอป React + Vite ที่ใช้งานได้จริง deploy บน Vercel — มี component state สำหรับวงจรการต่อสู้ เก็บข้อมูลไว้ในเครื่องเพื่อให้ความคืบหน้าอยู่รอดแม้ออฟไลน์ และระบบเศรษฐกิจในเกม (XP, ความเสียหาย, เลเวล, สตรีค) ที่ต้องสมดุลและอ่านง่ายไปพร้อมกัน

React + Vite game loop design offline-first state Vercel deployment
ทำไมเรื่องนี้ถึงสำคัญ

การเปิดใช้งานจริงชนะการทำ mockup

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

ผลลัพธ์

ผลิตภัณฑ์ที่เปิดใช้งานจริง เล่นฟรี ใครก็ลองได้เดี๋ยวนี้

HabitQuest deploy แล้วและเล่นได้จริง — ไม่ต้องติดตั้ง ไม่ต้องสมัครสมาชิก เล่นออฟไลน์ได้ ผู้รีวิวเปิดลิงก์ ต่อสู้กับ Lazy Slime และตัดสินผลิตภัณฑ์ได้ด้วยการใช้งานจริง — ไม่ใช่แค่อ่านเกี่ยวกับมัน

เล่นแอปจริง กลับไปพอร์ตโฟลิโอ เรซูเม่