delightful ux for distributed systems

Delightful UX for Distributed SystemsMICHAEL NORTH Levanto FinancialWicked Good Ember - June 28, 2016

Levanto Financial

Nearly half of Americans would have trouble finding $400 in a crisis

~35% of high income households couldn’t come up with $1000!

Levanto is a Household CFO platform

Levanto Financial

Levanto Financial

• Avg customer household income: ~$400K/yr

• Avg amount we help a household save: ~$12.5K/yr

• Monthly fee we charge: $200+/mo

• Customers have tried everything before coming to us

Your Dev Environment is a Scumbag LiarMICHAEL NORTH Levanto FinancialWicked Good Ember 2016

SlowUnreliable

Approximate

Trustworthy

ClearResponsive

Tactical Time-saving

Abcdef

ACCOUNT NUMBER

*************

PASSWORD

*************

CONFIRM PASSWORD

Connect a Bank Account

Abcdef

ACCOUNT NUMBER

*************

PASSWORD

UI API BANKS

“LINK AN ACCOUNT”BEGIN SCREEN SCRAPING

FINISH SCREEN SCRAPING

RETURN LINKED ACCOUNT

1¼HOURS

Abcdef

ACCOUNT NUMBER

*************

PASSWORD

UI API BANKS




6-15m Per Account

UI API BANKS




UI API BANKS




REQUIRES AUTH CODE

ASK USER FOR INFO

📲 INFO RESPONSEINFO RESPONSE

Abcdef

ACCOUNT NUMBER

*************

PASSWORD

~75min

UI API BANKS




REQUIRES AUTH CODE

ASK USER FOR INFO


PENDING ACCOUNT

Abcdef

ACCOUNT NUMBER

*************

PASSWORD

~75min

1¼HOURS

15 MINUTES

Abcdef

ACCOUNT NUMBER

*************

PASSWORD

~75min

Abcdef

ACCOUNT NUMBER

*************

PASSWORD

~15min

We Can Do Better

UI API BANKS




REQUIRES AUTH CODE

ASK USER FOR INFO


PENDING ACCOUNT

Interruptible FlowBRINGING THE USER BACK IN

In app notification

Push notification

Email

phoenix presence ember-in-viewport

blocking modal

pixel

3m

7m

Notification Delivery

Abcdef

ACCOUNT NUMBER

*************

PASSWORD

~15min

Abcdef

ACCOUNT NUMBER

*************

PASSWORD

~6min

InvalidateEVICT RECORD(S) FROM THE STORE AND RE-FETCH

Push to Client:NotificationIN-APP NOTIFICATION MESSAGE

GatherFormGLOBAL DIALOG, WITH A DYNAMIC FORM TO FILL OUT

ClearLOGOUT, DUMP LOCALSTORAGE, REBOOT

Depending on Unreliable Systems

MAXIMIZE INDEPENDENCE

BROWSER API BANKS

BROWSER API BANKS🌩

BROWSER API BANKS🌩1. Connect to new accounts, or other sites

2. Repair broken connections

3. Pull new transaction data

1. Connect to new accounts, or other sites



AES-encrypted Queue

AES-encrypted Queue

We’ll live

1. Connect to new accounts, or other sites



AES-encrypted Queue

AES-encrypted Queue

We’ll live, but let users know data is “frozen”

We’re unable to retrieve bank account data, as of 11:45pm on Saturday.

Transparency

BROWSER API BANKS

BROWSER API BANKS🌩• Fetch records

• Search for banking institutions to connect

• Re-categorize transactions

• Create new “budgets”

• Fetch records

• Search for banking institutions to connect

• Re-categorize transactions

• Create new “budgets”

localStorage cache (except transactions)

cache most popular 5% institutions (constitutes 85% of accounts)

DISABLED

localStorage QueueTra

nsparency

Again!

Going back online

• Assume everything has changed

• Flush everything from localStorage

• But only when we establish connection with our API for real!

• Re-authorize via Channel

Keep users in the loopTRANSPARENCY

Loosely coupleRELIABILITY BREEDS TRUST

Limited offline is okDON’T BE AFRAID TO DISABLE

You don’t need to waitBUILD AMAZING UX TODAY

We’re recruiting!

Results based. Work from anywhere with good internet

EMBER#CANARY EMBER-ENGINES EMBER-CLI-FASTBOOT D3 V4

ELIXIR PHOENIX FRAMEWORK

JSON-API POSTGRES

Senior Full Stack EngineerOPEN SOURCE PRODUCT WORK

delightful ux for distributed systems

Technology