Misli’de Dark Mode Tasarım ve Ürün Süreçleri

Bir üründe dark mode eklemek, çoğu zaman yalnızca birkaç renk değişikliğinden ibaret gibi görünür. Arayüz kararları alınır, kontrast ayarlanır ve ayarlara yeni bir seçenek eklenir. Oysa işin mutfağına girdiğinizde, bunun çok daha derin, çok daha katmanlı bir problem olduğu hızla ortaya çıkar. Çünkü dark mode, yalnızca estetik bir tercih değil; uzun süreli kullanım, göz konforu, erişilebilirlik, odaklanma ve hatta marka algısını doğrudan etkileyen stratejik bir ürün kararıdır.

Misli’de bu sürece başlarken kendimize “Koyu tema tasarlayalım” gibi basit bir hedef koymadık. Bunun yerine şu soruyu sorduk: “Kullanıcılar karanlık bir ortamda, yoğun bilgi akışı altında ve yüksek dikkat gerektiren anlarda ürünü nasıl deneyimlemeli?“

Bu soru, bizi yalnızca renk paletini değil; yüzey derinliklerini, etkileşim geri bildirimlerini ve tüm tasarım sistemini baştan sona yeniden düşünmeye itti.

Bu yazıda, Misli’de Dark Mode’u sadece bir ayar olmaktan çıkarıp, nasıl bütünsel bir ürün deneyimine dönüştürdüğümüzü; stratejik ürün kararlarından, renk sisteminin sıfırdan inşasına kadar uzanan tasarım yolculuğumuzu tüm detaylarıyla paylaşıyoruz.

Araştırma Süreci

Dark Mode kararını almadan önce kendimize şunu sorduk: “bu ihtiyaç gerçekten var mı ve ne kadar yaygın?”

İlk sinyaller, farklı ekiplerle yürütülen toplantılardan ve iç iletişimlerden geldi. Kullanıcı geri bildirimlerinde tekrar eden bir pain point vardı: açık tema, özellikle uzun ve gece kullanımlarında göz yoruyordu. Bu geri bildirimler zamanla tutarlı bir örüntüye dönüştü ve araştırma sürecimizin başlangıç noktasını oluşturdu.

1- Kullanılabilirlik Testleri

Mobil kullanılabilirlik testlerimizde bu tablo daha da netleşti. Test oturumları boyunca katılımcılar, günlük hayatlarında neredeyse tüm uygulamaları karanlık modda kullandıklarını belirtti. Bu alışkanlık o kadar yerleşmişti ki Misli’nin melez teması artık bu tablonun dışında kalıyordu. Dark Mode, “nice to have” bir özellikten, gerçek bir ürün ihtiyacına dönüşmüştü.

2- Netnografi

Bulguları pekiştirmek için Play Store ve App Store yorumlarını sistematik biçimde inceledik. “Geceleri göz yoruyor”, “beyaz ekran rahatsız ediyor” ifadelerinin farklı kullanıcılardan defalarca tekrarlandığını gördük. Bunlar tek tek şikayetler değildi; yaygın ve karşılanmamış bir beklentinin yansımalarıydı. Kullanıcılar alternatif önermiyordu, sadece bildikleri ve alıştıkları bir deneyimi Misli’de de görmek istiyordu.

3- Benchmark Analizi

Son olarak rakip uygulamaların ve farklı sektörlerden ürünlerin Dark Mode yaklaşımlarını karşılaştırmalı olarak inceledik. Tema geçiş stratejileri, renk sistemleri ve erişilebilirlik kararları tek tek ele alındı. Sektördeki farklı yaklaşımları incelediğimizde, neyin işe yaradığı kadar neyin işe yaramadığı da netleşti. Bu analiz bize “dark mode nasıl yapılır?”ın ötesinde “dark mode nasıl hissettirmeli?” sorusunu da sordurdu.

Araştırma sürecinin ekibe en kritik katkısı şuydu: “ne yapacağız?”dan önce “neden ve nasıl yapacağız?”ı netleştirmek. Kullanıcının gözünü yormayan ve Misli’nin renk dilinden kopmayan bir dark mode tasarlamak net bir hedef olarak önümüzde duruyordu. Bu hedef doğrultusunda attığımız her adım, tasarım sürecimizin de şeklini belirledi.

Tasarım Süreci

Araştırma süreci, bize Dark Mode’un yalnızca bir ihtiyaç değil, aynı zamanda yüksek beklenti içeren bir problem olduğunu da gösterdi. Bu noktadan sonra odaklandığımız temel soru şuydu:

“Dark mode’u mevcut tasarımın ters renkleri olarak mı ele alacağız, yoksa Misli için başlı başına yeni bir renk deneyimi mi inşa edeceğiz?”

Bu sorunun cevabı, tüm tasarım sürecimizin yönünü belirledi.

1. Stratejik Çerçevenin Belirlenmesi

Tasarım sürecine başlamadan önce, Dark Mode’un Misli ürün ekosistemi içindeki rolünü netleştirdik. Bunun için üç temel prensip belirledik:

• Okunabilirlik ve göz konforu her kararın merkezinde olacaktı.
• Marka kimliği korunacak, Misli’nin karakteri karanlık temada da hissedilecekti.
• Tasarım sistemi ölçeklenebilir olacak, gelecekte eklenecek tüm komponentleri de sorunsuz taşıyabilecekti.

Bu prensipler, ilerleyen aşamalarda karşılaştığımız tüm tasarım kararlarında referans aldığımız bir kontrol listesine dönüştü.

2. Renk Sisteminin Yeniden İnşası

Dark mode tasarımının en kritik bileşeni kuşkusuz renk sistemidir. Ancak burada amacımız yalnızca açık temanın renklerini tersine çevirmek değildi. Çünkü bu yaklaşımın, çoğu zaman düşük kontrast, yetersiz hiyerarşi ve göz yoran yüzeylerle sonuçlanacağını biliyorduk.

Bu nedenle renk sistemini sıfırdan ele aldık:

• Arka plan katmanlarını tek bir siyah ton yerine, farklı derinlik seviyelerini temsil eden çoklu yüzey renkleriyle kurguladık.
• Ana marka rengini, karanlık zemin üzerindeki algısal parlaklıklarına göre yeniden ölçeklendirdik.
• Metin ve ikon renklerini, WCAG kontrast standartlarını karşılayacak şekilde yeniden düzenledik.

Bu yapı sayesinde arayüz, düz ve tek parça bir yüzey olmaktan çıkarak, katmanlı ve yönlendirici bir görsel hiyerarşi kazandı.

3. Yüzey Derinliği ve Hiyerarşi Kurgusu

Yaptığımız benchmark çalışmalarında gördüğümüz önemli problem; Dark Mode’da komponent’lerin birbirine karışması ve yüzey algısının kaybolmasıydı. Bu nedenle yüzey derinliği, tasarım sürecinin odak noktalarından biri oldu.

Bu sebeple kartlar, modallar ve bottom-sheet gibi yükseltilmiş yüzeyler için ayrı tonlar belirledik. Yoğun gölge kullanımı yerine, ışık ve kontrast farklarıyla derinlik hissi yarattık.

Bu yaklaşım, kullanıcıya fark ettirmeden yön veren, daha sezgisel bir deneyim hissi oluşturdu.

4. Etkileşim ve Geri Bildirim Tasarımı

Tasarım sürecinde Dark Mode’u, yalnızca statik bir görsel tema olarak değil; etkileşim anlarında da ortaya çıkacak şekilde inşa ettik.

Bu nedenle; Buton durumları (hover, pressed, disabled) için ayrı mikro-kontrast seviyeleri belirledik. Canlı skorlar, oran değişimleri ve anlık bildirimler için kullanılan renkleri, karanlık zemin üzerinde daha kontrollü ve dengeli hale getirdik.

Amaç, kullanıcıyı yormadan yönlendiren, sessiz ama güçlü bir etkileşim dili oluşturmaktı.

Misli Etkileşim ve Geri Bildirim Tasarımı

5. Design System Entegrasyonu

Tüm bu kararların sürdürülebilir olması için Dark Mode’u, mevcut tasarım sisteminin doğal bir uzantısı olarak ele aldık. Figma üzerinde token ve variable bazlı bir yapı kurarak light ve dark temalar arasında otomatik geçiş sağladık. Bu sayede yalnızca tasarım tutarlılığını korumakla kalmayıp, aynı zamanda ekiplerin iş akışını da ciddi ölçüde hızlandırdık.

Oluşturulan bu sistem sayesinde, yeni geliştirilecek tüm ekranlar ek bir tasarım eforu gerektirmeden, yalnızca Figma Mode kullanılarak kolaylıkla dark mode uyumlu hale getirilebilir şekilde kurgulandı.

Tüm bu sürecin sonunda ortaya çıkan şey yalnızca bir Dark Mode değildi. Kullanıcının gece kullanım senaryolarında, yüksek bilgi yoğunluğu altında ve uzun süreli etkileşimlerde konforlu hissettiği bütünsel bir ürün deneyimiydi.

Böylece Misli’de Dark Mode, sadece bir ayar olmaktan çıkıp, Misli ürün ekosisteminin kalıcı ve ölçeklenebilir bir parçası haline geldi.

Misli Design System Color Palette — Variabes & Modes

Ana Akışlardan Edge-Case’lere

Tasarım süreci boyunca yalnızca ana kullanıcı akışlarına odaklanmakla yetinmedik. Dark Mode’un gerçek hayatta sorunsuz ve tutarlı çalışabilmesi için, ürünün tüm kullanım senaryolarını kapsayan geniş bir ekran seti üzerinde çalıştık. Bu kapsamda, 43 ana ekran ve her bir akış içinde 40’tan fazla edge-case senaryosunu detaylı biçimde ele aldık; böylece toplamda yaklaşık 1.700’den fazla ekrana, dark mode perspektifiyle dokunduk ve bütünsel bir deneyim kurgusu içinde yeniden ele aldık.

Boş durumlar, hata ekranları, yüklenme anları, doğrulama adımları ve nadiren karşılaşılan senaryolar dahil olmak üzere, kullanıcıların karşılaşabileceği tüm olası durumlar dark mode perspektifiyle yeniden tasarlandı.

Bu yaklaşım, Dark Mode’un yalnızca “ideal senaryolarda” iyi görünen bir tema olmasının önüne geçerek, ürünün her anında aynı kaliteyi koruyan bütünsel bir deneyime dönüşmesini sağladı. Özellikle edge-case ekranlar üzerinde yaptığımız bu detaylı çalışmalar, tema geçişlerinde oluşabilecek görsel kopuklukların ve algısal tutarsızlıkların daha tasarım aşamasındayken ortadan kaldırılmasına olanak tanıdı.

Bu sayede ortaya çıkan yapı, sadece ana ekranlarda değil, ürünün en uç noktalarında bile tutarlı, dengeli ve özenli bir deneyim sunan güçlü bir tasarım sistemi haline geldi.

UAT Süreci

Tasarım ve geliştirme süreci tamamlandıktan sonra, Dark Mode’u uçtan uca kullanıcı akışları üzerinden kapsamlı biçimde test ettik. Bu süreci, ürün, yazılım ve test ekipleriyle yakın ve sürekli bir koordinasyon içinde yürüttük. Tüm adımları net sorumluluk alanları ve geri bildirim döngüleriyle yapılandırdık; her test aşamasını detaylı biçimde dokümante ederek raporladık.

Süreç boyunca hem iOS hem de Android platformlarında paralel testler gerçekleştirdik ve iki platform arasındaki deneyim tutarlılığını ayrı bir değerlendirme başlığı altında ele aldık. Böylece yalnızca tekil ekranları değil, ürünün tamamının Dark Mode’da nasıl bir bütün oluşturduğunu gözlemledik.

Tema geçişlerinin sürekliliğini, kritik aksiyonların her iki modda da aynı netlikte algılanmasını ve ekranlar arası görsel bütünlüğü titizlikle inceledik. Tespit ettiğimiz tüm iyileştirme alanlarını sprint bazlı olarak ele aldık; ilgili ekranları tasarım ve geliştirme tarafında tekrar gözden geçirerek revize ettik.

Okuduğunuz için teşekkür ederiz. 🧡

Künye

Director of Product: Emrah Hamurcu,

Product Manager: Buğra Gürsoy,

Sr. Product Owner: Doruk Boyacı,

Design Manager: Fatih ARSLAN.

Sr. Product Designer: Emre Can Tekgül,

Sr. Product Designer: Nesil Aksoy,

UX/UI Designer & Researcher: Berfin Güngör,

Software Development Manager: İlyas Yavuz,

Technical Product Owner: Feyza Kızılay,

Android Team Lead: Mert Selçuk,

Android Developer: Seyit Sevinç,

Android Developer: Kaan Aydın,

Android Developer: Eray Bulut,

iOS Team Lead: Barış Can Başkan,

iOS Developer: Burhan Cem Sezeroğlu,

iOS Developer: Doğuş Hür,

iOS Developer: Fetih Yetişir,

Test Team Lead: Erdal Mutluer,

Senior Test Specialist: Şeyma Kantar,

Senior Test Specialist: Oğuzhan Bahadır,