Türkiye'nin en büyük ikinci el otomotiv ihale platformu Otokoç İhale'nin, çok adımlı ve yüksek bilişsel yük taşıyan ihale sürecini sade, güven veren bir mobil deneyime dönüştüren uçtan uca UX/UI tasarım sürecini üstlendim.
>Otokoç İhale mobil uygulaması, ikinci el araç alım-satım ve açık artırma süreçlerini mobil cihaz üzerinden daha anlaşılır, erişilebilir ve kullanıcı odaklı bir deneyime dönüştürmek amacıyla tasarladığım kapsamlı bir Product Design projesidir.
Bu projede yalnızca bir mobil arayüz tasarlamakla kalmadım. Kullanıcının araçları keşfetmesinden ihaleye katılmasına, teklif vermesinden ihaleyi kazanmasına ve satın alma sonrasındaki ödeme ve teslimat süreçlerine kadar uzanan uçtan uca deneyimi ele aldım.
Projenin temel odağı; yüksek miktarda araç bilgisini anlaşılır biçimde sunmak, teklif verme kararlarını kolaylaştırmak ve kullanıcının ihale sürecinin her aşamasında nerede olduğunu net bir şekilde anlayabilmesini sağlamaktı.
iOS ve Android için ayrı native tasarım: Uygulama tek bir tasarımın iki platforma uyarlanması değil; iOS'ta Human Interface Guidelines, Android'de Material Design 3 prensipleriyle uyumlu şekilde ayrı ayrı ele alındı. Ortak bir tasarım sistemi (Figma Variables) üzerinden beslenen bu yaklaşım, her iki platformda da kullanıcıya kendi işletim sisteminin alışkanlıklarına uygun, native bir his veriyor.
Araştırma & Benchmark
Yerli ve global ihale platformları incelendi, kullanıcı davranışları analiz edildi.
Moodboard & Trend
Marka kimliğine uygun görsel yön ve güncel tasarım trendleri belirlendi.
UX Tasarımı
Bilgi mimarisi ve uçtan uca kullanıcı akışları kurgulandı.
Wireframe
Düşük detaylı iskeletlerle ekran yapıları ve hiyerarşi test edildi.
Design System
Atomic Design ile ölçeklenebilir bir bileşen kütüphanesi oluşturuldu.
Mockup
Yüksek çözünürlüklü, marka diline uygun arayüzler tasarlandı.
İnteraktif Prototip
Gerçek akışı simüle eden, tıklanabilir bir prototip hazırlandı.
Araştırma ve Keşif
Sürece, ihale ve açık artırma mantığıyla çalışan yerli ve global platformları inceleyerek başladım. Amacım; kullanıcıların araç bilgisiyle nasıl etkileşim kurduğunu, teklif verme kararını hangi verilere dayanarak aldığını ve ihale sürecinde en çok nerede tereddüt yaşadığını anlamaktı. Bu bulgular, ilerleyen aşamalarda tasarım kararlarının temelini oluşturdu.
- Benchmark Araştırmaları: Otokoç İhale'ye benzer iş modeline sahip yerli/yabancı ihale ve açık artırma platformları ile klasik ikinci el alım-satım uygulamaları karşılaştırmalı olarak incelendi; araç listeleme, teklif verme ve ihale takibi akışlarındaki güçlü ve zayıf noktalar tespit edildi.
- Moodboard ve Paydaş Sunumları: Marka kimliğiyle uyumlu, güven veren ve kurumsal bir görsel dil oluşturmak için farklı moodboard alternatifleri hazırlandı; paydaşlarla yapılan sunum ve geri bildirim turlarıyla tasarım yönü netleştirildi.
Tasarım Sistemi ve Mimari
Uygulamanın çok sayıda araç kartı, filtre, teklif ve ihale durumu ekranı barındırması nedeniyle, en baştan ölçeklenebilir bir mimariyle ilerlemek zorundaydım. Atomic Design prensipleriyle kurgulanan bileşen kütüphanesi, hem tasarım hem geliştirme tarafında tutarlılığı ve hızı garanti altına aldı.
- Design System Metodolojisi: Atom, molekül ve organizma seviyesinde kurgulanan bileşenler (buton, input, araç kartı, teklif rozeti, ihale durum etiketi vb.) tek bir kaynaktan türetilerek tüm ekranlarda tutarlı bir arayüz dili oluşturuldu.
- Figma Variables ile Sistem Yönetimi: Renk, spacing ve tipografi değerleri Figma Variables üzerinden token'lara bağlandı; böylece tema veya marka güncellemeleri tek noktadan, tüm ekranlara anında yansıtılabilir hale geldi.
- Tipografi ve Renk: Yoğun sayısal veri (fiyat, teklif, süre) içeren ekranlarda okunabilirliği önceliklendiren bir tipografi ölçeği kurgulandı; marka rengi olan turuncu, güven duygusunu zedelemeden yalnızca kritik aksiyon ve durum bildirimlerinde vurgu olarak kullanıldı.
- Platform Bazlı Mimari: Bileşen kütüphanesi, iOS'ta Human Interface Guidelines ve Android'de Material Design 3 prensipleriyle uyumlu şekilde ayrı ayrı ele alındı; ortak tasarım tokenları üzerinden her iki platformda da native his veren, tutarlı bir deneyim kurgulandı.
Kullanıcı Arayüzü ve Etkileşim
- Onboarding Ekranları: İhale ve açık artırma mantığına aşina olmayan kullanıcılar için, uygulamaya ilk girişte teklif verme, ihale takibi ve süreç adımlarını kısa ve görsel destekli ekranlarla anlatan bir onboarding akışı tasarlandı; böylece kullanıcı ana ekrana adım atmadan önce sistemin nasıl işlediğine dair güven kazanıyor.
- Temiz ve Minimalist Arayüz: Araç görseli, teknik özellikler, güncel teklif ve ihale durumu gibi yoğun bilgiyi tek ekranda taşımak yerine; net bir hiyerarşi, bol beyaz alan ve sade kart yapılarıyla kullanıcının gözünün doğrudan karar vermesi gereken bilgiye gitmesi sağlandı.
- Araç Özellikleri Kartları: Her araç; marka, model, yıl, kilometre ve hasar durumu gibi temel bilgileri tek bakışta özetleyen, esnek ve tekrar kullanılabilir bir kart bileşeni üzerinden listelendi; kullanıcı detaya girmeden karşılaştırma yapabiliyor.
- Hızlı Teklif Verme Butonları: İhale ekranlarında teklif verme aksiyonu, tek dokunuşla erişilebilecek şekilde öne çıkarıldı; buton durumları (aktif, bekleyen, geçersiz teklif) renk ve ikon farklarıyla anında ayırt edilebiliyor.
- İhale Sayaçları: Geri sayım bileşenleri, ihalenin bitmesine yaklaşıldıkça görsel olarak vurgulanacak şekilde tasarlandı; böylece kullanıcı zaman baskısını net hissedip teklif kararını buna göre veriyor.
- Mikro Etkileşimler: Teklif onayı, sayaç uyarıları ve ihale durum değişiklikleri gibi kritik anlarda küçük animasyon ve geri bildirimlerle kullanıcıya "işlem gerçekleşti" hissi anında veriliyor.
Sonuç ve Kazanımlar
Otokoç İhale, araç bazında onlarca veri noktasını ve çok aşamalı bir ihale sürecini tek bir mobil akışta buluşturan karmaşık bir problemdi. Araştırma bulgularını ölçeklenebilir bir Design System'e, ardından net ve güven veren bir arayüze dönüştürerek; kullanıcının hangi aşamada olduğunu her zaman bilen, teklif verirken tereddüt değil kontrol hisseden bir deneyim ortaya çıkardım.
- Sadeleşen bilgi mimarisi: Araç, teklif ve ihale durumu gibi yoğun veriler; kart tabanlı, hiyerarşisi net bir yapıya kavuşarak kullanıcının karar süresini kısalttı.
- Ölçeklenebilir bir sistem: Atomic Design ve Figma Variables ile kurulan altyapı sayesinde yeni ekran, kampanya veya araç kategorisi eklemek artık haftalar değil, saatler sürüyor.
- Güçlenen kurumsal güven: Tutarlı tipografi, renk kullanımı ve mikro etkileşimlerle kurgulanan arayüz, ihale gibi hassas bir işlemde kullanıcıya kurumsal güven hissi veriyor.
Ekranlar
İhale listesinden teklif vermeye, araç detayının her aşamasına kadar uçtan uca akışın gerçek ekran görselleri.
