เราใช้คุกกี้เพื่อปรับปรุงประสบการณ์การใช้งานของคุณบนเว็บไซต์นี้
image overlay

ทีทีบี

แอปธนาคารที่กล้าคิดต่าง

ธนาคารทีเอ็มบีธนชาต หรือ ทีทีบี คือหนึ่งในธนาคารพาณิชย์ที่ใหญ่ที่สุดในประเทศไทย โดยนำเสนอบริการทางการเงินให้แก่ลูกค้ากว่า 10 ล้านคนทั่วประเทศด้วยความมุ่งมั่นที่จะช่วยให้ทุกคนมีความมั่นคงทางการเงิน

ภาพรวม

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

แนวทางของเรา

เราช่วยทีทีบีสร้างแอประดับโลกด้วยการสร้างประสบการณ์การใช้งานที่เข้าใจง่าย และปรับปรุงให้โครงสร้างรวมถึงระบบนำทางในแอปทำงานได้ดีขึ้น เรานำแนวทางในการพัฒนามาจากการเรียนรู้ว่าผู้ใช้คาดหวังอะไรบ้างจากแอปธนาคาร ความรู้สึกจากการใช้งาน เส้นทางหลักในการใช้งาน รวมถึงวัตถุประสงค์ กับ KPI ของทีทีบี และอื่นๆ เมื่อเข้าใจภาพรวมแล้วก็ทำให้เราสามารถสร้างประสบการณ์การใช้งานผลิตภัณฑ์ที่ทำให้ทั้งผู้ใช้และลูกค้าพึงพอใจได้

ระบบการออกแบบเพื่อแบรนด์ใหม่

เราทำระบบการออกแบบขึ้นมาเพื่อช่วยให้ผู้บริหารสามารถนำไปใช้ได้โดยสอดคล้องกับแบรนด์

ขั้นตอนการใช้งานที่เข้าใจง่าย

ลดขั้นตอนอันยุ่งยากเพื่อให้ผู้ใช้อยากใช้งานแอปมากขึ้น

เพิ่มฟีเจอร์ใหม่ๆ ที่เป็นประโยชน์

เพิ่มฟีเจอร์ เช่น เครื่องหมายบอกจำนวนขั้นตอน เพื่อให้ผู้ใช้ไม่ตัดใจล้มเลิกระหว่างขั้นตอนต่างๆ ง่ายๆ

https://morph-2-develop-strapi-bucket-qa.s3.ap-southeast-1.amazonaws.com/Hi_Fi_0daabba5af.jpg

กระบวนการทำงาน

จัดเวิร์คช็อป design thinking → ทำ wireframe → ทดสอบกับผู้ใช้จริง → ปรับดีไซน์

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

https://lh3.googleusercontent.com/mGlaee4QpAZnG3TB_vQbU0p4QdGupiHCn2_G4UZsmZflT17QnzJgPsBbl4IuNQLdTCuHTNieMlo6Cosb1yKhuuK48_UiHlI8ClFrJqly4FMhZStNZ-jYz7icMJMZR2X8SYT-35lVOPbMQ5Fokg
https://morph-2-develop-strapi-bucket-qa.s3.ap-southeast-1.amazonaws.com/Wireframe_801141b518.jpg
https://morph-2-develop-strapi-bucket-qa.s3.ap-southeast-1.amazonaws.com/Group_96384_2cdaf329fc.jpg

อุปสรรคที่เราเอาชนะได้

1. แนวทางของแบรนด์

ความโดดเด่นถือว่าเป็นสิ่งสำคัญมากในการยืนหยัดในตลาดโลก ซึ่งหนึ่งในวิธีที่จะโดดเด่นได้คือการมีอัตลักษณ์ของแบรนด์ที่ชัดเจน ผู้ใช้จะรับรู้แบรนด์ได้จากหลายทาง ซึ่ง UX/UI และองค์ประกอบต่างๆ ที่มองเห็นได้ ของแบรนด์จะคอยบอกลูกค้าว่าแบรนด์นั้นๆ เป็นแบบไหน

มอร์โฟซิสมีบทบาทสำคัญในการกำหนดทิศทางแบรนด์ใหม่อย่าง ทีทีบี รวมถึงช่วยวางระบบการออกแบบเพื่อให้หลายๆ ทีมเข้าใจแนวทางใหม่ของแบรนด์ตรงกัน ซึ่งทีมเหล่านี้ประกอบด้วยฝ่ายพัฒนาธุรกิจ ฝ่ายการตลาด ดีไซเนอร์ และโปรแกรมเมอร์ ที่ช่วยกันทำงานในแต่ละส่วนของแอป

2. ขั้นตอนการใช้แอป

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

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

3. เครื่องหมายบอกจำนวนขั้นตอน

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

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

https://lh6.googleusercontent.com/MhjwrFyClpGK8CEhf3DklxK4n1NDPDIP8Z0kg1SFI8ol3MUT_JAHvvWJAzHAWUu9bRlhNDXBYFo-EU2BQQtqvGjXD_WHmNSNKDukqfRYfYS2ZHNqJdeuLdwVJ387tTnDVGNwZa3MPOeHxg28oA

https://morph-2-develop-strapi-bucket-qa.s3.ap-southeast-1.amazonaws.com/Main_Graphic_c4ad9f814b.jpg

https://morph-2-develop-strapi-bucket-qa.s3.ap-southeast-1.amazonaws.com/mobile_ui_11f67471f0.png

https://morph-2-develop-strapi-bucket-qa.s3.ap-southeast-1.amazonaws.com/Hi_Fi_last_section_ab427ca006.jpg

รู้จักเรามากขึ้น

เข้าใจลูกค้าของคุณ สร้างกลยุทธ์ที่หลากหลาย และพัฒนาผลิตภัณฑ์ดิจิทัลที่ดียิ่งกว่า