Çıkmaz yoktur, sadece çözüm vardır!
Vaka Çalışması
BaÄŸlam
Bu proje, Google UX Design Sertifika Programı kapsamında verilen “Sharpen” yönergesi doÄŸrultusunda geliÅŸtirilmiÅŸtir. Görev ÅŸu ÅŸekildeydi: “KiÅŸiselleÅŸtirilmiÅŸ sweatshirt sipariÅŸi vermek için bir akış tasarlayın.”
Proje Genel Bakışı
Proje:
Sharpen’ın “KiÅŸiselleÅŸtirilmiÅŸ sweatshirt sipariÅŸi vermek için bir akış tasarlayın” yönergesi kapsamında, kullanıcıların sweatshirt’leri basit, yaratıcı ve etkileÅŸimli bir ÅŸekilde kiÅŸiselleÅŸtirebileceÄŸi yeni bir web sitesi tasarladık.Web sitesi, yapay zeka destekli sweatshirt kiÅŸiselleÅŸtirme gibi çeÅŸitli özellikler sunar.
Proje Süresi:
Proje Kasım 2024’ten Aralık 2024’e kadar sürdü.
Görevim:
Bu projede tek UX tasarımcısı olarak, birden fazla rol ve sorumluluÄŸu kapsayan genel bir görev üstlendim.
Sorun:
Bazen orijinal sweatshirt’ler hediye etmek ya da kendine almak zor olabiliyor.
Kullanıcılar, hızlı bir ÅŸekilde kiÅŸiselleÅŸtirilmiÅŸ ve özgün bir sonuç elde edebilecekleri bir sweatshirt tasarlamak istiyorlar, böylece estetik, özgün ve uygun fiyatlı bir hediye sunabilir veya kendilerine keyifli bir hediye alabilirler.
Voici des captures d'écran du début et de la fin du flux utilisateur.
Sorumluluklarım:
Bazı sorumluluklarım şunlardı:
- Kullanıcı araştırması
- Rakip analizi
- Bilgi mimarisi
- Görsel tasarım
- Wireframe oluÅŸturma
- Kullanılabilirlik testi
- Prototipleme
Hedef:
Sweet Sweat için sweatshirt’lerin kolay ve hızlı bir ÅŸekilde kiÅŸiselleÅŸtirilebildiÄŸi bir web sitesi tasarlamak.
Kullanıcıyı Anlamak
-
Kullanıcı araştırmaları
-
Beyin fırtınasıyla ortaya çıkan bazı fikirler
-
Rakip analizi
-
KiÅŸilik profilleri (Personalar)
-
Sorun tanımları
-
Kullanıcı yolculuğu haritası
-
Kullanıcı görevi ve akış adımları
-
“Genel Bakış” storyboard'u
-
“Yakın Plan” storyboard'u
AraÅŸtırmalar: Özet
Süreç dört ana aÅŸamadan oluÅŸuyordu :
-
Kullanıcı araÅŸtırması: GörüÅŸmeler ve empati haritaları yoluyla yapılan kullanıcı araÅŸtırması, sweatshirt’leri hızlıca kiÅŸiselleÅŸtirmek ve özgün, estetik, yaratıcı sonuçlar elde etmek isteyen kullanıcıların ihtiyaçlarını anlamamızı saÄŸladı.
-
Rakip analizi : 4 rakibimizin güçlü ve zayıf yönlerini inceledik ve eksik kalan noktaları belirledik.
-
Kullanılabilirlik testi: Bu test, düÅŸük sadakatli (lo-fi) prototip aÅŸamasında gerçekleÅŸtirildi.
-
İkinci test: Bu test, lo-fi prototip aşamasında yapılmıştır.
Kullanıcı AraÅŸtırması: Özet
Bir beyin fırtınası oturumunun ardından, web sitemizin gelecekteki kullanıcılarını ve onların ihtiyaçlarını anlamak için görüÅŸmeler ve empati haritaları gerçekleÅŸtirdik.
AraÅŸtırmalar sonucunda, ana kullanıcı grubunun çevrim içi olarak kıyafetlerini kiÅŸiselleÅŸtirmek isteyen 18–35 yaÅŸ arası kiÅŸiler olduÄŸunu belirledik.
Bazı kullanıcıların daha önce sweatshirt kiÅŸiselleÅŸtirmiÅŸ olduÄŸunu, bazılarının ise hiç denemediÄŸini göz önünde bulundurduk.
5 kullanıcıdan 3’ü daha önce çevrim içi sweatshirt kiÅŸiselleÅŸtirmiÅŸ ve satın almıştı.Bu kullanıcı grubuyla yaptığımız araÅŸtırma, baÅŸka ihtiyaçları da ortaya çıkardı; ancak biz, yapay zeka destekli kiÅŸiselleÅŸtirme üzerine yoÄŸunlaÅŸmaya karar verdik.
Kullanıcı Araştırması: Acı Noktaları
1
Kolayca özgün bir sweatshirt tasarlamak
Kullanıcıların sweatshirt’leri kolay ve hızlı bir ÅŸekilde tasarlayabilmeleri gerekiyor.
Ancak özgün bir tasarım ortaya koymak çoÄŸu zaman zordur.
2
KiÅŸiselleÅŸtirme
Sadece tasarım oluÅŸturmak deÄŸil, aynı zamanda bu tasarımı ve sweatshirt’ün diÄŸer özelliklerini de kiÅŸiselleÅŸtirebilmek gerekir.
3
Hızlı sipariş verme
Sorunlardan biri, kullanıcıların sweatshirt’ü hem hızlı bir ÅŸekilde tasarlayabilmesi hem de hızlıca sipariÅŸ verebilmesiydi.
Tüm kullanıcı akışının hızlı ve kolay olması gerekir; kullanıcı, özellikle sipariÅŸ adımı gibi herhangi bir noktada takılmamalıdır.
Beyin Fırtınası Sonuçları
-
Yapay zeka, kullanıcı tarafından verilen bir tanıma göre tasarım oluÅŸturur
-
Farklı yazı tipi ve tasarım stilleri arasından seçim yapma imkânı
-
Elle çizim yapma veya kendi tasarımlarını yükleyip bunları yapay zeka ile geliÅŸtirme seçeneÄŸi
-
Tasarımın veya metnin sweatshirt boyutuna göre otomatik olarak ayarlanması
-
Kullanıcının zevklerine göre önerilerde bulunulması
-
Yapay zekanın sloganlar önermesi
-
Yapay zekanın kullanıcı fikirlerini güncel modaya ya da belirli bir yılın modasına uyarlayabilmesi
-
Tasarımın sosyal medyada paylaşılabilmesi
-
DiÄŸer kullanıcıların oylama yapabileceÄŸi veya öneride bulunabileceÄŸi bir sistem
-
Hediye paketinin kiÅŸiselleÅŸtirilebilmesi
-
Oylamalı tasarım yarışması; kazanan kiÅŸi sweatshirt’ü ücretsiz olarak alır
Rakip Analizi
Persona : Clara A.
Sorun Tanımı:
Clara, sevgilisine kiÅŸisel bir hediye seçme konusunda kararsız kalan, yaratıcı ama biraz çekingen, aşık genç bir kadındır.
Sevgilisine özel bir sweatshirt tasarlamak için ilham verici ve sade bir siteye ihtiyaç duyar çünkü yaratıcı fikirler bulmakta zorlanmaktadır.
Bu nedenle, kiÅŸiselleÅŸtirme sürecinin kolay ve hızlı olmasını ister.
Kullanıcı Hikayesi:
Aktif bir genç kadın olarak, erkek arkadaşıma hediye ararken, hızlıca kiÅŸiselleÅŸtirebileceÄŸim, özgün bir sonuç elde edebileceÄŸim bir sweatshirt tasarlamak istiyorum — böylece ona özel, estetik ve uygun fiyatlı bir hediye verebilirim.
Persona : Amadou D.
Sorun Tanımı:
Amadou, kiÅŸiselleÅŸtirilmiÅŸ sweatshirt’ler oluÅŸturup bunları çevrim içi maÄŸazası üzerinden satmak için basit ve hızlı bir yol arıyor.
Mevcut platformları çok karmaşık ya da kiÅŸiselleÅŸtirme seçenekleri açısından yetersiz buluyor ve ürünlerin son halini kolayca önizleyebileceÄŸi araçların eksikliÄŸini hissediyor.
Kullanıcı Hikayesi:
Streetwear ve otomobil dünyasına tutkulu genç bir giriÅŸimci olarak, özgün ve profesyonel tasarımlarla kiÅŸiselleÅŸtirilmiÅŸ sweatshirt’lerimi kolayca oluÅŸturup satabilmek istiyorum — böylece üretim ve lojistikle uÄŸraÅŸmadan markamı büyütebilirim.
Kullanıcı Yolculuğu Haritası: Persona: Clara A.
Hedef: Ona geek kültürüne ilgi duyduÄŸumu gösteren kiÅŸiselleÅŸtirilmiÅŸ bir sweatshirt hediye etmek istiyorum.
Kullanıcı Görevi ve Akış Adımları
Kullanıcı görevi: Web sitesini kullanarak yapay zeka ile bir sweatshirt kiÅŸiselleÅŸtirmek.
Uygulamada, giriÅŸten görevin tamamlanmasına kadar olan kullanıcı akışı ÅŸu adımlardan oluÅŸur :
1. Web sitesine gitmek
2. Ana sayfa
3. "Yapay Zeka ile Tasarla" bölümüne gitmek
4. Beklentileri ifade eden anahtar kelimeleri yapay zeka sohbet kutusuna girmek
5. Sweatshirt’ün ön yüzündeki grafik tasarımın boyutunu düzenlemek
6. Sweatshirt kiÅŸiselleÅŸtirmesini onaylamak
7. "Sepete ekle"yi seçmek ve ödeme iÅŸlemini tamamlamak
Storyboard « Yakın Plan »
Senaryo: Clara, aşık ve yaratıcı bir genç kadın olarak, erkek arkadaşına özel bir sweatshirt tasarlamak için sade ve ilham verici bir site arıyor. Yeterince fikri olmadığından, hızlı ve sezgisel bir araca ihtiyaç duyuyor.
Storyboard « Genel Bakış »
Tasarım Sürecine BaÅŸlamak
-
Kağıt wireframe’ler
-
Dijital wireframe’ler
-
DüÅŸük sadakatli prototip
-
Kullanılabilirlik testi
Kağıt Wireframe’ler
Ä°ÅŸte ana sayfanın, masaüstü, mobil ve tablet boyutları dâhil olmak üzere farklı ekran boyutlarına göre yapılmış çeÅŸitli yinelemeleri. Zaman yönetimi nedenleriyle her ekranın kâğıt üzerinde bir yinelemesi yapılmadı.
Yinelemeler, her tasarım eleÅŸtirisi oturumundan sonra dijital olarak gerçekleÅŸtirildi.
1
2
3
4
5
6
8
7
9
15
14
13
10
11
12
6
8
7
9
1
2
3
4
5
15
14
13
10
11
12
6
7
9
1
2
3
4
5
15
14
13
10
11
12
Bazı önemli öÄŸeler: 1 EÄŸitim (Tutorial) ; 2 Tasarla; 3 Yapay Zeka ile Tasarla ; 4 ​Stilist ile Tasarla ; 5 Temalar ve Fikirler; 6 Menü; 7 Hesap ; 8 Dil ; 9 Sepet ; 10 SSS (Sıkça Sorulan Sorular); 11 Hakkımızda ; 12 Teslimat ve Ä°ade ; 13 Sosyal Medya ; 14 Öne Çıkanlar Karuseli; 15 DiÄŸer Öne Çıkanlar
Dijital Wireframe’ler
Kullanıcıların farklı sweatshirt tasarlama yöntemlerine eriÅŸebilmesi ve tasarım fikirlerine kolayca ulaÅŸabilmesi önemliydi.
O zamandan beri site tasarımı daha da gelişti.
Kullanıcılar, yapay zeka sayesinde sweatshirt tasarımlarını kolayca oluşturabilecekler.
Dijital Wireframe’ler
Ä°lk kullanıcı testinden önce, “Yapay Zeka ile Tasarla” sayfasının web, tablet ve mobil için hazırlanmış dijital tasarımlar.
DüÅŸük Sadakatli Prototip (Lo-Fi)
Bu, ilk kullanıcı testinde kullanılan düÅŸük sadakatli prototipin baÄŸlantısıdır.
Sizden, yapay zeka ile bir sweatshirt tasarımı oluÅŸturma sürecine odaklanmanızı ve sipariÅŸ sürecini tamamlamanızı rica ediyoruz.
Kullanılabilirlik Testi: Ayarlar
Test Türü:
Denetimsiz kullanılabilirlik testi
Katılımcılar:
5 kiÅŸi
Konum:
Ä°stanbul, uzaktan
Süre:
15 ila 20 dakika
Kullanılabilirlik Testi: Sonuçlar
18 ila 35 yaÅŸları arasında 3 kadın ve 2 erkek olmak üzere 5 katılımcıyla iki turdan oluÅŸan, denetimsiz kullanılabilirlik testleri gerçekleÅŸtirdim.
Amacımız, temel kullanıcı deneyiminin — yani bir sweatshirt’ün oluÅŸturulması, kiÅŸiselleÅŸtirilmesi ve sipariÅŸ edilmesinin — kullanıcılar için ne kadar kolay olduÄŸunu belirlemekti.
Temel performans göstergeleri ÅŸunlardı: apay zeka ile bir sweatshirt’ün tamamen kiÅŸiselleÅŸtirilmesine harcanan süre, DönüÅŸüm oranı, Sistem kullanılabilirlik ölçeÄŸi, Kullanıcı memnuniyeti
1
Bir kütüphaneye kaydetme
Kullanıcılar, kiÅŸiselleÅŸtirdikleri sweatshirt’leri bir kütüphaneye kaydedemiyordu.
2
Ödeme ve teslimat bilgilerini düzenleme
Kullanıcılar bu sitede, özellikle sipariÅŸ ve ödeme sırasında bilgi giriÅŸi aÅŸamalarında bazı zorluklar yaÅŸamışlardır.
3
Fiyat değişikliğini bildiren uyarı
Kullanıcılar, sweatshirt’ü kiÅŸiselleÅŸtirirken fiyatın deÄŸiÅŸtiÄŸini fark ettiklerinde kendilerini biraz hazırlıksız yakalanmış hissettiler.
Tasarımı Geliştirmek
-
Design system
-
Arayüz tasarımları (Mockuplar)
-
Yüksek sadakatli prototip
-
EriÅŸilebilirlik
Design system
Mockuplar
Artık kullanıcılar, ürünlerinin fiyatındaki deÄŸiÅŸiklik konusunda bir mesajla bilgilendirilmektedir.
Kullanılabilirlik testinden önce
Kullanılabilirlik testinden sonra
Mockuplar
Kullanıcılar artık teslimat adreslerini ve ödeme yöntemlerini daha kolay ekleyip düzenleyebilmektedir. Ayrıca, kart bilgilerini kaydetmeden ödeme yapma seçeneÄŸine de sahiptirler.
Kullanılabilirlik testinden önce
Kullanılabilirlik testinden sonra
Ana Mockuplar
Kullanıcılar artık teslimat adreslerini ve ödeme yöntemlerini daha kolay bir ÅŸekilde ekleyip düzenleyebiliyor.
Ayrıca, kart bilgilerini kaydetmeden ödeme yapma imkânına da sahipler.
Yüksek Sadakatli Prototip
Voici le lien vÄ°ÅŸte yüksek sadakatli prototipine baÄŸlantısı. Sadece ana kullanıcı akışını içermektedir!
EriÅŸilebilirlik
1
Tipografiye özellikle dikkat ettik. Kullanılan yazı tipi sınıfı Sans Serif’tir.
Bu, disleksi gibi okuma güçlüÄŸü yaÅŸayan kiÅŸilerin metinleri daha kolay okuyabilmesini saÄŸlar.
Ayrıca yazı tipi seçimi ve yazı stili konusunda da özen gösterdik.
2
Metinlerin, arka planların, butonların vb. renkleri daha iyi vurgu saÄŸlamak amacıyla seçildi;
bu da görme problemi yaÅŸayan kullanıcılar için daha iyi bir görünürlük saÄŸlar ve kullanıcı akışını kolaylaÅŸtırır.
3
HiyerarÅŸi seçimi, uzun vadede TalkBack gibi eriÅŸilebilirlik araçlarının kullanılmasına olanak tanıyacaktır; bu da görme engelli kullanıcılar için faydalı olacaktır.
Duyarlı (Responsive) Tasarım
-
Bilgi Mimarisi
-
Duyarlı Arayüz Tasarımı
Site Haritası
Aşağıda ilk site haritası yer almaktadır. O zamandan bu yana biraz değişiklik yapılmıştır.
Duyarlı Tasarımlar
Mobil, tablet ve masaüstü gibi farklı ekran boyutlarına uygun tasarımlar hazırlandı. Kullanıcıyı etkilemek ve tasarım yapmaya teÅŸvik etmek amacıyla, sweatshirt tasarım önerilerini öne çıkarmak için ana menüleri alt bölüme taşıdım.
Bilgisayar
Tablet
Mobil Web Sitesi
Ä°leriye Dönük Adımlar
-
Önemli noktalar
-
Sonraki Adımlar
Önemli noktalar
Etki:
Tasarım, kullanıcı ihtiyaçlarını karşılama amacı taşımaktadır; ÅŸu anki haliyle sweatshirt tasarlama ve kiÅŸiselleÅŸtirme ihtiyacına yanıt vermektedir.
Akran geri bildirimi (alıntı):
“Yapay zekanın kullanımı, tasarımı kolayca oluÅŸturmaya ve tekrar tekrar yeni tasarımlar üretmeye olanak tanıyor.”
Neler ÖÄŸrendim
Bu web sitesini tasarlarken, kullanılabilirlik testleri ve tasarım eleÅŸtirisi oturumları gibi araÅŸtırma süreçlerinin önyargıları aÅŸmamıza, bakış açımızı geniÅŸletmemize ve yinelemeler boyunca tasarımı sürekli geliÅŸtirmemize yardımcı olduÄŸunu öÄŸrendik.
Sonraki Adımlar
1
Kullanıcıların sitede ve sosyal medyada yorumlarını ve tasarımlarını paylaÅŸabilmesini saÄŸlamak ve yeni kullanılabilirlik testleri gerçekleÅŸtirmek.
2
Stilist desteÄŸi gibi alternatif tasarım yöntemlerini geliÅŸtirmek.
3
Sitede ve sosyal medyada yorumların ve tasarımların paylaşılmasına olanak tanımak ve kullanılabilirlik testleri gerçekleÅŸtirmek.
Ä°letiÅŸime geçelim
E-posta : feyziocan.uxdesign@gmail.com
LinkedIn : www.linkedin.com/in/feyzi-ocan
Web sitesi : https://www.feyziocanuxdesign.com/
TeÅŸekkürler
Sweet Sweat site projemi incelediÄŸiniz için çok teÅŸekkür ederim
Bu, gerçekleÅŸtirdiÄŸim ikinci projedir.
GeliÅŸtirilebilecek pek çok yönü olduÄŸunun farkındayım.
GörüÅŸ ve eleÅŸtirilerinizi paylaÅŸmak isterseniz, benimle iletiÅŸime geçmekten çekinmeyin.