Kiss the Hippo: ürün, arama, sepet ve quiz boyunca tek bir abonelik deneyimi

Bağlam

Kiss the Hippo, Birleşik Krallık’ta kendi şubeleri olan bir nitelikli kahve markası. Shopify geliştiricisi olarak çalıştığım PATH Product & Software House’un müşterisiydi; projeye atanan geliştirici bendim, tasarım, SEO ve mağaza yönetimi ise PATH’teki ve markadaki diğer ekip üyelerindeydi. Abonelik çalışması, pek çok kahve ve tüketim ürünü markasının ortak sorunu.

Sorun

Mağaza hem tek seferlik satın alma hem abonelik satıyordu; tüketicilere ve markanın kendi şubelerine, geniş bir kahve ve demleme ekipmanı yelpazesinde. İki şey yeterince iyi çalışmıyordu: müşteriler doğru kahveyi bulmakta zorlanıyordu ve abonelik seçeneği tutarlı sunulmuyordu; bazı yerlerde görünüyor, bazılarında görünmüyordu. Bu da abone olmayı olması gerekenden zor hâle getiriyordu.

Çalışmamın kapsamı

Müşterinin karar verdiği her yerde abonelik

Abonelik uygulamasının satın alma ve yönetim yapısını müşterinin ürün seçtiği her temas noktasına entegre ettim:

• plan seçimi ve fiyatlandırmayla ürün detay sayfası;
• arama sonuçları; abone olunabilen bir kahve doğrudan sonuçtan abonelik olarak eklenebilsin diye;
• drawer cart ve sepet sayfası; müşteriler bir satırı tek seferlik ile abonelik arasında değiştirip düzenleyebiliyor;
• quiz sayfası; bir öneri doğrudan aboneliğe dönüştürülebilsin diye.

Satış planı seçimlerini oluşturmak ve güncellemek için abonelik uygulamasının kendi arayüzü kullanıldı; böylece entegrasyon uygulama güncellemelerinde kararlı kaldı.

Doğru kahveyi bulmak

Müşterileri tat tercihlerinden önerilen ürüne götüren bir quiz yapısı kuruldu; sonucu yukarıda anlatılan satın alma ve abonelik akışına bağlandı. Etkileşimli kısımlar için harici JavaScript kütüphaneleri (slider ve benzerleri) entegre edildi.

Tasarım uygulaması ve mağaza değişiklikleri

Tasarımlar tasarımcıdan Figma dosyaları olarak geldi ve yeni section’lar ya da mevcutlarda değişiklikler olarak Liquid’de uygulandı. Markadan gelen istekler tasarım ve mantık değişikliklerini, hata düzeltmelerini ve yeni section’ları kapsıyordu. Ekibin metafield’ları tema içinden etkili biçimde kullanmasını sağlayan yapılar kurdum, sipariş özelleştirmeyi mümkün kılan özel bir uygulama ekledim ve birkaç herkese açık uygulamayı entegre ettim.

Teknik notlar

• Mevcut bir Shopify Plus mağazasında Liquid ve JavaScript ile tema çalışması.
• Ürün sayfası, arama, drawer, sepet ve quiz’de uygulamanın açık JavaScript API’sine bağlı abonelik kontrolleri.
• Ürün bazında satış bilgilerinin kod değişikliği olmadan yönetilebilmesi için metafield tabanlı içerik.
• Tema çalışmasının yanında sipariş özelleştirme için küçük bir özel uygulama.

Sonuç

Abone olmak müşterinin bulunduğu her yerden mümkün hâle geldi: ürün sayfası, arama sonucu, sepet ya da quiz’in sonu; her yerde aynı kontroller ve aynı davranışla. Ekip de kendi başına sürdürebileceği bir quiz ve metafield yapıları kazandı.