Recap 1 ปีกว่าๆ กับเบื้องหลังการออกแบบ Cloud Pocket ใหม่: จุดเริ่มต้น ความท้าทาย แนวคิด และผลกระทบ

สวัสดีครับ 👋 บทความนี้จะย้อนอดีตถึงการ Redesign Cloud Pocket ในช่วงท้ายของปี 2022 โดยเราจะเริ่มเล่าตั้งแต่ที่มาที่ไปของงาน การออกแบบ ความท้าทาย แนวคิดและวิธีการที่ซึ่งได้มาของ Design ที่ใช้ในปัจจุบัน จนไปถึง Measurement หลังจากที่มีการ Redesign ในครั้งนี้

Introduction

จากการที่ทีมงาน MAKE ได้มีการคอยดูโซเชียลมีเดียในช่องทางต่างๆ เพื่อเก็บ User Feedback จากผู้ใช้งาน โดยมีทั้งโพสขอฟีเจอร์ใหม่ๆ จากทีมงาน แนะนำเพื่อนๆ ในการใช้งาน หรือแบ่งปันประสบการณ์การใช้งานแอปพลิเคชันในการจัดสรรเงิน จนทีมงานเกิดโจทย์ในการคิดไอเดียสนุกๆ ที่ว่า “เราจะสร้างกำลังใจให้ผู้ใช้งานในการเก็บเงินยังไงได้บ้าง”

ซึ่งวิธีการ สร้างกำลังใจในการเก็บเงิน ถือเป็นโจทย์ที่กว้างมากๆ ในการคิด — เราจะทำอะไรดีล่ะ? เมื่อลองดูเรื่องการจัดการเงินแล้ว แต่ละคนจะมีวิธีการเฉพาะตัวในการบริหารเงินที่แตกต่างกันออกไป

Define User, Goal (User & Product), Pillar

สุดท้ายเราก็ได้ Frame โจทย์จากไอเดียการสร้างกำลังใจในการเก็บเงินคือ 👇

การ Visualize เป้าหมายการเก็บเงินของผู้ใช้งานให้ชัดเจนยิ่งขึ้น ผ่านการขยายภาพโปรไฟล์ของ Cloud Pocket

เพื่อเป็นการ Reflect เป้าหมายทางการเงินของผู้ใช้งานให้เด่นชัด (มีผลในเรื่อง Emotional) และถือเป็นที่ๆ ผู้ใช้งานจะสามารถแสดงตัวตนได้เต็มที่ ซึ่งเรามั่นใจว่าตอนนี้ยังไม่มีแอปพลิเคชันทางการเงินอันไหนที่สามารถ Personalize ได้เต็มที่เท่า MAKE

สาเหตุที่เราเลือก Cloud Pocket ในการ Redesign เพราะเป็นฟีเจอร์หลักที่ทุกคนใช้งานอยู่แล้ว ดูมีแนวโน้มที่จะตอบโจทย์ในวงกว้างที่สุดในมุมมองของทีม อีกทั้งยังเป็นสื่อกลางในการแชร์ประสบการณ์ทางการเงินของผู้ใช้งาน MAKE ผ่านช่องทางโซเชียลมีเดียต่างๆ ด้วย

ว่าแต่… Cloud Pocket คืออะไรกันนะ?

Cloud Pocket เป็นฟีเจอร์หนึ่งของแอปพลิเคชัน MAKE by KBank ที่ให้ผู้ใช้งานสามารถแบ่งเงินออกเป็นหลายๆ กระเป๋าย่อย ซึ่งการแบ่งเงินออกเป็นหลายๆ ส่วนสามารถทำได้ในบัญชีธนาคารเดียว โดยที่ไม่ต้องแบ่งเงินแยกเป็นหลายบัญชีให้สับสน

ซึ่ง Cloud Pocket นั้นสามารถนำไปใช้ได้หลากหลายวัตถุประสงค์เลย ไม่ว่าจะเป็นการแบ่งเงินเพื่อใช้จ่าย เพื่อการออม-การลงทุน หรือจะเป็นการใช้เก็บเงินร่วมกับเพื่อนและครอบครัว เป็นต้น โดยข้อมูลเพิ่มเติมเกี่ยวกับ Cloud Pocket สามารถอ่านได้ที่เว็บไซต์ MAKE by KBank ได้เลยครับ 💚

Challenges

ต่อมาเราอยากให้ทุกคนได้ทำความเข้าใจถึง Anatomy (องค์ประกอบ) ของ Cloud Pocket กันก่อน — ด้วยความที่ Cloud Pocket มีฟังก์ชันการใช้งานอย่างหลากหลายมากมาย เช่น

• Locked Cloud Pocket เพื่อป้องกันเงินไม่ให้ออกมาใช้
• Lucky Cloud Pocket เพื่อลุ้นรับของรางวัลในแต่ละเดือน
• Goal Cloud Pocket เพื่อเป็นการตั้งเป้าหมายสำหรับเก็บเงิน
• Shared Cloud Pocket เพื่อแบ่งปัน Cloud และเก็บเงินร่วมกันกับเพื่อน

ภายใต้ Component ของ Cloud Pocket หนึ่งกล่อง เราสามารถย่อยออกมาได้ถึง 19 State กันเลยทีเดียว

จะสังเกตได้ว่าในพื้นที่สี่เหลี่ยมเล็กๆ นี้มีหลากหลายสัญลักษณ์ที่สื่อความหมายสำหรับการใช้งานที่แตกต่างกันไป โดยในการ Redesign ครั้งนี้จะมีสิ่งที่เราต้องคำนึงถึงก็คือ…

• Legibility การอ่านข้อความใน Cloud Pocket โดยเฉพาะจำนวนเงินถือเป็นเรื่องที่สำคัญมากๆ ใน Mobile Banking ที่ต้องการความชัดเจนและสะดวกต่อการทำธุรกรรม
• Compatibility การปรับ Design จะต้องสามารถรองรับการแสดงผลข้อมูลของเวอร์ชันก่อนหน้าได้ (เช่น รูปภาพ ชื่อ Cloud Pocket หน่วยของจำนวนเงิน) โดยเฉพาะรูปภาพ Cloud Pocket ที่จะมีการเก็บในรูปสี่เหลี่ยมจัตุรัส เมื่อผู้ใช้งานทำการอัปเดตแอปพลิเคชันแล้ว จะต้องสามารถใช้งานต่อได้อย่างราบรื่น
• Space พื้นที่ในหน้าจอมีจำกัด เราไม่สามารถขยายกล่อง Cloud Pocket เพิ่มเติมได้ เนื่องจากต้องคำนึงถึงอุปกรณ์ที่หลากหลาย
• Empty States เราจะต้องคำนึงถึงเคสของ Cloud Pocket ที่ผู้ใช้งานบางคนอาจจะไม่ได้ทำการเพิ่มรูปภาพลงไป จากเดิมที่มีเป็นตัวหนังสือที่เป็นชื่อตัวแรกของ Cloud Pocket บนพื้นสีเทา เมื่อปรับ Design แล้วตัว Cloud Pocket ในรูปนี้ควรจะยังมีความสวยงามอยู่

Let’s ideate!

ในการขยายขนาดรูป Cloud Pocket นั้นมีหลากหลายวิธีการ ไม่ว่าจะเป็นการขยายขนาดวงกลมเต็มๆ เลย ขยายใหญ่จนเต็มกรอบพื้นที่ของ Cloud Pocket การเว้นกรอบให้เหมือนกับรูปโพลารอยด์ หรือนำภาพมาเล่นกับเงาของก้อนเมฆ

จนกระทั่งได้แบบที่น่าจะพอเป็นไปได้ (ในเชิงของ Functional) นั่นคือการครอปภาพตรงกลางและขยายใหญ่ให้ชิดขอบด้านข้างให้เด่นชัดมากขึ้น แล้วใช้สีขาวเป็นพื้นหลังในส่วนของข้อมูลต่างๆ เพื่อคง Legibility ของข้อความและ Compatibility กับรูปของผู้ใช้งานในทุกรูปแบบต่างๆ (ใน Iteration 3)

ลองเริ่มจาก Sketch บนกระดาษหลายๆ แบบ ก่อนที่จะลองทำใน Figma จริง ก็จะช่วยให้ได้ไอเดียใหม่ๆ เร็วขึ้น!

แต่พอนำ Design นี้ไปถามพี่ๆ เพื่อนๆ ในทีม Designer ด้วยกันเองแล้ว มีฟีดแบ็คเพิ่มเติมว่า “เอ๊ะ พอวางเรียงกันเยอะๆ แล้วกลายเป็นเหมือน Online Shopping เลยแฮะ” (ยิ่งถ้าเปลี่ยนรูปเป็นรองเท้า เสื้อผ้า ผงซักฟอก) ยังดูทื่อๆ และขาดความเป็น MAKE อยู่เลย…

ลองเทียบหน้าจอกับแอป Online Shopping อื่นๆ ในไทย

พอได้โจทย์ว่าอยากเพิ่ม ความเป็น MAKE ก็ทำให้กลับไปคิดเพิ่มเติมอีกหน่อยว่าในเชิง Emotional แล้ว “อะไรกันนะที่จะทำให้สิ่งนี้ดูเป็น MAKE?”

จากนั้นเราเริ่มตั้งต้นจากนำ Design Iteration 3 มา Blend กับ Shape ของก้อนเมฆในแบบต่างๆ เพื่อเป็นพื้นที่ของข้อมูลในกล่อง Cloud Pocket สีขาว โดยมีข้อแม้ว่า Shape ของก้อนเมฆนั้นจะต้องมีรายละเอียดที่ไม่มากเกินไปจนบังรูป หรือทำให้เกิด Visual Noise ขึ้นได้ สุดท้ายเราก็ได้ Design ที่ทำให้พอมาอยู่ใน MAKE แล้วดูกลมกลืนมากขึ้น (ใน Column ขวาสุด)

อย่างไรก็ตาม Shape ของก้อนเมฆก็ต้องไม่แบนราบจนดูไม่ออกว่านี่คือก้อนเมฆ

นอกจากเรื่องของรูป Cloud Pocket และ Shape ของก้อนเมฆ เราได้มีการปรับการจัดเรียงข้อมูลใหม่ โดยเฉพาะ Icon แสดง State ของการ Lock, Shared Cloud Pocket, Lucky Cloud Pocket ให้มีการย้ายมาเรียงอยู่ตำแหน่งเดียวกัน เพื่อความเป็นระเบียบของข้อมูลมากยิ่งขึ้น

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

Design Validation

เมื่อได้ Design ที่คิดว่าน่าจะเป็นอันที่เรามั่นใจในการส่งต่อให้กับผู้ใช้งานแล้ว เราต้องทำการจำลองข้อมูลตัวอย่างของ Cloud Pocket เพราะว่าพื้นที่ตรงนี้จะเป็นที่ที่ผู้ใช้งานสามารถอัปโหลดรูปภาพของตัวเองลงไปได้อย่างไม่จำกัด ทางทีมก็อยากจะมั่นใจว่า Design นี้ใช้งานได้จริงและยังคงความสวยงามอยู่

โดยเราได้ลองนำรูปภาพหลายๆ รูปแบบมา Apply กับ Design ใหม่ เพื่อดูว่ารูปภาพที่ผู้ใช้งานอัปโหลดเข้ามายังสามารถแสดงผลได้เป็นอย่างดี

เมื่อลองนำรูปมาใส่แล้ว พบว่ารูปที่ดูจะเหมาะที่สุดคือรูปที่มีลักษณะแนวนอน แต่ก็ต้องพยายามหาวิธี Balance การครอปและปรับความสูงของรูป เพื่อให้รูปแนวตั้งแสดงผลไม่พังจนเกินไป

หลังจากที่เราได้มีการปรับแก้ Cloud Pocket ไปเรียบร้อยแล้ว จะสังเกตได้ว่ากล่องเล็กๆ นี้ได้กระจายตัวอยู่ทั่วแอป ไหนๆ ปรับ Cloud Pocket ที่หน้าหลักแล้ว เราน่าจะมีส่วนอื่นที่ยังพัฒนาเพิ่มเติมได้อีกนะ

Cloud Thumbnail Shape

เริ่มจากการปรับ Shape ใหม่ของรูป Cloud Pocket จากวงกลมเป็นสี่เหลี่ยม เมื่อไปอยู่หน้าอื่นๆ ที่มีการแสดงผลแบบย่อ ยังเกิดปัญหาที่ว่าอาจจะดูคล้ายกับ User Avatar ใน My Community อยู่ดี ทางเราจึงตัดสินใจเปลี่ยนรูป Display ของ Cloud Pocket Thumbnail ให้กลายเป็นสี่เหลี่ยม เพื่อให้ดูคล้ายกับ Shape ของ Cloud Pocket ช่วยให้ผู้ใช้งานสามารถแยกแยะได้ง่ายๆ ว่า วงกลม = My Community และ สี่เหลี่ยม = Cloud Pocket

ในเชิงไอเดียเหมือนจะดูง่าย ที่จะมองในแง่ Design Consistency กับการปรับ Shape ของ Design Component Thumbnail 1 ที่แล้วให้ปรับทั้งระบบเลย แต่ความเป็นจริงแล้วการแก้ Component ที่มี Impact ทั้งแอปพลิเคชัน อาศัยพลังงานของฝั่ง Tester ค่อนข้างมากเหมือนกัน 😭

Creating Cloud Pocket made easier

อย่างที่กล่าวไปว่าแต่ละคนจะมีวิธีการบริหารเงินในแบบของตัวเองที่แตกต่างกันออกไป เราอยากให้ผู้ใช้งานสามารถสร้าง Cloud Pocket ได้อย่างสะดวกที่สุด เพื่อเปิดกว้างสำหรับไอเดียการเก็บเงินในรูปแบบที่เฉพาะตัวกับแต่ละคน หากไม่ใช้แล้ว สามารถลบทิ้งและสร้างใหม่ได้อย่างไม่จำกัด

ซึ่งในการสร้าง Cloud Pocket เราอยากนำคอนเซ็ปต์ของการสร้างตัวละครตอนเล่นเกมออนไลน์มาปรับใช้ โดยโชว์ Preview การตั้งค่าต่างๆ ของ Cloud Pocket อยู่ด้านบนสุดของหน้าแบบเรียลไทม์ เช่น หากมีการตั้งชื่อหรือเลือกรูป ในหน้าสร้างจะมีการแสดงผลแบบเดียวกันกับที่ผู้ใช้งานตั้งค่าเลย (สามารถดูวิดีโอด้านล่างประกอบได้นะ)

แถม: ระบบการแนะนำภาพตัวอย่างของ Cloud Pocket — ตอนนี้ถูกต่อยอดให้สามารถ Browse รูปภาพเป็น Collection ได้ด้วยนะ 😉

อีกหนึ่งความพิเศษของ Design ใหม่คือการครอปรูปตรงกลางมาแสดงผล เรามีการปรับหน้าครอปรูปให้มีเงาของ Cloud Pocket มา Overlay เพื่อให้เห็นส่วนที่จะมีการแสดงผลจริง ทำให้ผู้ใช้งานสามารถครอปรูปให้ตรงใจได้อย่างง่ายดาย

นอกจากนี้เรายังได้มีการปรับเพิ่มลด Padding เพื่อขยายขนาดของกล่อง Cloud Pocket เพิ่มความโค้งของกล่องให้ดูรับกับความเป็นก้อนเมฆมากขึ้น และปรับเงาให้ดูละมุนขึ้นอีกเล็กน้อยด้วยนะ

Measurement

ในส่วนของข้อมูลของการวัดผล ข้อมูลที่เป็น “ตัวเลข” น่าจะเป็นสิ่งที่ทุกคนใช้เปรียบเทียบได้ง่าย เลยไปลองค้นตัวเลขหลังบ้านในเชิงของ Quantitative พบว่าหลังจากที่ออก Cloud Pocket เวอร์ชัน Design ใหม่ ส่งผลทำให้มีจำนวน Cloud Pocket ที่มีการเพิ่มรูปในระบบทั้งหมดจาก 49.04% ในวันที่ 25/10/22 (ก่อนมีการ Redesign) เพิ่มขึ้นเป็น 51.32% ใน 1 เดือนแรกหลังอัปเดต และเพิ่มเรื่อยๆ เป็น 53.4% ในวันที่ 06/06/23 ช่วงกลางปีที่ผ่านมา

ซึ่งการเพิ่มขึ้นมาของอัตราส่วน Cloud Pocket ที่มีการเพิ่มรูปเข้าไปประมาณ 4% ในระยะเวลา 7 เดือนหลังมีการ Redesign ถือเป็นสัญญาณที่ดีสำหรับทีมงาน การแก้ไข UI ครั้งนี้สามารถสร้างแรงจูงใจให้ผู้ใช้งานเพิ่มรูปเข้าไปใน Cloud Pocket ได้บ้าง — แต่อย่างไรก็ตามเราเองก็ยังไม่สามารถพิสูจน์จากตัวเลขได้ว่าสามารถตอบโจทย์ในการ “สร้างกำลังใจเล็กๆ น้อยๆ และลดความเครียดเรื่องการเงินลง” ตามที่ตั้งไว้แต่แรกขนาดนั้น

นี่จึงเป็นสาเหตุที่เราอาจจะต้องหาข้อมูลในเชิง Qualitative มาประกอบกัน ซึ่งระหว่างทางทีมงาน MAKE มีการมอนิเตอร์ผ่านโซเชียลมีเดียต่างๆ เพื่อดูว่าผู้ใช้งานคิดอย่างไรกับแอปพลิเคชันของเราบ้าง ซึ่งพบว่ามีโพสจากผู้ใช้งานที่แชร์ประสบการณ์การเก็บเงินหรือการแชร์ต่อประสบการณ์ดีๆ ระหว่างการใช้งานแอป พร้อมกับแนบรูป Cloud Pocket ที่มีการใส่รูปน่ารักๆ หรือรูปศิลปินที่ชื่นชอบค่อนข้างเยอะพอสมควร 😀

พอมี User’s Voice และฟีดแบ็คจากโซเชียลมีเดีย เราก็พอมั่นใจในระดับนึงว่าการปรับแก้ Design ครั้งนี้ตอบโจทย์ที่เราตั้งไว้ในการ “สร้างกำลังใจ และลดความเครียดเรื่องการเงิน” กับผู้ใช้งานได้ไม่มากก็น้อย

นอกจากนั้นจะเห็นว่าในปีนี้ Cloud Pocket ได้ถูกนำมาใช้ประโยชน์ในเชิงการตลาด/โฆษณามากขึ้นจากทีม Marketing เช่น กิจกรรมแจกรูปภาพ Cloud Pocket ผ่านสื่อโซเชียลมีเดียในแต่ละเดือน ซึ่งเมื่อได้ทำการแจกรูปไปแล้ว ก็มีผู้ใช้งานบางส่วนคอมเม้นต์ขอรูปภาพใหม่ๆ เรื่อยๆ จนกระทั่งเราได้ต่อยอดเป็นฟีเจอร์ที่ให้ผู้ใช้งานสามารถดาวน์โหลดรูป Cloud Pocket จาก Marketing เป็น Collection ผ่านแอปได้โดยตรง และอีกตัวอย่างคือเราได้มีการจัดกิจกรรมแข่งขันประกวดวาดรูป Cloud Pocket ชิงเงินรางวัล ซึ่งมีผู้เข้าร่วมกว่า 2,000 คน ถือว่าเป็นการสร้าง Engagement ที่น่ารักมากๆ ระหว่างผู้ใช้งานกับ Product

สุดท้ายนี้อยากจะขอบคุณทีมงาน ไม่ว่าจะเป็นเพื่อน Designer, Product Manager, Developer และ Tester ทุกคน ที่ช่วยรังสรร Cloud Pocket เวอร์ชันปรับปรุงใหม่ได้อย่างยอดเยี่ยมและสวยงามครับ 🫰

และสำหรับผู้อ่านคนไหนสนใจที่อยากสมัครใช้งาน MAKE by KBank สามารถกดได้ที่ลิงก์ด้านล่างนี้ พร้อมกรอกรหัสผู้แนะนำ TN8338 เพื่อรับเงินขวัญถุงเมื่อเปิดบัญชีสำเร็จได้เลยครับ ✌️

MAKE by KBank | #1 ตัวช่วยจัดการเงิน จัด จ่าย จด ครบในแอปเดียว

สำหรับใครที่ชื่นชอบบทความนี้ อย่าลืมกดติดตาม Medium: KBTG Life เรามีสาระความรู้และเรื่องราวดีๆ จากชาว KBTG พร้อมเสิร์ฟให้ที่นี่ที่แรก