Mascot empeo เจ้าก้อนผู้มาพร้อมกับการเปลี่ยนแปลง…

Mook Chalothon
Gofive

--

จุดเริ่มต้นของทั้งหมดนั้นเริ่มมาจากการที่ทาง CEO และ Product owner ของทาง Gofive ต้องการที่จะปรับโฉมโปรแกรม HRM empeo (https://www.myempeo.com/) ขึ้นมาเพื่อให้ทันสมัยและ ให้ลูกค้าที่น่ารักของเราใช้งานได้ง่ายขึ้นกว่าเดิม

คราวนี้กราฟิคดีไซนเนอร์อย่างอีชั้น เป็นอันได้งานหนาวๆร้อนๆอย่างการออกแบบ “หน้า Setting” ของโปรมแกรมนี้ขึ้นมาใหม่ทั้งหมด…

หน้าตา Setting รูปแบบเดิม

เอาละซิ! จะทำยังไงที่จะออกแบบหน้า Setting ที่เปลี่ยนชื่อเรียกแบบเก๋ๆว่า Easy Setup นี้ออกมาให้สมกับการเปลี่ยนแปลงครั้งใหญ่นี้กันดีนะ

ผสานความชอบกับงานที่ทำ

คนที่ทำงานสาย Ux Ui โดยเฉพาะนั้น เวลาที่มีการออกแบบมาก็มักจะคิดถึงปัญหาของผู้ใช้งานเป็นหลัก รวมรวบ research สร้าง mockup สวยงาม โดยคำนึงถึงผู้ใช้งานเป็นหลักได้อย่างดี

หน้า Ui ที่ Product Owner ลองปรับรูปแบบดูคร่าวๆ

แต่คราวนี้ Graphics design ที่ Skill Ui Design ระดับพอเข้าวัดเข้าวาได้นั้นอาจจะต้องข่มขวัญคู่ต่อสู้ด้วยท่าไม้ตายอย่าง “มาสคอสดีไซน์” ให้ทุกคนได้ คาวาอี๊! กัน

เริ่มมาจากความเรียบง่าย…

ก่อนจะสร้างมาคอตนั้นต้องเริ่มจากการหา Inspiration ซะก่อน โดยอีชั้นก็ไม่ได้หาไกลเกินตัวเลย เริ่มจากการส่อง Logo empeo จากนั้นก็ดึงเอาความกลมออกมาผนวกกับ Ci และ Color palletsและสารพัดความมีชีวิตชีวา ทั้งหมดคือเครื่องปรุงที่เลือกสรรเพื่อสร้างมาสคอตที่สมบูรณ์แบบ..(มีใครคุ้นๆบทพูดนั้นกันบ้าง อิอิ)

empeoของเรามีแต่ Shape กลมๆทั้งนั้นเลย!

จากนั้นเราก็เริม่ดีไซน์กันได้เลย!

เริ่มจากการ Sketch มือกันก่อนโดยเอาความกลมๆมาเล่น
ดราฟน้องออกมาก็จะได้เจ้าก้อนแบบนี้

ได้เจ้าก้อนออกมาเเล้วคราวนี้ก็ต้องมา Design บทบาทให้น้องๆเพื่อความสอดคล้องกับหัวข้อต่างๆในระบบ Setting อย่าง จัดการสิทธิ์, บทบาท, อัตราสมทบประกันสังคม, Workin และอีกมากมายก่ายกองที่เกี่ยวข้องกับระบบ HRM
แล้วเราก็ได้ออกมาประมาณนี้!

แต่ละหัวข้อนี่… คิดดีไซน์กันหัวแตกเลยทีเดียว
เป็นหัวข้อที่เกี่ยวข้องกับงาน HR ทั้งนั้นเลย

ถึงแม้น้องจะดูเรียบง่ายแต่ Concept นั้นลึกซึ้งยิ่งนัก โดยตัวน้องเองจะเป็นสัญลักษณ์ของผู้ใช้งาน เนื่องจาก empeo เป็นระบบ HRM ที่บริหารงานเกี่ยวกับบุคคล

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

ลองเอามาน้องๆมาวาง Ui ดูก็จะได้ประมาณนี้

กำเนิดเจ้าก้อน

เมื่อมาสคอตดราฟแรกถึงมือ CEO เป็นที่เรียบร้อย กลายเป็นว่า Character ที่ดีไซน์ไว้นั้น…. ผ่านฉลุย! ผ่านแบบไม่มีอะไรมากั้น…

จะมีก็แต่แก้เรื่อง Tone สี (ซึ่งแต่ละสีก็จะแบ่งเป็นหมวดหมู่ของการตั้งค่า) กับเรื่องของ Ui อีกสักนิด. เลยนำคอมเม้นต่างๆกลับมาแก้ไขได้จนได้ไฟนอลจริงๆขึ้นมา จากนั้นก็ส่งไม้ต่อให้ทาง IT Developer ได้นำไปสร้างออกมาให้ใช้ได้งานจริง รออย่างใจจดใจจ่ออยู่ไม่นานเกินรอ หน้า Easy Setup ก็ได้ Deploy ออกมาเป็น Productionให้ได้ใช้งานกันจริงๆแล้วหน้าตาก็จะออกมาประมาณนี้!

กรี้ดดด ดีไซน์เนอร์ถูกใจสิ่งนี้♥️

Made with love

Feed back หลังจากที่ปล่อยงานออกสู่สาธารณะชนเเล้วนั้นออกมาดีเกินคาด สร้างรอยยิ้มให้กับทีม Customers Success ทีม Dev, Product Owner รวมไปถึง CEO ของเราซึ่งดูจะชอบไม่ใช่น้อย เจ้าก้อนที่ออกแบบไว้เลยได้เข้าไปอยู่ใน Product ต่างๆอย่าง หน้าอื่นๆของระบบ empeo, banner adsต่างๆ ล่าสุดก็ได้ไปอยู่บนหน้าซองจดหมายถึงลูกค้าเป็นที่เรียบร้อยเเล้ว (เจ้าก้อนของเราชักจะดังใหญ่เเล้ว)

เจ้าก้อนเต็มไปหมดเลย~
งาน 3D ก็มา!

คนที่เห็นหรือใช้งานคงมีความสุขไปกับความน่ารักของเจ้ากก้อน แต่บอกไว้ได้เลยว่าคนที่ออกแบบนั้น “มีความสุขยิ่งกว่า” เพราะได้เห็นคนใช้งานของเรา ถึงแม้จะเป็นแค่หน้า Ui หน้าเดียวก็ตาม แต่สิ่งที่เปลี่ยนแปลงตัวเราก็คือ “ความมั่นใจ” ที่ได้มีให้กับงานต่างๆ ปรับเอาความชอบส่วนตัวมารวมกับงานที่ทำอย่างตั้งใจ เลยเกิดสิ่งใหม่ๆขึ้นมาในทางทีดี

และไม่ใช่แค่ในส่วนของทีมดีไซน์อย่างเดียว ถ้าทีม Dev ไม่ตั้งใจทำโปรแกรม. หรือทีมอื่นไม่คอยซัพพอร์ต เจ้าก้อนของเราก็คงไม่ได้ออกไปสู่สายตาทุกคนอย่างแน่นอน

จึงไม่แปลกใจเลยว่าทุกหน้า Product ของ Gofive มักจะลงท้ายด้วยคำว่า “ Made with love”อยู่เสมอเพราะพวกเราทุกคน รัก และ สนุกกับสิ่งที่ทำใจงานนั้นเอง…

Mascot the Seriesของเรายังไม่จบเพียงเท่านี้ ในตอนหน้าจะมาเล่าเรื่องราวความน่ารักของ Mascot ตัวไหนเพิ่มอีก รอติดตามกันได้เลยค่ะ

Gofive-กว่าจะมาเป็น Project “Gofive Universe”
empeo-Mascot empeo เจ้าก้อนผู้มาพร้อมกับการเปลี่ยนแปลง…
Salesbear-Mascot Salesbear ผู้ช่วยงานขายสุดปุ๊กปิ๊ก

--

--