Design system ini digunakan untuk mempermudah desainer untuk membangun project yang lebih cepat dan konsisten. Pembuatan dibantu oleh developer dan tim produk untuk menyatukan style yang digunakan dari sisi perusahaan, tone of voice, dan pengguanaan di beberapa sosial media agar membentuk desain yang konsisten dan dapat diimplementasikan.
PT Atlaz Belajar Bahasa
Proses dimulai dengan merekap seluruh desain dari produk Atlaz yang sudah saya buat, seperti : Atlaz LMS, Admin LMS Panel, Atlaz Media, Atlaz Website, Website SaaS, dan banyak lainnya. Melihat beberapa komponen yang sudah dibuat adalah komponen berulang saya membuat beberapa variasi yang memungkinkan untuk dibuat ulang agar hasilnya benar benar konsisten.
Dimulai dari sebelum semua produk didesain, saya berdiskusi dengan stakeholder seperti grafik desainer dan developer. Pertama saya menanyakan tentang logo, text style, dan warna yang digunakan untuk membuat desain pada media sosial. Saya mendapatkan 2 text family yaitu nunito dan ubuntu. Saya membagi menjadi 2 variasi yaitu Header dan Body Text sehingga mudah dibagi berdasarkan fungsinya. Dilanjutkan dengan warna, saya menggunakan beberapa plugin di Figma untuk mempermudah penyesuaian warna sesuai kontras dan background yang digunakan.
Beberapa desain atom juga saya buat seperti Grid, Shadow, Breakpoint, Spacing, dan lainnya. Hal ini berasal dari framework yang digukanan developer yaitu Tailwind. Beberapa komponen yang sudah ada di community juga membantu saya untuk membangun desain system ini. Dengan ini seluruh desain atom sudah selesai dibuat.
Berlanjut ke komponen pertama, yaitu button. Seluruh button dibuat sesuai kebutuhan dan saya memberikan variasi seperti state default, hover, active, dan disable untuk mempermudah pengerjaan state desain agar mudah dipahami oleh stakeholder. Beberapa komponen juga seperti status, label, tag, dan komponen lainnya sudah selesai dibuat pada minggu pertama pengerjaan.
Proses diminggu kedua adalah pembuatan shared komponen seperti navbar, footer, card, carousel, dan lain lainnya dibuat sesuai dengan desain yang sudah pernah dibuat. Pada tahap ini masalah ditemukan yaitu ada beberapa project yang tidak sesuai dan harus diubah dari sisi developer agar tetap menjaga konsistensi komponen.
Permasalahan selanjutkan ditemukan saat membuat website, karena website menggunakan style desain baru yang text stylenya lebih minimalis maka header perlu mengalami perubahan. saya dan stakeholder setuju sehingga keputusan akhirnya adalah menggunakan text style yang lama karena domain yang digunakan adalah domain yang sama sehingga memakan waktu lama jika mengubah style pada developer.
Seluruh desain masih berlanjut hingga sekarang pada tanggal 8 Oktober 2022. Saya harap project ini tetap berjalan dan para stakeholder bisa terus berkolaborasi hingga memberikan output yang baik untuk user dan company.