Siteliyo: girişimlerin birkaç tıkla site açtığı kodsuz bir site oluşturucu tasarlamak

Genel bakış

Siteliyo, Türkiye pazarı için kodsuz bir site oluşturucu. Kullanıcılar hazır temalardan oluşan bir kütüphaneden seçim yapıyor, temayı sürükle-bırak ile özelleştiriyor, ortak çalışma alanlarında birlikte çalışıyor ve sitelerini kendi alan adlarıyla yayına alıyor; ücretsiz denemeden kurumsal pakete uzanan paketlerle.

Stüdyom Beew üzerinden ürünün tamamını 2024'te dört ayda tasarladım: kullanıcı akışları ve wireframe'ler, tanıtım sitesi, kimlik doğrulama, panel, editör, alan adları ve ödemeler ve bunların arkasındaki tasarım sistemi; açık ve koyu temada. Ürünün yanında, tüm deneyim tek bir marka gibi hissettirsin diye marka ve görsel kimlik konusunda da danışmanlık verdim.

Sorun

Bir site oluşturucunun tek kişide iki kitlesi var: güzel bir site isteyen biri ve sitelerin nasıl çalıştığını öğrenmek istemeyen biri. Ürünün yaratıcı özgürlük sunması, ama hiçbir zaman teknik hissettirmemesi gerekiyordu.

• Yaratıcılık ile kullanılabilirliği dengelemek: Tasarımlar hem göz alıcı hem de sezgisel olmalıydı.
• Site özelleştirmeyi her teknik seviyeden kullanıcı için basit ve akıcı hâle getirmek.
• Pek çok sektöre uyum sağlayan esnek şablonlar sunarken tutarlı tek bir deneyimi korumak.
• Her ekranın tüm cihazlarda tamamen responsive ve ilgi çekici olmasını sağlamak.
• Geri bildirimlere göre hızla iterasyon yapmak; bu bazen akışı iyileştirmek için temel bileşenleri yeniden tasarlamak anlamına geliyordu.

Hedefler

• Her teknik seviyeden kullanıcı için hem güzel hem de kolay gezilen arayüzler.
• Her müşterinin kendi marka kimliğine uyan bütünlüklü bir deneyim.
• Kullanıcı deneyimini bozmadan özelleştirilebilen, uyarlanabilir tasarım çözümleri.
• Sürükle-bırak bir arayüz ile özelleştirilebilir şablon ve bileşenlerden oluşan bir kütüphane.

Yaklaşım

1. Boş sayfadan değil, bitmiş bir siteden başla

Yolculuk tema kütüphanesinde başlıyor: Kullanıcılar kategorilere ayrılmış hazır temalara göz atıyor, canlı önizliyor ve ancak ondan sonra editörü açıyor. Zaten iyi görünen bir siteyi düzenlemek, sıfırdan bir site kurmaktan çok daha az ürkütücü.

2. Teknik kısımları sade bir dilin arkasına sakla

Alan adı, DNS, yayınlama, form iletimi ve FTP ile dışa aktarma, bir site sahibi için gerçek işler. Her biri tek amaçlı kısa bir pencereye dönüştü; hatalar da neyin yanlış gittiğini ve sonra ne yapılacağını anlatıyor.

3. Doğru cihaz için tasarla

Tanıtım sitesi, kayıt, blog ve yardım merkezi tamamen responsive. Editör ve panel ise masaüstü araçları; bu yüzden telefonda ürün bunu açıkça söylüyor ve sıkışık bir editör sunmak yerine kullanıcıyı ana sayfaya yönlendiriyor.

4. Tek sistem, iki tema

Her ekran aynı bileşenlerden, kartlar, modallar, uyarılar, açılır menüler, form alanları, kuruldu ve hepsi hem açık hem koyu temada tasarlandı. Hızlı iterasyonu mümkün kılan da buydu: Geri bildirim bir bileşeni değiştirdiğinde, değişiklik bütün ürüne yayıldı.

Çözüm

Ana sayfa ve fiyatlandırma

Ana sayfa editörü başlığın hemen altında gösteriyor; örnek bir sitenin üzerinde ekip arkadaşlarının imleçleri dolaşıyor. Ardından temel özellikleri anlatıyor: sürükle-bırak düzenleme, SEO ve mobil uyumlu temalar. Fiyatlandırma dört paketi aylık/yıllık geçişi ve eksiksiz bir özellik tablosuyla yan yana karşılaştırıyor.

Tema kütüphanesi, açık ve koyu

Temalar kategorilere ayrılıyor, kurumsal, portfolyo, online mağaza, açılış sayfası, ürün, ve her biri seçilmeden önce canlı bir site olarak önizlenebiliyor. Tanıtım sitesinin tamamı koyu temada da var; üst menüde dil seçicinin yanından geçiş yapılabiliyor.

Kayıt ve doğrulama

Kayıt ve giriş ekranları; canlı şifre kuralları ve sosyal giriş içeren kısa bir formu, bir ürün özelliğini anlatan bir panelle eşleştiriyor; böylece o an hiç boşa geçmiyor. E-posta doğrulama, net başarı ve hata durumları olan bir kod ekranıyla yapılıyor.

Sürükle-bırak editör

Editör siteyi ortada, araçları solda tutuyor: tipografi ve yerleşim blokları içeren bir “Add Elements” paneli, satırların sütun ızgarasına göre bölünebildiği bir container paneli ve gölge gibi stil panelleri. Cihaz değiştirme, geri alma, önizleme ve yayınlama üst çubukta.

Panel, çalışma alanları ve alan adları

Panel her projeyi görsel bir kart olarak gösteriyor; sıralama, çalışma alanları ve bildirimler el altında. Proje ayarları yayınlamayı, form iletimini ve kendi FTP sunucuna dışa aktarmayı kapsıyor; alan adı eklemek de DNS sorunlarını sade bir dille anlatan, yönlendirmeli bir pencere.

Paketler ve ödemeler

Ödeme sayfası mevcut paketi diğerlerinin yanında, kayıtlı kartları ve durumlarıyla ödeme geçmişini gösteriyor. Ödeme adımı sipariş özetini kart ve fatura bilgileriyle yan yana koyuyor; her adım da net bir onayla bitiyor.

Blog ve yardım merkezi

Blog hız, SEO ve tasarım üzerine ipuçları paylaşıyor ve okuyucuları bültene davet ediyor. Yardım merkezi cevapları konulara ayırıyor, web editörü, üyelik ve giriş, ödemeler ve abonelikler, böylece kullanıcılar sorunlarını kendi başlarına çözebiliyor.

Sonuçlar

• Tanıtım sitesi ve kayıttan editöre, alan adlarına ve ödemelere kadar eksiksiz, kodsuz bir ürün.
• Özelleştirmeyi basitleştiren sürükle-bırak bir editör ve özelleştirilebilir tema ve bileşen kütüphanesi.
• Her teknik seviyeden kullanıcı için kolay gezinmeyi öne alan kullanıcı akışları.
• Açık ve koyu temada, tüm cihazlarda responsive, tutarlı tek bir tasarım sistemi.
• Ürün ve tanıtım sitesi boyunca bütünlüklü bir marka ve görsel kimlik.

Çıkarımlar

• Kimse boş sayfayı sevmez: Kullanıcıyı bitmiş bir temayla başlat.
• Dil teknik olmadığı sürece teknik adımlar sorun değildir.
• Cihazlar konusunda dürüst ol: Bir masaüstü aracı mobilde başka bir şeymiş gibi davranmamalı.
• Hızlı iterasyonu güvenli kılan, ortak bir bileşen sistemidir.