Be Like Water

Presented at Insiter 2017, in Porto Alegre, Brazil.

Transcript

1. BE LIKE WATER FRONTEND CONTROLLED BY THE BACKEND Fuad Saud
2. Customer Acquisition • Name • Documents • Billing Address • Shipping Adress • Bill Due Date • PIN • Etc.
3. Customer Acquisition Flow • Sequence of question/answers screens • Ranges from 24 to 37 steps • Some screens have more than one state
4. Acquisition Flow Let’s zoom in
5. Acquisition Screens • CPF • Password • Account Creation Warning • RG • RG Issuer • Date of Birth • Marital Status • Phone Number • Location Permission Warning • CEP • Address • Neighborhood • City • State • Camera Permission Warning • Docs Front • Docs Back • Selfie • Income • Limit range • Due Day • PIN • Signature
6. Acquisition Screens • CPF • Password • Account Creation Warning • RG • RG Issuer • Date of Birth • Marital Status • Phone Number • Location Permission Warning • CEP • Address • Neighborhood • City • State • Camera Permission Warning • Docs Front • Docs Back • Selfie • Income • Limit range • Due Day • PIN • Signature What do they have in common?
7. Acquisition Screens • CPF • Password • Account Creation Warning • RG • RG Issuer • Date of Birth • Marital Status • Phone Number • Location Permission Warning • CEP • Address • Neighborhood • City • State • Camera Permission Warning • Docs Front • Docs Back • Selfie • Income • Limit range • Due Day • PIN • Signature These are simple question/answer screens.
8. Acquisition Screens • CPF • Password • Account Creation Warning • RG • RG Issuer • Phone Number • Location Permission Warning • Camera Permission Warning • Docs Front • Docs Back • Selfie • Limit range • Due Day • PIN Do we always have to ask that many questions?
9. Acquisition Screens • CPF • Password • Account Creation Warning • RG • RG Issuer • Date of Birth • Marital Status • Phone Number • Location Permission Warning • CEP • Address • Neighborhood • City • State • Camera Permission Warning • Docs Front • Docs Back • Selfie • Income • Limit range • Due Day • PIN • Signature Who should decide?
10. Acquisition Screens • CPF • Password • Account Creation Warning • RG • RG Issuer • Date of Birth • Marital Status • Phone Number • Location Permission Warning • CEP • Address • Neighborhood • City • State • Camera Permission Warning • Docs Front • Docs Back • Selfie • Income • Limit range • Due Day • PIN • Signature Changes in business rules
 =
 New app version
11. Acquisition Screens • CPF • Password • Account Creation Warning • RG • RG Issuer • Date of Birth • Marital Status • Phone Number • Location Permission Warning • CEP • Address • Neighborhood • City • State • Camera Permission Warning • Docs Front • Docs Back • Selfie • Income • Limit range • Due Day • PIN • Signature Customers must pull from store
12. Problems
13. Problems • Separate teams for each platform • Business logic updates require new app version download • Changes are costly
14. Desired Solution • Easy to add, change or remove a step in the flow • Straightforward A/B testing • Centralized business logic • Changes do not depend on app updates
15. Don't get set into one form, adapt it and build your own, and let it grow, BE LIKE WATER - Bruce Lee
17. Navigational flow • A flow is divided in chunks, which is a set of steps • A flow is non linear, that is, it can have bifurcations • A flow should follow a communication protocol in order to navigate
18. We have a flow nit
19. And flows are made of chunks
20. Which are made of steps
21. Entry Point GET /api/flows/<flow-name>/owners/<owner-id>
22. Flow Graph A B C G D E F H I
23. Flow Graph A B C G D E F H I
24. Flow Graph C G D E F H I B A
25. Flow Graph C G D E F H I A B
26. Flow Graph C G D E F H I A B
27. Flow Graph C G D E F H I A B
28. Flow Graph C G D E F H I sync sync chunk A B
29. App displays chunk
30. Submit Responses POST /api/chunks/<chunk-id> 202 Accepted
31. Response Processing async
32. Polling GET /api/flows/<flow-name>/owners/<owner-id> 202 Accepted
33. Polling GET /api/flows/<flow-name>/owners/<owner-id> 200 OK
34. Flow Redirect
35. Flow Graph C G D E F H I sync sync A B
36. Flow Graph C G D E F H I sync sync A B
37. Flow Graph C G D E F H I sync sync A B
38. Flow Graph C G D E F H I sync sync chunk A B
39. Flow Graph C G D E F H I sync sync A B
40. Flow Graph C G D E F H I sync sync A B
41. Flow Graph C G D E F H I sync sync chunk A B
42. Backwards Compatibility C E D F G A B new step type
 (unsupported by client) step type
 supported by client supports destination
 step? yes! no
43. STEP DEFINITIONS IN DEEP
44. Steps • Building blocks of the flow • Single logic piece within the flow • Question or read-only • Questions output answers • Represented as a JSON document
45. Acquisition Screens • CPF • Password • Account Creation Warning • RG • RG Issuer • Date of Birth • Marital Status • Phone Number • Location Permission Warning • CEP • Address • Neighborhood • City • State • Camera Permission Warning • Docs Front • Docs Back • Selfie • Income • Limit range • Due Day • PIN • Signature
46. Text Inputs • CPF • Password • Account Creation Warning • RG • RG Issuer • Date of Birth • Marital Status • Phone Number • Location Permission Warning • CEP • Address • Neighborhood • City • State • Camera Permission Warning • Docs Front • Docs Back • Selfie • Income • Limit range • Due Day • PIN • Signature
47. Text Input •Support for masks: •Phone number •CPF •CEP •Dates •Multiple fields per screen •Complex validation rules
48. Read Only • CPF • Password • Account Creation Warning • RG • RG Issuer • Date of Birth • Marital Status • Phone Number • Location Permission Warning • CEP • Address • Neighborhood • City • State • Camera Permission Warning • Docs Front • Docs Back • Selfie • Income • Limit range • Due Day • PIN • Signature
49. Read-only •Don’t generate any answers •Useful for providing context •May act as a bifurcation point
50. Multiple Choice • CPF • Password • Account Creation Warning • RG • RG Issuer • Date of Birth • Marital Status • Phone Number • Location Permission Warning • CEP • Address • Neighborhood • City • State • Camera Permission Warning • Docs Front • Docs Back • Selfie • Income • Limit range • Due Day • PIN • Signature
51. Multiple Choice •Single or many selections •List and matrix variations
52. Other Step Types Limit range Summary Pin Photo SlideShow
53. Steps • Building blocks of the flow • Single logic piece within the flow • Question or read-only • Questions output answers • Represented as a JSON document
54. Step Definition in the Backend
55. Edge Definition in the Backend
56. Step definition as JSON
57. Steps Service defines content and semantics App defines presentation
58. NUXML
59. Today • Customer Acquisition • Customer Info Update • Card Reissue • Card Upgrade • Income Proof • NuConta Sign Up • More to come!
60. QUESTIONS WE ARE HIRING nubank.com.br/carreiras
61. THANKS twitter.com/fuadsaud