การแนะนำ

สวัสดีผู้อ่านขนาดกลาง! ในกรณีศึกษา UI UX นี้ ฉันจะแสดงการออกแบบแอปบนอุปกรณ์เคลื่อนที่ของฉัน “Stash&Store” คือชื่อแอปพลิเคชันมือถือตัวที่สองของฉัน ประกอบด้วยคุณสมบัติต่างๆ ที่ช่วยให้ผู้ใช้ค้นหาพื้นที่จัดเก็บที่เพียงพอสำหรับรายการของตน และ/หรือเพื่อสร้างรายได้จากพื้นที่ส่วนเกินของตนเอง ฉันปรารถนาที่จะสร้างสรรค์สิ่งใหม่ๆ และทำให้แอปนี้เป็นมิตรกับผู้ใช้ ใช้งานง่าย ใช้งานได้จริง และไม่เหมือนใครที่สุดเท่าที่จะเป็นไปได้

ปัญหา

เมื่อเริ่มโครงการ ฉันมีปัญหาเฉพาะอย่างหนึ่งในใจซึ่งฉันตั้งใจจะแก้ไข อย่างไรก็ตาม หลังจากคิดเพิ่มเติม ฉันก็ตระหนักว่า “Stash&Store” สามารถเป็นแอปอเนกประสงค์ที่มีประสิทธิภาพในการแก้ปัญหาที่แตกต่างกันไปสำหรับคนประเภทต่างๆ ต่อไปนี้เป็นปัญหาที่ฉันปรารถนาที่จะแก้ไขด้วยวิธีใดวิธีหนึ่ง:

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

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

บุคลิกของผู้ใช้

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

ระดมความคิด

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

ดังที่คุณเห็นในภาพหน้าจอด้านบน มีส่วนสำหรับการระดมความคิดอย่างแท้จริง ในขณะที่ยังมีส่วนสำหรับส่วนหลักเฉพาะของแอป

แผนที่ UX

หลังจากที่ฉันคิดไอเดียต่างๆ ได้แล้ว ฉันได้สร้าง UX Map มีสีเฟรมสามสีซึ่งแต่ละสีแสดงถึงส่วนที่แตกต่างกันของแอป

กระดานสร้างแรงบันดาลใจ

เกี่ยวกับองค์ประกอบ UI ของแอป ฉันสร้างกระดานสร้างแรงบันดาลใจขนาดใหญ่ซึ่งประกอบด้วยหน้าจอและภาพจากแอปต่างๆ จำนวนมาก แม้ว่าอาจจะดูขัดกับสัญชาตญาณไปบ้าง แต่ฉันได้รับแรงบันดาลใจจากแอปท่องเที่ยว แอปโซเชียลมีเดีย แอปทำอาหาร แอปนำทาง ฯลฯ ฉันให้ความสนใจกับองค์ประกอบ UI ทั้งหมด — สี ช่องป้อนข้อมูล เมนู ไอคอน ปุ่ม แบบอักษร ภาพประกอบ การ์ด ฯลฯ โดยพื้นฐานแล้ว แอปทั้งหมดใช้องค์ประกอบ UI เดียวกันในปริมาณที่พอเหมาะ

ฉันบันทึกภาพหลายช็อตจาก Dribbble, Mobbin, Behance และแพลตฟอร์มที่คล้ายกันลงในหน้า "Inspiration Board" ของฉันใน Figma ฉันจัดหมวดหมู่ภาพทั้งหมดตามวัตถุประสงค์ ด้วยวิธีนี้ มีส่วนที่แตกต่างกันหลายส่วนที่มีช็อตประเภทต่างๆ

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

โครงลวด Lo-Fi

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

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

ระบบการออกแบบ

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

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

เกี่ยวกับไอคอน เพื่อรักษาการออกแบบที่สอดคล้องกันทั่วทั้งแอป ฉันใช้ชุดไอคอนเดียวและไอคอนประเภทเดียว ชื่อของชุดไอคอนคือ "Heroicons" และมีไอคอนเกือบทั้งหมดที่ฉันต้องการในรูปแบบ SVG (เวกเตอร์) ฉันไม่พบไอคอน ฉันวาดด้วยเครื่องมือปากกาใน Figma ฉันแน่ใจว่าพวกมันมีขนาดและจังหวะที่สอดคล้องกับไอคอนจากชุดไอคอนที่กล่าวถึงก่อนหน้านี้

แหล่งที่มาของชุดไอคอน:
https://heroicons.com/

เมื่อพูดถึงภาพประกอบที่ฉันใช้ พวกเขาก็นำมาจากแหล่งภาพประกอบเดียวกันด้วย อีกครั้ง ความสอดคล้องใน UI เป็นสิ่งสำคัญมาก!

ที่มาภาพประกอบ:
https://storyset.com/time

การออกแบบขั้นสุดท้าย

ตามที่กล่าวไว้ในบท "Lo-Fi wireframes" "Stash&Store" ประกอบด้วยสองมุมมองแอพ คนแรกมุ่งเน้นไปที่ไคลเอ็นต์และไคลเอนต์คือประเภทผู้ใช้ที่มองหาที่เก็บข้อมูลเพื่อเช่าผ่านแอพ มุมมองแอพนี้ควรจะช่วยลูกค้าค้นหาข้อเสนอพื้นที่เก็บข้อมูลได้อย่างง่ายดาย มุมมองแอปที่สองกำหนดไว้สำหรับเจ้าของที่พักที่ต้องการเช่าพื้นที่ของตน ในกรณีนี้ "Stash&Store" ให้บริการผู้ใช้ในรูปแบบเฉพาะที่ทำให้การจัดการข้อเสนอของพวกเขาง่ายขึ้น

กระบวนการเริ่มต้นใช้งานในตัวมันเองนั้นค่อนข้างเหมือนกันสำหรับทุกแอป ในกรณีนี้ แน่นอนว่าผู้ใช้มีตัวเลือกหลักสองตัวเลือก — ในการลงทะเบียนหรือเข้าสู่ระบบ เมื่อสร้างบัญชี ผู้ใช้จะได้รับแจ้งให้ระบุจุดประสงค์การใช้งานสำหรับ "Stash&Store" รวมอยู่ด้วยเนื่องจากผู้ใช้อาจมีความสนใจในมุมมองแอปเดียวเท่านั้น ตามที่เขา/เธอเลือก เขา/เธอจะดำเนินการสมัครต่อไป
ผู้ที่ดำเนินการเป็นเจ้าภาพจะได้รับแจ้งให้ระบุข้อเสนอทันทีหรือข้ามส่วนนั้นแล้วกลับมาดูในภายหลัง เจ้าของที่พักจะต้องถ่ายรูปบัตรประจำตัวที่ออกโดยรัฐบาลเพื่อยืนยันตัวตน
ถึงกระนั้น กระบวนการยืนยันเดียวที่จำเป็นสำหรับผู้ใช้ทุกคนคือการยืนยันอีเมล

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

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

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

“ข้อความ” เป็นแท็บที่สามในแอปนี้ นอกจากนี้ยังมีอยู่ในมุมมองแอปโฮสต์เนื่องจากเป็นสากลไม่มากก็น้อย ผู้ใช้สามารถค้นหาผ่านการแชท ลบการสนทนาหรือเก็บถาวร นอกจากนี้ ในกรณีของมุมมองแอปของลูกค้า ผู้ใช้สามารถส่งคำถามที่พบบ่อยที่สร้างไว้ล่วงหน้าได้ (ดังที่แสดงในภาพที่สามด้านบน)

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

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

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

เกี่ยวกับแท็บ “ข้อความ” ในมุมมองโฮสต์ จะเหมือนกันสำหรับมุมมองแอปทั้งสอง อย่างไรก็ตาม การแชทจะถูกแบ่ง/แยกกันระหว่างมุมมองแอพทั้งสองแบบ

บทสรุป

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

ถ้าคุณชอบกรณีศึกษาของฉัน อย่าลืมตบมือบทความนี้ 50 ครั้ง
เคล็ดลับสำหรับมือโปร: ลองกดปุ่มตบมือค้างไว้ :)

ติดต่อ

อย่าลังเลที่จะติดต่อฉัน :)
[email protected]
https://www.linkedin.com/in/danis-okic-745a4919a/
https://www.instagram.com/danees6/