Frontend controlled by the backend.

The process of releasing a new version of a mobile application to your customers is aways hard, painful and sometimes slow. A/B tests became hard to do, changing a feature, or even changing a copy requires your customers updating the app, slowing the possibility of fast iterations and feedback. What if it didn't need to be this way, what if you could let this logic be on the backend. We did this and wanted to share with you our thoughts about it.

Transcript

1. BE LIKE WATER FRONTEND CONTROLLED BY THE BACKEND Fuad Saud • Thales Machado
2. INTRODUCTION Nubank Card • Documents • Address • Shipping Address • Due date • Pin • Etc…
3. Acquisition On Nubank = 24 to 37 screens (and some with more than one state) INTRODUCTION Nubank Acquisition
4. Let’s take a deeper look INTRODUCTION Nubank Acquisition
5. Acquisition Features • CPF • Password • Account created warning • RG • RG issuer • Marital Status • Cell phone number • Location Permission Warning • CEP • Address • Neighborhood • City • State • Camera Permission Warning • Docs Front • Docs Back • Selfie • Income • Limit range • Due day • PIN • Summary • Signature • Terms n Conditions • Date of birth
6. Acquisition Features CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth WHAT DO THEY HAVE IN COMMON?
7. Acquisition Features CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth THEY ARE SIMPLE QUESTION AND ANSWER SCREENS
8. Acquisition Features CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth DO WE NEED THAT MANY?
9. Acquisition Features CPF Password RG CEP Address City State Camera Permission Warning Docs Front Docs Back Selfie Limit range Due day PIN Terms n Conditions Date of birth DO WE NEED THAT MANY?
10. Acquisition Features CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth HOW CAN THE APP DECIDE?
11. Acquisition Features CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth CHANGES ALWAYS REQUIRE A NEW VERSION + PEOPLE UPDATING THE APP
12. Acquisition Desired Solution The backend can know all this information • Easy to add, change or remove one STEP in the flow • Easy to do A/B testing • Centralized logic • Changes do not need to depend on customers updating the app
13. Don't get set into one form, adapt it and build your own, and let it grow, BE LIKE WATER - Bruce Lee
14. 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
15. What is a flow nit
16. What is a Chunk
17. Step
18. Entry Point GET /api/flows/<flow-name>/owners/<owner-id>
19. Flow Graph A B C G D E F H I
20. Flow Graph A B C G D E F H I
21. Flow Graph C G D E F H I B A
22. Flow Graph C G D E F H I A B
23. Flow Graph C G D E F H I A B
24. Flow Graph C G D E F H I A B
25. Flow Graph C G D E F H I sync sync A B
26. Flow Graph C G D E F H I sync sync chunk A B
27. Acquisition Chunks CPF Password Read Only Chunk
28. Submit Responses POST /api/chunks/<chunk-id> 202 Accepted
29. Response Processing async
30. Polling GET /api/flows/<flow-name>/owners/<owner-id> 202 Accepted
31. Finished Processing GET /api/flows/<flow-name>/owners/<owner-id> 200 OK
32. Flow Redirect
33. Flow Graph C G D E F H I sync sync A B
34. Flow Graph C G D E F H I sync sync A B
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 chunk 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 A B
39. Flow Graph C G D E F H I sync sync chunk A B
40. 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
41. STEPS DEFINITIONS IN DEEP
42. Acquisition Steps Steps • Represent a single piece of information on the flow • Can be a question or an announcement • Can generate an answer • Is the base of all the flow • Is represented as a JSON document
43. Step Definition in the Backend
44. JSON Step
45. Acquisition Steps CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth Text Inputs
46. Acquisition Steps Text Inputs • Need to conform to different masks: • Phone • CEP • CPF • Date of Birth • etc… • Can have more than one per Screen • Complex validation
47. Acquisition Steps CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth Read Only
48. Acquisition Steps Read Only • Do not generate an answer • Normally used as warnings • Can be used to establish decision points (flow bifurcation)
49. Acquisition Steps CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth Multiple Choice
50. Acquisition Steps Multiple Choice • Can be restricted into one or more selections • A cell click can redirect • Can be shown as a list or a matrix (e.g due day)
51. Acquisition Steps And it goes on… Limit range Summary Pin Photo SlideShow
52. Acquisition Steps Steps • Represent a single piece of information on the flow • Can be a question or an announcement • Can generate an answer • Is the base of all the flow • Is represented as a JSON document • Can have it’s text fully customizable inside a guideline
53. Acquisition Numl • Some are base tags, which define the base color, font and size for that text • The others define the emphasis they will act upon Separated into a semantical meaning <h1> <h2> <h6> <label> <p> <small> ColorEmphasis FontEmphasis StyleEmphasis <i> <em> <b> <span> <strong> <a>
54. Acquisition Numl
55. QUESTIONS WE ARE HIRING!
 https://nubank.workable.com/
56. THANKS! thales.machado@nubank.com.br
 fuad.saud@nubank.com.br