Zivame'in UX Tasarım Ekibi Çok Yönlü Ürün Keşfini Nasıl Sağladı?

Yayınlanan: 2016-12-24

Bu, Zivame UX Direktörü Udit Khandelwal'ın beş bölümlük Konuk Blogu serisinin ilkidir.

Kullanıcılar bulamazsa, özellik yok demektir! – İnsan Faktörleri Uluslararası (HFI)

Bu alıntıyı ilk kez 2012'de HFI'daki bir eğitim oturumunda duydum ve her zaman benim UX'e yaklaşma tarzımla rezonansa girdiğini göreceksiniz.

Ürün keşfi, herhangi bir perakende işinin en önemli yönlerinden biridir ve kullanıcılar sunduğunuz ürünleri bulamıyorsa, mevcut değildirler. Zivame'de sorunsuz ürün keşfini sağlamak için platformlarımızda çok yönlü bir keşif stratejisi geliştirdik. 5 yazılık bu seride, Zivame'de koleksiyonları öne çıkarmak, ürün keşfi ve teklif iletişimi için kullanılan kaldıraçları ele alacağım.

Bu, bu serideki ilk makaledir ve burada ağırlıklı olarak aşağıda verilen kaldıraçlar listesinden Buz Kırıcılar altındaki öğeleri ele alacağım:

İçindekiler

Bu Seride:

Buz Kırıcılar *
  • Anasayfa Giriş Kartları
  • Anasayfa Kahraman Atlıkarınca
  • Öne Çıkan Koleksiyonlar
  • Kategori Masthead
  • Uygulama İlk Katılımı
  • SığdırmaKodu
Talep üzerine
  • Heterojen Mağaza-Gezinme
  • Shop-Nav Öne Çıkan Resim
  • Teklif Afişi
  • Keşfetmek
  • Shop-Nav'da Yapışkan Düğmeler
  • Deneyime Göre Alışveriş
öneriler
  • Bunun Gibi Daha Çok Bağlamsal
  • En Çok Satanlar
  • Bunları da sevebilirsiniz
  • Mükemmel Uyum Önerisi
  • Kitap bakmak
el ele tutuşmak
  • Açılış Sayfası Teklifi Şart ve Koşulları
  • Kurala Dayalı Teklifler:
    • Kategori Sayfası
    • Ürün Sayfası
    • Araba
    • Çıkış yapmak
Bildirimler
  • Mobil Uygulama İletme
  • Web İtme
  • Evrensel Bildirimler
  • Pazarlama E-postası
  • İşlem E-postaları Altbilgisi
  • Pazarlama SMS'i
İçerik Kancaları
  • Açılış Sayfaları için İçerik İnfüzyon Kartları
  • Blogda İçerik Sayfaları ve Koleksiyonlar
  • İçerik Sayfalarında Ürün İnfüzyonu
Müdahaleci ve Çaresiz
  • Koşullu Pop-up'lar
  • Uygulama İçi Mesajlaşma
* Bu makalede ele alınan

Bunların her biri, kullanıcı yolculuğunda çok özel bir amaca hizmet eder ve buna göre kullanılır. Gelin onlara teker teker bir göz atalım – her durumdaki zorluklardan ve bunların üstesinden gelmek için neler yaptığımızdan bahsedelim. Mümkün olan her yerde iş metrikleri hakkında da konuşacağım.

Anasayfa Giriş Kartları

Meydan okumak

  • Zivame'deki web trafiğinin %45'i ilk kez kullananlardan oluşuyor
  • Doğrudan ve organik trafiğin %40'ı Zivame'nin ana sayfasına iniyor
  • Yukarıdaki kullanıcıların çoğu, sunduğumuz ürünlerin genişliği hakkında çok az ipucuna sahiptir.

Çözüm

Açık bir yatay menüye sahip olmamak ve mobil öncelikli bir hamburger navigasyonuna geçmek, yeni yığınımızla takip etmeye başladığımız çok iyi düşünülmüş ve kullanıcı tarafından test edilmiş bir yaklaşımdı.

Tekliflerimiz hakkında açık sözlü olmamanın bir bedeli vardı.

Bu nedenle, aynı şeyi daha ilk aşamada iletmek bizim için kritik hale geldi. Aşağıda gösterilen kartlar tam olarak bu amaca hizmet etmektedir.

İlginç olan, bu yaklaşımın önce masaüstü için kavramsallaştırılması ve daha sonra aşağıda gösterildiği gibi mobil için uyarlanmasıdır. Masaüstü versiyonunda,

kartlar ilk kattaki en büyük gayrimenkulü kaplarken, mobilde dikey alan kısıtlaması nedeniyle kahraman bayrağının hemen altındalar.

Ana Sayfa Giriş Kartları ve Hero Carousel
Ana Sayfa Kahraman – Mobil

Biz bunu kavramsallaştırırken yöneticilerimiz bunu şöyle tasavvur ettiler:

Ana sayfamda 8 saniye geçiren hiç kimse Zivame'nin iç giyim, giyim ve spor giyim sattığını bilmeden gitmesin. – Shaleen, COO Zivame

…ve aynısını tasarım yoluyla başarma konusunda iyi bir iş çıkardığımızı düşünüyorum. Kartların konumlandırılması onları kaçırılmaz kılıyor ve bağlantılarla birlikte başlıklar, örneğin İç Giyim, Spor Giyim ve Giyim gibi bireysel kategoriler hakkında net beklentiler ortaya koyuyor . Ayrıca, dördüncü kart, ilk kata bir koltuk hak eden meta öğeleri koymak için yeterli esneklik sağlar.
Not: Ben bu yazıyı yazarken bu bileşen geliştirme aşamasında ve yakında piyasaya sürülecek!

(Ayrıca Okuyun: Zivame'de Kullanıcı Deneyimini Şekillendirme: Bir Ürün Yönetimi Vaka Çalışması)

çaba

Her kartta hangi 4 şeyin geçeceğini kestirmek zor, çünkü şirketteki her paydaş mülkü için birinci sınıf gayrimenkul arıyor!
Veriler, en çok rağbet gören öğeleri en üstte tutabileceğiniz kolay bir kaçış yolu gibi görünse de, işletmenin çelişkili bir yönü olabilir . Örneğin, Apparel, bugün itibariyle Zivame'in gelirinin yalnızca %8'ine katkıda bulunuyor, ancak en büyük gayrimenkulün %25'ini kaplıyor.

Şirketin yöneticilerinden makul miktarda ılımlılık içeren çapraz işlevli bir işbirliği size doğru cevabı vermelidir. Ürün yöneticimin dediği gibi:

Orantısız büyümelerini sağlamak için belirli varlıklara orantısız bir şekilde nazik olmalısınız. – Vishrut Shukla, Sn. PM – Zivame

Anasayfa Kahraman Atlıkarınca

Meydan okumak

  • Bu bir sonraki birinci sınıf gayrimenkuldür ve mülk görseldir. Markayı temsil etmesi ve katı bir görsel tasarım dilinin takip edilmesi gerekiyor.

Çözüm

Açıkçası, bu tasarlaması kolay, ancak yürütmesi zor bir şeydi. Büyük-cesur-güzel tasarım dilini takip ettiğimizi biliyorduk ve bu nedenle, banner'ın ekran genişliğinin %100'ünü ve kalan ekran yüksekliğinin %100'ünü kaplaması kolay bir karardı. Ancak bu bize çözülmesi gereken 2 sorun bıraktı:

  • Belirli ekran boyutlarında, 'kapak' algoritmasını kullanacağımız için başlık kırpılacaktı.
  • Başlık ekranın alt kenarına kadar uzandığında, kullanıcılar sayfanın orada bittiği ve bunun ötesinde bir şey olmadığı yanılsamasına kapılabilir.

Kırpma sorununu çözmek için güvenli alanları tanımladık ve birden çok çözünürlükte test ettik. Birkaç vuruş ve denemeden sonra, onu çivilemeyi başardık.
Kullanıcılara banner'ın ötesinde daha fazla şey olduğuna dair görsel bir ipucu vermek için banner'ın altına bir şerit yerleştirdik. Temiz tutmak için gezinme okunu tek yönlü yapmaya karar verdik, ancak nokta tabanlı gezinme koyarak slayt gösterisi ipuçları da verdik.

Kullanıcı yolculuğunu akılda tutarak, doğru mesajla doğru afişi oluşturmak ve kategori sayfası afişleriyle birleştirmek için yoğun miktarda çapraz işlevli işbirliği yapıldı. Yukarıdaki bölüm örnek bir ekran görüntüsü gösterir ve güvenli alanı nasıl tanımladığımız aşağıdadır:

Ana Sayfa Kahraman Afişi için Güvenli Alan

Öne Çıkan Koleksiyonlar

Meydan okumak

  • Banner'lar dikkat çekmek için iyidir, ancak kullanıcı ilgisini çekmek ve kullanıcıların doğru beklentiyle tıklamasını sağlamak için onlara koleksiyon hakkında biraz daha bilgi vermemiz gerekiyor. Ancak, gayrimenkul sınırlıdır ve farklı koleksiyonlar arasında çok fazla rekabet vardır.
  • Zivame'in Mobil Ana Sayfasının önceki tasarımı, her koleksiyonun 10 üründen oluşan bir dizi ve ardından son küçük resme kadar kaydırdıktan sonra bir "Daha Fazla Gör" düğmesinin bulunduğu bir koleksiyon akordeonunu spor ediyordu. Veri analizi, akordeonla etkileşime giren %40'tan fazla kullanıcının daha fazlasını gör seçeneğine tıkladığını ortaya koydu. Bu, yukarıda belirtilen noktayı güçlendirir. Ancak akordeon kullanmak istemedik çünkü görsel ve metin ağırlıklı değildi.
    Eski Ana Sayfa – Mobil

  • Çok fazla ürün görselinin önceden yüklenmesi sayfa performansını olumsuz etkiler. Sayfa yükleme süresinin fazladan her saniyesi için dönüşüm %7 gibi inanılmaz bir oranda düşüyor.

Çözüm

Ekstra bir tıklama pahasına, USP'leri gösterin ve her koleksiyonun gizlice göz atın. Bir ürün kolajının yanı sıra, sadece 3 kritik bilgiyi ortaya çıkardık:

  1. Koleksiyon Adı
  2. Tanım
  3. İmza Nitelikleri

Bu sadece koleksiyona ilgi uyandırmakla kalmadı, aynı zamanda kullanıcıyı belirli bir beklentiyle ürün keşfetme yolculuğuna yönlendiriyor. Ürün kolajı, birden fazla ürün resmi yerine tek bir kolaj resmi olarak döndürülecek şekilde teknik olarak optimize edilebilir. Yine, bu sürüm mevcut sitede kısmen dağıtıldı ve geri kalanı bu makaleyi yazarken uygulanıyor.

Ana Sayfa Koleksiyon Afişleri (*devam ediyor)

Zivame'yi ziyaret edin

Kategori Masthead

Meydan okumak

  • Kategori sayfaları, ücretli trafik için birincil açılış sayfalarıdır. Ayrıca, sitedeki herhangi bir koleksiyon/teklif afişine tıklayan herkes bir kategori sayfasına gelir. Bu nedenle, kullanıcı yolculuğunu burada birleştirmek ve bağlamı korumak çok önemli hale geliyor.
  • Kategori ne kadar geniş olursa, kullanıcıların bir seçim yapması o kadar zor olur. Bu nedenle, belirli durumlarda, kullanıcı yolculuğunu daha belirli bir alt kategoriye ve ardından belirli ürünlere daraltmak isteyebiliriz.
  • Belirli kategoriler çok özel veya yenidir ve kullanıcıların, sayfaya geldikleri anda USP'lerden haberdar olmaları gerekir.

Çözüm

Masthead 4 ana bileşenden oluşur. Yapılandırılabilir bileşenlerin yukarıda belirtilen kullanım durumlarıyla ilgileneceği bir yaklaşım geliştirdik: sadece masthead'e bir banner koymak ve yaratıcı banner'lara güvenmek, alışveriş yapmak, filtreleme/sıralama araç çubuğu ve gerisini yapmak için iletişim önermek.
Burada banner'lardan bahsedeceğim ve daha sonra 'shop by' ve teklifleri ele alacağım. Kategori afişleri için 3 varyasyon veya şablon tasarladık:

  1. Tek Afiş
  2. atlıkarınca
  3. Bölünmüş Afişler

Tek afişler, dar kategoriler ve USP'leri hakkında konuşmak için mükemmel şekilde çalışır . Karusel ve Bölünmüş afişler ise sınırlı bir gayrimenkul içinde birden fazla afiş sağlamanın harika bir yoludur ve alt kategorilere yönlendirmek için kullanılır.
Bu sayfalardan herhangi birini tanıtırken, dijital pazarlama ve kreatif ekipleri, pazarlama kreatiflerinin aynı dili konuştuğundan ve kullanıcı yolculuğunu bir araya getirmek için benzer görseller kullandığından emin olur.

Kategori Banner – Tek
Kategori Afişi – Böl
Kategori Afişi – Karusel

Şimdi tıpkı ana sayfa kahraman afişi gibi, bu afişler mevcut genişliğin %100'ünü kaplar, ancak yükseklik sabittir. Bu nedenle, bazı durumlarda (veya kararlarda) başlığı sağdan kırpıyoruz. Bu yüzden tıpkı ana sayfada olduğu gibi güvenli alanlar tanımladık ve yaratıcı ekipten bu banner'ları tasarlarken aynısını yapmaları istendi.
Aşağıda, bölünmüş bir afiş için aynı şeyi nasıl tanımladığımızın bir örneği verilmiştir:

Kategori Bölünmüş Afiş için Güvenli Alan Tanımı

Uyarı

Bu, mobil öncelikli bir tasarım değildir ve zarif bir bozulmanın ardından, cep telefonlarında basit bir afişe veya kaydırma özellikli bir atlıkarıncaya geri döneriz. Cep telefonları için bölünmüş banner yoktur.

Uygulama İlk Katılımı

Meydan okumak

  • Kullanıcılara çok şey anlatmak istiyorsunuz, ancak işe alım sırasında 4 kartın ötesine geçmek aşırıya kaçıyor. Alan sınırlı, özellikler muazzam, kullanıcıların okumaya vakitleri yok ve tüm bunlara rağmen uygulamayı elinizde tutmanız gerekiyor.
  • Kimin gezindiğini bilmiyorsunuz : acemi veya uzman, kaşif veya gezgin; ve herkese uygun bir işe alım deneyimi tasarlamanız gerekir

Çözüm

Kullanıcıya ne söylemek istediğimizi düşünmek yerine tam tersini düşünmeye başladık → Kullanıcılar ne öğrenmek ister? Hızlı bir seviye çubuğu araştırması ile, kullanıcıların esas olarak aşağıdaki soruların yanıtlarını aradıklarını anlayabildik:

  1. Bu ne hakkında?
  2. Burada ne yapabilirim?
  3. Nasıl başlanır?
  4. Bunun içinde benim için ne var? Bana nasıl yardımcı olur?

Böylece sorun, bu sorulara cevap verebilecek 4 ekrana indirgendi. Bu nedenle aşağıdaki 4 ekranı sıfırladık:

Neyle ilgili?
Bana nasıl yardımcı olur?
Burada ne yapabilirim?
Nasıl başlanır?
Son ekran, FitCode'u tanıtmak için akıllıca tasarlanmıştır, ancak kullanıcılar bunu atlayıp alışverişe devam etmekte özgürdür.

uyarılar

Şu anda düzelttiğimiz birkaç hata var ve sizi şu konuda uyarmak istiyorum:

  1. Bildirim izni açılır penceresi, tam katılım ekranında gösterilir. Bu, kullanıcı için çok rahatsız edici ve burada muhtemelen minimum bir dönüşüm elde edeceğiz. Bunun yerine ne yapılmalı – belirli bir olayın meydana gelmesinden sonra (oturum açma veya sipariş başarısı veya içeriğe erişme vb.) bildirim izni aranmalıdır.
  2. Web ile etkileşim mesajları (pazarlama açılır pencereleri) bazen işe alım sırasında gösterilir. Yine, bu çok kötü bir deneyimdir ve kullanıcıların, işe alım sırasında herhangi bir pazarlama mesajına açık olmama olasılığı yüksektir. Alışma ekranlarında hiçbir açılır pencerenin gösterilmemesine dikkat etmeliyiz.

SığdırmaKodu

Meydan okumak

  • Birçok kadın, fiziksel bir mağazadan satın almayı çevrimiçi satın almaya tercih eder. Bunun en yaygın nedenlerinden biri, belirli bir ürünün kendilerine uyup uymayacağından emin olamamalarıdır. İnternette deneyemezler.
  • Farklı kadınların farklı vücut formları vardır ve iç çamaşırı söz konusu olduğunda herkese uyan tek bir ürün yoktur. Bu nedenle onlara vücut formlarına ve tercihlerine uygun ürünü sunmak çok önemlidir.
  • Onlara ölçümlerini ve tercihlerini doldurmaları için bir form verirseniz, ayrılmalar yüksektir. Bu nedenle, bulduğumuz çözüm ne olursa olsun, etkili olması gerekir.

Çözüm

Zivame'nin Moda Tasarım ekibi, Ürün Yöneticileri ile birlikte kapsamlı bir araştırma yürüttü ve kadın vücut tiplerinin 11 çeşit profile ayrılarak doğru bir şekilde tanımlanabileceği sonucuna vardı.

Bu profilleri ölçüler ve tercihler ile birleştirerek kullanıcılara doğru ürün önerilerini sunabilmelisiniz. Kullanıcılara bir dizi soru sorarak türetilen bu FitCode'a (FitCode Quiz) diyoruz.
Bunun bir sürümü tasarlandı, kullanıcı tarafından test edildi, uygulandı ve uygulamalarda yayınlandı. Kullanıcılar kavramı anlayıp teste yanıt verirken, göze çarpan 2 sorun vardı:

  • Yüksek sayıda bırakma
  • Bazı insanlar profilleri temsil etmek için kullandığımız görüntülerin ürkütücü olduğunu düşündü.

Testin, önce kullanıcılara zor soruları soracağımız şekilde tasarlandığını ve bu yaklaşımın değişmesi gerektiğini düşündük. Kullanıcılara önce daha kolay, sonra daha zor sorular sorarak yatırım yapmalarını sağlamamız gerekiyordu. Ayrıca reklam öğelerimizi değiştirdik ve daha soyut hale getirdik. Artık ürkütücü değillerdi. Aşağıdaki ekranlara bir göz atın:

FitCode Hızlı Başlangıç
FitCode Adım 3 – Kendinizi Ölçün
FitCode Adım 4 – Özellikleri Tanımlayın
FitCode Sonuçları ve Önerileri
Mükemmel Uyumunuzu Bulun

Umarım bu makaleyi bilgilendirici ve anlayışlı bulmuşsunuzdur.

Dünyanın en iyi Üniversitelerinden çevrimiçi Ürün Yönetimi Kurslarını inceleyin . Kariyerinizi hızlandırmak için Master, Executive PGP veya Advanced Certificate Programları kazanın.

Sizin için Öne Çıkan Program: Duke CE'den Design Thinking Sertifikasyon Programı

Çok yönlü ürün keşfi ile ne kastedilmektedir?

Ürün keşfi, bir müşteri temas noktasına ilk kez gelen bir müşterinin, bir dahaki sefere markayı hemen hatırlamasını sağlamak için firmanın sunduğu ürünle ilgili bilgileri öğrenmesi, anlaması ve saklaması anlamına gelir. tekrar zorunluluğu var. Bunun, müşterinin firmanın çeşitli müşteri temas noktalarındaki deneyiminin ilk 8 saniyesi içinde olmasını sağlamak tüm ürün yöneticilerinin amacı olmalıdır. Firmanın birden fazla ürün sunması durumunda amaç, bunu hepsi için gerçekleştirmektir. Temelde çok yollu ürün keşfinin konusu budur.

E-ticaret firmaları için ürün yönetimine özel kurslar var mı?

Hayır, e-ticaret için ürün yönetimine özel bir kurs bulunmamaktadır. Daha az titiz olan birkaç firma bunu iddia edebilir, ancak işe başlamadan önce kimlik bilgilerini kontrol etmek akıllıca olacaktır. Ürün yönetimi için iyi programlar, öğrenciler için bir dezavantaj olacağından, o kadar spesifik değildir. Birinin iyi bir ürün yöneticisi olmasını sağlamanın amacı, endüstri seçiminden bağımsız olarak iyi bir iş yapmak için gerekli beceri ve bilgiye sahip olmalarını sağlamak ve bu da onların kariyerlerinin sonraki aşamalarında endüstriler arasında geçiş yapmalarını sağlamaktır.

MBA'im olmadan nasıl ürün yöneticisi olabilirim?

En zorlu görüşmeleri çözebilecek iyi bir ürün yöneticisi olmak için ihtiyacınız olan temel alan becerileri, ürün teknolojisini adil bir şekilde anlamak, mükemmel ürün tasarımı ve müşteri yolculukları tasarlama bilgisi ve işletme yönetimi becerileridir. Bu nedenle, yeterli teknik beceriye ve iş tecrübesine sahip, ancak finansal planlama, bütçeleme, proje yönetimi, pazarlama, strateji vb. gibi işletme yönetimi anlayışı olmayan bir kişi için göz korkutucu olabilir. Bunları geliştirmenin en iyi yolu gerçekten de bir MBA yapmayı içerir. Ancak, yetenekli ürün yöneticilerinin talebi sayesinde, ürün yönetiminde yarı zamanlı kurslar izleyerek de bu rollere girilebilir.