My First Task as a Hipster
Hal pertama yang saya lakukan sebagai hipster adalah membuat prototype yang akan dijadikan acuan untuk team coding frontend untuk sprint kedepannya. Tools yang saya gunakan adalah Figma, mengapa saya menggunakan Figma? Alasan pertama adalah karena Figma sangat mudah dipelajari dan saya sudah menguasai semua fitur nya, selain itu team coding kami sudah familiar dengan Figma. Oiya Figma ini gratis lho!
Questioning about persona???
Prototype yang kami buat sesuai dengan yang requirement yang ditentukan client yang tertulis pada user story dan untuk membayangkan seperti apa target user dari DigiBadge, saya juga menjadikan fictional persona yang dibuat oleh client sebagai acuan design. Persona yang ditentukan oleh client kami adalah seperti ini.
Pertanyaan penting yang harus diperhatikan pada persona adalah:
Apa tujuan persona yang ingin dicapai?
Apa yang benar-benar dibutuhkan oleh persona?
Apa yang akan dilakukan oleh persona dan kenapa?
Berasal darimanakah komunitas persona?
Saat mendesign kita tidak boleh hanya menuangkan ide sendiri tetapi juga harus memikirkan user yang akan menggunakan produk. Dengan membayangkan user DigiBadge seperti persona di atas dan selalu bertanya mengapa, saya dapat menggunakan cara pandang dan memahami keinginan mereka saat menggunakan aplikasi DigiBadge dan mendapatkan solusi design yang memenuhi goals persona. Kesimpulannya, persona membantu dalam emosi, memberi gambaran, menempatkan hipster sebagai user saat mendesign prototype untuk mendapatkan solusi design.
PROTOTYPING
Prototype adalah tentang menentukan warna, font, konsep design, dan flow bagaimana produk aplikasi berjalan. Saya dan partner saya Fikar berkerja keras untuk membuat prototype secantik mungkin. Tugas ini tidak mudah tetapi kalau kalian sudah punya gambaran dan to do list yang ingin dikerjakan, semua nya akan jadi lebih ter-schedule dan pekerjaan mudah diselesaikan. Setelah mengerjakan kurang lebih selama 6 hari, seperti inilah kerja keras kami.
Pada design kami, kami memilih konsep card dan memainkan border radius agar semuanya terlihat bulat. Menjadi seorang hipster harus selalu sabar dan tekun, memperhatikan hal-hal kecil agar semuanya terlihat perfect. Hipster juga harus mau menerima kritik dan saran dari product owner maupun team, karena pada akhirnya ini adalah project yang tidak akan terwujud tanpa team :)
Make Design Guideline with UI Development Tools
Saat sprint pertama dimulai saya mendapat task membuat semua component yang berhubungan dengan landing page, login, sign up, dan dashboard. Sebelum saya mengimplementasi coding saya men set up requirement untuk membuat design guidelines berupa Storybook. Storybook adalah UI developments tools yang di hubungkan pada React JS untuk mempermudah team coding melihat component dan memanggil class yang sudah ditentukan. Begini tampilan StoryBook.
Tutorial dapat dilihat di
Setelah berhasil men-set-up StoryBook ke React JS , saya membuat test component. Setelah itu saya mengimplementasi coding component dengan menggunakan bahasa Typescript, framework React JS. Begitulah task awal saya sebagai hipster mengerjakan semua hal yang berhubungan dengan design dari memikirkan ide, mendesign, dan menyediakan tools untuk team. Artikel selanjutnya mengenai git, dan TDD bisa diakses dibawah ini.
Terimakasih yang sudah membaca.
