top of page

Vaka Çalışması

Kişiselleştirilmiş Sweatshirt Web Sitesi

Bağlam

Google UX Design Sertifika Programı kapsamında gerçekleştirilen UX tasarım projesi:
“Kişiselleştirilmiş sweatshirt siparişi için bir kullanıcı akışı tasarlayın.”

Proje Genel Bakışı

Proje:

Sharpen brifi doğrultusunda, “Kişiselleştirilmiş sweatshirt siparişi için bir akış tasarlayın” görevi kapsamında Sweet Sweat adlı bir web sitesi tasarladım. Platform, kullanıcıların sweatshirt tasarlamasını ve sipariş vermesini basit ve sezgisel bir süreçle mümkün kılar.

Platformun sundukları:

  • Yönlendirmeli kişiselleştirme akışı

  • Gerçek zamanlı görsel önizleme

  • Yaratıcı öneriler

  • Yapay zekâ destekli tasarım yardımı

Proje Süresi:

Kasım – Aralık 2024

Sorun:

Bir kıyafeti çevrim içi kişiselleştirmek:

  • Karmaşık

  • Zaman alıcı

  • Sezgisel olmayan bir süreç olabilir

 

Kullanıcılar:

  • Sweatshirt’ü hızlıca tasarlamak

  • Nihai sonucu kolayca görmek

  • Aşırı çaba harcamadan özgün bir tasarım elde etmek ister

Yukarıda kullanıcı akışının başlangıç ve bitiş ekran görüntüleri yer almaktadır.

Görevim:

Bu projede tek UX tasarımcı olarak, birden fazla rol ve sorumluluğu kapsayan genel bir görev üstlendim.

Sorumluluklarım:

Hedef:

Kullanıcılara şu imkânları sunan bir web sitesi tasarlamak:

  • Sweatshirt’ü birkaç net adımda kişiselleştirme

  • Yapılan değişiklikleri anında görüntüleme

  • Sipariş sürecini sadeleştirme

Bazı sorumluluklarım şunlardı:

  • Kullanıcı araştırması

  • Rakip analizi

  • Bilgi mimarisi

  • Görsel tasarım

  • Wireframe oluşturma

  • Kullanılabilirlik testi

  • Prototipleme

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:

  1. 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ı.

  2.  Rakip analizi : 4 rakibimizin güçlü ve zayıf yönlerini inceledik ve eksik kalan noktaları belirledik.

  3. Kullanılabilirlik testi: Bu test, düşük sadakatli (lo-fi) prototip aşamasında gerçekleştirildi.

  4. İ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 sweatshirttasarlamak

Kullanıcıların sweatshirt’leri kolay ve hızlı bir şekilde tasarlaya bilmeleri 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

  • Amaç: Her bir rakibin kullanıcı deneyimini karşılaştırmak ve güçlü/zayıf yönlerini belirlemektir. PDF formatında hazırlanmıştır.

Tablo ve Rapor PDF formatında hazırlanmıştır.

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ç birkadındır.
Sevgilisine özel bir sweatshirt tasarlamak için ilham verici ve sade bir siteye ihtiyaç duyar çünkü yaratıcı fikirlerbulmakta 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 vehı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 sonhalini 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 veilham 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

​

5

6

8

14

11

6

8

7

9

1

3

13

11

12

6

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

İş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 vetasarı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.”

menu_book_50dp_F8E71C_FILL0_wght400_GRAD0_opsz48.png

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.

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

Sweet Sweat, tamamladığım ikinci kapsamlı UX projesidir.
Bu proje, kullanıcı odaklı tasarım yaklaşımımı derinleştirmemi ve araştırmadan prototip iterasyonlarına kadar tasarım kararlarımı pekiştirmemi sağladı.
Bugün bu yaklaşımı daha fazla titizlik ve daha yüksek bir hassasiyetle sürdürmekteyim.

Bir projeniz, sorunuz ya da birlikte değerlendirmek istediğiniz bir fikriniz mi var?
Ya da çalışmalarımı ve güncel projelerimi takip etmek mi istersiniz?

bottom of page