Bagaimana kami membangun ekosistem perpustakaan multi-merek yang terpusat untuk salah satu perusahaan edtech terbesar di Brasil.

Pertama-tama, saya perlu mengatakan bahwa ini bukanlah artikel yang bertujuan untuk menjelaskan “Apa itu Sistem Desain?” atau “Seberapa penting bagi perusahaan Anda” (Untuk mendapatkan gambaran umum tentang subjek tersebut, saya sarankan untuk membaca artikel ini oleh Meiuca ). Tujuan kami adalah untuk berbagi sedikit tentang bagaimana kami membangun Sistem Desain multi-merek untuk salah satu perusahaan edtech terbesar di Brasil, berfokus terutama pada tantangan di bagian depan Desain dan hasil apa yang kami capai dengan proyek ini.

Tentu saja, karena itu, kami akan berbicara tentang hal-hal yang dapat menginspirasi Anda untuk membuat keputusan dengan tim Anda atau, siapa tahu, bahkan meyakinkan beberapa pemangku kepentingan untuk berinvestasi dalam Sistem Desain mereka sendiri (semoga artikel ini dapat membantu Anda). ).

Karena kita sudah berbaris, ayo pergi!

Konteks dan masalah

Saat ini, Wiser education adalah holding produk digital yang ditujukan untuk pasar pendidikan, lebih khusus lagi untuk pendidikan orang dewasa, namun hal tersebut tidak selalu menjadi kenyataan kita.

Wiseup Online , meuSucesso.com , Conquer dan Power House bersama-sama berjumlah lebih dari 300 ribu pengguna.

Wiser memulai sebagai pemilik waralaba sekolah bahasa Inggris untuk orang berusia di atas 18 tahun. Saya percaya mereka menaklukkan kancah nasional karena mereka selalu memposisikan diri untuk merangkul tren pasar baru (bahasa Inggris untuk orang dewasa, misalnya, tidak umum pada waktu itu).

Namun, pada tahun 2020, kita semua melihat pasar pendidikan dunia terbalik dengan pandemi. Model bisnis kami yang sebelumnya berbasis pengajaran tatap muka, kini harus berubah total menjadi format pengajaran online.

Seperti biasa, Wiser merangkul realitas pasar baru ini dan secara resmi menjadi perusahaan produk pendidikan digital.

Namun, karena semua pertumbuhan yang dipercepat ada biayanya, kami menerima tagihan untuk pekerjaan berbulan-bulan tanpa organisasi yang jelas dan dapat diskalakan. Dan akun ini mahal.

“Kami tumbuh cepat, tetapi dengan banyak OPEX”
OPEX: Pengeluaran Operasional. dihabiskan untuk biaya operasional: sumber daya manusia — https://www.suno.com.br/artigos/capex/ atau Medium

Di awal tahun 2022 kami mengalami skenario ini: Terlalu banyak file dan terlalu banyak ketidakkonsistenan (komponen, sistem warna, dan pustaka). Akibatnya, kami membuang banyak waktu untuk membuat ulang layar dan komponen yang dapat digunakan kembali.

Kami sampai pada kesimpulan bahwa kami membutuhkan Sistem Desain, tetapi pertanyaan yang belum terjawab adalah: Bagaimana kami dapat melakukan ini, mengingat kami perlu menyesuaikan perpustakaan kami dengan berbagai merek dan produk, selain tidak memiliki tim yang berdedikasi penuh untuk ini?

Agile adalah jawabannya

Kami memikirkan bahwa beberapa kerangka kerja memungkinkan untuk memandu proyek ini: 5W2H, berlian ganda, tetapi ingat bahwa skenario kami dikelilingi oleh beberapa pengiriman yang diperlukan untuk mendukung pengembangan Sistem Desain secara paralel! (Itu bukan tugas yang sederhana).

“Kami perlu menyampaikan sesuatu kepada pengguna akhir kami dan mempelajarinya secepat mungkin.”

Oleh karena itu, alih-alih menerapkan proses yang jelas dan linier, kami memutuskan untuk mengambil prinsip dasar berpikir gesit ke dalam hati dan mulai dari sana.

• Individu dan interaksi atas proses dan alat.
• Perangkat lunak yang berjalan pada dokumentasi lengkap.
• Kolaborasi pelanggan melalui negosiasi kontrak.
• Menanggapi perubahan daripada mengikuti rencana.

Menemukan

Kami mulai dari asumsi bahwa kami tidak mengetahui segalanya tentang sistem desain, dan bahwa kami masih harus banyak belajar tentang cara menghadapi skenario multi-merek. Oleh karena itu, kami mengundang beberapa perwakilan dari tim teknologi, bisnis, dan desain untuk bertemu setiap minggu sebagai serikat, dan dengan demikian mempresentasikan hasil penemuan mereka (semua dipandu oleh tujuan dan sasaran).

Dari perpustakaan perusahaan besar, hingga pengujian bahasa dan sistem warna, kami belajar banyak, tetapi terutama ada banyak cara untuk membangun Sistem Desain, lol. Oleh karena itu, fokus kami adalah menghadirkan pilihan yang kami buat untuk menyesuaikan ekosistem perpustakaan ini dengan skenario Wiser.

1. Token global dan merek

Kami tahu bahwa salah satu keuntungan besar dari proyek seperti ini adalah sistematisasi definisi antara desainer dan pengembang. Itulah mengapa kami percaya penting bagi konteks kami untuk membuat 2 klasifikasi token: Global dan Merek.

Sesederhana kelihatannya, definisi ini membantu kami memahami elemen antarmuka mana yang harus umum untuk semua produk (Bobot font, Radius batas, Bayangan, dll.) dan mana yang harus kontekstual (Kelompok font, warna). Untuk memahami lebih lanjut tentang divisi ini, saksikan langsung di DS oleh XP Investimentos.

2. Komponen tim inti e

Kami tidak punya banyak waktu untuk membuat semua komponen yang kami inginkan untuk v.1 (selain fakta bahwa itu tidak akan sangat selaras dengan visi tangkas dari implementasi berkelanjutan), jadi kami menentukan apa yang paling komponen umum di antara antarmuka yang kami analisis dan menyebutnya Komponen inti (Komponen yang harus sama di antara produk yang kami buat, hanya dengan sedikit perbedaan warna, tipografi, radius batas, di antaranya).

Komponen tim, pada gilirannya, akan menjadi komponen yang dibuat oleh tim produk itu sendiri, yang akan menggunakan informasi dari sistem desain, tetapi belum tentu ada untuk semua produk (misalnya: komponen kelas langsung).

3. Dokumentasi dan tata kelola.

Kami membagi file kami sesuai dengan tata kelolanya, sehingga kami dapat mencegah kesalahan dan skala jaminan. Klasifikasi ini dilakukan sebagai berikut:

• Token global
  (Hanya beberapa orang yang dapat mengedit file ini, karena mencakup token yang akan digunakan oleh semua merek).
• Komponen inti (Hanya beberapa orang yang dapat mengedit file ini, karena mencakup semua komponen inti yang digunakan bersama di antara produk lain.).
  
• Lembar gaya (Semua desainer regu dapat mengedit file ini. Pengelompokan token merek dan komponen tim - dibuat oleh regu itu sendiri, menggunakan elemen DS).
  

Setelah definisi ini, kami menganalisis antarmuka produk yang ada di perusahaan kami dan mengidentifikasi komponen mana yang paling sering diulang dalam konteks kami. Kami kemudian menentukan apa yang akan menjadi komponen Inti yang dihasilkan untuk DS v.1.

1. Tipografi
2. Warna
3. Tombol
4. Bidang teks
5. Pilih
6. Kotak centang
7. Tombol radio
8. Kartu dasar

Tepat setelah penemuan dan pelingkupan kami, kami mulai membuat komponen yang terkait dengan versi pertama sistem Desain kami. Untuk melakukan ini, kami mengikuti proses yang mencakup langkah-langkah berikut:

Karena kami tidak memiliki tim khusus, tetapi sebuah guild yang terdiri dari orang-orang yang tertarik dengan subjek tersebut, kami memahami kebutuhan untuk mendelegasikan pengiriman proyek ke regu tertentu, yang dapat menghubungkan permintaan mingguan mereka dengan pengiriman DS.

Oleh karena itu, kami menetapkan bahwa regu pembayaran produk Wiser harus bertanggung jawab atas pengiriman komponen pertama Sistem Desain, mengingat mereka mengoordinasikan produk label putih.

Kami menghasilkan keterlibatan yang nyata antara tim teknologi, karena semua pengiriman komponen Inti yang dihasilkan oleh checkout dapat diterapkan oleh tim lain. Proses ini, yang secara bertahap menyediakan komponen baru, membangkitkan rasa ingin tahu di antara tim, menyebabkan para pemimpin teknologi itu sendiri menggunakan sistem Desain LIB, memastikan, sejak saat itu, bahwa pengiriman front-end baru akan menggunakan, dalam beberapa cara, repositori Sistem Desain.

Hasil dan Penemuan Berkelanjutan

Kami menyertakan tema di lingkungan kami, sehingga kami mulai memperhatikan bagaimana setiap tim, yang mengadopsi Sistem Desain, mendapatkan keuntungan yang cukup besar dalam waktu penyampaiannya. Kami tinggalkan di sini beberapa hasil yang telah kami peroleh sejauh ini.

Belajar dan langkah selanjutnya

Kami belajar banyak dari keseluruhan proses ini, berikut adalah beberapa poin yang menurut saya layak untuk dibagikan:

1. Saat Anda menunjukkan nilai (hasil), akan lebih mudah untuk meminta lebih banyak waktu dan uang.
   Kami mencoba menjalankan proyek ini berkali-kali, dan pemangku kepentingan kami tahu pentingnya hal itu. Tetapi ketika kami menghasilkan pengiriman pertama, proyek tersebut benar-benar mulai mendapatkan lebih banyak prioritas.
2. Warna bisa menjadi tantangan besar untuk konteks multi-merek.
   Kami tahu bahwa palet warna harus serba guna dan sederhana, tetapi mendefinisikan standar yang berlaku untuk banyak produk secara otomatis, menghilangkan kebutuhan penyesuaian manual oleh desainer dan pengembang merupakan tantangan.
3. Kerja tim itu luar biasa!
   Kami belum memiliki banyak penggemar untuk mengerjakan proyek ini, jadi setiap mitra yang bersedia berkolaborasi dengan ide tersebut membuat perbedaan!
4. Pengiriman berkelanjutan!
   Saya mungkin telah mengatakan ini sebelumnya, tetapi pengiriman berkelanjutan adalah kunci untuk mengembangkan Sistem Desain ini. Berhati-hatilah untuk tidak terjebak dalam siklus belajar tanpa akhir. Hasilkan nilai setiap hari, minggu, bulan, kuartal.

Terima kasih sudah membaca!

Referensi

Marinheiro, Felipe — Greenstone Design System Hassu Thiago — Design System na visão da Meiuca Invision — Memainkan DesignOps IBM — Carboom Design System Google — Material Design

Kredit

Maria Fernanda — Desainer produk Ops
Renata Caraih — Desainer produk Ops
Marcus Vinícius — Pemimpin teknologi
Adson Amorim — Front-end
Diogo Thomaz — Pemilik Produk
Luan Lima — Kepala Produk