Btw ini bukan case study, cerita aja. Siapa tau ada hikmah yang bisa diambil ketika bekerja. Jadi kerja di perusahaan kecil tapi juga cukup serius dalam productnya, tidaklah mudah. Bukannya sok pengalaman, tapi emang fakta perusahaan kecil gini butuh SDM dengan pengalaman lebih. Jadi dalam hal ini, di kondisi genting/krusial tiap pekerjaan pengalaman dan kedewasaan juga dibutuhkan karena untuk solve problem. Jadi kalau pengalaman vs skill, ibarat dalam rumah tangga, lo jago masak, lo jago beberes, lo jago berdandan untuk suami dll, tapi kedewasaan ngga ada, kan percuma.
Ok to the point aja ya, intinya soft skills itu penting dalam menyelesaikan masalah krusial di tiap kerjaan, even itu atasan kamu ngga ngasih reward, biasanya sih ya sukarela aja soft skills itu, yang penting kita ngga ngancurin projek. Ngga fair sih emang kalau itu untuk diperusahaan yang kompetitif kulturnya, biasanya perusahaan gede ya yang ada karirnya gitu.
Ok langsung aja ya, jadi ada sebuah product digital/app untuk tes psikologi. Mirip-mirip di Headspace dan sejenisnya mungkin. Jadi seperti kuis/assesment gitulah. Bedanya ini lebih ke B2B atau untuk projek-projek internal, contohnya dengan institusi pendidikan, kampus psikologi di Inggris sana ataupun dengan institusi kesehatan Inggris seperti NHS. Kalau Headspace kan komersil banget ya, kalau ngga laku ancur aja. Nah, di perusahaan kecil gini ngga ada design system, jadi mereka udah beli theme gitu. Bedanya…warna, font, padding, margin ya kita yang tentuin sendiri. Jadi yang dibeli itu dapet komponen aja beserta code nya. File desainnya sih ngga ada, jadi pas saya buat itu manual tiru elemennya. Namun developernya ini seperti masih kesulitan untuk implemen dengan akurat walaupun sudah diminta liat guidenya di Figma hand-off code.
Ya ya, aku ngerti sih ngga mudah implemen akurat, entah gimana. Seumur-umur kerja yang bisa implemen akurat cuma sedikit. Ini terlepas dari hambatan komunikasi ya, ada suatu hal lain yang terlalu panjang jika dibahas detail, intinya waktu kita punya developer lain -yang sudah resign- itu lebih mudah kerjanya, timezone mereka sama juga padahal. Bedanya developer yang resign itu ngga pernah ‘ngelead’ saya posisinya. Jadi setara aja gitu, jadi komunikasi pun dia lebih terbuka untuk gue suruh-suruh ibaratnya. Sebenarnya kan bukan nyuruh ya, tapi emang saya harus cek desainnya. Itu tuh biasanya dijalanin sih waktu sama dia kalo emang ada yang kurang, berbeda dengan developer yang ini. Memang team lain juga sepakat ada masalah di personal soft skills, tapi kita ngga usah bahas inilah.
Singkat kata, ini desain yang setelah ganti-ganti…dia approve (kan dia ngelead saya juga sebelumnya), awalnya sempet diminta untuk awal pake background putih polos aja, jadi kalau saya tambah background visual unyu-unyu lucu kaya di Headspace itu, ngga…aja pokoknya. Tapi ternyata dia ambil yang ada background warna ungu nya ini. Mungkin setelah dipikir-pikir ngga sulit juga implemennya dan biar ngga terlalu polos juga.
Block Radio Button
Block Image
Block Free text
Inipun saya keinspirasi sama dribble sih dan diapun setuju;
https://dribbble.com/shots/5707821-Multiple-Choice-Survey-Question
tapi gue sederhanakan biar ngga ribet dan biar ngga terlalu mengkhayal dalam realita kerja yang serba terbatas ini. Kalau di perusahaan gede rada bisa ngayal, itupun tetep UX nya harus kuat kalau ngga mau diserang jutaan pengguna hehe…
Nah lalu diimplemenlah ini, btw gue udah kasih tau caranya ke developernya dan kasih link video how to handoff developer pake Figma ya. Yang developer dulu malah seingetku ngga sempet kasih tau tutorial videonya, tapi implementasinya lebih akurat.
Desain sederhana tadi diimplemenlah jadi gini:
Ada beberapa kesalahan
Ada yang ngga akurat di sini:
- Jarak antara button panah dan button Next terlalu jauh
- Background block putih pada ngga pake shadow.
- Jarak line-height text asal
- Kalau judul rata tengah emang aku sempet bikin yang rata tengah.
- Tapi itu font titlenya juga jadi Montserrat, padahal pake Heebo dan ngga sebesar itu.
- Jarak antara Title Session yang atas dengan block putih terlalu dekat
- Dan dibuat ikut scrollable titlenya ke atas kedorong background putih, harusnya sih ngga, cuma aku juga ngga bahas bagian ini sih, tapi ngga nyangka dibuat scrollable juga title nya. Nah setelah ini nanti aku kasih solusi supaya ngga terpancing mendadak jadi scrollable title nya.
Nah yang tadi tuh product terpisah yang emang dibuat kontennya dari perusahaannya (dari pihak kita). Lalu kita kan kerja sama nih dengan NHS, jadi punya soal kuis-kuis sendiri. Entah gimana di sini pas dicek tiba-tiba warnanya jadi gini dan layoutnya seperti semakin berantakan (ini belum bahas layout kaya home, thumbnail quiz dll ya, tapi ngga perlu lah, panjang lagi):
Jadi singkat kata, posisi developer ini sebut saja X, yang selama ini lead project untungnya diambil alih sama yang jauh lebih berpengalaman di bidang engineer dan management. Dia cukup jauh lebih tua daripada saya, ketika dia kuliah gue baru mau lahir, jarang-jarang gue termasuk muda emang. Pekerjaan pertama beliau emang di NHS. Kalau developer yang suka ngelead tadi , si X ini emang 7 tahun lebih muda daripada saya. Jadi yang ambil alih ini lebih dewasalah dan lebih ok kerjanya, managenya dll. Sebut aja R. Nah R ini kecewa dengan implementasi ini. Jelek banget katanya. Semuanya jelek, dari mulai warna dan layout kaya berantakan. Dan itu title kenapa jadi sejajar dengan Home, asumsiku karena salah satu atasan kita ada yang komen ke dia bahwa atasnya terlalu terlihat kosong, karena ke aku pernah bilang gitu juga. Kenapa ngga saya tanya langsung, bisa aja sih, tapi saya dilarang ngobrol dulu sama R ke si X ini soal perbaikan desain ini, jadi kaya mau melindungi gue dulu ^ ^……Jadi flow kerjanya emang sih berantakan sekali kalau perusahaan kecil, rolesnya jarang ada yang sangat jelas, di sini bayangkan saya harus (walau ngga disuruh) mikir gimana biar kerjanya jadi bener, tapi mereka juga ikut mikirin sih. Salah satunya ya saya bilang, kita harus ganti flow kerja, maka leadnya diambil alih sama R ini yang sangat berpengalaman. Dulu awal-awal saya join, emang si R penolong ini belum join walaupun ini orang lama kenal sama bosnya. Tapi bisa jadi orang ini diminta bantu untuk lead juga karena ada projek krusial karena melibatkan NHS.
Ternyata setelah saya cek, warna ini diambil dari ungu-nya si template yang dibeli itu, harusnya sih samain aja sama yang awal, ungu gelap. Jadi selama pengerjaan implementasi oleh developer ini, saya mengerjakan kerjaan desain yang lain yang bukan product. Jadi yang lebih ke grafis atau website biasa.
Nah diambil dari sini ternyata ungu nya. Ini tuh pernah dipake sih di product rilisan paling pertama sebelum ada saya. Kira-kira kaya gini, template yang dijadikan sebagai ‘design system’ tapi komponennya aja, bukan design system menyeluruh ya.
Dan berhubung selalu menjadi kekecewaan dan keluhan terhadap hasil implementasinya, sampai-sampai akhirnya atasan yang lain minta saya untuk coba bikin alternaitf layout lain untuk ke depannya. Kayanya sih saat itu saya lagi lumayan gabut juga hehe…jdi diadain lah tugas ini. Saya buat tapi saya juga jelasin yang lengkap kalau kendalanya selama ini ada dimana dan kenapa. Itupun udah diobrolin koq sebelumnya, cuma reminder aja. Dan setelah saya coba buat, ya memang lebih baik katanya, ya namanya juga desainer, masa dibandingin sama implementasi developer yang guidenya mengalir sendiri (tanpa memperhatikan guide dengan seksama).
Kira-kira jadi gini, saya coba ngga terlalu jauh dari theme yang dibeli tadi, tadinya sih mau bebas aja gitu kan karena emang dikasih kesempatan untuk bebas tanpa mikirin developer gpp katanya haha…., tapi saya pikir daripada ngebatin dan wasting time, udahlah tetep pake elemen-elemen UI dari theme tsb. Saya jelasin hal itu juga. Saya juga sempat diminta bikin presentasi soal mesti gimana sih harusnya secara UX untuk product kita ini. Jadi mereka antara inget dan ngga, sadar dan ngga bahwa masalah utamanya ada di implementasi. Tapi ya tetap saya kerjakan itu presentasi, saya present via Zoom.
Setelah atasan saya liat ini, ya of course dibilangnya lebih baik, ya iyalah orang dia bandinginnya sama yang diimplementasi, walaupun katanya atasnya kaya kosong. Jadi walaupun saya udah pernah kasih link Figma sering ke mereka, kaya lupa aja gitu kalau desain yang asli ya yang di Figma, beda dengan di implemetasi, kadang-kadang ngga dibuka juga. Tapi emang yang ini betterlah, cuma kan better juga karena saya ngedesain dengan page kuis yang spesifik, sementara limitasi penting di sini adalah, saya ngga bisa ngedesain secara khusus di tiap kuis nya, istilahnya kita pake Session untuk kuis ini. Jadi saya harus ngedesain template per block yang bisa jadi acuan developer. Padahal konten tiap kuis kan unik ya.
…sementara limitasi penting di sini adalah, saya ngga bisa ngedesain secara khusus di tiap kuis nya, istilahnya kita pake Session untuk kuis ini. Jadi saya harus ngedesain template per block yang bisa jadi acuan developer. Padahal konten tiap kuis kan unik ya. GIMANA COBA?
Saya pernah tawarin solusi, gimana kalau saya desain tiap quiz nya, tiap sessionnya. Ternyata mutlak ngga bisa, karena akan lama dan repot banget. Inget ini perusahaan kecil ya. Jadi mendesain block itu emang dari awal saya dimintanya begitu sih sama si developer X juga. Jadi saya mendesain per block, block itu yang background putih itu, mirip card. Yang macemnya itu ada:
- Block Video
- Block Text
- Blok Input Text
- Block Image
- Block Checkbox
- Block Radio Button
- Block Mix
Jadi nanti si developer tinggal mengacu ke desain ini yang tentu sebisa mungkin ngga jauh dengan theme yang dibeli. Dan walau memang masalahnya di implementasi, saya tetep bikin baru ceritanya karena tadi kan diminta. Karena bos utama kita itu tadinya minta saya untuk bikin mobile versionnya, jangan sama developer katanya, itu tugas Windy. Ternyata pas saya mau bikin versi mobilenya, layout desktopnya pun berantakan tadi kan. Saya baru aja dikasih akses loginnya haha (huhu)…jadi akses loginnya itu kaya diupdate terus dengan link yang beda-beda. Versi betanya lah, dari yang awalnya semacam staggingnya, jadi bukan versi real live nya.
Saya bilang, “Berarti saya ngga bisa dong langsung bikin versi mobilenya, kalau desktop nya aja jelek (implementasinya). Sedangkan bos itu kan minta saya mendesain versi mobile dari Session yang ini aja kan” Lalu saya bilang lagi, “Kita harus kasih tau bos, sepertinya dia berpikir bahwa saya bisa mendesain per session dan per device. Padahal kita hanya menggunakan block.” (ceritanya gue terjemahin ini dari bahasa Inggris ala novel terjemahan). Ya akhirnya developer penyelamat ini bilang, “Biar saya aja yang bilang nanti.” Si penyelamat ini emang diakui sama bos kita dia emang penyelamat projek, kalau ngga, gini aja terus ketunda. Dan kita tahu hambatannya dimana. Sebetulnya versi mobilenya itu udah ada desainnya di Figma, dan kalau diliat developer X ini masih pake desain layout dan block yang awal dari saya, hanya saja improve di warna dan berantakan.
Cuma saya juga nanya ke si developer real senior yang penyelamat ini, how can we make sure that he (si X) can implement this accurately? dia jawab, “I don’t care! either we get another developer or what, he should be able to implement this.” Hmm…saya pernah sih sarankan untuk hire saja developer lain seperti dulu, jadi developer lain itu di bawah si X ini, dulu enak banget kerjanya. Jadi biarlah si X ini memanage aja, karena mungkin bakatnya di situ, bukan di teknis. Tapi ya namanya juga perusahaan kecil, not always hiring.
Jadilah saya bikin baru aja deh, udah sampe sini masa saya masih bahas-bahas bahwa, “Implemennya aja pastiin benerin dulu.” Saya bikin baru aja deh, sekalian aja biar lebih fresh juga. Mumpung ada kesempatan agak bebas bikinnya nih. Walau tetep ternyata developer R ini ngasih referensi dari template yang dibeli sih akhirnya. Sempet saya liat-liat juga implementasinya ini, eh koq radio buttonnya jadi rubah, jadi mirip referensi yang di dribble tadi behaviournya. Behaviournya ya bukan tampilannya. Ya udah saya kesempatan bikin yang behaviournya mirip juga, saya cek di theme yang dibeli padahal ngga ada lho yang behaviournya gini. Kayanya sih ada obrolan dari atasan saya waktu saya tunjukin bahwa saya pernah keinspirasi dribble yang itu, tapi sebelumnya seolah implementasinya kaya ngga mudah dan karena ngga ada di template juga. Jadi di templatenya sendiri kalau radio button ya radio button aja bentuknya pake titik.
Dan karena ternyata radio button berubah jadi lebih mirip yang di dribbble, ya udah saya bikin lah pake ala-ala button biasa bentuknya (yang ada gambar foto The Beatles di bawah). Jadi kalo diselect, teksnya juga ikut rubah warna. Lebih jelas. Lagipula selama ini koq radio buttonnya bahkan titik clicknya hanya di radio buttonnya doang, padahal di theme yang dibeli menyeluruh sama teks optionnya juga clickable, itu kan standar ya. Itu juga sempat jadi bahasan kita. Akupun ngga sempat bahas itu ke developernya, karena kan itu udah basic ya dan di theme yang dibeli juga sudah seperti itu. Tapi koq implementasinya hanya di titik radio buttonnya aja yang clickable, kan jadi lama kalau mau ngeklik saking kecilnya.
Sekarang saya bikin gini, ngga jauh sih. Cuma saya akalin title sessionnya jadi pake header biar jelas ke developernya bahwa itu Sticky, nempel gitu di atas, ngga scrollable.
Yah walaupun tetep ya, gimanapun desainnya, kuncinya kan di developernya gimana implemennya. Kalau komunikasi, developer ini juga pernah sih minta saya review yang sepertinya disuruh sama bos, karena bos pernah minta gitu juga. Udah saya list reviewnya, ngga ada satupun yang dijalanin. Ini diakui juga sama developer penyelamat si R tadi, sebagai salah satu kendala. Tapi dia, si R ini kaya udah ilfil juga sama desain yang implementasinya berantakan tadi, pokoknya dia jadi minta saya bikin desain per block yang baru, yang gimana biar implementasinya ngga berantakan. Haha…Ya salah satu solusi saya selain naro title Session di header, juga bikin beberapa block image, ngga cuma satu. Ya mirip design system juga sih, cuma entah ya secara teknis ada beberapa macam block image gitu, apakah bisa diimplementasi beneran ngga, atau apa mesti satu (update: akhirnya ternyata ngga bisa juga imagenya jadi grid terkait integrasi app yang dibuat, ranah ini sulit dijamah/kontrol sama saya walau secara logika pasti lebih ke butuh effort lebih aja bukan beneran ngga bisa). Ini nanti mau didiscuss juga nanti. Jadi saya buat yang selain 1 image, juga ada yang image with text, image repeat yang square, seperti itu.
Plus saya bikin aturan dadakan inisiatif yang diharapkan bisa membantu ketika implementasi. Karena kan kalau ngandelin block aja sulitlah, sementara tiap kuis unik kontennya. Yah sebenarnya guideline juga, cuma kalau dibuat kaya dokumentasi serius kaya di perusahaan besar kaya malah ngga dibaca, jadi saya coba dokumentasikan sesimple mungkin dan biasa aja gitu. Biar ngga terkesan berat justru.
Nah gitu deh. Jadi more than just designing ya even itu perusahaan kecil. Justru kalau perusahaan besar kita tinggal ikutin rules pakem yang udah ada, baik desainer maupun developer, yang ngurus-ngurus ginian biasanya manager atau VP atau Design Ops, jadi desainer tinggal fokus ke kerjaan. Challengenya udah beda, tinggal mikirin bisnis goalsnya, ya team work juga ada sih, karena kan udah jalan productya. Ibarat kalau perusahaan besar ngurusin negara yang udah merdeka, kalau di perusahaan kecil tapi productnya juga serius ibarat ngurusin negara yang lagi perang. Eh, emang ada yang productnya ngga serius? hmm,..maksudku ngga sedikit startup kecil tapi dia emang kaya cuma coba-coba aja bikin startup. Belum ada relasi dan tujuan visi misi yang jelas. Jadi malah repot nyari klien/customer sana sini. Kalau ini tuh spesifik ya, yang pake kaya udah ada gitu, dan bukan startup pencari profit, beda. Jadi tinggal benerin sisi productnya. Di sini belum bahas UT UT dulu deh, kebetulan juga ini productnya bukan flow dan behaviour yang unik. Flow kuis gitu kan standar ya. Ya gitu deh. Yang agak rumit yang di luar kuisnya sih.
Jadi kalau dikumpul, kendala utama selain dari sisi human teamnya, juga teknis yaitu yang saya tulis sebagai quote di atas. Hanya bisa mendesain per block, bukan per Session/Kuis. Padahal tiap Session kontennya unik.
Jadi solusi saya:
- Menyarankan ubah flow kerja, intinya ubah leader juga. Ini tidak terkait dengan politik atau jabatan dan gaji, ngga kaya di perusahaan besar, yang ginian suka dipake buat fitnah atau menjatuhkan karena ngaruh ke jabatan dan gaji. Ya sisi bagusnya bisa mengurangi toxic, hanya saja kalau yang berpolitik udah temenan, mau setoxic apapun juga ngga ngaruh.
2. Bikin block template tapi dengan varian tertentu walau ngga diminta. Ini didiskusikan nanti, apakah block varian dari 1 tipe block (block image) itu bisa diimplemen.
3. Inisiatif bikin aturan tertulis, karena ngga mungkin hanya andalkan block, kecuali developernya peka visual. Kalaupun cukup peka apakah rajin? jadi banyak unsurnya.
4. Membuat Session Title pake header biar secara logika pun udah pasti sticky, ngga mungkin jadi scrollable.
5. Harus diingat, bahwa kita sebelum ubah sana sini sudah melakukan prosedur standar kerja sama ideal antar designer dan developer, seperti mereview implementasi, menanyakan link implementasi (karena pernah juga ngga dikasih pas diminta 🤦🏻♀️ dengan dibilang “This is your design!” pas lagi screen share). Jika ngga works ini harus didiskusikan dengan team yang berwenang.
Desain-desain untuk product REAL yang serupa:
The Daily UX 🇮🇩 