Techinasia - Building	effective	developer-
designer	relationships
Techinasia,	Product Development	Conference 2017
Ifnu,	August,	10th 2017
Who	am I?
• Ifnu Bima
• Computer Science IPB	&	MBA	School of
Bussiness Management ITB	
• Join	Blibli.com in	2012
• Java	&	JavaScript Developer
• Development	Manager
– 30	Developers :	Android,	iOS,	Front	End
Developers and Backend Developers
– Blibli.com	UI,	Content Management System	and
Mobile	Apps
Building	effective	developer-designer	
relationships
Design	Review
Importance of Product Management
• Discipline of
building the right
product
• Prioritization
• Communication
Design	process circa 2014
Using better tools 2015
Design	Guidelines (2016)
Design	Guidelines :	HTML	copy paste
Using even better tools:	zeplin.io
Atomic Design	by Brad Frost
Blibli	Design	Language	System (2017)
Designer-Developer	Working effectively
Designer-Developer	Working effectively
Reusable Component :	BEM	Pattern
• BEM — Block	Element	Modifier	
• Methodology that	helps	you	to	create	
reusable	components	and	code	sharing	in	
front-end	development
• http://getbem.com
• (-)	Reusable by copy-paste component
between pages
Reusable Component :	VueJS
• VueJS approach to
reusable
component match
with Blibli	Design	
Language System
• Template
• Script
• Style
Take away
• Start	with Product Management
• Design	upfront is a	must,	even when using
simplest tools :	photoshop or moqups
• Improve tools and practices to improve
developers work accuracy
– High fidelity prototype
– Define margin,	color,	asset in	one tools
• Design	System	is the goal to create effective
designer-developer	working relationship
We Are Hiring!!
THANK YOU

"Building Effective Developer-Designer Relationships" by Ifnu Bima (Blibli.com)