Be like Water

A frontend flow controller by the backend

Transcript

1. Be Like Water Frontend controlled by the backend Thales Machado Hélio Padrão
2. INTRODUCTION Nubank Card
3. INTRODUCTION Nubank Card • Documents • Address • Shipping Address • Due date • Pin • Etc…
4. Acquisition On Nubank = 24 to 37 screens (and some with more than one state) INTRODUCTION Nubank Acquisition
5. Let’s take a deeper look INTRODUCTION Nubank Acquisition
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
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 WHAT DO THEY HAVE IN COMMON?
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 THEY ARE SIMPLE QUESTION AND ANSWER SCREENS
9. 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?
10. 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?
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 HOW CAN THE APP DECIDE?
12. 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
13. 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
14. Steps and Chunks
15. Acquisition Steps and Chunks Password CPF Read Only
16. Acquisition Steps and Chunks Password CPF Read Only Steps
17. Acquisition Steps and Chunks Password CPF Read Only Steps Chunk
18. Acquisition Chunks CPF Password Read Only Steps Chunk
19. Acquisition Chunks Chunk Process Answers
20. Acquisition Chunks New Chunk Process Answers
21. Acquisition Chunks Init
22. Acquisition Chunks Init
23. Acquisition Chunks Init
24. Acquisition Chunks Init
25. Acquisition Chunks Init
26. Acquisition Problems But it’s not that simple • What is a step? • What if it doesn’t understand a step? • How do we make texts dynamic but being able to customize color, fonts and sizes? • How will it send generic information?
27. Steps in Deep
28. 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
29. 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
30. 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
31. 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
32. 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
33. Acquisition Steps Read Only • Do not generate an answer • Normally used as warnings • Can be used to establish decision points (flow bifurcation)
34. 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
35. 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)
36. Acquisition Steps And it goes on… Limit range Summary Pin Photo SlideShow
37. 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
38. Acquisition Step Json
39. Acquisition Step Json
40. Acquisition Numl What were these <em> <strong> <small> <p> and etc?? • Easy to do A/B testing • Changes do not need to depend on customers updating the app • We need a way to have the scalability of receiving the text from the backend, but keep the power to really customize fonts
41. Acquisition Numl Separated into a semantical meaning
42. Acquisition Numl • Some are base tags, which define the base color, font and size for that text Separated into a semantical meaning <h1> <h2> <h6> <label> <p> <small>
43. 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
44. 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>
45. 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>
46. 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>
47. Acquisition Numl
48. 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
49. Acquisition Solution Results? Live demo