โครงการที่สามของ Ironhack UX/UI Design bootcamp

ทีมงาน

และคราวนี้ทีมก็ไม่มีทีม!
มันเป็นโครงการเดี่ยว

เกี่ยวกับโครงการ

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

ดังนั้นฉันจึงเลือกที่จะทำงานกับแอปพลิเคชัน Discord เวอร์ชันมือถือ

ฉันเลือกตัวเลือกนี้เพราะฉันเป็นผู้ใช้แอปนี้เช่นเดียวกับคนอื่นๆ ใน Ironhackers และต้องบอกว่าเวอร์ชันมือถือไม่เป็นมิตรกับผู้ใช้จริงๆ

เราต้องเลือกระหว่าง 3 ถึง 7 หน้าเพื่อทำงาน ดังนั้นฉันจึงสำรวจแอปและเลือกตามความผิดหวังของฉันเอง แต่ยังขึ้นอยู่กับองค์ประกอบในหน้าเหล่านี้เพื่อให้มี UI ที่แตกต่างกันในการทำงาน (เมนู โปรไฟล์ การ์ด…)

และโดยเฉพาะเมนูนี้ยาวมาก…

การวิเคราะห์คู่แข่งด้วยภาพ

เนื่องจาก Discord เป็นแอปสำหรับเกมเมอร์โดยพื้นฐานแล้ว ฉันจึงไปดูว่าคู่แข่งเสนออะไรที่คล้ายกันและ/หรือต่างกันบ้าง

จานสี

นี่คือจานสีที่ใช้โดยคู่แข่งทั้งสามรายนี้

และนี่คือแอปจากแอปมือถือ Discord

การวิเคราะห์ฮิวริสติก

หลังจากการวิจัยเล็กๆ น้อยๆ เหล่านี้ ก็เป็นการกลับมาของชื่อที่แปลกประหลาดของการวิเคราะห์ฮิวริสติก

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

การวิจัยทุติยภูมิ

ฉันยังต้องการเรียนรู้เพิ่มเติมเกี่ยวกับแบรนด์ด้วย ดังนั้นฉันจึงไปถามคำถามกับเพื่อนสนิทของฉันอย่าง Dr. Google

และฉันเห็นว่า Discord ได้พัฒนาระบบการออกแบบที่ฉันกระตือรือร้นที่จะศึกษา

คุณสามารถค้นหาได้ที่นี่ที่ด้านล่างของหน้า

สิ่งแรกที่ทำให้ฉันประทับใจคือจานสีของ Design System นั้นแตกต่างอย่างสิ้นเชิงกับสีที่ใช้ในแอพมือถือ...

สิ่งที่ฉันต้องการจะทำ

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

เชื่อมต่อใหม่กับระบบการออกแบบ

สำหรับสิ่งนี้ ฉันเพียงแค่ใช้จานสีและแบบอักษรที่มีอยู่ในเอกสาร

Ginto Nordสำหรับแบรนด์
Whitneyสำหรับข้อความ

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

แก้ไขข้อผิดพลาดการช่วยสำหรับการเข้าถึงทั้งหมด

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

ลดความซับซ้อนและจัดระเบียบเมนูที่ยาวมากๆ นี้ใหม่...

สำหรับรายการนี้ ฉันเพียงแค่เปลี่ยนรายการยาว ๆ นี้เป็นเมนูหีบเพลง ฉันยังคืนตัวเลือกให้ออกจากระบบซึ่งอยู่ที่ส่วนท้ายสุดในแท็บที่ 1 ของเมนูใหม่

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

เพิ่มความครอบคลุม

สำหรับเป้าหมายนี้ ฉันต้องยอมรับว่าฉันไม่รู้ว่าจะทำอย่างไรหรือทำอย่างไรดี หัวข้อนี้มีขนาดใหญ่มาก

ดังนั้นฉันจึงมีความคิดที่จะเพิ่มธีมสีต่างๆ โดยใช้ “Blurple” อย่างเป็นทางการของ Discord เป็นธีมเริ่มต้น จากนั้นจึงใช้ธีมสีชมพูและอีกสองธีมที่มีสีที่เป็นกลางมากขึ้น

และฉันยังได้แก้ไขไอคอนรูปจรวด (ที่ดูแมนมาก) ให้เป็นไอคอนที่เป็นกลางมากขึ้นและเหมาะสมกับวัตถุประสงค์มากขึ้น

การซ้อนทับของกิจกรรม

ฉันยังปรับปรุงส่วนเกมใหม่เพื่อให้อ่านง่ายขึ้นและโปร่งสบายโดยการปรับเปลี่ยนเลย์เอาต์ของการ์ด

ภาพรวมของ Before & After

ต่อไปนี้เป็นลิงก์ไปยังโฟลว์ต้นแบบสองรายการ หากคุณต้องการทดสอบเมนูหีบเพลงและไอคอนเกมแพดที่มีการซ้อนทับ

ลิงค์แรก

ลิงค์ที่สอง

ฉันได้เรียนรู้อะไรจากโครงการนี้ ?

ฉันสนุกกับโปรเจ็กต์นี้มาก ฉันสนุกกับการดำดิ่งสู่ UI และเรียนรู้เพิ่มเติมเกี่ยวกับ Figma

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

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