Ürün Tasarımcısı

Handoff

Brief’ten onaya, ajans işi.

Bir tasarım stüdyosu için masaüstü iş yönetimi arayüzü. Müşteriler, revizyon turları, müşteri onayları ve bunların arkasındaki saatler. Herkesin bildiği iskeleti koruyor, kimliği kendisinin.

Sıcak nötr bir zemin üzerinde Handoff yazısı ve yanında başlamadı, devam ediyor ve müşteri incelemesi sütunlarıyla proje panosu

Genel bakış

Stüdyolar parayı çoğu zaman tasarım işinde kaybetmiyor, turların arasında kaybediyor: göreve dönüşmemiş bir yorum, kimsenin onaylamadığı üçüncü revizyon, altı gündür cevapsız bekleyen bir onay. Handoff tam bu boşluklar için kurulmuş bir görev yöneticisi. Ekiplerin zaten kullandığı düzeni bozmuyor, üstüne stüdyonun gerçekten fatura ettiği dört şeyi ekliyor: iş hangi turda, müşteri karar verdi mi, kaç saat harcandı ve tahminden geriye ne kaldı.

Rol
Ürün Tasarımı, UX/UI
Kapsam
Masaüstü web için ekranlar
Araçlar
Figma

Problem ve yaklaşım

İş takip ediliyor, para edilmiyor

Her stüdyonun zaten bir panosu var. O panonun tutmadığı şey müşterinin nerede durduğu. Pano işin devam ettiğini söylüyor; müşterinin salı günü üçüncü turu istediğini, o turun teklife girmediğini ve on iki saatlik tahmine karşılık on dokuz saat harcandığını söylemiyor.

İkinci mesele bu bilginin nerede durduğu. Mailden geliyor, toplantıda tekrar ediliyor ve birinin aklında kalıyor. Ay sonunda fatura çıkarken kapsamın tam olarak nerede değiştiğini kimse gösteremiyor.

Tanıdık iskelet, stüdyonun alanları

Yapı bilerek tanıdık: solda projeler, üstte görünüm sekmeleri, kırk piksellik yoğun satırlar, listenin üstünde açılan görev paneli. Kimseden çalışma şeklini yeniden öğrenmesi istenmiyor. Yeni olan şey navigasyonda değil, sütunlarda.

Her görev turunu, müşteri onayını, tahminini ve harcanan saatini taşıyor. Bu dört alan panoya, dashboard’a ve portföye kadar çıkıyor. Böylece "hâlâ bütçenin içinde miyiz" sorusunun cevabı ay sonunu beklemeden her ekranda duruyor.

Handoff kullanıcı akışı: gelen kutusu, görevlerim, proje listesi, görev detayı, müşteri onayı ve dashboard; altında pano, zaman çizelgesi, takvim ve stüdyo katmanı
Günlük akış: gece ne değişti, bugün neyi borçluyum, plan, işin kendisi, müşterinin kararı ve projenin nerede durduğu. Portföy ile kapasite bir üst katta, stüdyonun tamamı için.

Tasarım sistemi

Tek yazı ailesi, tek vurgu rengi ve rengi anlam için saklayan bir palet. Bu, gün boyu açık kalan bir araç, o yüzden en yoğun halinde bile sessiz durması gerekiyordu: kart gerekmeyen yerde ince çizgi, durum için renkli etiket yerine küçük bir nokta ve düz yazı.

Renkler

İşi nötr yüzeyler yapıyor. Tek mavi basılabilecek şeyi işaret ediyor, mercan rengi sadece köşedeki çalışma alanı işaretinde görünüyor, dört durum rengi ise bilerek kısık: onaylandı, bekliyor, revizyon istendi, başlamadı. Paletin yükseldiği tek yer proje renkleri ve onlar da aciliyeti değil kimliği anlatıyor.

Handoff renk paleti: nötr yüzeyler, üç metin tonu, aksiyon mavisi, mercan çalışma alanı işareti, dört durum rengi ve beş proje rengi

Tipografi

Geist, altı kademede: yirmi piksellik proje başlığından on bir buçuk piksellik çipe kadar. Daha büyüğü yok, çünkü işle yarışan bir sayfa başlığı boşa giden alan demek. Daha küçüğü de yok, çünkü stüdyo bunu bütün gün okuyor.

Handoff yazı ölçeği, Geist ile yirmi piksellik başlıktan on bir buçuk piksellik çipe kadar

İkonlar

Lucide’dan kırk iki ikon, hepsi yirmi dörtlük ızgarada ve tek kalınlıkta. Böyle bir araçta neredeyse her satırda bir ikon var, o yüzden setin süslemek yerine arayüzün içinde kaybolması gerekiyor.

Handoff ikon seti, yirmi dörtlük ızgarada kırk iki Lucide ikonu

Komponentler

Butonlar, çipler, öncelik etiketleri, avatarlar, kutucuk, liste satırı, bölüm başlığı, pano kartı, sekmeler ve ilerleme çubuğu. On ekranı kuran on bir parça var. Zaman çizelgesiyle portföyün görev listesiyle aynı ürün gibi okunmasının sebebi bu.

Handoff komponentleri: butonlar, arama alanı, çipler, öncelik etiketleri, durum noktaları, avatarlar, liste satırı, bölüm başlığı, pano kartı, sekmeler ve ilerleme çubukları

Yerleşim ve yoğunluk

240 piksel kenar çubuğu, 1200 piksel içerik sütunu, 24 piksel boşluk ve 40 piksellik satırlar. Hiçbir şey ortalanmıyor: iş sol kenardan başlıyor, satırın sağ tarafı ise insanların göz gezdirdiği şeylere ayrılıyor, tarih, durum ve kişi.

Handoff yerleşim şeması: 240 piksel kenar çubuğu, 1200 piksel içerik sütunu, 24 piksel boşluk ve 40 piksellik görev satırları

Ekranlar

Görevlerim

Girişten sonraki ilk ekran tek bir soruyu cevaplıyor: neyi, ne zamana borçluyum. Görevler projeye göre değil tarihine göre gruplanıyor, her satır ait olduğu müşteriyi taşıyor ve listedeki tek renk süresi dolmuş tarihin üstünde.

Son atananlar, bugün yapılacaklar ve gelecek hafta olarak gruplanmış görevlerim ekranı

Proje listesi

Tek müşterinin planı. Bölümler stüdyo işinin gerçekten ilerleyişini takip ediyor: keşif, konsept, tasarım turları, üretim ve teslim. Sütunlar da genel geçer bir aracın değil stüdyonun sütunları: iş hangi turda, müşteri onayladı mı, tahmine karşılık kaç saat girildi.

Konsept ve tasarım turları bölümleriyle, aşama, müşteri onayı ve tahmine karşılık saat sütunlarını gösteren proje listesi

Pano

Aynı görevler bu kez hat olarak, başlamadıdan teslim edildiye. Müşteri incelemesi ayrı bir sütun, çünkü stüdyo işi gerçekte orada bekliyor. Kart turu, önceliği, tarihi ve tamamlanan alt görev sayısını gösteriyor; günlük toplantıyı yürütmeye bu kadarı yetiyor.

Başlamadıdan teslim edildiye beş sütunlu proje panosu

Görev detayı

Panel listenin üstünde açılıyor, böylece kimse yerini kaybetmiyor. Açıklamanın üstünde stüdyonun sonradan tartıştığı alanlar duruyor: aşama, müşteri onayı, tahmin, harcanan saat ve işin faturalanabilir olup olmadığı. Altında müşterinin yorumu ekibin yorumlarıyla aynı akışta, yani istek ve cevap aynı yerde kalıyor.

Listenin üstünde açılmış görev detayı paneli: aşama, müşteri onayı, tahmin, alt görevler, ekler ve müşteri yazışması

Zaman çizelgesi

Turlar haftaların üstüne serilmiş, aralarındaki bağımlılıklar çizilmiş. Müşterinin sorduğu planlama sorusu için var: bu tur bir hafta kayarsa başka ne kayar.

Turların haftaların üstüne serildiği ve bağımlılıkların çizildiği proje zaman çizelgesi

Takvim

Ay görünümü, liste yerine tarihle düşünenler için. Teslim tarihleri, inceleme günleri ve gönderimler aynı ızgarada; üç müşteri teslimi olan bir hafta soruna dönüşmeden görünüyor.

Eylül ayının teslim ve inceleme tarihlerini gösteren proje takvimi

Proje dashboard’u

Tek projenin sağlığı dört sayıda: tamamlanan işler, tahmine karşılık saat, müşterinin karar verme süresi ve her teslimin kaç revizyon turu aldığı. Altındaki onay tablosu ise makbuz: ne gönderildi, ne zaman gönderildi, ne cevap geldi.

Dört metrik, aşamaya göre işler grafiği, tahmine karşılık saat ve müşteri onay tablosuyla proje dashboard’u

Gelen kutusu

Siz çalışırken olan her şey tek listede: müşteri yorumu, bir onay, kayan bir tarih. Sağ tarafta görevin kendisi ve akışı duruyor, böylece bir yorum başka ekrana gitmeden alt göreve ya da kaydedilmiş yarım saate dönüşebiliyor.

Solda bildirimler, sağda seçili görev ve yazışmasıyla gelen kutusu

Portföy

On proje ve dört müşteri tek sayfada, müşteriye göre gruplanmış. Sorumlu, durum, ilerleme, tahmine karşılık saat ve bir sonraki kilometre taşı. Stüdyo yöneticisinin pazartesi sabahı açtığı ekran bu.

Dört müşteri altında gruplanmış on projeyle portföy görünümü

Ekip kapasitesi

Sekiz kişi, haftada otuz iki saatlik kapasiteye karşı. Koyu bar planlanan işi, kırmızı kısım kapasiteyi aşan kısmı gösteriyor; dolup taşan bir hafta gelmeden iki hafta önce görünüyor. İsimlerin altındaki çizgi ise müşteri dağılımı, çünkü "çok yoğun" genelde "tek müşteride çok yoğun" demek.

Sekiz kişinin planlanan saatlerini otuz iki saatlik kapasite çizgisine karşı gösteren kapasite görünümü

Sonuç

Handoff portfolyom için yaptığım bir konsept çalışması ve mevcut hiçbir ürünle bağlantısı yok. Tanıdık bir yapıyı korumak bilinçli bir kısıttı: fark, işlerin nerede durduğunda değil aracın neyi takip ettiğinde olmalıydı. Merak ettiğim şey şuydu: ajans işinin genelde mailde kalan kısmı, yani turlar, onaylar ve faturalanabilir saatler, görev listesinin içine girerse listeyi gürültüye boğar mı.