Müşteri ve sektör

Arda Build, antrenör Arda Baloğlu'nun kişiye özel uzaktan fitness eğitimi markası. Üyeler bir paket satın alıyor. Antrenman ve beslenme programlarını online takip ediyor. Sorularını antrenöre panel üzerinden soruyor.

İhtiyaç

Projenin iki tarafı vardı. Ziyaretçiye paketleri ve üyelerin dönüşümlerini gösteren bir tanıtım sitesi gerekiyordu. Üye için de programı, beslenmeyi ve antrenörle yazışmayı tek yerde toplayan bir panel gerekiyordu.

Rolüm ve kapsam

Sitenin ve üye panelinin arayüzünü tasarladım. Ekranları Figma'da hazırladım ve Zeplin ile teslim ettim. Portfolyoda 10 ekran var. Altısı tanıtım sitesine, dördü üye paneline ait.

Süreç ve tasarım kararları

Görsel dili spor salonu fotoğraflarının üzerine kurdum. Zemin koyu antrasit. Ana vurgu turuncu, ikincil vurgu mavi. Başlıklar kalın, eğik ve büyük harfli. Logo AB harflerinden oluşan bir monogram.

Ana sayfanın ilk ekranının altına eğik kesimli turuncu bir bant koydum. Bantta "Peki sistem nasıl çalışıyor?" videosu ve iki sayı var. Programlar bölümünde Kadın ve Erkek için iki büyük kart kullandım. Paketler sayfasında aynı ayrımı sekmeyle yaptım.

Dört paket kartı süreyi hafta ve ay olarak gösteriyor. Eski fiyat üstü çizili, yeni fiyat büyük yazılı. Üst barda kampanya kodu ve "Paket satın al" bağlantısı sabit duruyor. Paket özelliklerini altı kartla anlattım: antrenman, beslenme, takviye, kardiyo, soru-cevap ve video.

Başarı hikayelerinde her kartta önce-sonra fotoğrafı ve üyenin aldığı paket yazıyor. Sayfanın sonunda mobil uygulama indirme alanı ve sosyal medya hesap kartları var.

Panelde sol tarafa sabit bir menü yerleştirdim. Menüde dokuz başlık var. Seçkide bunlardan dördünün ekranı yer alıyor:

• Antrenman programı gün gün kartlara bölünüyor. Her hareket kartında set ve tekrar bilgisi ile video simgesi var.
• Beslenme programı öğün kartlarından oluşuyor. Altta günlük kalori ve makro toplamı görünüyor.
• Soru Merkezi bir mesajlaşma ekranı. Üye fotoğraf ve sesli mesaj gönderebiliyor. Sağ sütunda paylaşılan medya ve bağlantılar listeleniyor.
• Bilgilerim ekranında aktif programın kalan süresi ve program hakkı birer çubukla gösteriliyor.

Teslimler

• Ana sayfa
• Paketler sayfası
• Arda Baloğlu (hakkında) sayfası
• Kullanıcı yorumları sayfası
• Merak edilenler (SSS) sayfası
• İletişim sayfası
• Panel: antrenman programı, beslenme programı, soru merkezi, bilgilerim

Sonuç

ardabuild.com ana sayfası bu tasarımın yapısıyla yayında. Üst menü, turuncu bant, Kadın ve Erkek kartları, dört paket kartı ve başarı hikayeleri aynı düzende duruyor. Sitenin menüsünde panel bölümleri de aynı adlarla yer alıyor.

Bu çalışma web sitesi tasarımı hizmetimden bir örnek.