This document outlines lessons learned from developing the UI and mobile apps for blibli.com. It discusses improving the customer experience through fast performance, scalability, and new features. It provides lessons on hiring the right people, implementing agile processes, using technologies like Solr, Redis, and microservices, prioritizing mobile-first and native apps, and managing content. The key takeaways are that hiring, processes, technologies, platforms, and content all need continuous improvement to best serve customers.

1. Lesson learned in developing UI and mobile
apps blibli.com
Ifnu, 8 April 2016

2. What are we going to talk today?
• Lesson learned in developing UI and mobile
apps blibli.com
• List of lesson I learn during my time at
blibli.com
• Lesson developing UI
• Lesson developing mobile apps

3. Agenda
• Who am I?
• What we learn about customer
• Then vs Now
• Lesson 1 : People
• Lesson 2 : Process
• Lesson 3 : Solr
• Lesson 4 : Cache
• Lesson 5 : Microservices
• Lesson 6 : Web UI
• Lesson 7 : Mobile First
• Lesson 8 : Content

4. Who am I?
• Ifnu Bima
• Ilmu Komputer IPB
• Join blibli in 2012
• Was working for Deustche Bank Singapore since 2010
• Employee no 69
• Engineers no ~13
• Development Manager
– blibli.com Web UI
– Mobile Apps : Android, iOS, Windows Phone
– Content Management System
– Search
– Product Discovery : Wishlist, Product Review

5. What we learn about customer
• Fast UI
– Speed & Performance
• Website stay up during promotion and flash sale
– Scalability & Elasticity
• Consistently good user experience
– Great UI/UX
– Timely order delivery
– Original and high quality product
• New features
– Rapid Deployment
– Continuous Delivery

6. Then vs Now
• Based on 4 things that customer have, how do
we improve over time
• Things we learn along the way

7. Blibli UI circa 2012

9. Blibli architecture circa 2012
Store Front
Back officeMerchant

10. Blibli GUI application architecture 2016

11. Lesson 1 : People
• Hiring is the most important job in growing
company
– 800+ people
– 150+ engineers
• Right person with knowledge, skill and
attitude
• Do not compromise on quality
• Hire someone better than you, at least when
you are at their age

12. Lesson 2 : Process => Product development
Product
Program
Manager
Development
Manager
Product
Manager
1. Product Manager (PM)
– Defining the right product
2. Development Manager
(DM)
– Building the product right
3. Program Manager (PgM)
– Cross-functional executioner
Source: Inspired: How To Create Products Customers Love

13. Lesson 2 : Process => Agile, XP and Scrum
• Scrum role is perfectly fit with product
development role
• Release fast
• Test Driven Development, 90% code coverage
• Refactor often

14. Lesson 3 : SOLR
• Product catalog and category
• Full text search on product
– Very vast full text search compared to database
– Relevancy score to sort search result
• Filtering and Faceting
• Very fast
• Elasticsearch as alternative
• CQRS (Command Query Responsibility
Segregation) pattern

15. Lesson 4 : Cache
• Redis
– User session
– Very fast for small and lots of data
– Turn off disk flush, it can make server disk IO 100%
and response timeout while flusing
• Guava
– Cache content from CMS
– In memory cache
– Background cache reload
• Varnish
– Cache HTML in front of app server
– Same content for all user, cannot do personalization

16. Lesson 5 : Microservices
• Small team working on product
• Independence release
• Cross functional team vs Siloed functional
team
• GUI application as orchestrator

17. Lesson 6 : Web UI
• Responsive vs Adaptive
• AngularJS is great
• Browsing through mobile web then purchase
through desktop web
• Image is our biggest enemy
– 95+% traffic is image
– Compress, resize and optimize it reduce 50%
bandwith
– Image operation need very high CPU
• Client side performance is much much harder
than server side performance

18. Lesson 7 : Mobile First
• Based on our traffic, there are 3 peak each every day: morning,
afternoon and night
• Morning and afternoon from desktop, Night from mobile web &
apps
• Only office worker is using desktop
• To reach majority of Indonesia user, we need first class mobile web
and apps
• Mobile apps conversion is 7x web conversion
• 70% web traffic goes to mobile web
• 80% transaction happen on desktop web
• We want user to use mobile apps as much as possible

19. Lesson 7 : Mobile First
• Native is first choice
• Others if you constrained by budget or team
size
• More engineers currently working in mobile
apps than web

20. Lesson 8 : Content
• Banner and promotion page
• Different content for different channel : web
and mobile apps
• Control UI from CMS
• Layout and content saved in database, no
deployment while update it

21. THANK YOU