Uniform.hudl.com ile tanışın

Tasarım sistemimiz için dokümantasyon sahasını inşa eden Uniform, çok sayıda araştırma, tonlarca yineleme ve zar atmaya başladı. Birden fazla hakikat kaynağından bir tanesine nasıl gittiğimizi ve bu yolda öğrendiklerimizi tartışalım.

Hedeflerimizi Tanımlayın

Eski doktorlarımızın eksik olduğunu bir süredir biliyorduk. Bilmediğimiz ise, ne kadar eksik olduğu ve kullanıcının ne kadar umursadığıydı. Sadece anonim bir anket yaptığımızda, bir fikrimiz oldu. Sürprizimize göre, insanlar daha fazla bileşen veya varlık için durmuyorlardı - daha iyi dokümantasyon istediler.

Bunun gibi yorumlar belgelerin kendisine öncelik vermemize yardımcı oldu.

Çok sayıdaki hakikat kaynağımız, bizim korumamız için bir yük olmakla kalmayıp, aynı zamanda kullanma yükü haline geliyordu. Böylece, bu kadar kalitatif araştırmayı denedik, kullanıcılarımıza biraz daha derine inmek için ulaştık ve yeni sitenin neyi başarması gerektiğine karar verdik:

  1. Hepsini bir araya getirin. Bu beyinsizdi. Kullanıcılarımız birden fazla siteyi ziyaret etmekten ve aradıklarını bulamamaktan yoruldu.
  2. Eşyalarımızı kullanarak inşa et. Sağlam bir tasarım sistemine sahibiz. Neden onu iyi kullanmıyorsun?
  3. Bağlamsallaştır. Site, hem tasarımcılara hem de geliştiricilere, bir başkasını ezmeden hizmet etmek için gerekliydi. Ayrıca her ekibin ihtiyaç duyduğu şeyi bulabilmesi için web üzerinden platformları ele almak istedik.
  4. Doğru şeyi yap, kolay. İç kullanıcılarımızdan, dış kullanıcılarımızın iyileştirilmesi için tasarım sistemimizi benimsemelerini istiyoruz ve bunu kolaylaştırmak bunu gerçekleştirmenin en iyi yoludur.

Herşey İçin Bir Site Kur

Kullanıcılarımız en iyisini söyledi: Dokümantasyon her yerdeydi. Confluence'da Başlangıç ​​kılavuzları, GitHub'da bileşen uygulama detayları ve tamamen ayrı bir dahili sitede kod snippet'leri hazırladık. Tüm bu langırtlama, kullanıcıya zarar veriyordu.

Kullanıcılar nerede bilgi bulabileceklerini düşünmek zorunda kaldıklarında yanlış yapıyorsunuzdur.

Özellikle bir çok ürüne ve platforma hizmet eden bir tasarım sistemi kadar karmaşık bir şey inşa ederken bu tuzağa düşmek kolay olabilir. Yerinde sağlam bir dokümantasyon stratejisine sahip olmamak büyük bir sorun oldu. Bu, aldığımız en kritik geri bildirim haline geldi - bu da doğru olanı düzeltmek için en önemli şeyi yaptı.

Notlarımız, daha önce tüm yaratıma dağılmış olan harika bir içerik örneğidir. Şimdi bir kullanıcının ihtiyaç duyabileceği tüm bilgi ve rehberlikle bir noktadalar.

Neyse ki, çözmesi kolay bir problem - hepsini koymak için sadece bir noktaya ihtiyacımız vardı. Dahili sitemizdeki şeyleri açıklamak ve kullanıcılarımızı GitHub veya Confluence'a yönlendirmek yerine, tüm bilgileri tek bir iyi inşa edilmiş site ile vermeliyiz.

Mevcut Öğelerimizi Kullanın

Eski site Tek tip görünüm ve izlenim izlemesine rağmen, React bileşenlerimizle oluşturulmamıştır. Bu yanlış hissettim. Bir dokümanlar sitesi oluşturmanın birçok farklı yolu vardır, ancak kendi sebeplerimizi birkaç nedenden dolayı kullanmak istediğimizi biliyorduk:

  1. Ne kadar iyi çalıştığını göstermek için harika bir yol. Kullanıcı, geçtiğimiz yıl için yaptığımız bileşenleri kullanarak oluşturduğu site kadar geniş bir şey gördüğünde, sisteme güven duyuyor ve insanların kullanmak istemesini sağlıyor.
  2. Sisteminizi sıkıcıya sokmanın kendiniz kullanmaktan daha iyi bir yolu var mı? Sadece mevcut sistemi kullanarak yeni bileşenler için hatalar, iyileştirmeler ve fikirler bulduk.
  3. Sıfırdan başlamış veya üçüncü taraf bir kurulum kullanmamıza rağmen, mümkün olmayan sitelerin harika etkileşimli parçalarını oluşturmamızı sağladı.

Herhangi Bir Rolle Dost Olun

Sitemiz hem tasarımcılara hem de geliştiricilere hizmet etmek için gerekliydi, ancak gereksiz yere uzun sayfalar olmadan bunu nasıl yapıyorsunuz? Bizim çözümümüz basitti: onlara bir seçenek verin.

Yalnızca yaptığınız iş türüne göre ihtiyacınız olan bilgiler.

Bir tasarımcıysanız, ihtiyacınız olan her şey Tasarım tarafındadır. Size renkler için RGB değerleri, farklı bağlamlardaki bileşenlerle etkileşime girme yeteneği ve onu arabiriminizde kullanma yönergeleri vereceğiz.

Geliştirmeye hazır olduğunuzda, geliştirme dostu bir karanlık modu için Kod tarafına geçin. Değişkenleri al, bir kod pasajını kopyala ve tüm bileşenin eşyalarını öğren.

Üzerinde çalıştığınız platforma göre güncelleme yapan gerçek dünya kod parçacıkları.

Platformdan ayrılan şeyler bile var, yani tam olarak neye ihtiyacınız olduğunu görüyorsunuz.

İşleri kolaylaştırmak için, sitede gezinirken hem rolünüzü hem de platformunuzu kaydederiz. Bir iOS geliştiricisiyseniz, Kod tarafına geçmeniz ve iOS'yi tekrar tekrar seçmeniz gerekmez - bir kez yapın ve diğer sayfalar için hatırlar.

Bu “odak” modunu göz önünde bulundurarak çok zaman harcadık, sonuçta eldeki göreve bağlamsal şeyler yaparak kullanıcıyı içeriğe dahil ettik. Bu vurguyu rollerine koymak ve onlara özel hissettirmek, kullanımı daha kolay ve daha eğlenceli hale getirir.

Doğru olanı kolaylaştırın

Her şeyden önce, işleri basitleştirmemiz gerektiğini biliyorduk. Bir şey ne kadar kolay olursa, o kadar çok insan kullanır. Kullanımı gerçekten kolay hale getirmek için bağlamsal hale getirmenin ötesine geçmek için fazladan millere gitmek zorunda kaldık.

Başlamak için, bu yeni gelenler için kolaylaştırmak anlamına geliyordu. Başlangıç ​​Kılavuzlarımız Üniforma kullanmaya başlamak için gereken en az adım sayısını sağlar.

“En fazla resim içeren en az adım”, Başlangıç ​​Kılavuzlarımızı yazarken yaptığımız geri bildirimdir.

Tasarımcılarımız için bu, kullanımı hakkında takip edilmesi kolay yönergeler verilmesi anlamına gelir. Bu, bir tost gibi bir şeyi bırakırken Yapılacaklar ve Yapılmayacaklar’ı temizlemek için bir düğmenin varyasyonları hakkında aşamalı olarak yapılan açıklamalardan herhangi biri olabilir.

Hem tasarımcılar hem de geliştiriciler için araştırmamız, diğer ekip üyelerini kolayca yerlere yönlendirmek istediklerini gösterdi; bu nedenle, sitedeki hemen hemen her başlığın URL’yi Kopyala işlevi var. Normal kullanımda neden büyük bir modal kullandığınızı göstermek ister misiniz? Boom! URL'nin yönlendirilmesi, seçilen rollerine bağlı olarak sonuna doğru / design veya / code ekleyerek bu işbirliği bitini bile destekler.

Bunun gibi küçük detaylar işbirliğini kolaylaştırır - ekip üyeleri birbirlerini gitmeleri gereken yere yönlendirebilirler.

Sıradaki ne?

İlk geribildirim harikaydı, ancak planımız siteyi geçmişte olduğundan daha fazla güncelleme ve özellik iyileştirmeleri ile sürdürmektir. Kullanıcılarımızdan, onlar için neyin yararlı olabileceği konusunda bilgi almak için sabırsızlanıyoruz. İğneyi ne kadar hareket ettirdiğimize dair bir fikir edinmek için anketimizi tekrar yürütmeyi de planlıyoruz. Sürekli geri bildirim ve yineleme, kullanıcılarımızla tüm doğru notlara ulaştığımızdan emin olmanın en iyi yoludur, bu nedenle yakında daha fazla güncelleme arayın. Oh, ve unutmadan önce - işe alıyoruz!