Ironhack UX/UI Design eğitim kampının üçüncü projesi

Takım

Ve bu sefer takım, takım yok!
Bu solo bir proje.

Proje hakkında

UI becerilerimizi geliştirin. Bunun için nispeten bilinen bir mobil uygulama seçmek zorunda kaldık. Sonra neleri geliştirebileceğimizi görmek için.

Bu yüzden Discord Uygulamasının mobil versiyonu üzerinde çalışmayı seçtim.

Bu seçimi yaptım çünkü birçok Ironhacker arkadaşım gibi ben de bu Uygulamanın bir kullanıcısıyım ve mobil versiyonun gerçekten kullanıcı dostu olmadığını söylemeliyim.

Üzerinde çalışmak için 3 ila 7 sayfa arasında seçim yapmak zorunda kaldık. Bu yüzden uygulamayı inceledim ve kendi hayal kırıklıklarımı temel alarak ve aynı zamanda üzerinde çalışılacak farklı kullanıcı arabirimi özelliklerine (menü, profil, kartlar…) sahip olmak için bu sayfalardaki öğelere dayanarak seçimimi yaptım.

Ve özellikle bu çok çok çok uzun menü…

Görsel rakip Analizi

Discord temel olarak oyuncular için bir uygulama olduğundan, rakiplerin benzer ve/veya farklı neler sunduğunu görmeye gittim.

renk paletleri

İşte bu üç yarışmacının kullandığı renk paletleri

Ve işte Discord mobil uygulamasından bir tanesi

Sezgisel analiz

Bu küçük araştırmaların ardından buluşsal analizin çok çılgın adının geri dönüşüdür.

Yine kullanıcı arayüzü tasarımı için en popüler on kullanılabilirlik buluşsal yöntemini takip ederek, bulduğum buluşsal hataları belirledim ve bir tabloda not ettim.

İkincil araştırma

Ayrıca marka hakkında daha fazla bilgi edinmek istiyordum, bu yüzden en iyi arkadaşım Dr. Google'a bazı sorular sormaya gittim.

Ve Discord'un çalışmaya can attığım bir Tasarım Sistemi geliştirdiğini görebiliyordum.

Burada sayfanın altında bulabilirsiniz.

İlk dikkatimi çeken Tasarım Sisteminin renk paletinin mobil uygulamasında kullanılandan tamamen farklı olması…

Yapmak istediğim şey

Uygulamayı tasarım sistemine yeniden bağlayın
Tüm erişilebilirlik hatalarını düzeltin
Bu çok çok çok uzun menüyü basitleştirin ve yeniden düzenleyin…
Kapsayıcılık ekleyin

Tasarım Sistemi ile yeniden bağlantı kurun

Bunun için belgede bulunan renk paletini ve yazı tipini aldım.

Metin için
Whitney markası için Ginto Nord

Nitro aboneliği, Discord'un pazarlamasının merkezinde yer alıyor gibi görünüyor, ancak tasarım sisteminde buna dair hiçbir iz yok, bu yüzden Nitro'yu tanımlamak için Ginto Nord'u kullanmayı seçtim, ancak bunu hareket ve hız efekti vermek için italik olarak uygulamayı seçtim. isim öneriyor.

Tüm erişilebilirlik hatalarını düzeltin

Burada, Tasarım Sisteminin önerilerini izleyerek ve kullanılan simgelerin ve metinlerin boyutunu, kontrastı düzenli olarak kontrol ederek ağırlıklı olarak kontrast hataları üzerinde çalıştım.

Bu çok çok uzun menüyü basitleştirin ve yeniden düzenleyin…

Bu öğe için, bu uzun listeyi basitçe bir akordeon menüsüne dönüştürdüm. Yeni menünün 1. sekmesinde en sonunda bulunan oturumu kapatma seçeneğini de geri koydum.

Ayrıca, zihinsel modelimle değiştirmek için üzerine tıklamak istediğim takma ad için bu düzende profil sayfasının bir bölümünü yeniden düzenlemeyi seçtim (açıkçası durum böyle değildi…)

Kapsayıcılık ekleyin

Bu amaç için itiraf etmeliyim ki bu konu çok geniş olduğundan nasıl ve ne yapacağımı bilemedim.

Bu yüzden varsayılan tema olarak Discord'un resmi "Blurple" ile farklı renk teması, ardından pembe bir tema ve daha nötr renklere sahip iki tema ekleme fikrim vardı.

Ayrıca bir roket simgesini (çok erkeksi) daha tarafsız ve amacına daha uygun bir simge için değiştirdim.

Faaliyetlerin örtüşmesi

Ayrıca kartların düzenini değiştirerek daha okunabilir ve havadar hale getirmek için oyunlar bölümünü yeniden çalıştım.

Öncesi ve Sonrasına Genel Bakış

Akordeon menüsünü ve oyun kumandası simgesini kaplamasıyla test etmek istiyorsanız, iki prototip akışın bağlantıları burada.

İlk bağlantı

İkinci bağlantı

Bu projeden ne öğrendim?

Projede harika zaman geçirdim, kullanıcı arayüzüne dalmaktan ve Figma hakkında daha fazla şey öğrenmekten gerçekten keyif aldım.

Ayrıca, bu projede gerçekten UI'ye odaklanmış olsak bile, önceki iki projede UX'te öğrendiğim becerilerin de yararlı olduğunu fark ettim: Görsel rakip analizi ve beni Tasarım Sistemine götüren ikincil araştırma.

Neleri daha iyi yapabileceğime dair herhangi bir öneriniz varsa veya yapmış olabileceğim hataları işaret ederseniz, yorum yapmaktan çekinmeyin.
Okuduğunuz için teşekkürler.