intercon 2017 - fluxos dinâmicos no front-end controlados pelo back-end - fuad saud & thales...

BE LIKE WATERFRONTEND CONTROLLED BY THE BACKEND

Fuad Saud • Thales Machado

INTRODUCTION Nubank Card

• Documents

• Address

• Shipping Address

• Due date

• Pin

• Etc…

Acquisition

On Nubank

= 24 to 37 screens

(and some with more than one state)

INTRODUCTION Nubank Acquisition

Let’s take a deeper look

INTRODUCTION Nubank Acquisition

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

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?

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

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?

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?

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?

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

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

Don't get set into one form, adapt it and build your own, and let it grow,

BE LIKE WATER- Bruce Lee

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

What is a flow

Init

What is a Chunk

Step

Entry Point

GET /api/flows/<flow-name>/owners/<owner-id>

Flow Graph

A B C

G

D E F

H I

Flow Graph

A B C

G

D E F

H I

Flow Graph

C

G

D E F

H IBA

Flow Graph

C

G

D E F

H IA B

Flow Graph

C

G

D E F

H IA B

Flow Graph

C

G

D E F

H IA B

Flow Graph

C

G

D E F

H I

sync

sync

A B

Flow Graph

C

G

D E F

H I

sync

syncchunk

A B

Acquisition Chunks

CPF PasswordRead Only

Chunk

Submit Responses

POST /api/chunks/<chunk-id>

202 Accepted

Response Processing

async

Polling

GET /api/flows/<flow-name>/owners/<owner-id>

202 Accepted

Finished Processing

GET /api/flows/<flow-name>/owners/<owner-id>

200 OK

Flow Redirect

Flow Graph

C

G

D E F

H I

sync

sync

A B

Flow Graph

C

G

D E F

H I

sync

sync

A B

Flow Graph

C

G

D E F

H I

sync

sync

A B

Flow Graph

C

G

D E F

H I

sync

sync

chunkA B

Flow Graph

C

G

D E F

H I

sync

sync

A B

Flow Graph

C

G

D E F

H I

sync

sync

A B

Flow Graph

C

G

D E F

H I

sync

syncchunk

A B

Backwards Compatibility

C

E

D

F GA B

new step type(unsupported by client)

step typesupported by client

supports destination

step?yes!

no

STEPS DEFINITIONS IN DEEP

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

Step Definition in the Backend

JSON Step

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

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

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

Acquisition Steps Read Only

• Do not generate an answer

• Normally used as warnings

• Can be used to establish decision points (flow bifurcation)

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

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)

Acquisition Steps

And it goes on…

Limit range Summary Pin Photo SlideShow

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

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>

Acquisition Numl

QUESTIONS

WE ARE HIRING!https://nubank.workable.com/

THANKS!

thales.machado@nubank.com.brfuad.saud@nubank.com.br