meHome เป็นฟีเจอร์ย่อยที่อยู่ในแอปพลิเคชันที่ชื่อว่า meID โดยใช้ในการสั่งซื้อและผ่อนสินค้า โดยเน้นเครื่องใช้ไฟฟ้าเป็นหลักในส่วนของ meHome อีกทั้งยังสามารถดูข้อมูลต่าง ๆ ของสินค้าโดยการเชื่อมต่อ IoT ของสินค้าเข้ากับแอปพลิเคชัน
–
August 2023
เนื่องจากแอปพลิเคชันนี้ในตอนแรกจะไม่ได้มีฟีเจอร์เกี่ยวกับการแสดงผลสินค้าประเภท IoT หน้าที่หลักคือ (1) ออกแบบขั้นตอนการเชื่อมต่ออุปกรณ์ IoT เข้ากับแอปพลิเคชัน และ (2) หน้าจอแสดงผลข้อมูลของสินค้าหลังจากเชื่อมต่ออุปกรณ์ ซึ่งอุปกรณ์ IoT ที่ต้องออกแบบการเชื่อมต่อในครั้งนี้คือเครื่องกรองน้ำ
1 ออกแบบขั้นตอนการเชื่อมต่ออุปกรณ์ IoT เข้ากับแอปพลิเคชัน
เริ่มจากการศึกษาข้อมูลเกี่ยวกับการเชื่อมต่ออุปกรณ์ IoT โดยการทำงานร่วมกับทีม deverloper ทั้ง back-end และ front-end โดยทางทีม dev จะศึกษามาก่อนว่าอุปกรณ์ทำงานอย่างไร จากนั้นจึงมาร่วม discuss กันโดยระหว่างนั้น
ฝั่ง designer จะ research ข้อมูลโดยดูจากแอปพลิเคชันที่คล้ายกันว่าส่วนใหญ่แล้ว ขั้นตอนการเชื่อมต่ออุปกรณ์นี้เป็นอย่างไร เพราะส่วนนี้ถ้า user เคยใช้งานมาบ้างแล้วจะได้ลดระยะเวลาในการเรียนรู้การใช้งานเพราะน่าจะมีความเคยชินมาจากแอปพลิเคชันอื่นมาบ้างแล้ว ซึ่งเป็นการคำนึงถึงการออกแบบโดยใช้หลัก Jakob’s Law ที่ว่า “ผู้ใช้มักต้องการให้เว็บไซต์ทำงานในลักษณะเดียวกันกับที่พวกเขาใช้”
2 หน้าจอแสดงผลข้อมูลของสินค้าหลังจากเชื่อมต่ออุปกรณ์
เริ่มจากการศึกษาข้อมูลเกี่ยวกับอุปกรณ์ก่อนตั้งแต่วิธีการใช้งาน การแสดงผลที่หน้าจออุปกรณ์ เช่น ค่าความสะอาดของน้ำ การตั้งค่าเรื่อง ระดับน้ำต่าง ๆ เพื่อที่จะนำข้อมูลมาวิเคราะห์แล้วออกแบบการแสดงที่แอปพลิเคชันได้อย่างถูกต้อง
1 ออกแบบขั้นตอนการเชื่อมต่ออุปกรณ์ IoT เข้ากับแอปพลิเคชัน
เนื่องจากมีเวลาในส่วนออกแบบแค่ 5 วัน ทุกอย่างจะค่อนข้างเร่งรัดมาก หลังจากที่ทำการค้นหาข้อมูลแล้วก็ได้ทำการร่าง flow การเชื่อมต่อคร่าว ๆ แล้วนำไปคุยกับ dev ค่ะ พอได้ confirm จากทีมก็มาทำ hi-fi ตอนทำก็จะทำให้ consistency กับอันเดิมที่มีอยู่ซึ่งทางทีมจะมี design system อยู่แล้ว และหลังจากนั้นให้ทีม dev นั้น recheck อีกครั้งเพื่อไม่ให้เิกิดปัญหาทางเทคนิคหลังจากออกแบบเรียบร้อยแล้ว
ภาพตัวอย่าง Hi-Fi แรก
2 หน้าจอแสดงผลข้อมูลของสินค้าหลังจากเชื่อมต่ออุปกรณ์
หลังจากศึกษาข้อมูลเกี่ยวกับเครื่องกรองน้ำแล้วก็เริ่มออกแบบการแสดงผล โดยจะแบ่งตามสถานะการณ์ที่จะเกิดขึ้นดังนี้
- ค่าน้ำปกติ
- ค่าน้ำหลังกรองเริ่มไม่สะอาดมากกว่า 301 ppm
- การแจ้งเตือน Error เนื่องจากเครื่องกรองเริ่มทำงานไม่ปกติ เช่น ระบบตรวจจับได้ว่าประสิทธิภาพทำงานลดลง
- แจ้งเตือนการเปลี่ยนไส้กรอง
- กรณีโหลดข้อมูลอยู่
ซึ่งเหตุการณ์ที่จะเกิดขึ้นทั้งหมดทางทีมได้อ้างอิงจากการทำงานของอุปกรณ์ และเพิ่ม case ในส่วนที่น่าจะเกิดขึ้นเช่น กรณีการโหลดข้อมูลต่าง ๆ โดยข้อมูลในส่วนนี้จะถูกส่งให้ทีมพัฒนาเครื่องกรองน้ำตรวจสอบความถูกต้องการที่จะพัฒนาแอปพลิเคชัน
ภาพตัวอย่างการแสดงข้อมูลอุปกรณ์ที่ได้ออกแบบ
สำหรับฟีเจอร์การเชื่อมต่ออุปกรณ์ IoT เข้ากับแอปพลิเคชันนั้น หลังจากที่ผ่านการตรวจสอบจากทีม Dev ก็ได้นำ draft แรกมาเก็ยรายละเอียดต่อเรื่อง case ต่าง ๆ ที่จะเกิดขึ้นเช่น หากเชื่อมต่อไม่สำเร็จจะแสดงผลอย่างไร แม้กระทั่งกรณีที่ไม่มีอินเทอร์เน็ตหรือไวไฟผู้ใช้จะต้องรับรู้จากหน้าจอแสดงผลด้วย
ภาพตัวอย่าง Flow การเชื่อมอุปกรณ์บางส่วน
ภาพตัวอย่าง Flow กรณีที่ไม่มีการเชื่อมต่อ Wi-Fi ที่อุปกรณ์
ภาพตัวอย่าง Flow กรณีที่ต้องการเปลี่ยน Wi-Fi ที่เชื่อมต่อ เพื่อรองรับสถานะการณ์ที่ผู้ใช้ย้ายบ้าน
ภาพตัวอย่าง Flow กรณีที่ต้องการเลิกเชื่อมต่อ Wi-Fi
ภาพตัวอย่าง Flow กรณีที่เกิดปัญหาบางอย่างกับการเชื่อมต่อ Wi-Fi
ในส่วนนี้ขอแบ่งปันภาพของแอปพลิเคชัน เพื่อให้ได้เห็นภาพผลงานการออกแบบได้มากขึ้น
สามารถใช้งานสามารถโดยดาวน์โหลดได้ทั้งระบบ Android และ iOS
เป็นครั้งแรกที่ได้ทำงานเกี่ยวกับการเชื่อมต่อ IoT และพบว่า การมีการประชุมและพูดคุยกับทีม Dev ช่วยให้การทำงานราบรื่นและมีประสิทธิภาพมากขึ้น โดยเฉพาะในการลดขั้นตอนการทำงานซ้ำ หากเราออกแบบไปก่อนโดยที่ไม่ได้ปรึกษาทีมหรือศึกษาข้อมูลอุปกรณ์ให้ดี อาจจะต้องกลับมาแก้ไขหลายรอบได้ ในงานที่มีระยะเวลาที่จำกัดการพูดคุยกับทีมทุกฝ่ายที่มีความเกี่ยวข้องเป็นเรื่องที่ดีมากๆค่ะ
