Upstash Yolculuğum

Bir girişimin tasarım süreci.

·10 min read·0 görüntüleme

Bu yazıyı yazma motivasyonum; yeni girişimlerde tasarım ayağının ne kadar kritik olduğunu vurgulamak. Tasarım sonradan değil sürecin içinde olursa fark yaratacak şeydir. Tasarım sadece iyi görünmek değil, sadık kullanıcılar, güvenilir ve sevilen marka olmak hatta çok daha fazlasıdır.

Tasarım tuhaf bir sözcüktür. Kimileri tasarımın dış görünüşle ilgili olduğunu düşünür. Ancak biraz eşelerseniz, işlevle ilgili olduğunu görürsünüz. Mac'ın tasarımı onun bir parçası olsa da dış görünümden ibaret değildi. Öncelikle nasıl işlediğiyle ilgiliydi. Bir şeyi gerçekten iyi tasarlamak için onu kavramanız gerek, iyice özümsemeniz gerek. Bir şeyi gerçekten derinlemesine anlamak, üzerine kafa yormak, üstün körü geçiştirmemek, tutkulu bir adanma gerektirir. Çoğu insan ise buna zaman ayırmaz.

— Steve Jobs, Wired, Şubat 1996

Tanışma

İş değiştirmeyi düşündüğüm bir dönem posta kutuma gelen o mail;

Girişimim için tasarım konusunda tavsiyelere ihtiyacim var.

Enes ile tanışmamız böyle başladı.

İlk görüşmemiz tasarım ve vizyon odaklıydı. Teknik anlamda çok iyi iş yapan fakat tasarım anlamında zayıf kalmış bir girişimdi. Ürünün ilk versiyonunu hazır bir tema kullanarak yapmışlar ve takımda tasarımcı olmadığı için bir noktadan sonra tıkanmışlar.

İlk görüşmemizde uygulamanın mevcut tasarımlarını inceleyip önerilerde bulundum. Hedef kitlesi geliştiriciler olan bir proje yaptıkları için DX (Developer Experience) konusuna dikkat eden iyi girişimlerden örnekler verdim.

İlk görüşme çok iyi geçtiği için sonraki haftalar haftada bir saat olmak üzere buluşup tasarım ve frontend konularında beyin fırtınası yaptık.


Rauch'un önerisi

Haftalık yaptığımız toplantıların birinde -konu nasıl açıldı hatırlamıyorum- beni ona öneren kişinin Rauch olduğunu öğrendim. Rauch, yazılım sektöründeki neredeyse herkesin tanıdığı vizyoner bir girişimci ve yatırımcı. Çok şaşırmıştım, zira twitter ve youtube gibi sosyal platformların tümünde türkçe içerik üretiyordum.

Ürettiklerim türkçe olsa dahi bir şekilde önüne düşmüş ve dikkatini çekmiş. Kalitenin evrensel olduğuna ve hangi dil olursa olsun değer gördüğüne ikna olmuştum.

Tam da burada kafanızda deli sorular; Konuşacak kadar ingilizce bilmeden nasıl oluyor da SF merkezli bir şirkette çalışabiliyorsun? Şirket henüz yeni kurulmuştu ve çalışanların hepsi türktü 😇 Tabi bu kadar basit değil. Başka bir yazıda konuşuruz, kısaca sen işini iyi yap.


Toplantılardan çıkan karar

Tasarım ve vizyon konulu toplantılar 2-3 hafta devam etti. Program şekillenmişti ve atılacak adımlar netti.

Şirkete baştan aşağıya yenilenmiş, modern bir kimlik kazandırmamız gerektiğine karar verdik. Başta logo olmak üzere hemen aksiyon aldık. Daha sonra marketing website, console (dashboard) ve sosyal platformdaki tasarımlar plan dahilindeydi.

Nitelik nicelikten daha önemlidir. İyi yapılmış tek bir ürün, bir dolu vasat ürüne bedeldir.

— Steve Jobs, Bloomberg Businessweek, 6 Şubat 2006

Logo konusunda paradan kaçmadan çok iyi işlere imza atmış bir tasarımcı ile anlaştık. İlk aşamada bize 4 farklı logo sundu ama hiç biri bizi anlatmıyor ve estetik durmuyordu. Tekrar çalıştı ama yeni logoları da beğenmedik. Süreç bizi mutlu etmemişti, sanırım kendisi de mutlu değildi ki sunduğu işler daha önce yaptığı işlerin yanına bile yaklaşamayacak vasatlıktaydı.

Etik olmayacağı için gelen logoları göstermiyorum.

Henüz logo süreci devam ederken, elimi taşın altına koyarak "bir kaç logo da ben deneyeyim" dedim.

upstash için tasarladığım logolardan finale kalanlar
upstash için tasarladığım logolardan finale kalanlar

Yaptığım tasarımlar arasından biri tüm ekip tarafından beğenildi ve böylece logo konusunu netleştirmiş olduk.

resmi upstash logosu
resmi upstash logosu

Bu arada, bu işleri yaparken dışarıdan saatlik destek veriyordum.


Marketing Website

En büyük engel ortadan kalkmıştı. Logo, markanın merkez noktasıdır. Her tasarım unsuru onunla şekillenir. Kullanılan font, renkler ve tarz bütün tasarımın temelini oluşturur. Logonun netleşmesinden sonra hemen marketing website tasarımına giriştim.

Ürüne hakim olduğumdan dolayı işlerim bir hayli kolaylaşmıştı. Uzun uzadıya toplantılara ihtiyaç yoktu. Zaten logo benden çıkmıştı ve sadece ürünün ne yaptığını basit bir dille ama güçlü bir tasarımla anlatmak gerekiyordu.

upstash marketing web sitesi için final tasarım
upstash marketing web sitesi için final tasarım

Çok fazla revize yemeden bu süreci atlattık. Tasarım tamamdı ama içerik dili konusunda son bir dokunuş gerekiyordu. Ürünü ne kadar iyi bilsen de hitap ve doğru kelimenin gücü tartışılmaz. Bu konuda profesyonel destek alarak gerekli düzenlemeleri yaptık.

Final tasarımları kodladım ve kısa sürede yayına aldık. Bu arada, bu işleri yaparken hâlâ dışarıdan saatlik destek veriyordum.

Yeni arayüz ile beraber growth tarafında ürettiğimiz blog yazıları için özel görseller hazırlayarak yeni tasarım dilimizi oturtmaya devam ediyorduk.

upstash için tasarladığım çeşitli çalışmalar
upstash için tasarladığım çeşitli çalışmalar

Hatta blog yazıları için özel tasarım yapmadığımız durumlarda otomatik tasarım üreten bir uygulama bile yaptım (şu projeden fork'ladım).

bu görselin url'ine baktığınızda query bilgisi ile dinamik oluşturulduğunu göreceksiniz
bu görselin url'ine baktığınızda query bilgisi ile dinamik oluşturulduğunu göreceksiniz

Dokümanlar ve Blog Yazıları

Bazı işlerin çalışıyor olması yeterlidir. Mesela vitrinde olmayan ama arayan kişilerin bulacağı sayfalar. Bu işleri 3. parti veya açık kaynak yazılımlarla çözmek bir startup için doğru karar olabilir. Henüz yolun başındayken gereksiz işlerden kaçınmak gerek.

Doküman ve Blog yazıları için Docusaurus inanılmaz bir alet. İki dakikada kurup direkt içeriğe odaklanmanıza imkan tanıyor. Biz de aynen böyle yaptık. Bir iki ufak stillendirme ve bu işler de tamam 💯

[object Object]
docs.upstash.com/redis

Daha sonra blog'u docusaurus'tan ayırdık ve tasarımı yeniledik. Bu konuya sonraki bölümlerde değineceğim.


Yarı zamanlıya geçiş

Saatlik çalıştığım süre boyunca çift taraflı bir memnuniyet hakimdi. Enes Amerika'da yaşıyor ben ise Türkiye'de. Bu süreçte birbirimizi yakından tanımış olduk. Zaten dünyanın diğer ucundaki bir insanı beraber iş yapmaktan daha iyi nasıl tanıyabilirsin ki. Şartlar el verişli bir hal almıştı ve haftanın üç günü çalışmaya başladım.

Görev tanımım tasarımsal her şeyi kapsıyordu. Zaten başından beri yaptığım işlere devam edecektim. Tasarımsal derken sadece tasarım yapıp bırakmak değil, frontend tarafındaki işler de tasarım başlığı altındaydı. Zira ekipteki herkes software engineer'dı ve UI (User Interface) tarafındaki işlerle uğraşmak zül geliyordu. Benim ekibe katılmamla frontend işlerinin tümünü almıştım.


Console

Marketing website için hazır bir tema kullanıldığı gibi Console* ekranlarında da benzer şekilde hazır bir UI kütüphanesi kullanılmıştı.

Console: Kayıt olan kullanıcıların kullandığı ekranlar.

Bundan daha doğal ve mantıklı ne olabilir ki? Bir fikrin var ve doğruluğunu en hızlı şekilde test etmek istiyorsun.

Şirket para kazanana kadar yazdığın inanılmaz kodun ve yaptığın süper ötesi tasarımın pek bir olayı yok. Bu demek değildir ki bas geç. Mükemmelliyetçilik hastalığına kapılıp zaman kaybetmekten bahsediyorum. Şöyle düşün, sence harika olan bir fikre altı ay emek verdin ve süper tasarımlar yaptın ama ürünü kimse kullanmadı?

Hali hazırda çalışan uygulama Angular ile yazılmıştı, daha önce Vue ve React kullanarak çok fazla uygulama yapmıştım ama hiç Angular yazmamıştım. Console bundan sonra benim sorumluluğumdaysa rahat hareket edeceğim bir hale çevirmeliydim. Mantıklı ve hızlı bir yol haritası lazımdı. Console 4-5 sayfadan oluşuyordu, React (Nextjs) ile hızlıca klonlamaya karar verdim.

Merak edenler için ufak bir teknik detay vereyim; nextjs, typescript, ant design (ui framework) ve tailwind ile güzel bir alt yapı kurup üzerine inşa ettim.

Bu geliştirme döneminde tek ürün Serverless Redis vardı. Daha sonra Serverless Kafka ve qStash ürünleri de eklendi.

Mevcut bütün özellikleri yeni arayüze aktarırken tasarımları elden geçiriyordum. Hatta yeni arayüzde 2 tane harika yenilik getirmiştik.

Built-in CLI

Redis komutlarının tamamını destekleyen hazır bir CLI

Data Browser

Kayıtlı verileri türlerine göre listeleyip hatta arama yaptığınız bir görüntüleyici

Bence bir şey yaptığınızda gayet güzel sonuçlandıysa, şahane başka bir şey yapmak için harekete geçmeli, çok uzun süre rehavete düşmemelisiniz. Yalnızca bir sonraki şeyi düşünün, yeter.

— Steve Jobs, msnbc.com, 25 Mayıs 2006

Bu yazı benim yaptığım işler ve tasarım tarafındaki süreci anlattığı için yapılan teknik geliştirmelere girmedim. Paralelde yazılım ekibi çok çılgın özellikler geliştiriyor ve bir yandan da onları duyuruyoruz. Hatta en önemli işleri şöyle bir listeleyecek olursam

product hunt duyurusu için hazırladığımız bir özet
product hunt duyurusu için hazırladığımız bir özet

Product Hunt

Artık elimizde modern bir marketing website ve console vardı. Kullanıcıların temas ettiği ekranlar daha kullanışlı bir hale gelmişti ve kullanıcı sayımız her geçen gün artmaya devam ediyordu. Artık PH (Product Hunt) duyurusu için hazırdık.

PH için daha önce ürün yayınlamış tecrübeli arkadaşlarımla istişare ettim ve öneriler aldım. PH'ın bazı küçük hack'leri var ve bilmekte fayda var. Hangi gün, saat kaçta ve nasıl bir dil ile paylaşılacağına kadar dikkat etmek gerekiyor.

Bu partiye ilk gelen biz olmasak da, en iyisi olacağız.

— Steve Jobs, iPhone OS 4.0 için Apple etkinliği, 8 Nisan 2010

Bu gibi özel lansman günlerinde güçlü network'ün ne kadar önemli olduğunu çok net anlıyorsunuz. Ürünü destekleyen tüm arkadaşlarıma tekrar teşekkür ederim ❤️

[object Object]
producthunt.com/posts/upstash

Tam zamanlıya geçiş

Kullanıcılar artıyor, yeni özellikler geliyor, JavaScript SDK yazılması gerekiyor, başarılı olan redis'in yanına kafka da ekleniyor derken işler hızla büyümeye devam ediyor.

Yatırım almış girişimler hızlı aksiyon alır ve sürekli bir şeyler değişir. Bu değişimler olurken freelance veya yarı zamanlı çalışmak pek işlerine gelmez. Çalışanların tam zamanlı olması ve ürüne tam odaklanması önemlidir. Öyle de oldu, tam zamanlı çalışmaya başladım.

Bizim sektörde artık kimse tek başına bir şey yapamıyor. Etrafınızda bir ekip oluşturuyorsunuz. O ekibin çalışma bütünlüğünden sorumlusunuz. Herkes, üzerine düşenin en iyisini yapmaya uğraşıyor.

— Steve Jobs, Smithsonian Institution Oral and Video Histories, 20 Nisan 1995

İş planlaması hakkında şu detayı da vermeden geçmek istemem; Enes ile haftada bir toplantı yapar ve işlerin öncelik sırasını belirleriz. Geri kalan iletişim Slack üzerinden devam eder.


Yepyeni bir Blog

Daha önce de belirttiğim gibi, geliştiricilere yönelik iş yapıyorsanız DX konusu kritik öneme sahiptir. Yani; kullanışlı bir dashboard, detaylı bir doküman, düzgün çalışan bir CLI ve popüler diller için SDK.

Diğer konu ise; örnek projeler, güncel blog yazıları ve twitter'daki etkileşim. Bunların hepsini gayet iyi yapıyorduk ama çıtayı bir tık üste çıkartmak istiyorduk.

Sektörde işini bilen uzman insanlara blog yazıları yazdırıyoruz ama blog yazılarımız iyi olmasına rağmen gerekli değeri görmüyordu. Docusaurus'un varsayılan temasını kullanıyorduk, başta işimizi görmüştü ama şu an yetersiz kalıyordu. Bu içeriği daha güzel bir tasarımla vitrine koymalıydık. Benim de tam zamanlı başlamamı fırsat bilerek iş listemize aldık.

Blog yazılarının hepsi markdown olarak yazılmıştı ve mevcut düzeni bozmadan yeni blog'u tasarlamam gerekiyordu. Biraz araştırdıktan sonra Contentlayer denen harika içerik yöneticisine denk geldim. Nextjs ile olan harika uyumu işlerimi inanılmaz basitleştirmişti ve sadece tasarıma odaklandım. Çok kısa sürede yayına aldık 🎉

[object Object]
upstash.com/blog

Açık kaynak projeler

Mevcut işlerin yanında growth marketing'e yönelik projeler de geliştirdim. Herkese lazım olabilecek, aynı zamanda bizim ürünleri kullanmasına ön ayak olacak mini projeler.

Bu projeleri yaparken içime sinmeyen hiç bir şey yapmadım, kafama yatmayan ve iyi görünmeyecek her şeyi açıkca belirttim. Bu konuda Enes ile aynı kafa yapısına sahiptik, karışık ve gelişi güzel iş yapmıyorduk. Haliyle uğraşmaktan keyif alacağım projeler çıktı.

Kalite dediğimiz şeyin temelinde bir sürü şeyden vazgeçmek vardır. Vasat olan her şeyden vazgeçmek, kalabalık, düzensiz, üzerine düşünülmeyen her işten vazgeçmek.


Kapanış

Ürünün her yerine dokundum. Elimden geldiğince en iyisini yapmaya çalıştım. Çok fazla deneyim kazandım. Tasarım yeteneğimi daha güçlü hale getirdim. Bir girişimin sıfırdan (tasarımsal olarak) prestijli bir konuma gelmesine tanık oldum. Daha yapılacak bir sürü şey ve gidilecek uzun bir yol var. Öğrendikçe paylaşmaya çalışacağım. Şimdilik bu kadar ✌️

Ödül, yolculuğun kendisidir.

— Steve Jobs, Folklore.org, Ocak 1983

Takip etmeyi unutmayın 💚

twitter.com/upstash