GeneusDNA
โจทย์
ผู้ใช้ทั่วไปที่ไม่มีพื้นฐานด้านพันธุศาสตร์ ต้องเข้าใจผลตรวจ DNA ที่ซับซ้อนกว่า 500 รายการ (วิเคราะห์จากยีนกว่า 20,000 ตัว และข้อมูลกว่า 10 ล้านตำแหน่ง) ให้ได้ — และที่สำคัญกว่านั้นคือนำไปปรับใช้ในชีวิตจริงได้ ไม่ใช่แค่ได้ตัวเลข/ศัพท์เทคนิคที่อ่านไม่เข้าใจ โจทย์คือทำให้ทั้ง Landing page (ที่ต้องอธิบายบริการก่อนซื้อ), ระบบรายงานผล (ที่ต้องแปลผลวิเคราะห์ทางการแพทย์ให้คนทั่วไปเข้าใจ) และ Mobile app (สำหรับติดตามผลระยะยาว) เชื่อมกันเป็นประสบการณ์เดียวที่เข้าใจง่ายตลอดทาง
FIG. 02 เปลี่ยนข้อมูลพันธุกรรมที่ซับซ้อนให้เป็นประสบการณ์ที่เข้าใจง่าย — ออกแบบ Digital ecosystem ครบวงจร ตั้งแต่ Landing page ที่พาผู้ใช้ผ่านขั้นตอนเก็บตัวอย่างน้ำลายที่บ้าน ไปจนถึงระบบรายงานผลที่แปลงผลวิเคราะห์กว่า 500 รายการให้เป็น Spectrum Slider เข้าใจง่าย พร้อมข้อมูลยีนและ Marker อ้างอิง และ Mobile app สำหรับติดตามผลสุขภาพระยะยาว
- รายงานผล
- 500+ รายการ
- เก็บตัวอย่าง
- น้ำลาย ทำเองที่บ้าน
- Report UI
- Gene-trait Spectrum Slider
- ห้องปฏิบัติการ
- รับรองมาตรฐาน CLIA / CAP
- ดูผลผ่าน
- แอป GeneusDNA
- ออกแบบรายงาน
- กว่า 20 รายงาน ตั้งแต่บรรพบุรุษถึงการตอบสนองต่อยา
บทบาทและแนวทาง
บทบาทของผมคือ UX/UI Designer — รับโจทย์และผลวิเคราะห์จากทีมวิจัย (Research Team) ที่ส่งมาเป็นข้อความล้วน เต็มไปด้วยศัพท์เทคนิคทางพันธุศาสตร์ หน้าที่หลักคือนำข้อมูลดิบเหล่านั้นมาจัดระเบียบ คัดกรอง และเรียบเรียงใหม่ให้คนทั่วไปอ่านแล้วเข้าใจได้ทันที พร้อมออกแบบให้สื่อสารผ่านภาพแทนตัวหนังสือล้วน ๆ — จึงเป็นที่มาของ Gene-trait Spectrum Slider ที่แปลงผลตรวจแต่ละรายการให้เห็นเป็นตำแหน่งบนแถบกราฟที่เข้าใจได้ในพริบตา แทนที่จะต้องอ่านค่าตัวเลขหรือศัพท์ทางการแพทย์
01Landing page
FIG. 03
FIG. 04
FIG. 0502ระบบรายงานผล
FIG. 06
FIG. 07
FIG. 0803Redesign
FIG. 0904Design System
ผมสร้าง Design system ของ Geneus เองทั้งหมด ระบบเดียวรองรับ 3 แบรนด์ คือ GeneusDNA (แอปและระบบรายงานผล), CARE persona และ Geneus Pet ทุกแบรนด์สร้างจาก Foundation และ Component ชุดเดียวกัน Geneus Pet เปลี่ยนแค่สี Primary เป็นสีของแบรนด์เอง และใช้สี teal ของ Geneus เป็น Secondary ส่วนที่เหลือใช้ร่วมกันทั้งหมด ทุกค่าถูกเก็บเป็น Variable ใน Figma ทั้งสี ตัวอักษร เงา และเบลอ
ระบบเดียวกัน แบรนด์อื่น: CARE persona →Geneus Pet →
- สี
- 5 ชุดสี × 10 ระดับ + เทา
- ระดับบริการ
- Silver / Standard / Premium
- ตัวอักษร
- แยกสเกล Desktop + Mobile
- ไอคอน
- UIcons Rounded, 24px
- เอฟเฟกต์
- เงา 7 ระดับ, เบลอ 4 ระดับ
- Components
- Button, Input, Toggle, Checkbox, App bar
- State
- Default, Hover, Focus, Disabled, Error
- ใช้ใน
- GeneusDNA, CARE persona, Geneus Pet
สเกลสี — ● คือระดับหลัก
- 50 #DEF3F2
- 100 #ADE2DE
- 200 #74CFC9
- 300 ● #29BCB2
- 400 #00ADA1
- 500 #009D8F
- 600 #009081
- 700 #008070
- 800 #006F61
- 900 #005344
- 50 #FEF3E9
- 100 #FDE7D2
- 200 #FBCEA5
- 300 #FAB679
- 400 #F89D4C
- 500 ● #F6851F
- 600 #C56A19
- 700 #945013
- 800 #62350C
- 900 #311B06
- 50 #FDECEB
- 100 #FBD9D7
- 200 #F7B4AE
- 300 #F28E86
- 400 #EE695D
- 500 ● #EA4335
- 600 #BD362B
- 700 #912920
- 800 #641C16
- 900 #380F0B
- 50 #FDF6EB
- 100 #FAEED6
- 200 #F5DCAD
- 300 #F0CB84
- 400 #EBB95B
- 500 ● #E6A832
- 600 #BB8828
- 700 #8F681F
- 800 #644915
- 900 #38290C
- 50 #DFF2FA
- 100 #C6E6F5
- 200 #95D0EC
- 300 #63B9E2
- 400 #32A3D9
- 500 ● #008CCF
- 600 #0070A6
- 700 #00547C
- 800 #003853
- 900 #001C29
- 0 #FFFFFF
- 50 #F7F7F7
- 100 #E6E6E6
- 200 #C1C1C1
- 300 #808082
- 400 #636363
- 500 #383938
ธีมแบรนด์ — Geneus Pet
เปลี่ยน Primary เป็นสีแบรนด์ Geneus Pet และใช้ teal ของ Geneus เป็น Secondary
- 50 #FCE4EC
- 100 #F8BBD0
- 200 #F48FB1
- 300 ● #ED008C
- 400 #B50E52
- 500 #9E0C48
- 600 #870A3E
- 700 #700834
- 800 #590629
- 900 #42041F
- 50 #DEF3F2
- 100 #ADE2DE
- 200 #74CFC9
- 300 ● #29BCB2
- 400 #00ADA1
- 500 #009D8F
- 600 #009081
- 700 #008070
- 800 #006F61
- 900 #005344
Gradient ตามระดับบริการ
- Silver
- Standard
- Premium
ระดับเงา
- xs
- sm
- md
- lg
- xl
- 2xl
- 3xl
05ก้าวต่อไป — One Geneus
FIG. 10