Bir web projesinin 2.0 versiyon hikayesi (eğitim içerik portalı)

front-end

Öncelikle deneysel başlayan hadi eğitim içeriklerini paylaşacağımız bir web sitesi kuralım işinin; hikayesine şahit olacaksınız :)

Eğitim portalı yenileme - 1

Yukarıdaki ön yüzü boyama kitabı tadında başlayan tasarımımızı nasıl evrildiği ile başlayalım.

Öncelikle çizilen projeyi html css ve javascript kullanarak koda döktükten sonra back-endi php ile yazdığımız sisteme giydirdik. Sistemi kurduktan sonra bot hızında içerikler eklendiği* için bir anda ciddi bir data oluştu ve bu datayı kontrol edemiyorduk :) Kar topu etkisi yarattı… * A. Oğultegin hocamın hızına yetişmek ne mümkün :) Saygılar…

Altyapıda yaşadığımız zorlukları front-end developer olarak doğru bir anlatım yapamayabilirim ama ilerleyen aşamalarda yorumlarımı sunmaya devam edeceğim yanlışlar olursa affola.

Ana sayfa > Sınıf seçimi > Ünite seçimi > kategori seçimi > varsa alt kategori seçimi > içerik tipi > varsa alt içerik tipi > içerik

v1.0 akış diyagramı #

Eğitim portalı yenileme - 2 şekilleri en son okulda görmüştüm hatalı ise kusura bakmayın lütfen :)

Owl Carousel 2 kullandık ve fark ettik ki kaydırırken kullanıcılar yanlış seçenek açıyorlar. Bu scriptin bu gibi olayları olduğunu (kronik sorun) edindiğimiz geri bildirimlerden deneyimledik. (trick bilgi olarak verebilirim; bence swiper kullanın daha stabil ve realtime responsive yapıyor ve bu muhteşem bir olay)
v2.0 sürümünde slider kullanmamaya karar verdik :)


Eğitim portalı yenileme - 3 aogultegin.com v2.0

Arayüzü tamamen yeniledik ve daha kolay ama basit olmayan bir hale getirdik.

“Her şey olabildiğince kolay olmalı, ama ‘basit’ değil.”
— Albert Einstein

Figma ile arayüzü çizip front-end HTML5/CSS3 (scss)/JS kullanarak kodlandı.
— PHP yazılan scripti çöpe atıp yeniden yazıldı ve Laravel framework kullanıldı. *
— Eski veritabanındaki tüm içerikler ciddi zaman harcanarak taşındı. *
* back-end‘i geliştiren F. Eşki’ye selamlar :)

— Yeni sunucu alımı yapıldı ve sistem gereksinimleri kuruldu. **
** N. Alpay’a teşekkürler :)

v2.0 akış diyagramı #

Eğitim portalı yenileme - 4

Yeni yapıda nelere dikkat ettik? #

ve daha nice geliştirme ama en önemlisi bunlar olduğu için kısaca özetlemek istedim :)

Geliştirmelere nasıl devam ediyoruz? #

Eğitim portalı yenileme - 5 sıcaklık haritası

Sıcaklık haritası için Yandex.Metrica kullanıyoruz. Kullanıcı hareketlerine göre kullanıcı deneyimini şekillendiriyoruz.
* UI olmadan UX olur mu sorusuna güzel bir örnek sanırım :)

Hak verirsiniz ki sitenin gelir ve trafiğini paylaşamıyorum fakat yukarıdaki sıcaklık raporu ortalama 30k kullanıcı istatistiği.

Eski tasarım ve yeni tasarım trafik kıyaslaması #

Eğitim portalı yenileme - 6

Bu gelişimin en büyük etkenlerinden birisi olan içeriği de atlamamak lazım.
A. Oğultegin hocam kaliteli içerik üretiyor ve çözemediğimiz bir şekilde hızlı :)
Şu an sitede 4.000+ içerik mevcut ve her geçen gün bu sayı büyüyor.
Teşekkürler A. Oğultegin hocam. Selamlar…

Bir sonraki makale de görüşmek dileği ile…