Proyek ketiga dari bootcamp Ironhack UX/UI Design

Tim

Dan kali ini tim, yah, tidak ada tim!
Ini adalah proyek solo.

Tentang proyek

Tingkatkan keterampilan UI kami. Untuk ini, kami harus memilih aplikasi seluler yang relatif dikenal. Kemudian untuk melihat apa yang bisa kami tingkatkan.

Jadi saya memilih untuk mengerjakan Aplikasi Discord versi mobile.

Saya membuat pilihan ini karena seperti banyak rekan Ironhacker saya, saya adalah pengguna Aplikasi ini dan harus dikatakan, versi selulernya tidak terlalu ramah pengguna.

Kami harus memilih antara 3 dan 7 halaman untuk dikerjakan. Jadi saya pergi melalui aplikasi dan membuat pilihan saya berdasarkan frustrasi saya sendiri tetapi juga berdasarkan elemen di halaman ini untuk memiliki aspek UI yang berbeda untuk dikerjakan (menu, profil, kartu…)

Dan terutama menu yang sangat sangat panjang ini…

Analisis pesaing visual

Karena Discord pada dasarnya adalah aplikasi untuk para gamer, saya pergi untuk melihat apa yang ditawarkan oleh para pesaing yang serupa dan/atau berbeda.

Palet warna

Berikut adalah palet warna yang digunakan oleh ketiga kompetitor tersebut

Dan ini yang dari aplikasi seluler Discord

Analisis heuristik

Setelah penelitian kecil ini, kembalinya nama yang sangat liar dari analisis heuristik.

Sekali lagi mengikuti sepuluh heuristik kegunaan paling populer untuk desain antarmuka pengguna dan saya telah mengidentifikasi dan mencatat dalam tabel kesalahan heuristik yang saya temukan.

Penelitian Sekunder

Saya juga ingin mempelajari lebih lanjut tentang merek tersebut, jadi saya bertanya kepada sahabat saya Dr. Google beberapa pertanyaan.

Dan saya dapat melihat bahwa Discord telah mengembangkan Sistem Desain yang sangat ingin saya pelajari.

Anda dapat menemukannya di sini di bagian bawah halaman.

Hal pertama yang mengejutkan saya adalah palet warna Sistem Desain sangat berbeda dari yang digunakan di aplikasi seluler mereka…

Apa yang ingin saya lakukan

Sambungkan kembali aplikasi dengan sistem desain
Perbaiki semua kesalahan aksesibilitas
Sederhanakan dan atur ulang menu yang sangat sangat panjang ini…
Tambahkan inklusivitas

Hubungkan kembali dengan Sistem Desain

Untuk ini, saya hanya mengambil palet warna dan font yang ada di dokumen.

Ginto Nord untuk merek
Whitney untuk teksnya

Langganan Nitro tampaknya menjadi pusat pemasaran Discord tetapi tidak ada jejaknya dalam sistem desain, jadi saya memilih menggunakan Ginto Nord untuk mengidentifikasi Nitro tetapi menerapkannya dalam huruf miring untuk memberikan efek gerakan dan kecepatan yang ini nama menyarankan.

Perbaiki semua kesalahan aksesibilitas

Di sini, saya bekerja terutama pada kesalahan kontras dengan mengikuti rekomendasi Sistem Desain dan secara teratur memeriksa kontras, ukuran ikon, dan teks yang digunakan.

Sederhanakan dan atur ulang menu yang sangat panjang ini…

Untuk item ini, saya cukup mengubah daftar panjang ini menjadi menu akordeon. Saya juga mengembalikan opsi untuk keluar yang berada di bagian paling akhir di tab pertama menu baru.

Saya juga memilih untuk mengerjakan ulang bagian dari halaman profil dengan tata letak ini untuk nama panggilan yang dengan model mental saya ingin mengkliknya untuk memodifikasinya (yang jelas bukan itu masalahnya…)

Tambahkan inklusivitas

Untuk tujuan ini, saya harus mengakui bahwa saya tidak tahu bagaimana atau apa yang harus dilakukan begitu banyak subjek ini besar.

Jadi saya punya ide untuk menambahkan tema warna berbeda dengan "Blurple" resmi dari Discord sebagai tema default kemudian tema pink dan dua tema dengan warna yang lebih netral.

Dan saya juga memodifikasi ikon roket (sangat maskulin) untuk ikon yang lebih netral dan lebih sesuai dengan tujuannya.

Overlay kegiatan

Saya juga mengerjakan ulang bagian permainan agar lebih mudah dibaca dan lapang dengan memodifikasi tata letak kartu.

Tinjauan Sebelum & Setelah

Berikut tautan ke dua alur prototipe jika Anda ingin menguji menu akordeon dan ikon gamepad dengan hamparannya.

Tautan pertama

Tautan kedua

Apa yang saya pelajari dari proyek ini?

Saya bersenang-senang dalam proyek ini, saya sangat menikmati mempelajari UI dan belajar lebih banyak tentang Figma.

Saya juga memperhatikan bahwa meskipun dalam proyek ini kami benar-benar fokus pada UI, keterampilan yang saya pelajari di UX pada dua proyek sebelumnya juga berguna: Analisis pesaing visual dan penelitian sekunder yang mengarahkan saya ke Sistem Desain.

Jangan ragu untuk meninggalkan komentar jika Anda memiliki saran tentang apa yang bisa saya lakukan dengan lebih baik atau tunjukkan kesalahan yang mungkin saya buat.
Terima kasih sudah membaca.